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.
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
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.
After we create the article, we can generate static HTML by running the following command.
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.
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.
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?
Geo J ThachankaryPosted Mar 28, 2019, 10:03 AM
Thanks for the post. I am also running my blog using Hexo and Netlify. I am using the icarus theme for my blog. Also, Netlify provides free SSL to all users out of the box with its integration with Let's Encrypt.
Mithun PattankarPosted Mar 28, 2019, 9:21 AM
Thanks, Jeeva for the post. Only domain name has to be paid, everything else is free. my website run's using HEXO & Netlify from last one year. I am kind of happy with it.