自己在学习的过程中,积累了大量的学习材料和笔记。对于增量学习过程,这些学习材料和笔记应该得到较好的组织,而且有些内容很容易因为不常使用而忘记。所以将其进行有条理的整理,便于进行随时查阅,是非常有必要的。
显然,搭建一个个人博客是一个比较合适的选择。我希望我的个人博客能够满足下面的特点:
- 漂亮,好看,逼格满满。
- 拥有足够的表现力,可以满足我的多种需求(比如学习笔记、论文笔记等)。
- 可以自动化处理多种格式的文件(比如
.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文件中使用但我们不会这样做,因为如此引入图片,在编写博客的时候是无法预览的,我们应该使用![](name.jpg)
来引入图片。![](<blog>/name.jpg)
的格式来引入。该插件使得我们就算这样引入图片,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.7
SEO配置
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双线部署
未完待续...