Hexo 搭建博客 & 基础配置

【又是一篇旧文，记录使用 Hexo+Github Pages 配置博客的过程，正如当时就坦言的：「由于自己能力有限而且也确实太懒，在过程中参考了网上很多教程，多把自己用到的部分直接转了过来，在文中有链接说明，侵删」；更直白的讲，这里仅仅是把自己配置过程中参考的有用信息摘录了下来，只能算作「笔记」，但考虑还是花了很多心血或许可以帮到有需要的人，暂且存留下来。】

hexo 文档：https://hexo.io/zh-cn/docs/
live 2D https://github.com/EYHN/hexo-helper-live2d
Cards 主题 https://github.com/ChrAlpha/hexo-theme-cards

网站搭建&基础配置

原本尝试在 Synology 上进行安装，但不知何原因无法安装 Hexo，Docker 又没有使用过，在课上搞了半天未果，遂放弃而采用了在本地部署的方案。在 mac 上安装还是比较顺畅的，主要参考以下几篇博文：

使用Hexo搭建GitHub博客（2018年Mac版）
GitHub+Hexo 搭建个人网站详细教程关于HEXO搭建个人博客的点点滴滴一篇较为详尽的文章，留待参考

安装Hexo

1	npm install -g hexo-cli

为了便于发布到GitHub上，建议同时安装hexo-deployer-git

1	npm install hexo-deployer-git --save

Hexo安装文档

初始化，建立博客项目

选定博客网站项目程序文件的存放位置，如 ~/develop/hexo/github/，Bash中cd进入该目录下，执行命令：

hexo init

执行完毕后，该命令将在当前目录下生成一套标准的Hexo博客项目模板

生成网站

上面的操作只是生成了一套网站构成所需的“源代码”，实际发布时需要根据这套“源代码”当中的配置文件、博客文档（.md文件）、主题模板等，进行组合构建，生成服务器可识别的标准HTML网站目录，此时可使用该命令：

hexo g

执行完毕后，在public目录下可看到我们自己书写的博客文档（.md文件）与所选的博客主题模板链接组合，生成的最终静态网站文件，该目录也差不多就是之后发布到GitHub上的实际文件（实际发布到GitHub的是.deploy_git目录），外部的网站“源代码”不会上传到 github.io库

启动本地服务器

启动本地服务器可即时查看网站运行效果：

hexo s

默认地址是 http://localhost:4000/

主题

主题文件可在 Hexo官方主题网页中下载，以 Material 为例，点击主题预览图下方的主题名称链接即可进入该主题的源码发布页面 GitHub - viosey/hexo-theme-material: Material Design theme for hexo.

根据主题安装指导，下载项目至博客项目下的themes目录中，文件夹命名为material，并在博客配置文件_config.yml中指定使用该主题：

1	theme: material

将material主题目录下的 _config.template.yaml 重命名为 _config.yaml

参考 Material主题文档进行必要配置

再次执行 hexo g 将会根据新主题重新构建整个博客

设置站点相关内容

设置站点名、作者昵称和站点描述等内容：打开博客配置文件，博客根目录下_config.yml

copy# Site
title: Vicの博客
subtitle: 测试攻城狮
description: 人生苦短，我学Python
keywords:
author: Vic
language: zh-CN
timezone: Asia/Shanghai

添加网易云音乐

打开网页版的网易云音乐，选择喜欢的音乐，点击生成外链播放器，复制外链的代码

比如在侧栏插入这首歌的音乐播放器，修改 blog\themes\next\layout\_macro 的sidebar.swig 文件，找合适的地方添加刚刚复制的外链代码。

搜索功能：使用 LocalSearch

安装相关插件

安装搜索插件： hexo-generator-searchdb

在博客根目录下执行以下命令：

1	npm install hexo-generator-searchdb --save

配置博客

安装完成，编辑博客配置文件：_config.yml

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

配置主题

Next 主题自带搜索设置，编辑主题配置文件：_config.yml

找到文件中 Local search 的相关配置，设为 true

1
2
3

# Local search
local_search:
  enable: true

hexo 重新部署

主题配置

参考

这里使用的主题是 NexT，Github地址为：https://github.com/theme-next/hexo-theme-next

该主题由 IIssNan 开发的 NexT 已经停止维护，我们采用的是社区维护版的 NexT v6 and v7，但原版的中文说明文档是编得极好的，是重要的参考来源。

不过由于社区版的和原版已经产生了较大区别，还是更推荐看社区版的说明文档。

以下一般是通过修改 主题配置文件 _config.yml来实现各种配置，这种情况下不需要重新渲染发布等操作，修改完后直接保存再刷新网页即可看到效果。

Scheme

Scheme 是 NexT提供的一种特性，借助于 Scheme，NexT为你提供多种不同的外观。同时，几乎所有的配置都可以在 Scheme 之间共用。目前 NexT支持三种 Scheme，他们是：

Muse→ 默认 Scheme，这是 NexT最初的版本，黑白主调，大量留白
Mist→ Muse 的紧凑版本，整洁有序的单栏外观
Pisces→ 双栏 Scheme，小家碧玉似的清新
Gemini→ 看起来像Pisces，但是不同文章直接用块隔开，看起来更舒服

个人比较推荐 Gemini ，其次 Mist。

Scheme 的切换通过更改 主题配置文件，搜索 scheme 关键字。你会看到有四行 scheme 的配置，将你需用启用的 scheme 前面注释 # 去除即可。

菜单设置

参见关于HEXO搭建个人博客的点点滴滴

可以看到目前为止我们的主题菜单中只有两个默认的选项 Home和Archive，我们还可以添加tag、about、category等选项。

我们先在 \Hexo\Blog\themes\next 下找到 主题配置文件 _config.yml中找到Menu Settings。

阅读注释，我们可以知道Menu Settings中的Usage采用Key: /link/ || icon的格式。

Key是菜单项 (home, archives, etc.)，我们可以通过Hexo\Blog\themes\next\languages中的zh-CN.yml文件查看menu中是否有对应项的翻译。例如若该文件中有tags项，那么博客中对应处就会显示对应翻译标签，若没有则会采用原单词tags，当然你也可以自行修改。

/link/在 || 之前，指网站中该菜单项的链接。 icon 在 || 之后，指该菜单项的图标，对应 Font Awesome 中图标的名字。而 icons: true可用于控制是否显示图标，你可以设置成 false 来去掉图标。而 badges就是显示该菜单项内子类的数目。

在菜单图标开启的情况下，如果菜单项与菜单未匹配（没有设置或者无效的 Font Awesome 图标名字）的情况下，NexT 将会使用 ? 作为图标。

添加标签项

我们先把 tags 前的注释符 # 删了。

然后创建一个tags页面：在Hexo\Blog目录下右键打开Git Bush，输入hexo new page tags：

1 2	$ hexo new page tags INFO Created: C:\D\Hexo\Blog\source\tags\index.md

这时候你的source/下会生成 tags/index.md 文件，我们将其打开，然后在最后面加上两行：

1 2	type: "tags" comments: false

这时候你要为你的文章打上标签就可以在文章的头部写上：

tags:
    - Tag1
    - Tag2
    - Tag3

添加分类和自我介绍

同上，先把 categories about 前的注释符 # 删了，然后创建页面

1 2	hexo new page categories hexo new page about

打开categories/index.md 和 about/index.md 文件，在最下面加上分别两行：

type: "categories"
comments: false
type: "about"
comments: false

这时候你就可以给你的文章归类存档了，使用方式就是在你的文章的头部加上：

1 2	categories: - 分类1

设置预览摘要

可以启用预览摘要模式，在主题配置文件 中找到 auto_excerpt 属性，将false设置为true ，将length设置为想要预览到的字数，如下图所示：

# Automatically Excerpt (Not recommend).
# Use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
  enable: true
  length: 300

启用数学公式渲染引擎

打开themes/next/下的_config.yml，查找math

# Math Formulas Render Support
math:
  # Default (true) will load mathjax / katex script on demand.
  # That is it only render those page which has `mathjax: true` in Front-matter.
  # If you set it to false, it will load mathjax / katex srcipt EVERY PAGE.
  per_page: false

  # hexo-renderer-pandoc (or hexo-renderer-kramed) required for full MathJax support.
  mathjax:
    enable: true
    # See: https://mhchem.github.io/MathJax-mhchem/
    mhchem: false

设置侧栏在左侧/右侧

打开themes/next/下的_config.yml，查找sidebar

Pisces或Gemini方案打开themes/next/下的_config.yml，查找sidebar，将想要的方案打开
1
2
3
copysidebar:
position: left
#position: right
Mist或Muse方案打开next/source/js/src/motion.js，查找paddingRight，把所有（2个）PaddingRight更改为paddingLeft即可。打开next/source/css/_custom/custom.styl，添加如下内容：
1
2
3
4
5
6
7
8
copy//侧边栏置于左侧
.sidebar {
left: 0;
}
//侧栏开关置于左侧
.sidebar-toggle {
left: $b2t-position-right;
}
打开next/source/css/_common/components/back-to-top.stylv，将right: $b2t-position-right;改为left: $b2t-position-right;

显示当前浏览进度

搜索关键字 scrollpercent ，把 false 改为 true，即可在右下角显示浏览进度，并单击可返回顶部。

back2top:
  enable: true
  # Back to top in sidebar.
  sidebar: false
  # Scroll percent label in b2t button.
  scrollpercent: true

把 sidebar 改成 true 可以把该部分移到左边目录下。

设置侧边栏社交链接

搜索关键字 social，然后添加社交站点名称与地址即可。

social:
  GitHub: https://github.com/Theigrams || github
  E-Mail: mailto:15091060@buaa.edu.cn || envelope
  知乎: https://www.zhihu.com/people/zj_theigrams || quora
  CSDN: https://blog.csdn.net/qq_36790747 || codiepie

明明在Font Awesome上找到了知乎图标，但不知道为啥就是在博客中加载不出来，没办法就只好用 quora 的图标来代替了。同样的，也没找到 CSDN 的图标，只好找了个相似的代替。

设置头像

默认设置侧边栏是不显示头像的，不过我们可以编辑 主题配置文件 来添加头像，查找字段 avatar

# Sidebar Avatar
avatar:
  # In theme directory (source/images): /images/avatar.gif
  # In site directory (source/uploads): /uploads/avatar.gif
  # You can also use other linking images.
  url: /images/head_img.gif
  # If true, the avatar would be dispalyed in circle.
  rounded: false
  # The value of opacity should be choose from 0 to 1 to set the opacity of the avatar.
  opacity: 1
  # If true, the avatar would be rotated with the cursor.
  rotated: false

将照片存在目录 Hexo\Blog\themes\next\source\images下，然后取消 url的注释，并在后面填入照片的路径。

rounded选项决定照片框是圆还是方的。

opacity 调节头像的不透明度。

rotated 设置鼠标移动到头像上时是否旋转。

网站图标设置

我们博客的默认图标是H，不过Next支持修改图标

图标素材网站：easyicon、iconfont
下载16x16以及32x32大小的PNG格式图标，置于/themes/next/source/images/下
打开themes/next/下的_config.yml，查找favicon

copyfavicon:
  small: /images/cat-16x16-next.png
  medium: /images/cat-32x32-next.png
  apple_touch_icon: /images/apple-touch-icon-next.png
  safari_pinned_tab: /images/logo.svg
  #android_manifest: /images/manifest.json
  #ms_browserconfig: /images/browserconfig.xml

修改small和medium的路径为下载的图标路径

设置标签云

Hexo博客建立标签云及效果展示

设置 RSS

NexT 中 RSS 有三个设置选项，满足特定的使用场景：

复制

# false：禁用 RSS，不在页面上显示 RSS 连接.
# 留空：使用Hexo生成订阅源并自动插入链接。你可能需要先安装插件: `npm install hexo-generator-feed --save`.
# 具体的链接地址：适用于已烧制过 Feed 的情形.
rss:

具体操作如下：

首先在站点根目录下执行下列命令安装插件：

复制

1	npm install hexo-generator-feed --save

更改 主题配置文件，设定 rss 字段的值如下：

复制

1	rss: /atom.xml

阅读注释，我们可以知道Menu Settings中的Usage采用Key: /link/ || icon的格式。

在菜单图标开启的情况下，如果菜单项与菜单未匹配（没有设置或者无效的 Font Awesome 图标名字）的情况下，NexT 将会使用 ? 作为图标。

发布博客

创建github.io仓库

在自己的GitHub中，创建新仓库，标准命名为GitHub用户名.github.io，例如我的：wavky.github.io

仓库Readme、License之类的留空即可，之后在发布上传时会被强制覆盖抹掉

配置SSH密钥

参考 https://my.oschina.net/ryaneLee/blog/638440 配置SSH密钥一节

修改博客配置文件`_config.yml`

deploy:
  type: git
  repo: GitHub上传仓库的完整路径，如 https://github.com/wavky/wavky.github.io.git
  branch: master

发布到GitHub

在hexo g生成完毕后，可执行该命令发布博客到GitHub上：

hexo d

或在生成网站的同时进行发布：

hexo g -d

插入图片：图床

图床，当博文中有图片时，若是少量图片，可以直接把图片存放在source文件夹中，但这显然不合理的，因为图片会占据大量的存储的空间，加载的时候相对缓慢，这时考虑把博文里的图片上传到某一网站，然后获得外部链接，使用Markdown语法![图片信息](外部链接) 完成图片的插入，这种网站就被成为图床。常见的简易的图床网站有：贴图库图片外链国内算比较好的图床我认为有两个：新浪微博和七牛云，七牛云的使用方法可以参看其他文章。图床最重要的就是稳定速度快，所以在挑选图床的时候一定要仔细

如何使用七牛云做为图床？

绑定域名

GitHub Pages 默认提供的是 GitHub用户名.github.io（例如我的：wavky.github.io）作为博客访问地址，可设置绑定自定义域名

在博客项目目录的source文件夹中，创建一个CNAME文件，存储预备使用的个人域名，如：

1 2	# 在source目录下 echo story.wavky.com > CNAME

清理Hexo缓存并重新生成发布

1 2	hexo clean hexo g -d

GitHub项目页面中Setting设置界面，滚到GitHub Pages部分确认域名无误

在个人域名提供商（如阿里云万网）中，进入DNS设置界面，追加一条CNAME记录，这里我指定以story前缀的个人域名跳转到原来的默认的博客域名wavky.github.io

常用Hexo命令

npm install hexo -g #安装Hexo
npm install hexo-deployer-git --save  #安装Git部署插件
npm update hexo -g #升级
hexo init #初始化博客

hexo n "我的博客" == hexo new "我的博客" #新建文章
hexo g == hexo generate #生成
hexo s == hexo server #启动服务预览
hexo d == hexo deploy #部署

hexo server #Hexo会监视文件变动并自动更新，无须重启服务器
hexo server -s #静态模式
hexo server -p 5000 #更改端口
hexo server -i 192.168.1.1 #自定义 IP
hexo clean #清除缓存，若是网页正常情况下可以忽略这条命令

Hexo 搭建博客 & 基础配置

相关概念

什么是 Hexo

什么是 Node.js

什么是 nvm

什么是 GitHub Pages

网站搭建&基础配置

安装Hexo

初始化，建立博客项目

生成网站

启动本地服务器

主题

设置站点相关内容

添加网易云音乐

搜索功能：使用 LocalSearch

安装相关插件

配置博客

配置主题

主题配置

Scheme

菜单设置

添加标签项

添加分类和自我介绍

设置预览摘要

启用数学公式渲染引擎

设置侧栏在左侧/右侧

显示当前浏览进度

设置侧边栏社交链接

设置头像

网站图标设置

设置标签云

设置 RSS

发布博客

创建github.io仓库

配置SSH密钥

修改博客配置文件`_config.yml`

发布到GitHub

插入图片：图床

绑定域名

常用Hexo命令

相关概念

什么是 Hexo

什么是 Node.js

什么是 nvm

什么是 GitHub Pages

网站搭建&基础配置

安装Hexo

初始化，建立博客项目

生成网站

启动本地服务器

主题

设置站点相关内容

添加网易云音乐

搜索功能：使用 LocalSearch

安装相关插件

配置博客

配置主题

主题配置

Scheme

菜单设置

添加标签项

添加分类和自我介绍

设置预览摘要

启用数学公式渲染引擎

设置侧栏在左侧/右侧

显示当前浏览进度

设置侧边栏社交链接

设置头像

网站图标设置

设置标签云

设置 RSS

发布博客

创建github.io仓库

配置SSH密钥

修改博客配置文件_config.yml

发布到GitHub

插入图片：图床

绑定域名

常用Hexo命令

修改博客配置文件`_config.yml`