How to Create a Blog Tutorial in English

2025-05-14

3.2k words

Introduction

This is a detailed guide on how to build a blog like mine, where you can publish fan fiction and creative ideas.

Hexo is a static blog framework based on Node.js. Due to its high efficiency, flexibility, and strong scalability, it has become the preferred tool for many developers and bloggers to build personal websites.

Part 1: Hexo Installation

Reference: Official Hexo Documentation | Hexo 文档 | Hexo

一、Install Git Locally

Git download mirror for China：CNPM Binaries Mirror (npmmirror.com)

Git installation tutorial：【Git】手把手教你在Windows系统下安装Git_自牧君的博客-CSDN博客_windows系统安装git

二、Install Node.js Locally

Node.js download mirror for China：CNPM Binaries Mirror (npmmirror.com)

Node.js installation tutorial：Node.js安装及环境配置之Windows篇 - 周瑜周 - 博客园 (cnblogs.com)

三、Install Hexo Locally

1. Create a new folder named “blog” (or any name you prefer) in the D drive (or any drive).

2.install Hexo

Right-click the “blog” folder and select Git Bash Here to open the terminal.

Enter the command npm install -g hexo-cli for installation.

Enter the command hexo -v to check the version.

3.nitialize Hexo

Still in the “blog” folder, execute the following command

Enter the commandhexo init 【By default, it installs in the blog directory, but you can specify another directory by using the command hexo init xxx】

hexo initcommand sets up Hexo’s basic configuration files.

After creation, the specified folder should contain:

node_modules
public
scaffolds：
source：
themes：
** _config.yml: blog files**

四、Run Hexo Locally

If everything is working fine, enter the following commands (input each line separately）：

1 2	hexo g hexo s

Once Hexo is running, you should see the message INFO Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop. In the browser, go to http://localhost:4000/ view your generated blog.

Part 2: Switching Hexo Themes

Note: ： Hexo & vivia as an example

一、 Install the Vivia Theme

1.Installation Methods

Install via npm (recommended)

1	npm install hexo-theme-vivia

Install via Git

Clone the theme to the /themes/vivia 
git clone https://github.com/saicaca/hexo-theme-vivia.git themes/vivia
Through npm ，files at:  node_modules/hexo-theme-vivia/example_zh_CN_config.vivia.yml
  
Install the dependencies of the theme
npm install colorjs.io stylus hexo-symbols-count-time
Through Git install，files at:  themes/vivia/example_zh_CN_config.vivia.yml

将example_zh_CN_config.vivia.yml文件复制一份到blog目录下将文件重命名为 _config.vivia.yml

此文件为vivia主题配置文件 Copy the example to the blog directory and rename it as above. This file is the configuration file for the Vivia theme.

2.Switch the Theme

1	hexo config theme vivia

3.Run Locally

If everything is working correctly, input the following commands (input each line separately):

1 2	hexo g hexo s

Once Hexo is running, open INFO Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop. type http://localhost:4000/ to see the generated blog.

Part 3:Hosting Hexo on Vercel

Reference: Official Vercel website：Vercel

一.Preparation

1:Register for Vercel (preferably using your email or linking your GitHub account).

二.Download Configuration Files Locally

1.Install Vercel by running（npm i vercel -g）

三. Log into Your Vercel Account

Choose the method you used to register for Vercel.

四.Update Hexo to Vercel

To update your local webpage：vercel --prod

Part 4: Conclusion

一.Update Articles

After finishing an article, right-click the “blog” directory and select Git Bash Here.

commandhexo g generate static files.

If you are logged into Vercel, simply run vercel --prod to update your local webpage to Vercel

If you are not logged in, first execute vercel login to log in, and then run vercel --prod

Categories

Tags