Hexo + GitHub Pages + NexT在win10上搭建个性化个人博客

刚刚搭好自己的个人博客，现在总结一下

---

注册Github账号及创建仓库

访问网址：https://github.com/

注册好账号之后，点击下图中的Start Project

在Repository name中输入新建仓库的名称，如果我们只是想要在这个仓库里面放一些个人项目的话，这个名称随便取，但是我们现在是要搭建自己的个人博客，Repository name是有固定格式的：yourname.github.io，其中yourname可以随便填，一般是用自己的名字，点击Create Repository

---

安装Git for Windows

下载地址：https://gitforwindows.org/

下载之后，双击安装，一路默认即可

---

配置Git

为了把本地的仓库中的内容传输到GitHub上，需要配置ssh key，无论是上传自己的博客还是上传其他的仓库都需要连接Github，ssh key是一个token，作用是身份验证。
为了在本地创建ssh key，打开Git Bash，输入命令：

ssh-keygen -t rsa -C "email"

email是我们在注册Github时使用的邮箱

输入上面的命令后按Enter键，Git Bash会提示:

Enter file in which to save the key (/c/Users/sun/.ssh/id_rsa):_

直接按Enter，Git Bash会在默认路径C:\users\sun\.ssh下生成几个文件。

然后Git Bash又给出提示：

Enter passphrase <empty for no passphrase>:_

这是在提示我们输入密码，直接回车表示不设置密码，这里我直接回车，然后Git Bash要求我们重复密码，也直接回车，然后就会提示ssh key已经生成。
我们进入到默认的地址中查看ssh key文件

在windows10中直接打开的话，默认使用了MicroSoft的Publisher，但是打不开，经尝试，利用word可以打开，复制里面的key。

回到Github的网页上面，在账号头像上面点一下，选择Your repositories

找到自己的博客的仓库

点击进入，然后点击Settings

在页面左侧找到Deploy keys并点击

点击右侧的Add deploy key按钮，title填什么都可以，Key中粘贴我们刚刚在ssh key文件中复制的key

点击Add Key，保存ssh key

在本地验证ssh key设置是否成功，打开Git Bash，输入命令：

ssh -T git@github.com

回车后，如果看到

You’ve successfully authenticated, but GitHub does not provide shell access

表示当前已经成功地连接上了自己的GitHub账户

接下来，设置一下自己的用户名和邮箱

git config --global user.name "my name"
git config --global user.email "my email"

到此为止，我们已经成功地将个人电脑和Github账号连接。

---

安装node.js

下载地址：https://nodejs.org/en/

按照需要选择不同的版本，下载到本地之后，直接双击安装，一路默认（不懂node.js，所以whatever），node.js安装后，会自动配置环境变量，打开windows的控制台，输入命令：

node -v

电脑会显示当前安装的node.js的版本

---

安装Hexo

在电脑的磁盘里找到新建一个空文件夹，在我的电脑上是D:\GIT\hexotext，用于存放本地仓库，和Github上的yourname.github.io是对应的

接下来Hexo的安装，我个人建议在windows的控制台中完成，因为我在Git Bash中安装Hexo后，运行Hexo服务时总是报找不到hexo的错
在windows控制台中出入命令，跳转至D:\GIT\hexotext

C:\Users\sun> D:
D:\> cd GIT\hexotext

安装Hexo，输入命令：

npm install hexo -g

经过漫长的等待后，提示安装成功
检查Hexo是否安装成功，输入命令：

hexo -v

---

本地测试

初始化D:\GIT\hexotext这个文件夹，打开Git Bash进入此目录，输入命令：

hexo init

漫长的等待，安装Hexo所需要的组件，输入命令：

npm install

产生webapp文件，输入命令：

hexo g

开启服务器，输入命令：

hexo s

此时控制台提示：

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

如果报端口的错误

FATAL Port 4000 has been used. Try other port instead.
FATAL Something's wrong. Maybe you can find the solution here: http://hexo.io/do
Error: listen EADDRINUSE 0.0.0.0:4000
    at Object.exports._errnoException (util.js:1026:11)
    at exports._exceptionWithHostPort (util.js:1049:20)
    at Server._listen2 (net.js:1257:14)
    at listen (net.js:1293:10)
    at net.js:1403:9
    at _combinedTickCallback (internal/process/next_tick.js:77:11)
    at process._tickCallback (internal/process/next_tick.js:98:9)
FATAL listen EADDRINUSE 0.0.0.0:4000
Error: listen EADDRINUSE 0.0.0.0:4000
    at Object.exports._errnoException (util.js:1026:11)
    at exports._exceptionWithHostPort (util.js:1049:20)
    at Server._listen2 (net.js:1257:14)
    at listen (net.js:1293:10)
    at net.js:1403:9
    at _combinedTickCallback (internal/process/next_tick.js:77:11)
    at process._tickCallback (internal/process/next_tick.js:98:9)

说明当前Hexo默认端口4000被占用，那么我们切换一个新的空闲的端口，输入命令：

hexo server -p 5000

5000这个端口号可以根据个人情况切换

如果没有报错，那么打开浏览器，输入地址：localhost:4000，便可看到下面的界面，说明我们的hexo服务端基本配置已经完成啦

现在我们写一个测试博客来发布一下，坐一下，我编辑博客使用的是小书匠，小巧方便。
下载地址：http://soft.xiaoshujiang.com/
下载之后安装，打开小书匠，新建文件，（或者在Git Bash中输入hexo new “filename”命令即可新建md文件，默认放在source\_post下）
输入以下测试内容：

---
title: test2
date: 2018-08-30 18:31:53
tags: test
---
这是一个测试博客

保存为.md文件到本地，并移至D:\GIT\hexotext\source\_posts中

在Git Bash中执行以下命令：

hexo clean & hexo g & hexo s

打开浏览器，访问：localhost:4000，此时可以看到刚刚发布的内容

那么我们现在就学会了新建博客啦，如果不熟悉markdown语法，需要学习一下（下面会提到）

---

使用next设计个性化博客

首先在Git Bash中输入

hexo s --debug

以debug的模式启动Hexo，在浏览器中打开localhost:4000，看到博客页面
Hexo默认的主题是landscape，但是很多人说不好看。我们可以按照自己的喜好进行更换
Hexo主题网址：https://hexo.io/themes/

这个网站中有很多十分优秀的主题，但是不同的主题可能设置方式不太一样，并且支持的第三方服务也有所不同，这点需注意

NexT安装

进入到D:\GIT\hexotext中，打开Git Bash
下载NexT，输入命令：

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

将Hexo的主题切换为NexT，打开D:\GIT\hexotext\_config.yml，把theme: lansscape改为theme: next

切换主题

进入D:\GIT\hexotext\themes\next，打开NexT的配置文件_config.yml，选择自己喜欢的主题样式，选择哪个样式就需要把主题前面的#去掉

因为我们是以debug模式启动的Hexo，所以更改完样式之后，可以直接刷新浏览器看到不同的效果

Muse

Mist

Pisces

Gemini

设置Menu

默认只有两个首页和归档，如果想要添加其他的，就需要在D:\GIT\hexotext\theme\next\_config.yml中找到Menu，并加以调整

然后刷新浏览器，页面中的确出现了我们想要的其他Menu选项，但是点进去，浏览器却提示错误，这是因为，我们没有在hexo中添加其他页面，比如说现在想新增一个tags页面，在D:\GIT\hexotext中打开Git Bash，输入命令：

hexo new page "tags"

Git Bash会提示：

INFO  Created: D:\GIT\hexotext\source\tags\index.md

可以在D:\GIT\hexotext\source中发现新增了一个名为tags的文件夹，在其中有个index.md文件，打开它，在里面输入：

---
title: tags
date: 2018-08-30 20:27:43
type: tags
---

再次刷新浏览器，再次点击标签，就可以看到标签页啦

同样的，类型Categories页面同样也可以这样生成

设置动态背景

在D:\GIT\hexotext\theme\next\_config.yml中找到canvas_nest，设置成ture

在右上角或者左上角实现fork me on github

在GitHub Ribbons或GitHub Corners选择自己喜欢的挂饰，拷贝方框内的代码

将复制的代码放到D:\GIT\hexotext\themes\next\layout中的_layout.swig文件中，放在

<div class="headband"></div>

后面，如下图

添加RSS

在D:\GIT\hexotext中打开Git Bash，安装Hexo的RSS插件，输入以下命令：

npm install --save hexo-generator-feed

安装成功之后，编辑D:\GIT\hexotext\_config.yml文件，在文件末尾添加

plugins: hexo-generate-feed

编辑D:\GIT\hexotext\theme\next\_config.yml文件，找到rss标签，在后面加上

 /atom.xml

刷新浏览器查看效果

在文章末尾添加“文章结束”标记

在D:\GIT\hexotext\themes\next\layout\_macro文件夹中新建passage-end-tag.swig文件，在此文件中，添加以下内容：

<div>
    {% if not is_index %}
    <div style="text-align:center;color:#ccc;font-size:14px;">
        -------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------
    </div>
    {% endif %}
</div>

打开D:\GIT\hexotext\themes\next\layout\_macro\post.swig，在post-body之后，post-footer之前（post-footer之前两个DIV），添加以下代码：

<div>
    {% if not is_index %}
    {% include 'passage-end-tag.swig' %}
    {% endif %}
</div>

添加位置，如下图所示：

修改D:\GIT\hexotext\themes\next\layout\_config.yml，在末尾添加

passage_end_tag:
    enabled: true

效果如下：

修改代码块“自定义样式

打开D:\GIT\hexotext\themes\next\source\css_custom\custom.styl，添加以下代码：

//Custom styles
code { color: #ff7600; background: #fbf7f8; margin: 2px; }
// 大代码块的自定义样式
.highlight, pre { margin: 5px 0; padding: 5px; border-radius: 3px; }
.highlight, code, pre { border: 1px solid #d6d6d6; }

侧边栏社交小图标设置

打开D:\GIT\hexotext\themes\next\_config.yml，找到标签Social，将想要添加的个人账号的前面的#去掉，或者自己添加自定义的账号也可以

效果如下:

添加热度

进入LeanCloud官网，进行账号注册

登录后，创建应用，名为Hexo

进入应用，点击存储，点击创建Class，类名为Counter

创建Class完毕后，点击设置，查看应用key，记录AppId和AppKey

编辑D:\GIT\hexotext\themes\next\layout\_macro\post.swig，找到

<span class="leancloud-visitors-count"></span>

在其后加入

<span>℃</span>

如下图：

编辑D:\GIT\hexotext\themes\next\_config.yml，找到leancloud_visitors，将enabled设为true，并且将AppId和AppKey粘贴到相应的位置

网站底部字数统计

安装hexo插件，在D:\GIT\hexotext中打开Git Basg，输入命令：

npm install hexo-wordcount --save

在D:\GIT\hexotext\themes\next\layout\_partials\footer.swig末尾添加代码：

<div class="theme-info">
  <div class="powered-by"></div>
  <span class="post-count">博客全站共{{ totalcount(site) }}字</span>
</div>

效果如下：

但是这个是没有必要的，因为hexo自带了hexo-wordcount插件：

实现文章字数统计和阅读时长功能

安装插件

npm install hexo-wordcount --save

编辑D:\GIT\hexotext\themes\next\_config.yml，找到post_wordcount，将所有的false都改为true：

效果如下：

添加网页顶部进度加载条

编辑D:\GIT\hexotext\themes\next\_config.yml，找到pace，将其值改为true，并按照下面的格式更改进度条主题，从而选择最喜欢的进度条

效果如下：

添加jiathis分享

编辑D:\GIT\hexotext\themes\next\_config.yml，找到jiathis，将其值改为ture

Hexo博客添加站内搜索

D:\GIT\hexotext打开Git Bash，安装 hexo-generator-search，输入命令：

npm install hexo-generator-search --save

安装 hexo-generator-searchdb，输入命令：

npm install hexo-generator-searchdb --save

编辑D:\GIT\hexotext\themes\next\_config.yml，找到Local search，做如下设置：

效果如下：

切换主题：

在Themes|Hexo中下载自己喜欢的主题，然后编辑D:\GIT\hexotext\_config.yml，找到theme，设为其他的值

比如说，我现在想用主题aero-dual，
在D:\GIT\hexotext中打开Git Bash，输入以下命令

git clone https://github.com/levblanc/hexo-theme-aero-dual.git theme/aero-dual

然后打开D:\GIT\hexotext\_config.yml，将theme的值该诶aero-dual
效果如下：

以上差不多就完成我们的个性化设置啦。

连接Hexo和Github Pages及部署博客

接下来就是将Hexo与GitHub Pages连接起来
打开D:\GIT\hexotext中的_config.yml文件，找到deploy字段，改为如下内容

deploy:
    type: git
    repository: git@github.com:someurl/someurl.github.io.git
    branch: master

[email protected]:someurl/someurl.github.io.git是博客仓库的地址，获取方式是登录GitHub，找到自己的博客的仓库

现在将Hexo部署到GitHub的仓库里
在仓库中点击Settings，往下拉，找到GitHub Pages

Source选择master branch，这意味着我们把我们的博客以及博客配置生成所需要的相关文件都放到我们这个仓库的主干中。
不要点击Choose a theme（图中第二个箭头），当然如果使用jekyII搭建博客的话，可以使用它

默认情况下上面图片中第一个方框圈中的地方应该是 www.yourname.github.io，但是因为我申请了一个域名，并将其解析到了我的GitHub Pages上，所以现在显示的是我自定义的域名。（后面会提到如何申请域名以及绑定GitHub Pages）

在产生webapp应用和部署到GitHub之前，需要安装一个扩展插件，在D:\GIT\hexotext中打开Git Bash，输入命令：

npm install hexo-deployer-git --save

使用命令：

hexo d -g

便可以直接部署啦，也可以使用如下命令，分两次进行，它们的作用分别是生成webapp应用和部署

hexo g
hexo d

部署完成之后，在浏览器中输入地址www.yourname.github.io，这个地址就是在repository的Setting页面中看到的那个，就可以访问自己的博客啦，以后写了新的博客，保存成md文件放到source\_post文件夹中，执行

hexo clean
hexo d -g

或者直接执行

hexo clean & hexo d -g

就可以发布到GitHub上啦

备份管理

我们会发现在GitHub的仓库中的文件和我们本地的文件是不一样的，这是因为我们再部署的时候，只把通过hexo g生成的webapp部署到了GitHub上，而不是把原件放上去，那么问题来了，如果我不小心删除了本地的仓库，或者更换了电脑，怎么办呢
我们可以把原件也放到GitHub上就可以啦，更换电脑之后，重新按照上面的方法生成ssh key连接GitHub，然后把GitHub仓库中的原件clone到新电脑上就可以啦

首先后新建一个文件夹，比如起名为hexo_backup，在此文件夹内打开Git Bash，输入命令：

git init

然后我们利用ssh连接我们的博客仓库

git remote add origin git@github.com:someurl/someurl.github.io.git

[email protected]:someurl/someurl.github.io.git是博客仓库的地址，获取方式是登录GitHub，找到自己的博客的仓库

将GitHub上的博客仓库完全下载下来

git pull origin master

创建一个新分支（我们原来的分支名为master），输入命令：

git checkout -b hexo

这样子我们就在我们的博客仓库中新建了一个名为hexo的分支，接下来把下载下来的.git文件复制到D:\GIT\hexotext，也就是我们的博客仓库中去，现在hexo_backup就没有用了，可以删了。
接下来我们把本地的博客仓库中上传到GitHub的博客仓库的hexo分支中

git add .
git commit -m "backup"
git push origin hexo

进入到GitHub的博客仓库中，可以发现出现了一个新的分支hexo，并且里面是我们的博客原件。

最好在上传备份之前写一份README文件，作为一项说明（因为这是GitHub建议的）

通过以上方式，我们就完成了备份啦，下一次更新了博客，首先执行

hexo clean & hexo d -g

生成及部署hexo，然后执行

git add .
git commit -m "backup"
git push origin hexo

备份原件。

购买域名并解析

我是在阿里云上购买的域名，首先注册一个阿里云账号

登录之后，点击控制台

选择域名

找到“我要买域名”

然后就像淘宝一样，选择域名，付款，域名不算很贵，比如top结尾的确实比较便宜，一年才5块钱，学生钱甚至1块钱一年

买完之后，回到控制台，进入域名列表，在里面会显示刚刚购买的域名，但是域名状态应该是“未实名”，点击“未实名”就会进入实名界面，然后就安心等待实名结束，只有实名结束了才能使用该域名。

{

解析域名，如下：

在域名列表中点击“解析”，进入解析设置页面，点击“添加记录”，在弹出的框中填写相关的数据

在“记录类型”一栏选择A表示要求将当前域名匹配到一个外网IP上，这个IP是我们的GitHub Pages的IP，获取这个IP的方式是，打开windows控制台，ping www.yourname.github.io，如下：

这样子，就得到了我们的GitHub Pages的IP
“记录值”填写刚获得的IP，“主机记录”一栏输入www，或者你想要的类型，可输入的内容如下：

最终填写完毕后，点击确定。一般是添加两条记录

然而还没有结束，在本地的D:\GIT\hexotext\source中新建一个名为CNAME的文件，内容则是刚刚申请的域名，然后重新发布，重新备份

CNAME中的记录是一个别名记录，这种记录允许我们将多个域名映射到同一台计算机上。通常用于同时提供WWW和MAIL服务的计算机。

等域名实名认证结束后，就可以通过域名直接访问啦

现在我们就完成了整个博客的搭建
www.sunshangyu.top

感谢：
如何用git将项目代码上传到github
使用Hexo+Github一步步搭建属于自己的博客（基础）
Hexo-NexT配置超炫网页效果