自己在学习的过程中，积累了大量的学习材料和笔记。对于增量学习过程，这些学习材料和笔记应该得到较好的组织，而且有些内容很容易因为不常使用而忘记。所以将其进行有条理的整理，便于进行随时查阅，是非常有必要的。
显然，搭建一个个人博客是一个比较合适的选择。我希望我的个人博客能够满足下面的特点：
- 漂亮，好看，逼格满满。
- 拥有足够的表现力，可以满足我的多种需求（比如学习笔记、论文笔记等）。
- 可以自动化处理多种格式的文件（比如
.ipynb和.Rmd，这些文件是我学习python和R时常使用的格式）。 - 可以进行自定义修改。
经过一番的折腾，我选择了vscode + Hexo + pandoc + github page + 脚本辅助的模式。我希望它能够满足我的以上的需求：
- vscode借助其各种插件（vim、Paste Image等）可以实现舒适的文本编辑体验。
- Hexo有各种漂亮的主题，简单的操作就可以定制化一个漂亮的个人博客；Hexo也有各种js脚本制作的插件，可以实现更多的功能以（字数统计、词云、插入音乐等）。
- pandoc版的markdown拥有比传统markdown更多的语法，更强的表现力。
- github page提供了免费的静态网页托管站点，而且依托其issue还可以增加评论功能。
- 通过python、js等脚本语言，可以进一步扩宽Hexo的功能（编写新的Hexo脚本），这样我们可以将更多类型的文本整合到博客系统中，并且进行高度的自定义。
现在，我将我搭建博客的全过程进行记录，以便于发现问题和总结，并探索一个快速的、可重复的操作步骤。
第一部分 依赖安装
1. git安装
对于linux系统，使用root权限下的包管理器安装即可；对于windows，使用可执行安装文件，一步一步根据引导即可完成安装。
2. node.js安装
如果是windows系统，同样使用引导界面安装即可。
如果是linux系统，除了使用包管理器安装以外，还可以使用下面的方式（不需要root权限，便于管理）:
- 从node官网中下载linux的2进制安装包；
tar -Jxvf node-v12.16.3-linux-x64.tar.xz，解压；- （创建
.local/bin，没有必要将这个路径加入到环境变量中，其默认就在环境变量中），将bin/node（别忘了npm和npx）软连接到.local/bin中； node -v查看是否成功。
3. Hexo安装
Hexo依赖于git和node.js，其作为node.js的一个软件包存在的，可以使用npm进行安装管理。
这里需要介绍以下
npm的规则，其默认是局部安装模式。如果使用全局安装模式（-g），则相关内容会被安装到prefix/lib/node_modules中（可以使用npm help npm来查看，windows是在C盘下面）。如果是局部安装模式，则相关内容会被安装到当前的文件夹下的node_modules中。
为了提高npm的安装速度，可以设置一下淘宝镜像或使用cnpm，然后全局安装hexo-cli（全局安装可以使得我们在任何位置使用hexo命令）：
npm config set registry https://registry.npm.taobao.org
npm install hexo-cli -g注意，如果在linux上解压二进制安装包安装的node.js，则其全局安装位置可能并不在环境变量中，需要手动再将hexo加入环境变量才好使用。
4. Pandoc部分
其安装和node.js的安装方式类似，比照其安装即可。
5. vscode
vscode的安装不再赘述，这里侧重于工作流程、配置和一些好用的插件。
整个工作流程可以是这样的：
- 直接在
_posts文件夹下创建工作环境，编辑markdown文件，需要导入图片的时候，就在其同级目录下创建一个同名文件夹，将图片放入其中来引用即可（使用Paste Image插件可以自动创建这个目录）。 - 因为所有的markdown文件都必须在
_post目录下，所以为了容易区分，文件命名很重要，可以使用-来增加可读性，比如关于pytorch的学习可以使用python-pytorch-xx、论文的阅读总结可以使用paper-xx。
5.1 Paste Image
其作用是可以将剪切板中的图片直接放入markdown中（快捷键为C-A-v），并保存到指定的文件夹下。我对此插件进行了下列配置：
保存剪切板图片的时候，使用当前正在编辑的文件的名称作为图片文件名称的前缀，使用时间作为其名称的主题；
设置其保存路径为当前文件同级目录下的同名文件夹；
在保存图片的时候，会出现vscode input box，从而可以更改路径；
第二部分 配置博客
本次博客配置使用的主题为hexo-theme-matery，其有比较全面的中文配置说明。另外，博客的配置还参考了两位大佬 -- godweiyang和钦の念的配置过程，受益匪浅。
另外，在配置过程中，为了添加更多的功能，安装了众多的hexo插件，这些插件都集中记录在此：
# --save表示安装使用依赖
npm install hexo-deployer-git --save # 用于进行git部署
npm install hexo-wordcount --save # 统计文章字数
npm install gitalk --save # gitalk评论系统
npm install valine --save # valine评论系统
npm install hexo-prism-plugin --save # 代码高亮
npm install hexo-generator-search --save # 搜索
npm install hexo-permalink-pinyin --save # 汉字转拼音
npm install hexo-filter-github-emojis --save # emojis表情
npm install hexo-generator-feed --save # RSS订阅
npm install https://github.com/xcodebuild/hexo-asset-image --save
npm install hexo-renderer-pandoc --save # 一个新的markdown渲染器
npm install hexo-helper-live2d --save # 动画人物支持
npm install live2d-widget-model-shizuku --save # 动画人物支持
npm install hexo-generator-sitemap --save # 添加站点地图
npm install hexo-lazyload-image --save # 图片懒加载
npm install hexo-renderer-mathjax --save # 解析公式另外，因为我们想要使用pandoc作为markdown的渲染器，所以就必须把默认的渲染器卸载
npm uninstall hexo-renderer-marked --save
npm uninstall hexo-math --save # 一般来说这个插件是没有安装的，但为了hexo-renderer-mathjax可以工作，最好确认一下1. 创建站点
在站点文件夹下使用
hexo init命令；别忘了使用
npm install来安装一些必要的组件；现在可以通过
npm g && npm s来打开本地服务器，然后连接http://localhost:4000/来查看是否成功：
2. 博客部署至github
创建一个名为
luyiyun.github.io的repository；配置SSH key（为了不用每次都输密码）；
安装
hexo-deployer-git插件，更改博客_config.yml文件，添加deploy项：
运行以下的命令：
hexo clean && hexo g && hexo d然后打开
luyiyun.github.io，看是否部署成功：
以上在钦の念的博客中有更加详细的叙述。
2. 申请个人域名
申请一个新的域名
luyiyun.online（腾讯云），别忘了添加一条解析记录使之能够正常解析；在
/source目录下，新建CNAME文件，然后写上域名，保存，然后hexo g && hexo d部署；CNAME文件会被放到public中并一并上传到github上；查看repository的settings，发现以下结果，代表可正常使用：
可以使用这个域名来打开看看了：
3. 博客配置文件
博客的配置文件是根目录下的_config.yml，现在我们对其中的内容依次进行处理：
站点基本信息配置：
网站的url：
分页，设置这个是为了适配hexo-theme-matery：
主题，这里使用hexo-theme-matery：
我们在
/themes文件夹下使用git来下载该主题：git clone https://github.com/blinkfox/hexo-theme-matery.git渲染器，这里使用pandoc作为渲染器，自然我们需要安装hexo-renderer-pandoc插件。
pandoc的缺点在于比较笨重，如果只是为了渲染markdownd的话，有点杀鸡用牛刀的感觉。但对于我而言，有以下几点原因，使得我选择了它：
- 更多可以使用的语法，有更强的表现力（前面提到了）。
- 我希望兼容
Rmarkdown，其中其使用的就是pandoc语法。 - pandoc直接兼容公式渲染，我们只需要改一个好用的CDN链接即可。
但其和下面讲到的语法高亮插件
hexo-prism-plugin有冲突，所以需要进行一些修改。在
node-modules/hexo-renderer-pandoc/index.js中，找到：var args = [ '-f', 'markdown-smart'+extensions, '-t', 'html-smart', math]将其改为
var args = [ '-f', 'markdown-smart'+extensions, '-t', 'html-smart', math, "--no-highlight"]即将pandoc自己的代码高亮关掉，不然其会影响到后面
hexo-prism-plugin的使用。代码高亮，使用
hexo-prism-plugin，并在_config.yml中加入以下内容：
前面有默认有
highlight: enable的配置，所以这两个只保留一个即可。hexo-prism-plugin使用的是prism来提供代码高亮。这个是一个在网页中提供代码高亮的解决方案，为几乎所有的语言提供了对应的代码高亮，而且还提供了一些插件，可以做到一键复制、增加行号等操作。prism需要渲染后的网页中的代码块以下面的形式存在：
<pre> <code class="langauge-python"> import numpy as np np.random.rand(10) </code> </code>hexo-prism-plugin可以将下面的形式更改为上面的：<pre> <code class="python"> import numpy as np np.random.rand(10) </code> </code>而pandoc渲染后是下面的形式
<pre code="python"> <code> import numpy as np np.random.rand(10) </code> </code>所以我们需要更改
node-modules/hexo-prism-plugin/src/index.js中的正则表达式const regex = /<pre><code class="(.*)?">([\s\S]*?)<\/code><\/pre>/igm;改为
const regex = /<pre class="(.*)?"><code>([\s\S]*?)<\/code><\/pre>/igm;这样就可以了。
搜索，使用
hexo-generator-search插件，并在配置文件中加入：
中文链接转拼音，使用
hexo-permalink-pinyin：
添加对
emoji表情的支持，hexo-filter-github-emojis
添加RSS订阅支持，
hexo-generator-feed，
出现下面情况，说明RSS配置成功：
图片路径改为绝对路径，需要安装
hexo-asset-image，并将post_asset_folder改为true。设置
_config.yml中的post_asset_folder: true，这意味着使用hexo new <blog>时，在_posts中不只生成了一个md文件，而且还出现了一个同名文件夹，用来放md文件引用的内容。我们可以在md文件中使用但我们不会这样做，因为如此引入图片，在编写博客的时候是无法预览的，我们应该使用来引入图片。的格式来引入。该插件使得我们就算这样引入图片，hexo也可以正确读取并处理它。安装
hexo-renderer-pandoc，提供pandoc语法支持。添加动漫人物，需要安装两个插件，并在根目录配置文件中添加下面的配置：
live2d: enable: true scriptFrom: local pluginRootPath: live2dw/ pluginJsPath: lib/ pluginModelPath: assets/ tagMode: false log: false model: use: live2d-widget-model-shizuku display: position: right width: 150 height: 300 mobile: show: true react: opacity: 0.7SEO配置
SEO（Search Engine Optimization），即搜索引擎优化：
搜索引擎优化是一种通过了解搜索引擎的运作规则来调整网站，以及提高目的网站在有关搜索引擎内排名的方式。
验证网站。如果在谷歌搜索
site:luyiyun.online查不到，这说明未被收录，则需要前往Google Search Console，进行验证：
方式和添加解析是一样，在腾讯云的控制台，添加DNS解析记录即可，其中记录值使用Google Search Console提供的值：
等待几分钟后，在Google Search Console中进行验证，通过即可。
添加站点地图作用是告诉搜索引擎你的网站结构等信息，让搜索引擎更智能抓取内容。需要安装
hexo-generator-sitemap插件，并在根目录的配置文件下添加：
当
hexo g后，public中出现了sitemap.xml文件。我们可以再进入Google Search Console，然后把这个站点地图（是这个sitemap文件）添加进去，
简化路径：
4. 新建主题文章模板
建议将/scaffolds/post.md修改至：
---
title: Hexo博客搭建
date: 1589105282000
author: Lu Yiyun
img: "文章特色图，空则hexo-theme-matery自动进行填补"
coverImg: "文章在首页轮播封面时显示的图片，默认使用文章特色图"
top: true
cover: true
toc: true
mathjax: true
summary: "自定义文章的摘要，不然自动从文章正文中吸取"
categories:
- A
- B
tags:
- a
- b
keywords:
---5. 新建工具页面
hexo new page "categories"
hexo new page "tags"
hexo new page "about"
hexo new page "contact"
hexo new page "friends"并都将其中的index.md文件改写为以下格式：
---
title: categories
date: 2020-05-10 13:25:48
type: "categories"
layout: "categories"
---然后手动再/source/下创建一个404.md，并填写一下内容：
---
title: 404
date: 2019-07-19 16:41:10
type: "404"
layout: "404"
description: "你来到了没有知识的荒原 :("
---并在/themes/hexo-theme-matery/layout/下新建404.ejs，并添加以下内容：
<style type="text/css">
/* don't remove. */
.about-cover {
height: 75vh;
}
</style>
<div class="bg-cover pd-header about-cover">
<div class="container">
<div class="row">
<div class="col s10 offset-s1 m8 offset-m2 l8 offset-l2">
<div class="brand">
<div class="title center-align">
404
</div>
<div class="description center-align">
<%= page.description %>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
// 每天切换 banner 图. Switch banner image every day.
$('.bg-cover').css('background-image', 'url(/medias/banner/' + new Date().getDay() + '.jpg)');
</script>这样，我们就添加了一个404页面了。
6. 主题配置文件
在/themes/hexo-theme-matery下有一个_config.yml文件，用来控制主题的诸多属性。
第一部分配置菜单导航，icon可以在Font Awesome中找：
站点运行时间：
首页配置，包括封面轮播图、“梦想”和音乐：
配置logo、favicon：
联系方式：
文章目录设置：
代码块部分：
打赏部分，记得替换为自己的二维码：
复制时追加版权信息：
激活mathjax：
注意需要安装
hexo-renderer-pandoc，并卸载hexo-renderer-marked，然后安装hexo-renderer-mathjax插件才行。开启文章信息，需要安装
hexo-wordcount插件：
"关于"页面的配置：
评论配置，这里会开启两个评论：基于github issue的gitalk和无后端的valine：
gitalk，安装相关插件
gitalk：我们需要创建一个新的github repository来储存评论：
开启issue功能（默认开启）：
注册一个github application：
并得到Client ID和Client Secret：
将这些信息配置到
_config.yml文件中：
最终效果：
valine，需要先安装插件
valine：首先我们需要注册一个LeanCloud账户，并完成实名认证；
创建一个应用，然后找到其ID和Key：
将这些信息配置到
_config.yml文件中：
效果：
我们可以在LeanCloud中对这些评论进行管理：
7. 提高加载速度
可以使用Google PageSpeed Insights来对网站的速度进行测试，并找到其瓶颈所在，其他的各种测速工具可以见钦の念的博客。
7.1 图片懒加载
第一种可以提高速度的方式是进行图片的懒加载，安装hexo-lazyload-image，并在站点配置文件中加入：
lazyload:
enable: true
onlypost: false # true则只会懒加载文章中的图片，logo头像什么的不会
loadingImg: ./medias/loading.gif此插件与hexo-asset-image似乎不兼容，未解决。
7.2 gitee和github双线部署
未完待续...
