第一步 安装工具

Hexo: 6.3.0 ~ 7.0.0
hexo-cli: 4.3.0 ~ latest
node: 14.17.3 ～ 20.10.0 # 建议选择 LTS 版本，过高的版本 hexo 还没有进行兼容。
npm: 6.14.13 ~ 10.2.3

安装中遇到问题请切换 powershell 或 cmd 并以管理员身份启动

如任何步骤有报错信息，请留意

1. 安装Node

安装node时，需要勾选同意下载附带的工具，等待工具下载

安装好后，以管理员身份启动 powershell（打开开始菜单，搜索powershell，选择以管理员身份动）

输入

1

node -v  #查看node版本 

输出

1

v18.20.6  #输出为node版本号即为正确 

说明安装完成，之后所有工具的安装都可以用此方式验证

2. 安装Git

配置用户信息，git用于将文件上传到你的git账户

右键，选择“open git bash”

1
2

git config --global user.name "你的GitHub用户名" 
git config --global user.email "你的邮箱" 

3. 安装npm国内镜像工具cnmp（可选）

npm工具在国内可能并不好用（不翻墙的话），可以安装国内镜像

1

npm install -g cnpm --registry=https://registry.npm.taobao.org  #从淘宝下载cnpm，这个源挂掉的话可替换为其他地址 

安装cnpm后，下列所有 “npm” 可更改为 “cnpm”，本攻略暂都用npm

4.安装hexo

利用node附属的npm工具下载

1

npm install -g hexo-cli   #安装hexo 

输入

1

hexo -v  #查看hexo版本 

输出

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

os: win32 10.0.26100 undefined 
node: 18.20.6 
acorn: 8.13.0 
ada: 2.8.0 
ares: 1.29.0 
base64: 0.5.2 
brotli: 1.1.0 
cjs_module_lexer: 1.2.2 
cldr: 44.1 
icu: 74.2 
llhttp: 6.1.1 
modules: 108 
napi: 9 
nghttp2: 1.61.0 
nghttp3: 0.7.0 
ngtcp2: 1.3.0 
openssl: 3.0.15+quic 
simdutf: 5.6.0 
tz: 2024a 
undici: 5.28.5 
unicode: 15.1 
uv: 1.44.2 
uvwasi: 0.0.19 
v8: 10.2.154.26-node.37  
zlib: 1.3.0.1-motley     #各工具的版本号 

第二步 创建文件夹

1. 创建blog文件夹，存储博客网站源代码

1
2
3

cd C:/Users/Administrator/Desktop/  #前往你想要放置blog文件的地址 
md blog  #输入文件夹名称创建blog文件夹，文件夹名称随意 
cd blog  #前往blog文件夹 

当然，你可以直接在桌面右键创建文件夹再打开，不过记得要cd到这个文件夹里面

注意：直接在文件夹内右键打开终端不是管理员模式

第三步 创建博客网站源代码

1. 生成默认文件

1

hexo init #生成hexo文件 

通过以下两个步骤可以在本地部署默认的hexo网站

1
2

hexo g  #生成hexo静态文件，文件位于“public”文件夹 
hexo s  #本地部署 

输出结果为

1
2
3

INFO  Validating config 
INFO  Start processing 
INFO  Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop. 

按住 ctrl键，鼠标点击上方地址即可访问本地网页，ctrl+c结束本地部署

2. 安装主题

1）下载

①方法一：下载stellar主题（最新版）解压进themes文件夹

②方法二：直接在blog文件夹中打开终端下载

1

npm i hexo-theme-stellar  #安装stellar主题（稳定版）

通过npm安装的stellar主题文件在“node_modules”文件夹中，本教程默认使用方法一（stellar主题文件在“themes”文件夹中），使用上无任何差别

2）配置

在 blog/_config.yml 文件中找到并修改：

1

themes: stellar 

复制 blog/themes/stellar/_config.yml 文件到 blog文件夹，并重命名为_config.stellar.yml

3. 自定义主题风格

查看官方教程

这里简要说明blog文件夹及stellar文件夹中各个文件的含义

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

blog/_config.yml  #hexo博客的总设置 
blog/_config.stellar.yml  #stellar主题的设置，优先级高于_config.yml 
blog/node_modules/  #hexo自带或自己安装的各种hexo插件 
blog/.git/  #用git将整个blog文件夹上传到GitHub仓库所产生的文件（没有的话可以忽略） 
blog/.deploy_git/  #用hexo-deployer-git插件将hexo生成的public静态文件上传到GitHub仓库所产生的文件（没有的话可以忽略） 
blog/public/  #hexo g生成的网页静态文件，可以用静态文件搭建网站 
blog/source/_post/  #在这个文件夹里面写博客，用md格式 
blog/source/friends/index.md  #网站首页menu友链指向这个网页 
blog/source/about/index.md  #网站首页点击头像指向这个网页 
blog/source/wiki/index.md  #网站首页menu文档指向这个网页 
#可以更改_config_stellar.yml中不同menu对应的 “/名称/” 并在blog/source/_data/中创建对应的文件夹及index.md文件来更改或创建新的网页 
blog/source/_data/links/随便什么.yml  #在这里编辑友情链接，可在md文件中用{% friends 随便什么 %}字段连接到这个文件 
#可以在blog/source/_data/links/中创建任意yml文件，并在任意md文件中用{% friends（或sites） yml的文档名字 %}来引用 
blog/themes/stellar  #stellar主题文件夹 
blog/themes/stellar/languages  #stellar主题内置的几种语言，可在总设置中配置 
blog/themes/stellar/_data/widgets.yml  #在这里管理各种侧边栏插件 
#可在总设置或者博客的font matter中用“leftbar：插件1,插件2”(rightbar也行)来调取各种侧边栏插件 
blog/themes/stellar/layout  #里面的文件决定着各种侧边栏插件部署的格式 

第四步 部署到服务器上搭建网站

1. 上传文件到GitHub库

1）方法一：上传生成的静态文件

• 创建GitHub库

  登录GitHub创建一个项目库即可

• 安装插件

1

npm install hexo-deployer-git --save  

• 配置

  更改blog/_config.yml。找到最下方的deploy

1
2
3
4

deploy: 
  tipe: git 
  repo: https://github.com/VRTG-47/blog.git  #将其更改为你仓库的网址，注意结尾有.git 
  branch: master  #上传到master分支 

• 上传

  cd到你的blog文件夹，或者打开blog文件夹，右键，选择打开终端

1
2
3
4

hexo clean  #删除现在的public静态文件 
hexo g      #生成public静态文件 
hexo s      #本地部署，用来预览 
hexo d      #部署到GitHub项目库 

每次写博客后只需要重复上述步骤即可

2）方法二：上传源码

• 创建GitHub库

  登录GitHub创建一个项目库即可

• 上传

  cd到你的blog文件夹，或者打开blog文件夹，右键，选择打开终端

1
2
3

git remote add origin https://github.com/你的github用户名/项目库名称.git 
git branch -M main  
git push -u origin main 

• 更新（每次更改网页后）

  cd到你的blog文件夹，或者打开blog文件夹，右键，选择打开终端

1
2
3
4

git add .  #添加文件到暂存盘 
git commit -m "描述这次更新" 
git pull origin main  #下载仓库里最新文件并与暂存盘比对 
git push origin main  #将更新推送到GitHub 

2. 运用vercel拾取GitHub项目库完成搭建

• 登录vercel

• 创建新项目

点击创建新项目，点击 “Add GitHub Account” 添加GitHub账号，选择对应项目库点击 “Import”，点击 “deploy” 部署

许可协议

本文采用 署名-非商业性使用-相同方式共享 4.0 国际 许可协议，转载请注明出处。

分享文章