Hexo+Github Pages+Next博客搭建

发表于 | 分类于 | |

花了三个晚上搭建这个博客，第一篇就用来记录搭建过程。

准备工作

  1. 注册Github账号
  2. 创建一个名为username.github.io的repository
  3. git clone到本地，创建页面，push到远程
  4. 购买域名，ping username.github.io，拿到ip地址，在域名服务商那里解析ip
  5. 新建一个CNAME文件，不要后缀，记事本建立即可，输入我的域名www.yundoou.com
  6. git push
  7. 稍等一会，刷新页面。成功。

    步骤4和5选择一个即可，Github Pages推荐用步骤5。

参考链接：

这样建立的是一个空的静态网站仓库，每写一篇博客都要自己把内容嵌入HTML页面，还需要自己实现各种前端效果，这个适合研究前端的同学，我们只想专注于写作，把效果和框架交给别人管理，同时保留最大的控制权，这就是Hexo的根本目标。

安装Node.js

Hexo是基于Node开发的，所以本地要先安装它，下载Windows 64 的msi文件，这个比zip好，因为msi文件安装的时候会把环境变量一起设置好了。

Node.js

安装成功的标志：

命令行输入 node -v 和npm -v都能得到各自版本信息。npm是随Node一起默认安装的。

npm是node.js的包管工具，他们的关系就像Python和pip工具的关系。Hexo就相当于Node.js的一个特定的包。

安装Hexo

Hexo是node.js的 博客插件。
Windows环境下会被安装到这里：
C:\Users\Administrator\AppData\Roaming\npm\node_modules

官网安装命令：

1
npm install -g hexo-cli

但是，由于网速问题，安装常常失败，用淘宝的镜像就好了。
https://npm.taobao.org/

意思是用npm安装cnpm，功能是一样的，但是是淘宝的镜像


命令如下(注意第二行是cnmp)：
1
2
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install hexo-cli -g

-g是全局安装，这样在命令行直接就能调用hexo。

安装成功的标志：
hexo -v
得到类似下面的结果：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
hexo-cli: 1.0.3
os: Windows_NT 10.0.14393 win32 x64
http_parser: 2.7.0
node: 8.2.1
v8: 5.8.283.41
uv: 1.13.1
zlib: 1.2.11
ares: 1.10.1-DEV
modules: 57
openssl: 1.0.2l
icu: 59.1
unicode: 9.0
cldr: 31.0.1
tz: 2017b

重新安装Git工具

Git是分不同平台的，在Windows下有Github Desktop和Git for Windows，前一个是Git GUI，鼠标点击操作，后一个是Git Bash，命令行工具。

  • Github Desktop: https://desktop.github.com/
    安装的时候提示用普通用户权限安装，而不是用管理员权限。
    解决办法：
    任务管理器关闭explorer.exe，新建一个explorer.exe，不勾选“以系统管理员权限创建此任务”，因为我前面是勾选的。
  • Git for Windows: https://git-for-windows.github.io/
    这个安装完会装好Git Bash，这才像Linux风格，同时也会设置好Windows下的环境变量，然后git工具可以直接在Windows的命令行下运行.
    安装过程中的所以选项全部默认，一直点一下一步即可。

建立博客

首先建立自己的博客文件夹，比如我的域名是Yundoou，所以我再D盘根目录建立了Yundoou文件夹
进入D:\Yundoou，然后打开Git Bash。
运行如下命令(#后面是注释)：
下载hexo博客引擎到指定目录，也可以带上目录名，看自己需要，稍微有点慢，因为要下载，这个最好也是先开个VPN再运行，不然有时候非常慢。

1
2
3
hexo init  #
cnpm install #安装依赖包，npm很慢，所以用上面淘宝的cnpm
hexo s #启动本地博客服务器，直接使用Hexo用于生成静态博客的源文件本地预览

更换主题

先下载想要的主题，依旧是在Git Bash中运行，且要在自己本地网站目录下运行

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

修改Hexo目录下的_config.yml配置文件中的theme属性，将其设置为next。

另外，下载主题也可以手动下载，只要是一份完整的主题包，不管从哪里下都可以，从github手动下载，从别人的博客链接下载都行。下载好了放到hexo的theme/目录下，一般一个主题包以自己的主题名字为一个文件夹。

几个常用Hexo命令：

$ hexo n == hexo new
$ hexo g == hexo generate
$ hexo s == hexo server # 命令启动之后，是直接使用主题包下的文件
$ hexo d == hexo deploy # 好像不太好用，可能会有一些bug，替代方案是Git直接push
$ hexo clean # 清空缓存，特别是更换了主题的时候，它会删除本地原来生成的public文件夹

部署博客到Github pages

有两种方式，第一种是直接使用hexo的deploy工具，前提是安装hexo-deployer-git这个工具，但是我安装的时候发现提示说这个工具已经不再维护了。帖子也说有时候会出现一些莫名其妙的问题，所以不推荐这种方法，直接使用原生的git命令部署。

首先把Github Pages克隆到本地

1
git clone https://github.com/a-panda-rar/a-panda-rar.github.io.git .deploy/a-panda-rar.github.io

注意要在网站目录下运行，克隆到本地.deploy文件夹。然后用一小段脚本把hexo发布的静态页面复制到这个文件夹里面，再push到github上。
注意，我把自己的CNAME文件放进了public文件夹内，每次生成页面不会被覆盖
脚本如下<这一段是Linux下的脚本，不过好像Windows下的Power Shell的脚本刚好语法和命令都是一样的>：

1
2
3
4
5
6
hexo generate
cp -R public/* .deploy/a-panda-rar.github.io
cd .deploy/a-panda-rar.github.io
git add .
git commit -m “update”
git push

如果发现git命令无法运行，那就是git没有添加进环境变量。
执行git push出现”Everything up-to-date”
原因：
1）没有git add .
2）没有git commit -m “提交信息”
如果上面两个步骤都成功执行，还出现这个错误是因为创建的目录下是空的，目录下必须有文件才能git push上传成功。
在github上创建文件的时候，在新文件名后加/符号就是文件夹，但是这种方式只支持英文名目录，中文名目录不支持。

博客配置

这个分为两部分，第一部分是这个Blog的通用设置，比如标题，作者，主题等等，这些是独立于主题的，比如比如哪里存放图片和html文件，哪里存放生成的文件，启用语法高亮，每页文章分页数等等，对应的配置文件是Blog根目录下的_config.yml文件。
设置博客整体语言也在这里，就是博客里面的各个部分的文本，比如菜单，按钮，都是通过语言一次性设置的，而不是自己一个个去改的。
另一部分就是特定主题的配置，是对应主题下的_config.yml文件，这个可以对整个主题进行框架性配置，主要针对页面页面结构，也针对整体格式，比如菜单显示哪几个，菜单文本自定义，菜单图标，字体，第三方插件等等。

头像设置

在主题下的source/images/下替换头像文件avatar.gif即可，注意图像长宽比1:1。

设置代码高亮主题（在theme配置文件下，不是博客配置文件）

Next主题总共支持5种主题，默认主题是白色的normal。通过修改next主题下的_config.yml的highlight字段，来设置代码主题。
本站点使用的是night主题。即令highlight为night。
用的是Tomorrow-theme这个项目的代码配色

添加标签页

初始状态是没有这个页面的，在主页面的菜单栏添加标签选项，但是此时点击标签，跳转的页面会显示page not found。

1
hexo new page "tags"

当要为某一篇文章添加标签，只需在myBlog/source/_post目录下的具体文章的tags中添加标签即可，且不需要添加引号。

1
2
3
4
---
title: 机器学习记录
tags: [ML,机器学习]
---

如何删除文章

删除文章的过程很简单，先删除本地文件，然后通过生成和部署命令进而将远程仓库中的文件也一并删除。具体来说，以最开始默认形成的helloworld.md这篇文章为例。
首先进入到source / _post文件夹中，找到helloworld.md文件，在本地直接执行删除。然后依次执行hexo g,hexo d,再去主页查看你就会发现你的博客上面已经空空如也了，这就是如何删除文章的方法。

文章插入图片

使用本地路径：在hexo/source目录下手动新建一个img文件夹，将图片放入该文件夹下，插入图片时链接即为/img/图片名称。
另外直接使用![]()图片标签使用网上的链接，毕竟Github Pages只有1G的空间。

添加友情链接

在主题配置文件(Blog\themes\next_config.yml)中打开links 开关即可。
添加了友情链接之后，hexo s 本地部署的时候，就报出异常。
因为layout只能二选一，不然就会报错，同时设两个布局，你是不是傻。
同时，# Blog rolls是一句注释，不是配置代码，否则也会报错

1
2
3
4
5
6
# Blog rolls
links_title: 有朋自远方来
links_layout: block
#links_layout: inline
links:
  Mahua: http://mahua.jser.me/

添加社交链接

开启social开关即可，对应的icon默认是开启的，但是在social没有开启的时候是不显示的。
如果没有设置icon，那么默认显示一个地球图标

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# Social Links
# Key is the link label showing to end users.
# Value is the target link (E.g. GitHub: https://github.com/iissnan)
social:
  # LinkLabel: Link
  GitHub: https://github.com/a-panda-rar
  Kaggle: https://www.kaggle.com/yundoou
social_icons:
  enable: true
  # Icon Mappings.
  # KeyMapsToSocialItemKey: NameOfTheIconFromFontAwesome
  GitHub: github
  Twitter: twitter
  Weibo: weibo
  Kaggle: kaggle

截断文章，阅读全文按钮

文章长了会显示很长，体验不太好，想要显示开头一部分和一个阅读全文按钮，方法超级优雅的有木有。
在你想隐藏的地方加上<!--more-->，一切搞定。

第三方服务

第三方服务相当于Hexo的插件，实现一些静态网页无法实现的功能和一些统计功能，比如评论功能和访问量，阅读量统计等等，还有一些个性化的设置，比如添加网易云音乐插件放点歌。

评论模块

可选比较多，主要考虑便利性，可用性，可维护性，比如多说评论宣布倒闭，用了是不是比较烦，Facebook评论国内上不了，本想考虑网易云跟帖，结果去官网一看，公告说2017年8月份停止运营。算了，放弃评论模块，万一用着用着哪天就关了，留个邮箱，想联系我发邮件也是极好的。

百度统计

注册加了一个，万一以后要研究运营呢？

访问量/阅读量统计

综合对比了下，不蒜子计数比较靠谱，而且也不要账号什么的。就用它了。多说已经关闭，不蒜子还活着，这是程序员对程序员的承诺。官网说的安装方法是2015年的，现在已经不用那么操作了，直接在Next中文官网上看，把False改成True即可。 LeanCloud也可以，先不研究了，能用就行。
不蒜子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
busuanzi_count:
  # count values only if the other configs are false
  enable: true
  # custom uv span for the whole site
  site_uv: true
  site_uv_header: <i class="fa fa-user"></i>
  site_uv_footer:
  # custom pv span for the whole site
  site_pv: true
  site_pv_header: <i class="fa fa-eye"></i>
  site_pv_footer:
  # custom pv span for one page only
  page_pv: true
  page_pv_header: <i class="fa fa-file-o"></i>
  page_pv_footer:

最后来点个性化，网易云音乐

首先网易云音乐做得不错，所以就选它了，其它也有一些，方法很简单，和Hexo本身没有什么关系了，进入网易云音乐，找到想要的歌曲，点击生成外链播放器，选择是否自动播放，然后得到一段iframe代码，把这段代码直接贴进博客的某个页面，想在哪个页面都行，贴的时候是往源文件的markdown文件里贴的。
感谢这一篇博客：添加网易云音乐

1
2
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 
src="//music.163.com/outchain/player?type=3&id=908277292&auto=1&height=66"></iframe>

上面的方法只能添加到文章里，就是Markdown文件里，那么我们直接想嵌入到博客框架内部呢？就是说让他成为博客框架的一部分，而不是某一篇文章的一部分。
方法是这样的：
将外链插入到hexo/themes/next/layout中的文件中,我选择把播放器放在sidebar里面，所以我就选择了_macro文件夹中的sidebar.swig文件，将之前复制的iframe代码到了该文件中：
根据标签名称找到页面对应的位置，我准备把播放器放在友情链接下面，找到Blogroll，然后保存。
如果想直接放在首页，那么直接放在_layout.swig文件中去就行了。

注意：修改swig文件要重新编译hexo g一遍，否则看不到效果。
另外修改各种配置文件要注意格式，不要搞错了，比如yml参数每个:后面都有一个空格，少了就报错。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{# Blogroll #}
{% if theme.links %}
  <div class="links-of-blogroll motion-element {{ "links-of-blogroll-" + theme.links_layout | default('inline') }}">
    <div class="links-of-blogroll-title">
      <i class="fa  fa-fw fa-{{ theme.links_icon | default('globe') | lower }}"></i>
      {{ theme.links_title }}
    </div>
    <ul class="links-of-blogroll-list">
      {% for name, link in theme.links %}
        <li class="links-of-blogroll-item">
          <a href="{{ link }}" title="{{ name }}" target="_blank">{{ name }}</a>
        </li>
      {% endfor %}
    </ul>
  </div>
{% endif %}
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 
src="//music.163.com/outchain/player?type=3&id=908277292&auto=1&height=66"></iframe>

之后测试发现了个小问题，进入其它文章页面后，播放器下面有一小部分显示不全，经过调试，发现把iframe中的第一个height稍微设置大一些可以解决，比如我设置成了120。

1
2
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=120 
src="//music.163.com/outchain/player?type=3&id=908277292&auto=1&height=66"></iframe>

感谢这一篇博客： 嵌入音乐播放器

终于配置完成，最后push到线上，完成后，稍等1-2分钟，刷新页面，就能看到新页面了。

参考链接：

搭建过程中遇到的大大小小的坑，参考了很多博客，无法逐一列举，大恩不言谢！

主题配置
Next中文官网
Next wiki
另一个Next主题博客