Canhua's Blog
  • Blogs
  • My GitHub Projects
  • Profile
  • Linkedin
Canhua's Blog

Setup my blog website with Gatsby and deploy the website to GitHub Pages

November 30, 2021

As a developer, I want to host my own blogs. Since my code is in GitHub, I would like to hosting my blog on GitHub pages too. I used hexo, and I want to try something new. There is a good discuss on cra-vs-next-js-vs-gatsby, and finally start it with gatsby.

Setup Gatsby CLI

npm install -g gatsby-cli

Create the blog project

npx gatsby blog https://github.com/gatsbyjs/gatsby-starter-blog

Change profile-pic.png

Replace src\images\profile-pic.png with your profile pic.

Change your personal info

Open gatsby-config.js and change the details of your personal info

Update content/blog

Replace content/blog with your first blog

Verify your blog change

Start the dev site and go to http://localhost:8000/ to see your blog.

npm run start

GitHub Pages

Add homepage to package.json

The step below is important!

If you skip it, your app will not deploy correctly.

Open your package.json and add a homepage field for your project:

  "homepage": "https://myusername.github.io/my-app",

or for a GitHub user page:

  "homepage": "https://myusername.github.io",

or for a custom domain page:

  "homepage": "https://mywebsite.com",

Install gh-pages and add deploy to scripts in package.json

npm install --save gh-pages

Add deploy script to package.json

  "scripts": {
      ...
    "deploy": "gatsby build --prefix-paths && gh-pages -d public"
  }

Push the change to Github

Adding an existing project to GitHub using the command line, then commit and push the change to remote GitHub

git remote add origin <remote repository URL>

Deploy to GitHub Pages

npm run deploy

Todo

  • Social Share
  • Deploy from azure pipeline Git Actions

Profile picture

Written by Canhua Li Experienced Full Stack Engineer at Microsoft, proficient in C++, C#, JavaScript, React, AngularJS, Ruby & Rails, and .Net.

  • Add @wkocjan/gatsby-theme-intro plugin →
© 2023, Built with Gatsby