Build Personal Blog with GitHub Repository

[mddanishyusuf]

This is the best project I have done and the best use of the GitHub Repository. So, I'm building my blog with the Gatsby theme plugin and GitHub issues system as CMS.

To build this theme we need the

1. GitHub Public Repository
2. Gatsby
3. Plugin (gatsby-theme-blog-with-github)
4. Netlify

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 write the blog post into the Github repository as an issue. This is so powerful and easy to use.

Now Setup Gatsby project

Gatsby is so powerful and very helpful to improve the performance and SEO of your website. There is lot's plugin for gatsby. So, you can build an application with this technology.

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

Publish on Netlify

First, push your code to your GitHub repository and hook your repository branch with Netlify site. So, whenever you make changes and push to that hooked branch then Netlify automatically publish the changes.

Here is the official documentation that A Step-by-Step Guide: Deploying on Netlify

[jatin69]

Wow. I like this. I've seen issues being used for comments before, but using it for posts is way better. Nice work!

[mddanishyusuf]

@jatin69 Thanks for your kind words. I'm happy you like this.

[muescha]

very cool. how you avoid that issues created by others are published?

[mddanishyusuf]

@muescha Yes, good question. I'm using issues label to identify the blog post. Only I can do labeling to the issues. :)

[muescha]

yes - this comes also in my mind because labels can only change the owner of the repo