Build your blog using Gatsby and GitHub step by step
Write your blog posts like contributing to a GitHub repo.
There are plenty ways to build your personal blog, but with Gatsby and GitHub, you can build a blog where you can easily set up but you still have the full control of your website layout at no cost.
Using Gatsby to build your blog site
Gatsby is a React-based open source framework for creating websites and apps. Let’s use it to build our blog site in a few minutes.
Gatsby supports many starters to let you build your websites faster and easier. Your website can achieve this out of box:
- SEO optimization
- Blazing fast performance
- Google Analytics built in
- Publish your website within a few clicks from Netlify
- Security by default
You can start with the official blog starter here:
In this article, I am using my own blog starter, which adds the material design and table of content, optimizes for images loading and on top of the official one.
Live demo at https://traveler-blog.netlify.app/
Okay, let’s start. In your terminal:
# install Gatsby cli
npm install -g gatsby# create a website using Gatsby starter
gatsby new gatsby-blog https://github.com/QingpingMeng/gatsby-start-travel-blogcd gatsby-blog# start
gatsby develop
That’s it! Now you can open your browser and visit http://localhost:8000/. You should see the site is already up with two posts already.
Let’s see what have been created from this starter. Below is the project structure.
It's very self-explanatory. All the codes you care about exist in src folder. The pages folder includes all the pages of this blog, which it only includes a home page and a 404 page.
The components folder includes all the React component used by the pages and a special template folder that includes a React component that renders each blog post.
You can easily tweak the website if you have React knowledge.
Next is to host this website in a public endpoint. I bet you wouldn’t like a local host website without a SSL support. Don’t worry, with Netlify you can do it within just a few clicks.
Let’s first push all these codes to a GitHub repo.
git init
git add .
git commit -m "my blog is done!"
git branch -M master
git remote add origin <your-git-remote>
git push -u origin masterNow go to https://www.netlify.com/ to create a new account for free if you haven’t done yet.
Once you logged into you Netlify dashboard, click New site from Git button.
Select GitHub here and of course you need authorize Netlify to access your GitHub repo.
Pick up the repo you just created for your blog site.
No changes needed here. Just click Deploy site.
After a while, you should see your site deployed successfully.
Click on the link and you should see your site is live publicly!
Creating a new post from GitHub
Now it’s the fun part: creating a blog post. Let’s review the project structure. There is a content folder where all the blog posts exist. The idea here is leveraging GitHub repo as your blog posts storage. This give these features for free:
- Revision history
- Your favorite GitHub markdown support
- Preview your new post before merging to master branch
Let open a terminal to start wring a new post.
# create a new branch for your post
git checkout -b my-new-post# locate to content folder
cd gatsby-blog/content/blog# create a new folder for your post
mkdir myNewPost
cd myNewPost
A blog post is composed of two parts. The cover image cover.jpg and the content body index.md.
The cover image is shown on the top of your post. Ideally it should be in high definition. You can find these images from Unsplash for free or use your own photos.
The content is a markdown file with a special frontmatter metadata. Take below as an example:
---title: Yellowstone - June 2017date: "2017-06-01T22:12:03.284Z"coverImage: ./cover.jpg---This is fake post!Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut feugiat quam non metus bibendum, nec volutpat erat venenatis. Proin efficitur enim in pellentesque imperdiet. Sed pharetra tincidunt nisi, in mollis velit efficitur non. Nunc commodo ligula ut facilisis elementum. Fusce mattis gravida nunc vitae placerat. Praesent faucibus, tortor sit amet vulputate dictum, metus ipsum lobortis purus, eget varius ex sem eu felis. Cras viverra, leo vitae suscipit lacinia, nibh lacus viverra risus, porttitor suscipit elit enim at ipsum. In varius ut justo laoreet aliquam.> Yellowstone National Park is a nearly 3,500-sq.-mile wilderness recreation area atop a volcanic hot spot. Mostly in Wyoming, the park spreads into parts of Montana and Idaho too. Yellowstone features dramatic canyons, alpine rivers, lush forests, hot springs and gushing geysers, including its most famous, Old Faithful. It's also home to hundreds of animal species, including bears, wolves, bison, elk and antelope.Test Images:
Note there are a few key value pair at the top which gives the title, published date of the post and specify which image to use as the cover image. The rest is just markdown body. You can edit your post with your favorite md editor.
Above markdown eventually renders as below:
Familiar? Yes, it has the same markdown rendering styles as GitHub editor.
Once you finish your editing, let’s create a pull request to review it.
git add .
git commit -m "adding a new post"
git pushOnce you create a pull request, Netlify will automatically be notified and publish a temporary site for this branch so you can review it.
Once you validate it looks good, it’s time to merge to master branch. Remember, better to keep your branch so that you can save your revision history.
Finally, Netlify will automatically re-publish your blog with latest master branch and a new post is live!
