My Blog Building Journey - Hexo

The process of building my Hexo blog is just a summary of my own experience and not intended as a tutorial. The main goal is to build the blog on GitHub. It includes some pitfalls I encountered while building the blog, although it may not be comprehensive, it provides a general understanding.

Introduction#

If you want to learn about Hexo, you can visit the Hexo official documentation. Here, I mainly focus on providing a tutorial. The blog building process described below is mainly based on Windows. To set up Hexo, you need to have NodeJS and git. I highly recommend searching for detailed tutorials on CSDN. You also need a GitHub account for the initial installation of git. It is recommended to follow a comprehensive tutorial step by step. Although I haven't written these steps, I will list them in the reference section at the end of my article.

Practical Operation#

GitHub Account#

Create a GitHub account and create a new repository. The repository name must be in the format of name.github.io, where "name" can be changed. Choose "public" and create the repository.

Install Hexo#

Open the terminal on your computer and enter the following code:

npm install -g hexo-cli

Check the Hexo version:

hexo -v

Create a blog. My blog is installed in D:\Blog, but you can choose your preferred directory (myblog is the name of the blog, which can be changed):

hexo init myblog

Enter the blog directory:

cd myblog

Install npm:

npm install

Generate static files:

hexo g

Test locally:

hexo s

At this point, a simple blog is completed.

Install Theme#

There are many themes available on the Hexo blog official website, and you can also search for Hexo themes directly on GitHub. Choose your favorite theme. I am using the Volantis theme. The following steps are performed in D:\Blog\myblog.

Open the terminal in the blog directory and download the theme:

git clone https://github.com/xaoxuu/hexo-theme-volantis themes/Volantis

Install the required packages:

npm i -S hexo-generator-search hexo-generator-feed hexo-renderer-less hexo-autoprefixer hexo-generator-json-content hexo-recommended-posts

Open the configuration file _config.yml in the blog directory (D:\Blog\myblog) and find the following code:

## Themes: https://hexo.io/themes/
theme: landscape

Change landscape to volantis.

The next step is to modify the theme. Refer to the theme documentation for instructions on how to modify it.

Deploy to GitHub#

Open the configuration file _config.yml in the previous step and modify the following code:

deploy:
  type: git
  repo: git@github.com:wangyunzi/wangyunzi.github.io.git (repository address, as shown in the figure below)
  branch: master (branch)

Install the plugin:

npm install hexo-deployer-git --save

Since the installation of git has been skipped and assuming you have already installed it locally and deployed it remotely, you need to enter the following code to clear the cache file db.json and the generated static file public:

hexo clean

Generate the website's static files to the default public folder:

hexo g

Deploy the website to the specified repository:

hexo d

Create a new post:

hexo new post First Post

After entering the above code, you will find a "First Post" .md file in the source/_posts folder. Write your content in this file.

To publish the post, enter the following commands:

hexo clean
hexo g
hexo d

At this point, your blog is almost set up.

Deploy to GitHub and Vercel#

As I started to install more blogs, I found that using the name.github.io format was not feasible. Although I found that it was possible to set up two blogs in this format, it was a bit complicated, so I chose to push the files to GitHub and then link GitHub to Vercel. This way, Vercel will provide you with a free domain name like name.vercel.app, and you can have multiple blogs on Vercel. This is why I gradually fell in love with Vercel. Finally, I found that I could push directly to Vercel without pushing to GitHub, which is also a very good option. You can find more information in the reference section at the end of my article. (This part is optional)

Similarly, create a new blog, which can be private or public. I recommend setting it as private.

Initialize the blog, and you will find a .git file in the blog directory:

git init

Then enter the following code to push the blog to the repository for the first time:

git add ..
git commit -m "first commit"
git remote add origin git@github.com:wangyunzi/a.git
git branch -M master
git push -u origin master

Replace git remote with your own repository SSH address. "first commit" can be changed to another commit message. This represents the name of the commit, which will be displayed in the repository after the commit.

For subsequent modifications or post submissions, you can enter the following steps:

hexo clean
hexo g
git add ..
git commit -m "first commit"
git branch -M master
git push -u origin master

We have already pushed the blog to GitHub for storage. Next, we will connect it to Vercel. When logging in to Vercel, use your GitHub account for easy and quick access. Then create a new project:

Import the GitHub blog we just created:

Fill in the name, which will be the first part of your website URL. For example, if my blog URL is yunzi.vercel.app, the project name on Vercel will be yunzi. Then deploy it and wait a few minutes for the "congratulations" page to appear. Go back to the project homepage:

Open the URL to see your blog. Now others can access your blog using this URL:

Deploy directly to Vercel#

Although there is already a comprehensive article in the reference section, I encountered some small problems when following the steps. The actual operation was slightly different from the instructions. So, let me clarify my entire process. For this purpose, I created a new Hexo blog for demonstration 😂😂.

First, install Vercel:

npm install -g vercel

Generate Hexo static files:

hexo g

According to the tutorial, you should go to the public folder, but I encountered errors when doing so. Therefore, you can directly perform the following steps in the blog directory. Enter the following code:

vercel

Just click enter. Since we logged in with GitHub earlier, I didn't use the options below. If you want to try them, you can. Then you will see a page asking you to log in with your GitHub account. Some may not see this page. Then you will see:

Analyze these codes slowly. "success" means that the login with GitHub was successful. Then it asks if you want to upload the local blog files to Vercel. Just click enter. It will ask if you want to upload to your Vercel account. "wangyunzi" is my Vercel account name. If you already have a Vercel project, continue with enter. What is the project name? It is the same as the name we mentioned earlier, the name of the URL. Then keep pressing enter and wait for a while:

This image indicates that I have successfully uploaded it. Now let's take a look at our Vercel page:

It seems that my blog has been successfully deployed. Click the link to see it!

Enter the following commands to publish an article:

hexo cl 
hexo g 
vercel --prod --confirm

Conclusion#

The above is my entire process of building a Hexo blog. Although the current process is smooth for me and I haven't encountered any problems, when I first started, every step I took resulted in an error. I had to search the internet for solutions, and I had more tabs open in my browser than when I was writing a paper 😪. It was truly a "bitter experience". Next, I will gradually document my experiences of building blogs with Hugo and Notion. For me personally, the process of setting up these blogs is quite chaotic. It involves encountering an error, searching for a solution, and repeating this process. There is no normal and complete set of steps. Therefore, this is also a review process for me, so that I can review it if I forget in the future. Finally, I want to say to myself, slowly go back and delete those repositories and screenshots that were created for demonstration purposes. The desktop is filled with beautiful screenshots after writing an article.

See you later!