How To Create A Personal Blog Using Hexo And Netlify With Continuous Deployment

Recently, I moved my personal blog from blogger to Hexo blog framework hosted in Netlify. The main reason I moved my blog to Hexo is that it's a simple yet powerful blog framework for static HTML generator with markdown support for articles, and so many themes and plugins are available for the blogging platform.

 

When my blog was hosted in blogger, I faced a lot of challenges in formatting the content and code blocks for every article. I spent more time on formatting the article instead of focusing on content. I wanted to move to some blog framework that supports markdown and the ability to host online free of charge and has support for continuous deployment whenever I check in my markdown file.

 

There are various popular static HTML generator frameworks available in the market, such as hugo, jeykill, and hexo. After my initial research, I decided to go with Hexo framework and Netlify for hosting. Netlify offers free basic tier hosting which is most suitable for personal blogs,  and also it supports continuous deployment.

 

Installing and Configuring Hexo Blog Framework

To set up the hexo blog framework in your machine, you need to have the latest node.js and Git on your machine. After you have installed node.js and git on your machine, run the following command to install the Hexo framework.

npm install -g hexo-cli

 After the Hexo gets installed on your machine, run the following command to initialize Hexo.

$ hexo init <folder>
$ cd <folder>
$ npm install

After the installation is done, the basic project folder will be created with the following structure. 

$ hexo init <folder>
$ cd <folder>
$ npm install

.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes

 _config.yml will hold all the configuration-related data for your blog. You can modify the blog title, description, keywords etc. This also holds the details of the current theme, and additional plugin details installed in your website.

 

Setup and Configure Hexo Theme - Next

There are plenty of themes available for Hexo and I decided to go with one of the most popular themes,  called Next. I also liked the icarus theme but since it has a three column layout, I decided to go with the Next theme. It has four different theme layouts to customize and also a light and dark mode for code blocks. To install, use the following command.

$ git clone https://github.com/theme-next/hexo-theme-next themes/next

 Once the theme is installed, change the theme name to Next in _config.yml in the site root directory.

 

You can customize the theme settings by changing the _config.yml inside the themes\next directory. All the customization details are available in https://theme-next.org/docs/theme-settings/.

 

Install and Configure Additional Plugins

 

I have installed the hexo sitemap plugin to generate the sitemap.xml file automatically. There are a lot of other good plugins available in the official site.

 

 

Create a New Post and Run Locally

 

To create a new post or a new page, you can run the following command:

$ hexo new [layout] <title>

Post is the default layout, but you can put page if you want to create a new page. You can also change the default layout by editing the default_layout setting in _config.yml.

Once the new post is created, the markdown (.md) file will be created under source\_posts folder with the default front matter. You can use any markdown editor to start creating articles. Here are some of the online and offline markdown editors which are most popular among users.

• stackedit.io (Online Editor)
• https://typora.io/ (Offline Editor)

After we create the article, we can generate static HTML by running the following command.

hexo generate

This command will generate the static HTML files and all the necessary supporting files (JavaScript, CSS) in the public folder. We can run it locally to verify the page by running the following command.

hexo server

This will run the node.js server on default 4000 port. You can verify your blog by running http://localhost:4000 in the browser.

Setup Automatic Deployment to Netlify

 

We have successfully created our website in local, it is time to deploy our website into Netlify hosting. I choose Netlify instead of GitHub pages because it supports the CI/CD pipeline to deploy the site automatically whenever I commit the changes into my GitHub repository. Also, Netlify free account features are sufficient for running any personal blog.

Signing up with Netlify is pretty straightforward. You just have to link with your GitHub account to sign up the account.

After you signup with Netlify, create a new repository in GitHub to push the code base into GitHub. Once the repository is created, copy the remote repository URL to set up the remote origin branch from local.

Navigate the local root directory and initialize as a Git repository.

git init

 Add all the files from your local repository and commit it locally

git add .
git commit -m 'Initial commit'

Now, set up the remote origin with the following command.

git remote add origin Git_Repository_URL

 Now, you can push your local changes to the git repository with the following command. 

git push -u origin master

 Now, login to Netlify and click create a new site by clicking the "New Site from Git" button.

 

Link your GitHub repository from the next page for continuous deployment.

 

You have to authorize Netlify to access your GitHub repository. After you authorize it, you have to choose your website repository and the branch. As part of the last step in the wizard, Netlify automatically identifies Hexo blog and puts the hexo generate build command and the default publish directory.

 

 

 

Click "Deploy site" to finish creating an automatic deployment setup.

 

 

 

This will start the deployment process and publish the blog in Netlify with some random subdomain URL. You can change the random name with meaningful subdomain names in the Netlify account if needed.

 

Every time we push the changes to the GitHub repository, it triggers the build automatically to deploy it. Very Cool!!

 

Set up the custom domain name for the blog

We have now successfully completed setting up the static web site using hexo and netlify; it's time to set up our custom domain for our blog. I purchased my domain with Google Domains and it costs 12$ per year. You can go with any domain service that works well for you.

In my Google domain account, I have to create the A record with Netlify load balance IP and CNAME record with the Netlify alias name. 

 

We are done with all the steps and my blog is now ready to serve.

 

 

Conclusion

This articles covered the basics of creating a personal blog site using Hexo static HTML generator framework and deploying it to Netlify automatically using continuous deployment. I created this blog entry using the Typora editor, and it's so easy to create with no hassle. 

Overall, I am happy with the decision of moving my blog from Blogger to Hexo. What are your thoughts?