Hexo+Next+GitHub博客搭建超详细教程--开始篇

一、环境准备

1. 安装Node.js

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

建议选择长期支持版~

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

2.安装git

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

选择Windows版本下载

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

二、安装Hexo

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

执行命令

$ npm install -g hexo-cli
$ hexo init

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

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

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

.
├── .gitignore
├── _config.yml
├── package.json
├── package-lock.json
├── node_modules
| 	├── .bin
| 	├── @types
|	└──...
├── scaffolds
| 	├── draft.md
| 	├── page.md
|	└── post.md
├── source 
|	└── _posts
└── themes
	└──landscape

继续执行命令

$ hexo g
$ hexo s --debug

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

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

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

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

三、安装NexT主题

1. 安装主题

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

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

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

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

执行命令

$ hexo clean

清除上一次编译的缓存

再执行命令

$ hexo g && hexo s

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

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

2. 修改主题方案为Gemini

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

3. 修改标题和作者

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

title: 博客标题
subtitle: 副标题
descripition: 描述
author: 作者

重新编译。

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

四、增加内容

1. 增加新文章

执行命令

$ hexo new your_article_name

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

添加标签：

在标头中的日期下面添加

tags:
	- Hexo
	- blog
categories: blog

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

执行命令

$ hexo clean && hexo g && hexo s

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

2. 增加页面

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

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

1）添加原有页面（以关于页为例）：

取消注释后，执行命令

$ hexo new page about

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

注：如果是分类和标签页面，需要分别在日期下面添加 type: categories 和 type: 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用户名和密码

执行命令

$ 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_rsa 和 id_rsa_pub ，用文本编辑器打开 id_rsa.pub ，复制其中的内容

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

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

4. 修改本地Hexo配置

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

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

5. 安装部署工具

$ npm install hexo-deployer-git --save

6. 部署

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

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

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

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

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

最终成果：