Learn How to Build Your Personal Blog with Hexo + GitHub + HackMD

Preface

Counting from today when I am typing these words, it has been a month since the website was set up.

During this period of time, I haven’t properly recorded the process of setting up a website. It just so happens that some friends around me also want to start setting up their own blogs, so I’ll give you a tutorial by the way!

As the title of the article says, this time we mainly use Hexo, GitHub, and HackMD. Without further ado, let’s get started!

#Hexo deployment

Before we begin, let’s first introduce what Hexo is! Hexo is a very fast and lightweight static web page framework (mostly used to build blogs). It allows users to write using Markdown, and Hexo will generate static files for you.

All in all, it is a very convenient framework that can surely get your website online smoothly within one day! (In addition to some environmental issues and other dependency issues, it can definitely be completed within at least a week)

Install Hexo

Before installation, there are some dependent environments that need to be installed first. Please make sure they are installed on your computer:

  • Git
  • Node.js (Officially recommends Node.js 10.0 and above)

If you haven’t installed it yet, please install it first (there are a lot of tutorials on the Internet, so just skip it). After ensuring that you have the above software, you can install it! The installation of Hexo is really super simple (Mac users may have environmental issues, please see the official documentation). First, please open your terminal (cmd, Powershell, etc.) and enter the following command:

npm install hexo-cli -g

After the installation is completed, enter hexo -v to check the version number. If there is a correct Show, the installation is successful!

hexo -v

Build your Hexo Data

After installing Hexo’s CLI tool, you can start creating Hexo’s Data folder. Note, this folder is where you will write articles, store photos of articles, etc. First, move to the path where you want to place the file, open a terminal in this path, and enter the following command.

hexo init <Data folder name>

hexo init

Next, you need to enter the Data folder and install the dependency packages required for this project. Please enter the following commands in sequence:

cd <Data folder name>
npm install

image

This completes the initial establishment! After the creation is completed, the files in the project Data folder will look like the following:

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

These files have their own purposes, namely:

_config.yml

  • The configuration file of the website can be set such as URL, default language, site name, etc. Most of the settings will be here.

package.json

  • Store all modules needed in the project.

scaffolds

  • The Data folder of Scaffold will contain some scaffolding structures.

source

  • This is the Data folder that stores all web content, including Articles, pictures, etc. In the future, I will basically work in this directory when writing Articles.

themes

  • Theme’s Data folder.

At this point, you have roughly set up the Hexo environment. Now let’s see how to deploy it to GitHub.

Hexo Commands

What you will definitely use when writing Articles in the future is the Hexo command. I will introduce a few of them individually. If you want to know more details, please see Official Documents.

Create new Article

Please replace the following angle brackets with your own Article title.

hexo new "<Article title>"

This command will generate a markdown file into the _postData folder.

Local preview

hexo server

Or it can also be written as

hexos

This command will start the server on localhost and let you preview the website first.

Deployment

hexo deploy

It can also be written as

hexo d

It will automatically generate the contents of your sourceData folder into a static file and deploy it to the GitHub Repo you set. (The implementation will be introduced in detail later)

Delete static files

hexo clean

This command will help you delete the static files generated by hexo generate or hexo deploy.

Link GitHub Repo

Create Repo

First, you need to create a GitHub Repo to store the static data of the website. At the same time, this GitHub Repo will also become the place where it will be deployed (of course you can also use other static website hosting services, but this is free!).

When creating a Repo, please follow the following points:

  1. The Repo name is set to USERNAME.github.io. Remember to change USERNAME to your own user name.
  2. Please set Repo to Public

Once completed, let’s link this Repo (hereinafter referred to as GitHub Repo) to your Hexo project! Before starting you need to install a deployment plug-in.

npm install hexo-deployer-git --save

Open _config.yml in your Hexo project and add the following settings:

deploy:
 type: git
 repo: <Your Repo URL> # https://bitbucket.org/JohnSmith/johnsmith.bitbucket.io
 branch: main

Create GitHub Pages

Go into your GitHub Repo and click Settings.

GitHub Repo Settings

Click Pages on the side.

GitHub Pages

Switch Branch to Main and press Save.

Set branch to main

After completion, wait for about one to two minutes, and the deployed URL of your website will be displayed!

Finish!

Because I purchased the domain name, I can set up a Custom Domain. If you have also purchased a domain name and want to set it as your Blog URL, please see [GitHub Pages Custom Domain Name and HTTPS Settings (GoDaddy + Cloudflare)](https://clairechang.in/2023/06/28/web /github-pages-with-custom-domain/).

Modify Hexo configuration file

After creating the Repo, you need to open the _config.yml file in the Hexo project Data folder (Note, this refers to the Hexo configuration file, not the theme configuration file), and add the following content. (For details, see Official Document)

deploy:
 type: git
 repo: Your project Link #Example: https://bitbucket.org/JohnSmith/johnsmith.bitbucket.io
 branch: [branch] # usually main

After modification, you still need to install a package. This package can help you automatically deploy the static files generated when you use hexo d to the Repo you set. Installation method is as follows:

  1. Open your Hexo project Data folder (the Data folder with package.json).
  2. Open a terminal in this directory.
  3. Enter npm install hexo-deployer-git --save.
  4. You’re done.

If you have used Vscode’s GitHub extension to store user tokens, you can directly use hexo d to deploy your Article! If not, it doesn’t matter, just provide the username and password when hexo d.

At this point, you are almost done! Next, just find a Hexo theme and Setting configuration file that you like. Start writing! (You can check out the official documentation here, choose a theme you like, and configure it according to the documentation)

Deploy to the website

GitHub Pages has a very convenient function, which is that every time you have a new Commit, it will automatically update the content of your web page for you. So after updating the Article in the future, you only need to use hexo deploy to submit the updated content to the GitHub repository, and it will automatically update the web page for you!

Start writing!

My current way of writing is to use HackMD to write because it has many advantages.

  1. Free Image Bed
  • Not only is it free, but you only need to copy and paste the image, and the image URL will be automatically generated, making writing easier.
  1. Quick and lightweight
  • Web-based HackMD allows you to quickly open Notes and start writing with just a browser.
  1. Support for Markdown syntax
  • Supports Markdown extended syntax such as MathJax and Mermaid to make writing more flexible.

As for how I write, the steps are as follows:

  • Use hexo new <Article title> to first create an Article in the Post Data folder. (The purpose is to generate the time when Article was created, as well as thecle’s Front Matter)
  • Copy and paste (including Front Matter) into HackMD editor.
  • After editing, copy it back to the original file.
  • Deploy with hexo deploy.

This completes the writing once! After all, when writing an article, you will definitely have more or less pictures. Using HackMD, you don’t have to worry about pictures, and you can complete the writing very conveniently and quickly!

Postscript

I think using this method is cheap, convenient, and quick, which can not only increase your willingness to write, but also give you a sense of accomplishment at the beginning and enhance your motivation to write! It’s really a good way ~

The only cost I need to set up my own blog is

  • $0 without a domain name
  • Spent a lot of time on pitfalls (But it’s not a problem with Hexo, it’s a problem with My theme dependency)

All in all, I really like my results so far! I also hope that you can successfully build it and join the ranks of writing!

If this Article is helpful to you, you are welcome to SubscribeMyBlog. You are also very welcome to leave a message below or engage with me using emoticons. If I made any mistakes, please let me know. Welcome to discuss!