Skip to content
Gatsby theme of blog with GitHub issues CMS.
JavaScript CSS
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
packages/gatsby-blog-with-github adding verifying content Jul 30, 2019
site site url added Jul 30, 2019
.gitignore initial commit of my gatsby theme Jul 29, 2019
README.md chnages for 0.0.5 version Jul 30, 2019
demo-preview.png
netlify.toml removed base Jul 29, 2019
package.json initial commit of my gatsby theme Jul 29, 2019
yarn.lock sitempa plugin added Jul 30, 2019

README.md

Gatsby + GitHub issues system = Blog

DEMO

https://blog.mohddanish.me

I build this gatsby theme plugin for themejam.gatsbyjs.org and now I'm using as my personal blog. I'm using github issues system as a CMS. where I write my blog post and gatsby get the data from github source and build static pages and it's so fast.

Steps:


Setup GitHub Repository as CMS

This the cool hack to use GitHub issues system as a Content Management System(aka CMS) for your blog and you can use this in many ways.

  1. Make a public GitHub repository with README.md file
  2. Go to issues tab
  3. Make new issue as a new blog post
  4. Submit issue

So, now you can easily write blog post in markdown style.

✍ Setup Gatsby Project & add plugin

  1. mkdir <my-blog>
  2. cd <my-blog>
  3. yarn init -y
  4. yarn add react react-dom gatsby
  5. yarn add gatsby-theme-blog-with-github

Now you have to add some script to config the github issues as CMS into gatsby. make file **gatsby-config.js** in to root directory. and paste this code.

module.exports = {
    plugins: [{
        resolve: "gatsby-theme-blog-with-github",
        options: {
            // your github username - required
            username: "",
            
			// github public repository name that you will use as a CMS - required
            repositoryName: "",
            
            metaData: {
                // website name - required
                title: ``,
                
				// cover letter - required
                description: ``,

				// author name
                author: ``, 

				// your github url for photo - required
                githubURL: ``, 
                social: [{
                        name: `twitter`,
                        url: `https://twitter.com/<username>`,
                    },
                    {
                        name: `github`,
                        url: `https://github.com/<username>`,
                    },
                ]
            }
        }
    }]
};

Now run the command gatsby develop

🤝 ToDo

  • Dark Theme
  • Component Shadowing

Mohd Danish <https://twitter.com/mddanishyusuf>

You can’t perform that action at this time.