使用Hexo和Github搭建博客

引子

本来博客存在ide.coding.net里面,建了个工作空间什么的。然后。。。有一天他告诉我他要转移到腾讯云上面去。。。然而转移过去我的文件全是发布用的。。。hexo环境,配置文件啥的都没了。。。于是我就转战本地搭建,利用github仓库存储。然后。。。配置真的麻烦。。。于是我就把攻略写在这里,一方面帮助其他人,另一方面防止我下次要的时候又忘记了。。。


基本安装和配置

配置需求环境

安装Node.js

这个网址下载node.js并安装

进去以后应该是这么个界面

nodejs.org

左边是稳定版,右边是最新版。个人认为下载左边的就可以了。。。(这里是不是讲得太详细了一点╮(╯▽╰)╭行吧我后面快一点好了)

安装Git

然后要安装git!从这里下载,具体我就不讲了。。。

安装成功的象征就是在电脑上任何位置鼠标右键能够出现如下两个选项

选项

那么大概就好了。。。

在github上创建项目仓库

注册一个github账户

这个不用讲了吧。。。(不会的自己面壁)

新建一个仓库

从下图的位置进入

下图

(我是安装了汉化插件的,所以菜单栏为中文,就算没有装插件,位置就是那里嘛对吧)

然后在这里

这里

注意在新建仓库的时候最好项目名称设置为账户名.github.io,不然据说接下来会有很多麻烦(本人没有试过。。。),然后注意要创建一个README。

像这样

安装Hexo

安装

(提示:这一路会有很多的WARN,但是不要紧,这不会影响的)

在你认为合适的地方创建一个文件夹,例如我选择在D盘创建blog文件夹(当然你可以在O盘创建一个f**k hexo文件夹)然后打开你新建的空文件夹,在里面右键,选择”Git Bash Here”,在打开的git中输入 npm install hexo -g ,开始安装Hexo(漫长的等待)。

安装

(本人因为已经设置好blog这个文件夹了,所以只能再弄一个hexo文件夹作为演示)

输入hexo -v ,检查hexo是否安装成功。(出现版本信息即为成功)

然后输入hexo init 初始化博客文件夹。(依然是漫长的等待)(于是我就放弃了。。。感觉后面的截图之路会越来越艰辛。。。)

最后应该会有一个”Start blogging with Hexo!”。这算是成功了。

然后输入npm install ,安装必要的组件

测试

然后呢。。。我们可以初次体验一下Hexo

输入hexo g

然后输入hexo s 开启本地服务器,在浏览器输入给出的网址(应该是localhost:4000)进行访问。(注意访问期间最好不要修改,虽然本人经常这么干好像也没什么问题)

如果出现一个大标题为 Hexo 的网页那么就是成功了。

将本地的Hexo与Github仓库联系起来

生成SSH密钥

我们需要生成SSH密钥。在git窗口中,输入ssh-keygen -t rsa -C "你的邮箱" (这里我不是很确定你的邮箱是不是应该填github的注册邮箱,不过保险起见还是这么干吧),然后他会询问你存储地址和密码,可以一路回车下去采用默认地址和空密码,也可以自定义(默认路径是C:\Users\用户名\ .ssh)

输入eval "$(ssh-agent -s)",添加密钥到ssh-agent。

再输入ssh-add ~/.ssh/id_rsa ,添加生成的SSH key到ssh-agent。

加入SSH密钥到你的Github账户中

登陆你的Github账户,点击头像,打开菜单,点击Settings,选择左侧的SSH and GPG keys,进入以后应该是如下图的。单击”New SSH key”

这里是下图

随便写一个什么title,像blog之类的,然后把刚才保存的id_rsa.pub里面的内容复制进去(用notepad++之类的工具打开来)。

测试

然后在git窗口输入ssh -T git@github.com ,测试ssh是否添加成功。如果看到HI后面是你的用户名,就说明成功了。

Like this

(注意:这里可能会提示the authenticity of host "github.com" can't be established,没有关系,直接输入yes并回车即可)

text
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
问题:假如ssh-key配置失败,那么只要以下步骤就能完全解决

首先,清除所有的key-pair
ssh-add -D
rm -r ~/.ssh
删除你在github中的public-key

重新生成ssh密钥对
ssh-keygen -t rsa -C "xxx@xxx.com"

接下来正常操作
在github上添加公钥public-key:
1、首先在你的终端运行 xclip -sel c ~/.ssh/id_rsa.pub将公钥内容复制到剪切板
2、在github上添加公钥时,直接复制即可
3、保存

修改本地博客连接的仓库地址

添加完成以后,点击头像,打开菜单,选择你的仓库,进入新建的仓库,然后复制这个项目的地址(注意用SSH,如果不是要切换成SSH,不要用HTTPS)

像这样

在你的博客文件夹中,找到_config.yml文件,打开它,在末尾修改repo值:

1
2
3
4
deploy:
type: git
repository: git@github.com:***/***.github.io.git
branch: master

中间的repository即为刚才复制的SSH。保存。

新建一篇博客进行尝试

生成及部署

写新文章可以使用命令hexo new post "博客名"(post似乎可以省略)

例如我们写一篇名为test的博文。

在git窗口输入hexo new "test"

然后你就可以在你的博客文件夹\sourse\_post下看到新创建的”test.md”文件(所以直接在这个文件夹下新建一个.md文件可能也可以)。然后用你的Markdown编辑器编辑一下这篇博文(悄咪咪安利一下typora,很好用噢),保存好。

对了,在生成以及部署文章之前,要先安装一个扩展。在git窗口输入npm install hexo-deployer-git --save ,即可安装。

安装完成之后,输入命令hexo g --d ,就可以生成以及部署文章了。

激动人心的查看

访问你的地址: https://用户名.github.io ,应该就可以看到你的文章了。


博客美化

先放一个“官方”教程,可能比我写的高到不知道哪里去了~~~

NexT主题

Hexo默认的主题比较丑。。。诸位可以在这里寻找你喜欢的主题。个人推荐NexT主题。这里要讲的也是这个主题的相关配置

安装主题

安装过程十分简洁,只要在博客根目录右键打开Git,输入以下命令

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

以上代码的意思是从 https://github.com/iissnan/hexo-theme-next将next下载到当前目录下的themes里面的next文件夹中。

启用主题

修改站点配置文件(根目录下的_config.yml)

1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

也就是把theme改成next

选择Scheme

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

Muse - 默认 Scheme,这是 NexT 最初的版本,黑白主调,大量留白
Mist - Muse 的紧凑版本,整洁有序的单栏外观
Pisces - 双栏 Scheme,小家碧玉似的清新
Gemini - 左侧网站信息及目录,块+片段结构布局

Scheme 的切换通过更改theme文件夹中的主题配置文件_config.yml,搜索 scheme 关键字。 你会看到有四行 scheme 的配置,将你需用启用的 scheme 前面注释 # 去除即可。(本人使用Gemini)

设置语言

打开站点配置文件,找到 #Site 下的 language ,将他改为 zh-CN (注意,这个地方网上大多数博客都会说要改成 zn-Hans ,但实际上最新版本的NexT主题的语言应该用zh-CN)

像这样languages

PS:这里提一下,你使用hexo s预览的时候,你会发现是设置了语言之后界面还是英文,这个时候不要慌,使用hexo clean清理下database文件夹以及public文件夹就行了。然后再使用hexo s 预览。事实上,这个方法在遇到很多问题的时候都是通用的。

设置标签界面

新建一个tags页面

首先创建一个新的page作为tags页

1
hexo new page tags

这时在博客根目录中的source文件夹中会新生成一个文件夹tags,在这个文件夹中会有一个文件index.md,打开index.md

编辑tags页面

对index.md上方的内容进行编辑。将title设为标签(或者其他什么标题都可以。。。),然后再加一行:type: tags即可。

设置动态背景

总共有四种背景,我分别讲一下安装方法

canvas_nest

话不多说,先放图片

如图

是这么个东西。。。

安装方法:

切换目录到themes/next

1
cd themes/next

官网说要通过ls检查以下目录内的内容(其实没什么必要。。。),那我就贴一下吧

1
ls

应该返回的内容是如下:

1
bower.json  _config.yml  docs  gulpfile.coffee  languages  layout  LICENSE.md  package.json  README.md  scripts  source  test

然后输入命令克隆包

1
git clone https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest

接着打开主题配置文件_config.yml,找到canvas_nest,把他设为true即可。

three_waves

还是先上图

图片

就是个会波动的点阵。。。

安装方法:

切换目录到themes/next

1
cd themes/next

还是ls以下好了

应该返回如下内容

1
bower.json  _config.yml  docs  gulpfile.coffee  languages  layout  LICENSE.md  package.json  README.md  scripts  source  test

然后输入如下代码克隆包

1
git clone https://github.com/theme-next/theme-next-three source/lib/three

接着打开主题配置文件,找到three_waves项目,将其设置为true即可。

canvas_lines

就是我的博客的背景,就不放图了。

安装方法和three_waves一模一样,就是最后不是把three_waves改为true,而是把canvas_lines改为true

canvas_sphere

上图上图!

picture!

(看到箭头指着的后面那个球了么( ̄_ ̄|||)就是他)

安装方法还是和three_waves一样,只不过最后改的是canvas_sphere而不是three_waves

安装完后必看!(重要)

当你激动地把自己的博客背景换成了动态背景后,不要忘了输入以下命令

1
cd ../../

把目录切换到博客根目录,要不然接下来的hexo命令就没法执行了。

设置页面透明度

NexT默认的背景是不透明的,然而如果我们设置了动态背景,则会被遮住。因此我们要修改Hexo站点的页面透明度。主要通过修改CSS样式来实现(当然这里只讲Gemini的样式修改,其他主题应该是类似的)。

文章部分

打开位于目录Hexo根目录/themes/next/source/css/_schemes/Gemini的index.styl文件,进行如下修改:

1
2
3
4
5
6
7
8
// Post & Comments blocks.
.post-block {
padding: $content-desktop-padding;
- background: white;
+ background: rgba(255,255,255,0.7);
box-shadow: $box-shadow-inner;
border-radius: $border-radius-inner;
}

(注意!这里的减号的意思就是后面的内容要 删掉,加号的意思就是要加上后面的内容!下面也是一样!)

阅读全文按钮

文件位置:Hexo根目录/themes/next/source/css/_variables下的Pisces.styl

1
2
3
4
5
6
7
8
// Button
$btn-default-radius = 2px
- $btn-default-bg = white
+ $btn-default-bg = rgba(255,255,255,0.5)
$btn-default-color = $text-color
$btn-default-border-color = $text-color
$btn-default-hover-color = white
$btn-default-hover-bg = $black-deep

分页部分

文件位置:Hexo根目录/themes/next/source/css/_schemes/Gemini下的index.styl

1
2
3
4
5
6
7
8
9
10
11
12
13
// Pagination.
.pagination {
.prev, .next, .page-number {
margin-bottom: initial;
top: initial;
}
margin: sboffset 0 0;
- background: white;
+ background: rgba(255,255,255,0.7);
box-shadow: $box-shadow;
border-radius: $border-radius;
padding: 10px 0 10px;
}

评论区部分

文件位置:Hexo根目录/themes/next/source/css/_schemes/Gemini下的index.styl

1
2
3
4
5
6
7
8
9
10
// Comments blocks.
.comments {
padding: $content-desktop-padding;
margin: initial;
margin-top: sboffset;
- background: white;
+ background: rgba(255,255,255,0.7);
box-shadow: $box-shadow;
border-radius: $border-radius;
}

侧栏菜单部分

文件位置:Hexo根目录/themes/next/source/css/_schemes/Pisces下的_layout.styl

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.header-inner {
position: absolute;
top: 0;
overflow: hidden;
padding: 0;
width: $sidebar-desktop;
- background: white;
+ background: rgba(255,255,255,0.7);
box-shadow: $box-shadow-inner;
border-radius: $border-radius-inner;

+desktop-large() {
.container & { width: $sidebar-desktop; }
}
+tablet() {
position: relative;
width: auto;
border-radius: initial;
}
+mobile() {
position: relative;
width: auto;
border-radius: initial;
}
}

个人资料界面

文件位置:Hexo根目录/themes/next/source/css/_schemes/Pisces下的_sidebar.styl

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.sidebar-inner {
//padding: 20px 10px 0;
box-sizing: border-box;
width: $sidebar-desktop;
color: $text-color;
- background: white;
+ background: rgba(255,255,255,0.7);
box-shadow: $box-shadow;
border-radius: $border-radius;
if (hexo-config('motion.enable') and hexo-config('motion.transition.sidebar')) { opacity: 0; }

&.affix {
position: fixed;
top: $sidebar-offset;
}

为博客添加搜索功能

安装插件

在git窗口中输入命令npm install hexo-generator-searchdb --save即可。

修改站点配置文件

在站点配置文件最下面加入以下代码:

1
2
3
4
5
6
# Search
search:
path: search.xml
field: post
format: html
limit: 10000

修改主题配置文件

如下图,在主题配置文件中找到local_search项目,将他的enable改为true

如图

为博客添加评论功能

评论功能还是挺重要的嘛。。。

申请应用

打开这个网址,单击右上角的控制台,注册一个账号,然后登录。点击创建应用,命名为blog comment system之类的名字(啥都行吧,无所谓啦)。然后应用的计价方式嘛,我穷,选个开发版就行了,而且一般博客也够用了。当然如果你家里有矿那选商用版也无所谓。。。然后点击创建就完了。

将应用添加至博客

然后点击你创建的应用的名字,进入管理页面。(我重新创建了一个作为演示)

点击左侧的设置,选择子菜单下的应用Key,可以看到里面有一个App ID和一个App Key,如下图

图

复制App ID和App Key(当你把鼠标放到文本框上面的时候,好像显示不可复制,但其实那都是fake的),然后打开主题配置文件,搜索valine,将其enable设为true,然后把你的app id和你的app key分别粘贴到下方的appid和appkey后面。

如图

这就是我的配置。可以看到有一个placeholder的选项,后面的字符串就是评论框在没有输入的时候呈现的灰色提示字,可以自行修改。

将域名添加至应用安全域名

如图

如图打开此设置菜单,将你的域名添加至Web 安全域名中,比如你现在可能是***.github.io(当然你可能已经绑定了自己的域名,那么就加入自己的域名),然后保存就好了。

添加live2d模型

live2d模型真的很好看啊。。。一定要加【手动doge

安装npm包

在git窗口输入命令npm install --save hexo-helper-live2d即可。

修改站点配置文件

打开站点配置文件_config.yml,在下方加入如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
live2d:
enable: true
scriptFrom: local
pluginRootPath: live2dw/
pluginJsPath: lib/
pluginModelPath: assets/
tagMode: false
debug: false
model:
use: ***
display:
position: right
width: 100
height: 200
mobile:
show: true

上方的***是模型的名称。模型可以在这里参考。

例如我使用的是live2d-widget-model-haruto,所以我的这段代码就是

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
live2d:
enable: true
scriptFrom: local
pluginRootPath: live2dw/
pluginJsPath: lib/
pluginModelPath: assets/
tagMode: false
debug: false
model:
use: live2d-widget-model-haruto
display:
position: right
width: 100
height: 200
mobile:
show: true

和这个蓝孩纸一对(emm)的绿孩纸是live2d-widget-model-koharu

然后就完了。


其他配置

LaTeX公式支持

LaTeX公式是十分常用的工具,然而Hexo对LaTeX的支持却有点堪忧。我们通过如下方法使我们的博客支持LaTeX。

更换Hexo默认的Markdown渲染引擎

_在Latex公式中代表脚标,是非常常用的符号,而在Markdown中代表斜体,如果直接使用,将会产生公式无法渲染的问题,因为被Hexo强制渲染成了<em>标签。
如何解决呢?更换Hexo默认的Markdown渲染引擎!
Hexo默认的渲染引擎为hexo-renderer-marked,这里将其更换为hexo-renderer-kramed,该引擎在前者的基础上修复了一些bug,具体操作:

在git窗口输入如下命令

1
2
npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save

打开math开关

打开主题配置文件,找到”math”,把math下的”enable”开关设为

行内公式问题

执行上述操作后,虽然块状公式的渲染问题解决了,但发现行内公式仍然是老样子,无法成功渲染,这是因为hexo-renderer-kramed也有语义冲突的问题,这里我们直接修改转义即可。打开文件\node_modules\kramed\lib\rules\inline.js,修改其中一行(em开头的那行)

1
em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,

改成这样。

除此之外,如果在公式内连续使用两个花括号,会渲染失败。此时必须在两个花括号中间加一个空格,即可正常渲染。


-------------本文结束,感谢阅读-------------
0%