Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Build Personal Blog with GitHub Repository #6

Open
mddanishyusuf opened this issue Apr 19, 2019 · 0 comments

Comments

@mddanishyusuf
Copy link
Owner

commented Apr 19, 2019

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

image

So, now you can write the blog post into the Github repository as an issue. This is so powerful and easy to use.

image

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

@mddanishyusuf mddanishyusuf self-assigned this Apr 19, 2019

@mddanishyusuf mddanishyusuf changed the title Build Personal Portfolio with GitHub Repository Build Personal Blog with GitHub Repository Jul 30, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
1 participant
You can’t perform that action at this time.