Hexo+Github构建博客

在开始构建博客前,你需要在Github拥有一个账号,之后新建一个存储库(比如:zhijiansd.github.io),这里我就不再赘述了.接下来,我们需要为GitHub添加SSH key.

配置SSH key

在本地创建秘钥,并将该秘钥复制下来

1
2
# ssh-keygen -t rsa -C "wangzhijiansd@qq.com"
# cat /root/.ssh/id_rsa.pub

登录GitHub进行配置

打开Github主页,依次点击Settings -> SSH and GPG keys -> New SSH key设置,自定义好Title,然后将上面复制的秘钥粘贴在Key下.

进行测试

1
# ssh -T git@github.com

如果提示Are you sure you want to continue connecting (yes/no)?,输入yes.看到如下信息说明SSH已配置成功:
Hi zhijiansd! You’’ve successfully authenticated, but GitHub does not provide shell access.

配置用户信息

1
2
# git config --global user.name "zhijiansd"
# git config --global user.email "wangzhijiansd@qq.com"

安装Hexo并下载Next主题

1
2
3
4
5
6
# yum -y install git nodejs	 
# npm install hexo-cli -g
# hexo init blog
# cd blog
# npm install
# git clone https://github.com/theme-next/hexo-theme-next themes/next

更多主题详见Hexo.

配置Hexo

更改默认主题为Next

1
# sed -i "s/landscape/next/g" _config.yml

###更改默认语言为汉语

1
2
# grep language _config.yml 
language: zh-CN

配置Next

更改Next主题外观

1
2
3
# grep scheme themes/next/_config.yml|grep Pisces 
scheme: Pisces
# Only fit scheme Pisces

设置菜单

1
2
3
4
5
6
7
# vim themes/next/_config.yml
menu:
home: / || home //首页
#about: /about/ || user //关于
tags: /tags/ || tags //标签
categories: /categories/ || th //分类
archives: /archives/ || archive //归档

创建标签文件夹并添加type

1
2
3
4
# hexo new page "tags"
# vim source/tags/index.md
type: "tags"
comments: false

创建分类文件夹并添加type

1
2
3
4
# hexo new page "categories"
# vim source/categories/index.md
type: "categories"
comments: false

创建归档文件夹并添加type

1
2
3
4
# hexo new page "archives"
# vim source/archives/index.md
type: archives
comments: false

设置头像

1
2
3
4
5
6
# mkdir source/images
# ls source/images/
avatar.jpg
# vim themes/next/_config.yml
avatar:
url: /images/avatar.jpg

请自行将头像图片上传至source/images/文件夹下

修改文章内链接文本样式

1
2
3
4
5
6
7
8
9
10
11
# vim themes/next/source/css/_common/components/post/post.styl
.post-body p a{
color: #0593d3; //原始链接颜色
border-bottom: none;
border-bottom: 1px solid #0593d3; //底部分割线颜色
&:hover {
color: #fc6423; //鼠标经过颜色
border-bottom: none;
border-bottom: 1px solid #fc6423; //底部分割线颜色
}
}

在文章末尾添加结束语

  • 新建并配置passage-end-tag.swig文件
1
2
3
4
5
6
# vim themes/next/layout/_macro/passage-end-tag.swig
<div>
{% if not is_index %}
<div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束,感谢您的阅读-------------</div>
{% endif %}
</div>
  • 在post.swig文件的post-body之后,post-footer之前添加以下代码
1
2
3
4
5
6
# vim themes/next/layout/_macro/post.swig
<div>
{% if not is_index %}
{% include 'passage-end-tag.swig' %}
{% endif %}
</div>
  • 修改主题配置文件_config.yml,在末尾添加:如下:
1
2
3
# vim themes/next/_config.yml
passage_end_tag:
enabled: true

实现文章统计功能

  • 安装插件
1
# npm install hexo-symbols-count-time --save
  • 配置启用hexo配置文件的symbols项
1
2
3
4
5
6
7
# vim _config.yml
# Writing
symbols_count_time:
symbols: true
time: true
total_symbols: true
total_time: true
  • 配置启用next主题配置文件的symbols项
1
2
3
4
5
6
7
# vim themes/next/_config.yml
symbols_count_time:
separated_meta: true
item_text_post: true
item_text_total: true
awl: 2 ##平均单词长度(单词的计数)。默认值:4。CN≈2 EN≈5
wpm: 300 ##每分钟的单词。默认值:275。缓慢≈200 正常≈275 快≈350

设置页面文章的篇数

1
2
3
4
5
6
7
8
9
10
11
# vim themes/next/_config.yml
index_generator:
per_page: 5

archive_generator:
per_page: 20
yearly: true
monthly: true

tag_generator:
per_page: 10

启用访客量以及文章阅读量统计

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# vim themes/next/_config.yml 
busuanzi_count:
enable: true
......
site_uv: true
site_uv_header: 本站访客数
site_uv_footer: 人次

site_pv: true
site_pv_header: 本站总访问量
site_pv_footer: 次

page_pv: true
page_pv_header: 本文总阅读量
page_pv_footer: 次

# vim themes/next/layout/_third-party/analytics/busuanzi-counter.swig
......
本站总访问量<span class="busuanzi-value" id="busuanzi_value_site_uv"></span>人次
......
本站总访问量<span class="busuanzi-value" id="busuanzi_value_site_pv"></span>次

给文章增加阴影效果

1
2
3
4
5
6
7
8
# vim themes/next/source/css/_custom/custom.styl
.post {
margin-top: 60px;
margin-bottom: 60px;
padding: 25px;
-webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
-moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}

添加站内搜索

1
2
3
4
5
# npm install hexo-generator-search --save
# npm install hexo-generator-searchdb --save
# vim themes/next/_config.yml
local_search:
enable: true

设置动态背景

  • 配置启用next主题配置文件的canvas_nest项
1
2
3
# vim themes/next/_config.yml 
canvas_nest:
enable: true
  • 在如下文件的行尾之前添加代码
1
2
3
4
# vim themes/next/layout/_layout.swig
{% if theme.canvas_nest %}
<script type="text/javascript" color="255,0,255" opacity='0.7' zIndex="-2" count="150" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
{% endif %}

修改标签样式

1
2
# vim themes/next/layout/_macro/post.swig
<a href="{{ url_for(tag.path) }}" rel="tag"><i class="fa fa-tag"></i> {{ tag.name }}</a>

在文件中搜索 rel=”tag”>#,将 # 换成 ,不过这里的注释会直接显示改后的样式,上面就是更改后的样式,请参考.

在文章中插入图片

1
2
3
# npm install hexo-asset-image --save
# vim _config.yml
post_asset_folder: true

新建文章,/source/_posts文件夹内除了abcd.md文件还有一个同名的文件夹,在文章中按照默认格式即可在文章中插入图片(图片地址使用相对地址即可)

绘制流程图

1
# npm install --save hexo-filter-mermaid-diagrams

实验很多遍都没绘制出来,在这里只是想告诉大家 hexo 可以绘制流程图.详询:mermaid

修改永久链接的默认格式

1
2
3
4
5
6
7
8
# npm install hexo-abbrlink --save
# vim _config.yml
#permalink: :year/:month/:day/:title/
#permalink_defaults:
permalink: blog/:abbrlink.html
abbrlink:
alg: crc32 # 算法:crc16(default) and crc32
rep: hex # 进制:dec(default) and hex

使用了该插件的话,同时使用了本地图片插件,注意图片路径的变化.

配置使用评论系统

这里使用 valine 来部署,文档页详见:https://valine.js.org/quickstart.html

  • 登录LeanCloud进行注册以获取APP ID 和 APP Key
  • 进入控制台后点击 “应用” 下拉菜单 “创建新应用”
  • 输入新应用名称,选择 “开发版” 并创建
  • 应用创建好后,进入刚刚创建的应用 “设置” 页
  • 进入 “设置” 项下的 “应用 Key” 项就能看到该应用的 APP ID 和 APP Key
  • 最后配置启用 valine 并添加 APP ID 和 APP Key 即可启用评论系统
1
2
3
4
5
6
7
8
9
10
11
12
# vim themes/next/_config.yml
valine:
enable: true
appid: # your leancloud application appid
appkey: # your leancloud application appkey
notify: false # mail notifier , https://github.com/xCss/Valine/wiki
verify: false # Verification code
placeholder: 欢迎评论 # comment box placeholder
avatar: mm # gravatar style
guest_info: nick,mail,link # custom comment header
pageSize: 10 # pagination size
visitor: false

分类页、标签页去评论: 在对应的md文件的顶部,加上 comments: false。如:

1
2
3
4
5
6
7
# cat tags/index.md 
---
title: tags
date: 2018-11-18 22:15:29
type: "tags"
comments: false
---

生成Hexo

1
# hexo g

开启预览访问端口

1
2
3
# hexo server -i 192.168.100.122
INFO Start processing
INFO Hexo is running at http://192.168.100.122:4000 . Press Ctrl+C to stop.

浏览器输入如上IP和端口即可在本地访问该博客

配置部署Hexo博客到GitHub

  • 配置Hexo配置文件
1
2
3
4
5
# vim _config.yml
deploy:
type: git
repository: https://github.com/zhijiansd/zhijiansd.github.io
branch: master
  • 安装插件
1
# npm install hexo-deployer-git --save
  • 将Hexo部署到GitHub,之后浏览器输入zhijiansd.github.io查看
1
# hexo d

绑定自己的域名

当部署后 hexo 会将相关内容进行复制并 push 到远程 master 分支的根目录下,这里我的是 source 文件夹

新建 CNAME 文件

1
2
3
4
# cd source
# touch CNAME
# vim CNAME ###不要http以及www等前缀
flywzj.com

添加两条类型为 “CNAME” 的记录,大致如下:

主机记录 记录类型 线路类型 记录值
@ CNAME 默认 zhijiansd.github.io.
www CNAME 默认 zhijiansd.github.io.

注意: 我这里域名后的 “.” 是解析商自动加上去的

hexo的常用命令如下:

命令 解释
hexo init 初始化
hexo g 生成静态网页
hexo s 启动服务预览
hexo d 部署hexo
hexo clean 清除缓存
hexo n 新建文章
hexo publish 草稿

注:

ZhiJian wechat
欢迎您扫一扫上面的二维码,订阅我的微信公众号!
-------------本文结束,感谢您的阅读-------------