[Step by Step]Switch Blog From Hexo To Gatsby + Netlify + Own Domain Url
After switched from Hexo to Gatsby. I would like to share my thoughts on this.
Table of Content:
- Hexo vs Gatsby — the reason why I choose Gatsby
- Github + Netlify + Godaddy(optional) — The instruction to set up a blog from Scratch
Hexo vs Gatsby:
Popularity:
From their GitHub pages, we can find gatsby is more popular than Hexo at this stage. I believe it is because of that react ecosystem is becoming stronger.
Also, developers never refuse to try out the latest technologies or frameworks including me.
I know there are a lot of companies that choose Gatsby to build their static pages in production so that I believe there will be possibilities that I might use it in the workplace.
Below is my previous blog built by Hexo and the new blog build with Gatsby.
My Hexo Blog:
My new gatsby blog Url: schen.me
Github + Netlify + Godaddy(optional)
Netlify: All-in-one platform for automating modern web projects. I believe Netlify is the best option for hosting a static website at this stage.
In this section I will share the steps of how I build my blog from scratch:
Step 1: Choose your starter from the Gatsby community
1.1 After creating your GitHub project for your blog (not necessary to be a GitHub pages project)
1.2 Go to Gatsby community to find a starter
If you have enough time you can also build your own starter.
1.3 Generate project by using cli
After choosing the starter you can run the command in your project folder. Make sure you have already installed gatsby-cli:
npm install -g gatsby-cli
Step 2: Deploy your GitHub project to Netlify
2.1 Add project to Netlify
I recommend login to Netlify with your GitHub account. Then click this New site from Git to choose your blog project in Github.
2.2 Go to Domain settings
2.3 Add your own domain here
when you add your domain you can choose either use Netlify’s DNS service or not. I have enabled the DNS service here.
2.4 Go to your Domain registry
For me I use Godaddy. Here is the Godaddy DNS management page.
Make sure add the two record:
- the first one is IP address point to Netlify server
- the second one is CNAME point to your Netlifty project URL
You can easily find the Netlify balancer IP address from the Netlify website:
Netlify’s load balancer IP address: 104.198.14.52
The CNAME is the highlighted one in your Domain management page.
Once your Netlify application point to your domain name and your domain DNS(godaddy) also points to your Netlify application. You are all good to go.
Blog Go Live!!!!
Summary
Hope this post will save you some time while setting up your own blog with Netlify + GitHub + Godaddy.
Leave me comments if you find anything missing from this post. I will update it. https://schen.me is my blog. I prefer .me compared with .com given it is a perfect name for a blog.
