【NAS】Hexo+Github 搭建博客&基础配置
【又是一篇旧文，记录使用 Hexo+Github Pages 配置博客的过程，正如当时就坦言的：「由于自己能力有限而且也确实太懒，在过程中参考了网上很多教程，多把自己用到的部分直接转了过来，在文中有链接说明，侵删」；更直白的讲，这里仅仅是把自己配置过程中参考的有用信息摘录了下来，只能算作「笔记」，但考虑还是花了很多心血或许可以帮到有需要的人，暂且存留下来。】
hexo 文档：https://hexo.io/zh-cn/docs/
相关概念
什么是 Hexo
这是一套使用第三方主题模板+自己的博客文章（.md文件）+网站信息配置，通过Node.js进行本地连接混合生成一套静态网站的工具链套件
也就是说，通过Hexo创建的博客是一个仅提供在线浏览功能的静态博客，不存在后台编辑功能，添加新博客时需要在自己开发机上编写新博客文章（.md文件），再次生成一个新版本网站，上传并替换，从而实现新文章发布
优势是可使用网上各种免费的静态网站空间，节省服务器租金，省去维护服务器的工作，不需担心后台被黑导致数据丢失，无痛随时全站更换主题…
劣势是不能在公司电脑上随时在线更新博客，除非带着Hexo博客源码…
和需要自己保管好Hexo博客源码，否则数据丢了看上去有点难重新把博文整理下来
什么是 Node.js
这就是一套SDK，一套使用JavaScript编写的，包含多个应用级功能模块，可用于一般应用开发的工具包
JavaScript的运行需要一个JS解释器实时运算每一句JavaScript代码，一般情况下网页上的JS代码段会使用浏览器提供的解释器运行，而Node.js使用了谷歌开源的一个名为V8引擎的良心产品（JS解释器），实现脱离浏览器下运行JavaScript代码
什么是 nvm
nvm，Node Version Manager 是一个开源的Node.js版本管理Bash工具，可方便的在Bash环境下下载、更新、管理多个版本并存的Node.js，并选择性地使用其中一个
什么是 GitHub Pages
GitHub Pages 是GitHub提供的个人静态主页网站托管服务，原目的是用于提供你在GitHub上托管的所有开源项目介绍，后来也推荐作为个人博客之类的用途
优势是使用简单方便，免费高效实时，可用空间高达1G，可绑定自定义域名，原生自带GitHub级别防护…好像无敌了
网站搭建&基础配置
原本尝试在 Synology 上进行安装，但不知何原因无法安装 Hexo，Docker 又没有使用过，在课上搞了半天未果，遂放弃而采用了在本地部署的方案。在 mac 上安装还是比较顺畅的，主要参考以下几篇博文：
- 使用Hexo搭建GitHub博客（2018年Mac版）
- GitHub+Hexo 搭建个人网站详细教程
- 关于HEXO搭建个人博客的点点滴滴 一篇较为详尽的文章，留待参考
安装Hexo
npm install -g hexo-cli
为了便于发布到GitHub上，建议同时安装hexo-deployer-git
npm install hexo-deployer-git --save
初始化，建立博客项目
选定博客网站项目程序文件的存放位置，如~/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中指定使用该主题：
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 hemes extlayout\_macro的sidebar.swig文件，找合适的地方添加刚刚复制的外链代码。
搜索功能：使用 LocalSearch
安装相关插件
安装搜索插件： hexo-generator-searchdb
在博客根目录下执行以下命令：
$ npm install hexo-generator-searchdb --save
配置博客
安装完成，编辑博客配置文件：_config.yml
search:
path: search.xml
field: post
format: html
limit: 10000
配置主题
Next 主题自带搜索设置，编辑主题配置文件：_config.yml
找到文件中 Local search 的相关配置，设为 true
# 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 前面注释 # 去除即可。
菜单设置
可以看到目前为止我们的主题菜单中只有两个默认的选项Home和Archive，我们还可以添加tag、about、category等选项。
我们先在HexoBlog hemes
ext下找到 主题配置文件 _config.yml中找到Menu Settings。
阅读注释，我们可以知道Menu Settings中的Usage采用Key: /link/ || icon的格式。
Key是菜单项 (home, archives, etc.)，我们可以通过HexoBlog hemes
extlanguages中的zh-CN.yml文件查看menu中是否有对应项的翻译。
例如若该文件中有tags项，那么博客中对应处就会显示对应翻译标签，若没有则会采用原单词tags，当然你也可以自行修改。
/link/在 || 之前，指网站中该菜单项的链接。
icon 在 || 之后，指该菜单项的图标，对应 Font Awesome 中图标的名字。
而 icons: true可用于控制是否显示图标，你可以设置成 false 来去掉图标。
而 badges就是显示该菜单项内子类的数目。
在菜单图标开启的情况下，如果菜单项与菜单未匹配（没有设置或者无效的 Font Awesome 图标名字） 的情况下，
NexT将会使用?作为图标。
添加标签项
我们先把 tags 前的注释符 # 删了。
然后创建一个tags页面：在HexoBlog目录下右键打开Git Bush，输入hexo new page tags：
$ hexo new page tags
INFO Created: C:DHexoBlogsource agsindex.md
这时候你的source/下会生成 tags/index.md 文件，我们将其打开，然后在最后面加上两行：
type: "tags"
comments: false
这时候你要为你的文章打上标签就可以在文章的头部写上：
tags:
- Tag1
- Tag2
- Tag3
添加分类和自我介绍
同上，先把 categories about 前的注释符 # 删了，然后创建页面
hexo new page categories
hexo new page about
打开categories/index.md 和 about/index.md 文件，在最下面加上分别两行：
type: "categories"
comments: false
type: "about"
comments: false
这时候你就可以给你的文章归类存档了，使用方式就是在你的文章的头部加上：
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，将想要的方案打开copysidebar: position: left #position: right -
Mist或Muse方案
打开next/source/js/src/motion.js，查找paddingRight，把所有（2个）PaddingRight更改为paddingLeft即可。
打开next/source/css/_custom/custom.styl，添加如下内容：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
将照片存在目录 HexoBlog hemes
extsourceimages下，然后取消 url的注释，并在后面填入照片的路径。
rounded选项决定照片框是圆还是方的。
opacity 调节头像的不透明度。
rotated 设置鼠标移动到头像上时是否旋转。
网站图标设置
我们博客的默认图标是H，不过Next支持修改图标
-
下载16x16以及32x32大小的PNG格式图标，置于
/themes/next/source/images/下 -
打开
themes/next/下的_config.yml，查找faviconcopyfavicon: 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的路径为下载的图标路径
设置标签云
设置 RSS
NexT 中 RSS 有三个设置选项，满足特定的使用场景：
复制
# false：禁用 RSS，不在页面上显示 RSS 连接.
# 留空：使用Hexo生成订阅源并自动插入链接。你可能需要先安装插件: `npm install hexo-generator-feed --save`.
# 具体的链接地址：适用于已烧制过 Feed 的情形.
rss:
具体操作如下：
首先在站点根目录下执行下列命令安装插件：
复制
npm install hexo-generator-feed --save
更改 主题配置文件，设定 rss 字段的值如下：
复制
rss: /atom.xml
阅读注释，我们可以知道Menu Settings中的Usage采用Key: /link/ || icon的格式。
Key是菜单项 (home, archives, etc.)，我们可以通过HexoBlog hemes
extlanguages中的zh-CN.yml文件查看menu中是否有对应项的翻译。
例如若该文件中有tags项，那么博客中对应处就会显示对应翻译标签，若没有则会采用原单词tags，当然你也可以自行修改。
/link/在 || 之前，指网站中该菜单项的链接。
icon 在 || 之后，指该菜单项的图标，对应 Font Awesome 中图标的名字。
而 icons: true可用于控制是否显示图标，你可以设置成 false 来去掉图标。
而 badges就是显示该菜单项内子类的数目。
在菜单图标开启的情况下，如果菜单项与菜单未匹配（没有设置或者无效的 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文件，存储预备使用的个人域名，如：
# 在source目录下
echo story.wavky.com > CNAME
清理Hexo缓存并重新生成发布
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 #清除缓存，若是网页正常情况下可以忽略这条命令