GitHub Pages+Hexo+Next博客搭建记录

1、前言

  大二的时候看见学长搭建的个人博客,感觉好高大上的样子,想着自己啥时候不再是哪个只会喊:哇、牛批、666、厉害厉害的傻逼选手,然后浪啊浪,突然有一天,CSP考试上考到了一个Markdown转HTML的大模拟题:
计算机软件能力认证考试系统现场狂写2小时,黑箱测试最后只得20分,从此心理对MD留下了挥之不去的阴影,然后就没有了然后,此事不来了了之。大二的时候在CSDN上写过,但是感觉CSDN的广告是越来也严重了,上面,下面,左面,右面等等四面八方全是各种广告,于是乎,时隔三年,趁着中秋没钱出去浪啊,舍友也回家了,丧尸宿舍也搭建一个简单的个人博客吧,此文简单记录一下搭建过程。
本文使用的是 Github pages + Hexo + Next 主题。

2、基础环境搭建

2.1 注册GitHub账号并创建IO仓库

  GitHub作为全球最大的同性交友网站,在程序员心中的地位不亚与PornHub在宅男心中的地位,有过之而无不及啊,登录官网填写相关信息进行账号注册,然后创建一个和注册名相同的仓库(Repository),注意一定要是下图这种格式[username.github.io],因为github page每个账号只有一个。

Create New Repository

  现在,已经可以通过https://wangjibao.github.io/来访问了,后面还会在这上面做更多的设置。

2.2 安装node.js

  Hexo是基于Node.js的,其实Node.js就是一个JavaScript的运行环境,用来生成我们所写的静态博客页面,去官网下载安装即可,并且会自动加入系统环境变量中。  
  其中的 npm(Node Package Manager) 是随 node.js 一起安装的包管理工具,能解决NodeJS代码部署上的很多问题。常用命令如下:

1
2
3
4
5
6
npm install npm -g              #安装新版本的npm
npm install #安装npm依赖包
npm install <Mouble Name> #安装包,分为全局安装和本地安装,全局安装添加 -g 参数
npm uninstall <Mouble Name> #卸载包
npm update <Mouble Name> #更新包
npm list -g #列出所有的全局安装包

2.3 安装Git并配置SSH Key

Git是一个流行的版本控制工具,使用它和GitHub进行交互。前往Git官网下载安装到本地即可。 因为你要提交代码到GitHub必须得拥有权限,但是直接使用用户名+密码不安全,所以使用 SSH Key来解决本地和服务器的连接问题。

在Git Bash中执行: cd ~/.ssh ,检查本机存在的ssh秘钥。如果提示: No such file or directory 说明你是第一次使用git。

ssh-keygen -t rsa -C "17600****[email protected]"

按照提示操作,最终会在用户目录下生成一个id_rsa.pub文件,这就是自己的公钥。复制里面的字符串到自己的GitHub中,settings >> SSH and GPG keys >> New SSH Key

添加SSH Key

执行如下命令,测试是否添加成功:

`ssh -T [email protected]`

同时在git bash中进行如下配置:

1
2
git config --global user.name "wangjibao"                 #github用户名
git config --global user.email "17600****[email protected] #github注册邮箱

2.4 安装sublime

  Sublime Text3,很方便快捷的代码编辑器,后期的很多文件修改编辑操作要借助此工具进行。官网下载安装的软件本身是付费的,但我大天朝能用付费的软件,呵,开玩笑!百度一发好多激活码直接用。

2.5 安装hexo

  在某个目录下建一个文件夹,此文件夹作为hexo的工作区。在该文件夹中 Git Bash Here,执行如下命令安装hexo:
   npm install -g hexo

安装完成后,hexo -v 查看安装版本及是否安装成功。执行 hexo init,对此工作文件夹进行初始化(特别注意,此文件夹初始必须是空的,否则会报错)。完成后,将生成如下目录结构的文件树

文件目录树

  其中_config.yml是全局配置文件,_posts是放置博客文章的文件夹,具体各文件功能查看这里。此时,我们执行 hexo server来启动Hexo服务,在浏览器中输入 http://localhost:4000查看初始效果。Hexo初始效果

常用的 Hexo命令如下:

1
2
3
4
5
6
7
hexo -v              #查看版本信息
hexo new "tilte" #创建新文章,放在\source\_posts目录下
hexo new page *** #创建页面
hexo generate #用来生成静态文件,简写: hexo g
hexo server #开启服务器实现本地预览功能,简写: hexo s
hexo deploy #部署网址,上传到github仓库,简写: hexo d
hexo clean #清除缓存(db.json)和已生成的静态文件(public),例如在更换博客主题后执行该命令

2.6 域名购买及解析

  前往阿里云购买属于自己的域名,当然,不买也是可以的,直接使用 wangjibao.github.io也能访问博客,只是为了博客更加个性化一点,遂购买一个属于自己的域名。购买完成后,前往域名解析页面设置域名解析,如下图:

域名解析

  其中第二行的IP地址是在cmd命令框中通过 ping wangjibao.github.io 命令得到。同时,在github pages的设置页面,填写购买的域名。

配置域名

最后,在source文件夹中新建名为 CNAME的文件,在文件中填入www.wangjibao.com.cn;执行 hexo g -d命令,此时,即可通过在浏览器中的地址栏输入 www.wangjibao.com.cn 进行博客的浏览。

2.7 本地与Github连接

  之前已经配置好了SSH Key,此时只要修改一下_config.yml文件即可轻松实现本地博文发布。修改_config.yml如下:

deploy配置

 其中repository的值在下图中获得,注意,此处每个字段的冒号后面都跟有一个空格,否则会出错。

git_address

 在发布博文前,执行如下命令安装必要的插件:

   npm install hexo-deployer-git --save

2.8 配置NexT主题

NexT的官方说明文档,将各基础配置讲述得非常清楚,按照官方文档一步一步配置即可。包括:

  • 安装NexT

    • 下载主题
    • 启用主题
    • 验证主题
  • 主题设定

    • 选择Scheme(此处选用Gemini主题)
    • 设置语言(zh-Hans)
    • 设置菜单
    • 设置侧栏
    • 设置头像
    • 设置作者昵称
    • 设置站点描述
  • 设置RSS(hexo install hexo-generator-feed --save

  • 添加标签页面

  • 添加分类页面

  • 设置字体

  • 设置代码高亮主题(night eighties

  • 侧边栏社交链接

  • 开启打赏功能

  • 设置友情链接

  • 腾讯公益404页面

    此处官网提供的是 http模式的404页面,在https模式下蹦出的404页面会出现排版问题,如firefox会报 Mixed Active Content警告,如图:

    404warning

    两种解决方案,一种是关掉浏览器对此站点的保护功能,但却不是很实用,因为你不能要求所有人解除对你站点的保护。

    解除浏览器的保护

    第二种解决方案是,将官网提供的404页面的代码做一下修改,具体如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8;"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="robots" content="all" />
    <meta name="robots" content="index,follow"/>
    </head>
    <body>
    <script type="text/javascript" src="//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js" homePageName="返回主页" homePageUrl="https://ymwangzhuan.com">
    </script>
    </body>
    </html>

    可以看到,改版后的404页面的src字段并没有指明使用的是http协议还是https协议,会自动根据你的站点做适配,问题完美解决[注意将404.html放到站点根目录的source文件夹中]。

  • 站点建立时间

  • 订阅微信公众号

  • 设置背景动画

3、NexT主题个性化设计

3.1 设置网站图标 Favicon

在网上找一张32*32大小的 ico 图标,当然,不是 ico 格式也是可以的,如 png 等。将图标放到目录 \thems\next\source\imges 文件夹中,然后修改主题配置文件即可,操作如下图:

网站图标

作为抓包组中的一员,搭建的博客必须上 wireshark 图标啊,皮一波~~,效果如下图:

facion图像展示

3.2 修改文章底部 # 号标签样式

\themes\next\layout\_macro\post.swing 文件中搜索 rel="tag"># ,将 # 号替换成 <i class="fa fa-tag"></i>,如下图:

footer_tag

3.3 文章末尾添加 本文结束 标记

添加本文结束标记的步骤,其实也是主题编写的基本步骤,主要分3步:

  1. 添加模板文件

    在目录 themes\next\layout\_macro中新建名为 passage-end-tag.swig的文件,并添加如下代码:

    1
    2
    3
    4
    5
    6
    7
    <div> 
    {% if not is_index %}
    <div style="text-align:center;color: #ccc;font-size:14px;">
    -------------本文结束<i class="fa fa-paw"></i>感谢您的阅读------------
    </div>
    {% endif %}
    </div>
  2. 导入模板文件
    在文件 themes\next\layout\_macro\post.swig中找到如下代码块(第332行):

    1
    2
    3
    {#####################}
    {### END POST BODY ###}
    {#####################}

    在此代码块的上面添加如下代码:

    1
    2
    3
    4
    5
    <div>
    {% if not is_index %}
    {% include 'passage-end-tag.swig' %}
    {% endif %}
    </div>
  3. 配置

    主题配置文件中添加 passage-end-tag 字段,并设置为 true

    1
    2
    3
    # 文章末尾添加“本文结束”标记
    passage_end_tag:
    enabled: true

最终效果为:

博文结束标记

3.4 添加顶部加载条

在next主题的配置文件 _config.yml 中搜索关键词 pace ,设置为 true ,还可以设置加载条的样式,修改如下图所示:

加载进度条

3.5 隐藏网站底部 由hexo强力驱动

方案一:在目录 themes\next\layout\_partials\中打开 footer.swig文件,将对应网站底部的描述部分给注释掉即可,html的注释符 <!-- **** -->

注释网站底部代码

方案二:在主题配置文件中,配置 powred字段和theme字段,将其用 #号注释掉:

隐藏网站底部信息

两者都能实现下图所示的效果:

注释网站底部信息效果图

3.6 博文置顶

使用 top 属性, top越大,排序就越靠前,如果文章不设置 top 属性,就按照博文的推送时间排序。如果使用的next主题在5.1之后,会自带此功能,修改站点配置文件中的 order_by字段即可;如果使用的是更老的版本,修改node_modules\hexo-generator-index\lib\generator.js中的内容即可,在var posts =那一行的后面添加如下博文排序函数:

1
2
3
4
5
6
7
8
9
10
11
12
13
posts.data = posts.data.sort(function(a, b) {
if(a.top && b.top) { // 两篇文章top都有定义
if(a.top == b.top) return b.date - a.date; // 若top值一样则按照文章日期降序排
else return b.top - a.top; // 否则按照top值降序排
}
else if(a.top && !b.top) { // 以下是只有一篇文章top有定义,那么将有top的排在前面(这里用异或操作居然不行233)
return -1;
}
else if(!a.top && b.top) {
return 1;
}
else return b.date - a.date; // 都没定义按照文章日期降序排
});

这里我们使用第二种方案,每次写文章的时候,都要手动添加 top 属性,很麻烦,这里,我们可以修改 scaffolds\post.md 文件,修改后的内容如下,其实相当于创建了一个博文的初始模板。

新建博文模板

到此,如果文章设置了 top 属性并有值得话,根据 top 值排序,没有的话,按照博文的推送时间排序。

3.7 添加分享

NexT主题支持多种方式的分享,包括 Baidu Shareduoshuo_shareneedMoreShare2jiathis等等,这里我们使用needMoreShare2,在主题配置文件中修改对应的字段如下图所示,资深抓包民工表示对这里的很多软件好熟悉~,怕是要被打~

分享

修改后,执行 hexo g -d指令,效果如图:

分享效果图

3.8 显示当前页面的浏览进度

在主题配置文件中 ctrl+f 搜索 scrollpercent,将 false 改为 true。如果想把 top按钮放在侧边栏,可以把 b2t字段设置为true ,实现效果如图所示:

scroll percent

3.9 首页博文自动卷起

在首页显示一篇文章的部分内容,并提供一个链接跳转到全文页面是一个常见的需求。NexT 提供三种方式来控制文章在首页的显示方式。也就是说,在首页显示文章的摘录并显示 阅读全文 按钮,可以通过以下方法:

  • 在文章中使用 <!-- more --> 手动进行截断,Hexo 提供的方式

  • 在文章的 front-matter中添加 description,并提供文章摘录

  • 自动形成摘要,在主题配置文件中将 auto_excerpt设置成 true ,并自行设定自动截取长度(默认150)

这里,我们使用第一种方式,实现效果如下图:

阅读全文

3.10 实现鼠标点击出现桃心

love.js文件添加到主题目录\source\js\src 下,找到 \themes\next\layout\_layout.swig文件, 在文件的后面, </body>标签之前 添加以下代码:

1
2
<!-- 页面点击小红心 -->
<script type="text/javascript" src="/js/src/love.js"></script>

实现效果为每次鼠标点击页面的时候,会出现一个彩色的桃心,如下图所示:

桃心

3.11 添加站内搜索

NexT主题支持多种搜索插件,我们这里使用 hexo-generator-searchdb插件,原理是在本地生成一个search.xml文件,搜索的时候从这个文件中根据关键字检索出相应的链接。首先执行 npm install hexo-generatordb --save 指令进行插件的安装,之后将下面的代码复制进站点配置文件的末尾。

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

然后将主题配置文件中的对应字段设置为 true 即可。

设置搜索字段的值

最终,会在网站的侧栏出现搜索 选项,搜索效果如下图所示:

搜索效果图

3.12 生成站点地图

站点地图是一种文件,可以通过该文件列出网站上的网页,从而可以将个人网站内容的组织架构告知 baidugoogle等搜索引擎。搜索引擎的网页爬取工具会读取此文件,以便更加高效的爬取个人网站。

1、先安装对应的插件,以下两个插件对应的是 baidugoogle

1
2
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save

2、在站点配置文件中添加如下代码:

1
2
3
4
5
# auto create sitemap
sitemap:
path: sitemap.xml
baidusitemap:
path: baidusitemap.xml

运行指令 hexo g -d ,在public目录下会发现生成了 sitemap.xmlbaidusitemap.xml 两个文件,这表示成功了。接下来就是如何操作让百度、谷歌收录我们的博客了。

3、站点收录,由于并没有想被搜索引擎检索的需求,私下里自己先玩一玩,所以,此项,To Do….

3.13 实现统计功能

在Hexo的根目录下执行 npm install hexo-wordcount --save 指令,进行字数统计模块的安装,然后修改主题配置文件,将对应的开关打开,即 false 改为true

wordcount

使用 sublime打开文件 \themes\next\layout\_macro\post.swigctrl+f搜索如下代码字段,并在后面添加分钟

1
2
3
4
5
6
<span title="{{ __('post.wordcount') }}">
{{ wordcount(post.content) }} 字
</span>
<span title="{{ __('post.min2read') }}">
{{ min2read(post.content) }} 分钟
</span>

最终的效果图,如下:

字数统计效果展示

3.14 上传本地图片

站点配置文件中将 post_asset_folder字段设置为 true,同时安装对应的插件 npm install hexo-asset-image --save。以后运行hexo n "xxxx"来生成md博文时,/source/_posts文件夹内除了xxxx.md文件还有一个同名的文件夹,该文件夹用于存储本地图片。在xxxx.md中想引入图片时,先把图片复制到xxxx这个文件夹中,然后只需要在xxxx.md中按照markdown的格式引入图片:![你想输入的替代文字](xxxx\图片名.jpg)

3.15 添加近期文章模块

将下面的代码贴在 next/layout/_macro/sidebar.swig 中的 if theme.links 对应的 endif 后面,就ok了,是不是很简单。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{% if theme.recent_posts %}
<div class="links-of-blogroll motion-element {{ "links-of-blogroll-" + theme.recent_posts_layout }}">
<div class="links-of-blogroll-title">
<!-- modify icon to fire by szw -->
<i class="fa fa-history fa-{{ theme.recent_posts_icon | lower }}" aria-hidden="true"></i>
{{ theme.recent_posts_title }}
</div>
<ul class="links-of-blogroll-list">
{% set posts = site.posts.sort('-date') %}
{% for post in posts.slice('0', '5') %}
<li>
<a href="{{ url_for(post.path) }}" title="{{ post.title }}" target="_blank">{{ post.title }}</a>
</li>
{% endfor %}
</ul>
</div>
{% endif %}

为了配置方便,在主题的 _config.yml 中添加了几个变量,如下:

1
2
3
recent_posts_title: 近期文章
recent_posts_layout: block
recent_posts: true

3.16 右上角加fork me on github

点击这里或者这里挑选你喜欢的样式,修改成你的GitHub链接,复制到themes/next/layout/_layout.swig文件中的以下位置:

1
2
3
<div class="{{ container_class }} {% block page_class %}{% endblock %}">
<div class="headband"></div>
<a href="https://github.com/wangjibao" ......</a>

3.17 添加 latex 数学公式支持

next 主题中,已经自动支持 mathjax 了,只需要在配置文件中将开关打开即可,不用像很多博客说的换markdown渲染引擎,更改markdownlatex的语法冲突,安装mathjax插件等等那么麻烦。

在主题配置文件中搜索 mathjax ,将开关设置为 true ,其中的 per_page字段如果设置为 true ,那么只有主页和文章头部带有mathjax: true 字段的博文才会加载 mathjax引擎。这里注意下,要更改默认的 cdn 地址,之前的地址已经停用了。

详见:https://github.com/iissnan/hexo-theme-next/pull/1712

   https://github.com/iissnan/hexo-theme-next/pull/887

3.18 启用点击下载功能

在网站的source目录下,新建download目录,和_posts、About、tags、categories等目录并列。
然后,将需要分享的文件或者图片统一放到该download下。在写文章时,通过诸如[点击下载](/download/xx.exe)这样的链接,直接写入。

效果图:

4、集成第三方服务

4.1 Valine评论系统

针对评论系统来讲的话,多说和网易云已经倒了,畅言需要备案,Disqus,Hypercomments和LiveRe等都是国外的,不仅加载速度慢还容易被墙,找来找去,决定使用valine(2017年8月诞生的一款基于LeanCloud的极简风评论系统)。NexT主题本身就已经集成了valine,所以设置起来也比较简单。

4.1.1 注册LeanCloud,获取appidappkey

官网注册账号并创建应用,应用选择开发版即可,毕竟穷孩子,免费的好啊。应用名字随便起,创建完成后,在 设置 >> 应用key 中可以看到此应用的appid和appkey。

appid和appkey

4.1.2 配置web安全域名

为了数据安全,在 设置 >> 安全中心中设置web安全域名,如下图:

web域名安全

4.1.3 创建Class对象

存储 >> 数据栏中,创建两个Class,一个名为Counter,用于记录统计每篇博文的阅读次数;另一名为Comment用于记录存储每篇博文的评论。注意,此处两个Class的名字是固定的,不能更改。

创建Class

可以手动修改 Counter表中time字段的值,也就是修改了博文的阅读次数,美滋滋~~~

4.1.4 修改主题配置文件

搜索 leancloud字段,将 enable字段设置为 trueapp_idapp_key填写之前获得的值,此时,就可以在页面中启用博文阅读次数统计功能。

valine配置文件修改

搜索valine字段,将 enable字段设置为 trueapp_idapp_key填写之前获得的值,此时,就可以在页面中启用博文评论及回复功能。其中的notify字段代表有评论时邮件提醒,verify字段代表开启验证码,avatar代表评论者的头像,placeholder字段代表初始评论框中显示的文字,等等。。。

4.1.5 最终效果展示

后台数据管理:

后台数据管理

阅读次数统计:

阅读次数统计

底部评论区:

评论区

4.1.6 邮件提醒功能配置

至此,已经能够使用评论系统了,但它虽然支持邮件提醒(基于密码重置提醒邮件),功能却很弱,无法提示到具体文章,也无法给评论者进行有效的回复通知,通常别人留完言,怎么还会再来你的博客看你是否回复了呢?所以,这里我们引用GitHub上某位大佬的配置,它满足了:

  • 完善的邮件通知,自定义 SMTP 发件频率和内容不再受限
  • 基于 Akismet 的垃圾评论自动标注和过滤
  • 评论管理,避免直接操作数据库
  • ……

邮件效果如下图所示:

邮件展示

管理界面如下图:

评论管理

4.2 卜算子统计

主题配置文件中搜索 busuanzi_count,将开关打开,并做如下图修改,即可统计站点的 UVPV

卜算子统计

实现效果如下图:

站点统计

第一行的 Site words total count很是刺眼,改!之前的leancloud留下来的历史问题。在 \themes\next\layout\_partials\footer.swig中第19行做如下修改:

1
#}{{ totalcount(site, '0,0.0a') }} 字{#

\themes\next\language\zh-Hans.yml文件中,修改第36行,如下:

1
2
3
4
#修改前:
  totalcount: Site words total count
#修改后:
  totalcount: 本站共计

5、To DO List

  • 侧边栏添加日历

    点击查看教程链接

  • SEO优化

  • CND优化

  • 静态资源压缩(github pages提供的免费空间有限)

  • 添加动态萌宠

    先安装必要的模块

    1
    2
    npm install --save hexo-helper-live2d
    npm install live2d-widget-model-hijiki #此行不同的萌宠,对应不同的模块

    在站点配置文件的末尾添加如下代码段:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    # live2d    
    live2d:
    enable: true
    scriptFrom: local
    pluginRootPath: live2dw/
    pluginJsPath: lib/
    pluginModelPath: assets/
    model:
    use: live2d-widget-model-hijiki/
    display:
    position: left
    width: 80
    height: 300
    hOffset: 20 #水平相对位移
    vOffset: -200 #垂直相对位移
    mobile:
    show: true
  • 代码区添加点击复制按钮

  • 隐私博文加密访问

    点击查看教程链接

  • 设置背景及透明度

    打开 \themes\next\source\css\_custom\custom.styl文件,添加如下代码即可:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    body {
      background:url(https://source.unsplash.com/random/1920x1080);
      background-repeat: repeat;
      background-attachment:fixed;
      background-position:50% 50%;
    }
    //改变背景色和透明度
    .main-inner {
      background: #fff;
      opacity: 0.9;
    }
  • 添加网易云音乐

    在网易云音乐网页版,找到自己想要的歌曲,点击生成播放外链,生成如下所示的代码,将iframe模块放到主题中 layout/_macro/sidebar.swig文件的适当位置即可。

    1
    <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=298 height=52 src="//music.163.com/outchain/player?type=2&id=570240588&auto=0&height=32"></iframe>
  • 个性化字体设置–设置代码块字体大小

    NexT 从 5.0.1 版本开始提供一个 字体定制特性,编辑主题下的 source/css/_variables/custom.styl 文件,新增如下代码:

    1
    2
    // 代码字体的大小
    $code-font-size = 15px
  • 文章顶部添加最近更新时间

    主题设置文件中搜索update,将其设置为true即可。

  • 个性设置文章间分割线

  • 取消博文段落自动编号

    将主题配置文件中的 toc :number 字段设置为 false

  • 安装PDF插件

    执行命令 npm install hexo-pdf --save,之后编辑博客的时候即可使用 标签:引用本地的pdf文件。

  • 。。。。。。

6、bug解决

6.1 busuanzi统计失效问题

前往 http://busuanzi.ibruce.info/ 卜算子官网,可以发现有提示说 因七牛强制过期『dn-lbstatics.qbox.me』域名,与客服沟通无果,只能更换域名到『busuanzi.ibruce.info』!。所以接下来的bug修复工作就十分简单了。在主题文件 themes/next/layout/_third-party/analytics/busuanzi-counter.swig 文件中,将 <script> 标签中的 src字段改为:

src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js" 即可解决。

-------------本文结束感谢您的阅读-------------
您的鼓励就是我创作的动力,求打赏买面包~~
0%