一、环境准备

1. 安装Node.js

由于hexo需要使用npm安装,安装node会附带npm,点击下载Node.js

建议选择长期支持版~

下载后打开msi格式的安装包,一路点击next即可,如果要改路径的话可以改一下安装路径。

2.安装git

Hexo的安装需要使用git,点击下载git

选择Windows版本下载

具体安装教程详见 Git安装教程(Windows安装超详细教程),这一篇真的是太详细了!

二、安装Hexo

创建一个博客专属目录,在当前目录进入命令行

执行命令

1
2
$ npm install -g hexo-cli
$ hexo init

install 过程可能会出现warning属于正常现象。

init 过程较慢,需耐心等待。

结束后,该文件夹内出现如下内容则一切正常(版本不同可能会有差别)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.
├── .gitignore
├── _config.yml
├── package.json
├── package-lock.json
├── node_modules
| ├── .bin
| ├── @types
| └──...
├── scaffolds
| ├── draft.md
| ├── page.md
| └── post.md
├── source
| └── _posts
└── themes
└──landscape

继续执行命令

1
2
$ hexo g
$ hexo s --debug

在浏览器中打开 http://localhost:4000 出现如下页面

最开始的博客界面就做好啦~

Ctrl+C 可以结束本地调试。

但是默认的主题可发挥的空间不大,所以我们要安装一个新的主题Next

三、安装NexT主题

1. 安装主题

依旧在博客目录下,使用git来clone主题到本地

1
$ git clone https://github.com/iissnan/hexo-theme-next themes/next

过程也会比较慢,耐心等待,结束后会发现 theme 文件夹下多了 next 文件夹

用文本编辑器(可以使用记事本,这里推荐Notepad++VScode)打开.\_config.yml 文件(以下统称站点配置文件),使用 Ctrl+F 查找 theme 字段,将其值修改为 next

执行命令

1
$ hexo clean

清除上一次编译的缓存

再执行命令

1
$ hexo g && hexo s

打开 http://localhost:4000 检查主题是否改变

如果显示如下界面则一切正常。

2. 修改主题方案为Gemini

在主题配置文件中找到 Schemes 字段,将原有 Muse 注释掉,将 Gemini 取消注释,重新编译。

3. 修改标题和作者

打开站点配置文件,找到 Site 字段,修改其中内容

1
2
3
4
title: 博客标题
subtitle: 副标题
descripition: 描述
author: 作者

重新编译。

NexT主题的美化会在后续的文章中详细介绍。

四、增加内容

1. 增加新文章

执行命令

1
$ hexo new your_article_name

会发现 source\_post 文件夹下创建了新文件 your_article_name.md ,编辑文件(支持markdown的文本编辑器有很多,这里推荐 Typora),写上自己的内容。

添加标签:

在标头中的日期下面添加

1
2
3
4
tags:
- Hexo
- blog
categories: blog

标签可以多个,分类可以多层,均使用 - 标记,。如本文的标签为 Hexoblog ,分类为 blog-搭建

执行命令

1
$ hexo clean && hexo g && hexo s

再次打开 localhost:4000 即可看到自己刚刚写的文章。

2. 增加页面

打开主题配置文件(./theme/next/_config,yml),搜索 menu 字段,将需要添加的页面取消注释,例如about,也可以添加自己的自定义页面,每一行内容分别是 页面名字: /路径/||图标,页面名字会在语言文件(后续会提到)中对应一个显示的名字;路径是在 ./source/文件夹中的相对路径, 其中 home 对应 _post 文件夹;图标是在请在 图标库 中查找。

注意这里要把路径后面的空格删去。

1)添加原有页面(以关于页为例):

取消注释后,执行命令

1
$ hexo new page about

会发现 source 文件夹下多出 about 文件夹,编辑其中的 index.md 文件,写上自己的内容,再次编译即可看到增加了关于页面。

注:如果是分类和标签页面,需要分别在日期下面添加 type: categoriestype: tags 字段如下。

2)添加自定义页面(以留言墙为例):

menu 字段的最后一行添加 wall: /wall/|| pencil-square-o

自行编辑其中内容。

打开 ./theme/next/languages/zh-Hans.yml (简体中文配置文件,其他语言文件类似添加),找到 menu 字段,在下面添加一行 wall: 留言墙 即可。

3)修改语言(可以不做,默认英文)

打开站点配置文件,找到 language 字段,修改为想要的语言,例如我这里选择简体中文 zh-Hans,名字就是language文件夹下的文件名。

清除缓存重新编译发现已经改变语言。

五、发布到GitHub

1. 注册GitHub账号

点击注册

附上一个GitHub使用教程

2. 在GitHub上创建新仓库

仓库名字为 username.github.io

3. 在本地配置git用户名和密码

执行命令

1
2
3
$ git config --global user.name "your username"
$ git config --global user.email "you email"
$ ssh-keygen -t rsa -C "your email"

连续三次回车(默认路径和无密码)

C:\Users\Yourname\.ssh 下会出现两个文件 id_rsaid_rsa_pub ,用文本编辑器打开 id_rsa.pub ,复制其中的内容

打开GitHub的 SSH key 设置,点击 New SSH key, 在Key栏粘贴刚刚复制的内容,Title可以随意设置

Tips: 要配置免密提交,参考:https://segmentfault.com/a/1190000005125610

4. 修改本地Hexo配置

打开站点配置文件,找到 deploy 字段,修改内容为

1
2
3
4
deploy:
type: git
repo: https://gtihub.com/your_github_username/your_name.github.io.git
branch: master

5. 安装部署工具

1
$ npm install hexo-deployer-git --save

6. 部署

1
2
$ hexo clean && hexo g #清除缓存并重新编译
$ hexo d #发布

第一次发布由于文件较多,发布较慢。

发布过程可能会要求输入用户名和密码,属于正常现象。

在浏览器输入 https://yourname.github.io/ 就可以看到你的博客了

至此,博客搭建的基础就完成了,是不是很激动呢~

最终成果: