个人主页与博客搭建记录(下篇)

上篇介绍了域名与解析、个人主页设计等内容,本篇主要介绍博客的搭建与个性化修改。博客的搭建与配置均基于 Hexo v3.7.1 和 NexT v6.3.0。

1. 环境配置与 Hexo 初始化

要使用 Hexo NexT 主题的博客,需要先配置好环境,安装下列应用程序,只需要下载相应安装程序安装即可。

所有必备的应用程序安装完成后,即可使用 npm 安装 Hexo,在终端 Terminal 中输入以下命令,输入密码,再回车即可。

1
sudo npm install -g hexo-cli

提示: macOS 用户在编译时候可能会提示没有缺少 Command Line Tools,需要在终端输入 xcode-select --install,然后根据提示安装 Command Line Tools。

安装 Hexo 完成后,请执行下列命令,Hexo 将会在指定文件夹中新建所需要的文件。

1
2
3
hexo init <folder-path>  #在指定文件夹中初始化 Hexo
cd <folder-path> #定位到 Hexo 博客目录
npm install

新建完成后,指定文件夹的目录中:

  • _config.yml 包含了网站的配置信息(后续称之为「站点配置文件」,具体配置的说明可以查看相关 文档
  • themes 是主题文件夹,Hexo 会根据主题来生成静态页面。
  • source 文件夹是存放用户资源的地方,除 _posts 文件夹之外,开头命名为 _(下划线)的文件 / 文件夹和隐藏的文件将会被忽略;Markdown 和 HTML 文件会被解析并放到 public 文件夹,而其他文件会被复制过去(如 CNAME 文件)。

2. Hexo 基本命令

基本的命令也可以参考官方 中文文档,这里介绍几条常用的命令。需要提醒的是,使用以下命令需要在终端中先将路径定位到 Hexo 博客目录:

1
cd <blog-path>  #定位到 Hexo 博客目录

2.1 新建文章与页面

使用以下的第一句可以在 source/_post/ 文件夹下新建一篇 Markdown 文章;使用以下的第二句可以在 source 下新建以 <page-title> 为名称的文件夹,文件夹内的 index.md 可以在编译后生成一个新的页面。

1
2
hexo new "<post-title>"  #新建文章
hexo new page "<page-title>" #新建页面

2.2 生成静态文件

因为原始的都是 Markdown 文件,要让浏览器可以显示美观的网页,需要根据 Markdown 文件生成 HTML 静态文件。执行以下命令:

1
2
3
4
5
#生成静态文件
hexo generate #或者 hexo g

#如果报错,可以先执行尝试解决
npm install hexo --save

2.3 本地预览调试

要在本地预览调试生成的博客网页效果,可以执行以下命令。访问网址为:http://localhost:4000/

1
hexo serve  #或者 hexo s

2.4 部署网站

设计完成的博客需要上传部署到 GitHub ,但是部署前需要在「站点配置文件」_config.yml 中配置 GitHub 项目的名称等信息:

1
2
3
4
5
# Deployment
deploy:
type: git
repo: https://github.com/<github-username>/<github-repo-name>
branch: <github-repo-branch>

如果是要同时部署在 GitHub 和 Coding,则可以按照下述的命令进行配置(注意缩进保持一致):

1
2
3
4
5
6
7
8
# Deployment
deploy:
- type: git
repo: https://github.com/<github-username>/<github-repo-name>
branch: <github-repo-branch>
- type: git
repo: https://git.coding.net/<coding-username>/<coding-repo-name>
branch: <coding-repo-branch>

设置完成后,执行以下命令。第一次执行过程中会提示输入相应用户名和密码,正确输入后既可以正常部署(后续部署就不再需要输入用户名和密码)。

1
2
3
4
5
#部署网站
hexo deploy #或者 hexo d

#如果报错,可以先执行尝试解决
npm install hexo-deployer-git --save

2.5 清除缓存

在某些情况(尤其是更换主题后),如果发现对站点的更改无论如何也不生效,可能需要运行该命令,清除缓存文件 db.json 和已生成的静态文件 public

1
hexo clean

2.6 多条命令同时执行

在两条命令直接采用 && 进行连接即可同时执行两条命令。另外,使用以下的命令可以简化命令的使用:

1
2
hexo s -g  #启动服务器之前预先生成静态文件,等价于 hexo g && hexo s
hexo g -d #静态文件生成后立即部署网站,等价于 hexo g && hexo d

2.7 添加文章命令后自动打开编辑器

参考:Hexo添加文章时自动打开编辑器 - Doublemine

站点文件夹根目录新建文件夹 scripts,然后在文件夹内新建文件 openeditor.js,写入以下内容:

  • 如果是 Windows 平台,则将下列内容写入脚本:
1
2
3
4
5
6
7
8
9
10
11
var spawn = require('child_process').exec;

// Hexo 2.x 用户复制这段
hexo.on('new', function(path){
spawn('start "markdown编辑器绝对路径.exe" ' + path);
});

// Hexo 3 用户复制这段
hexo.on('new', function(data){
spawn('start "markdown编辑器绝对路径.exe" ' + data.path);
});
  • 如果是 macOS 平台,则将下列内容写入脚本:
1
2
3
4
5
6
7
8
9
10
11
var exec = require('child_process').exec;

// Hexo 2.x 用户复制这段
hexo.on('new', function(path){
exec('open -a "markdown编辑器绝对路径.app" ' + path);
});

// Hexo 3 用户复制这段
hexo.on('new', function(data){
exec('open -a "markdown编辑器绝对路径.app" ' + data.path);
});

2.8 Shell 脚本执行命令

这里提供几个脚本文件,方便一次执行多个命令。要制作可以直接双击打开执行的脚本文件,首先执行以下命令:

1
2
3
cd <file-path>  #定位到指定文件目录
touch <script>.sh #生成脚本文件
chmod +x <script>.sh #设置脚本文件可以直接双击打开执行

编辑脚本文件内容(见我的 hexo-shell-admin 项目页面),保存关闭。然后在 Finder 中右键脚本文件,并选择 Get Info。在 Open with: 里选择 Other...。在弹出对话框中,从 Enable 下拉菜单中选择 All Applications,找到并选择 Terminal ,点击 Open。这样就成功设置了该脚步文件的默认打开程序是 Terminal ,当然也可以点击 Change All...,一劳永逸地解决默认程序打开问题。

3. 主题以及样式自定义

默认的主题似乎不是很好看,所以需要更换主题。我的博客采用的是被大家广泛使用的 NexT 主题,个人感觉朴素、简洁、大方。要更换主题,可以执行以下命令下载主题文件。当然也可以从 GitHub 直接下载 NexT 主题发布的最新版本压缩包,解压后将文件放在 <blog-path>/themes/next 目录下面。

1
2
cd <blog-path>  #定位到 Hexo 博客目录
git clone https://github.com/theme-next/hexo-theme-next /themes/next

下载好主题文件后,使用文本编辑器打开博客根目录下的「站点配置文件」_config.yml,找到 theme 键值,将值修改为 next 即可。

注意: 修改主题使用的是博客根目录下的「站点配置文件」_config.yml不是主题文件夹 /themes/next 中的「主题配置文件」_config.yml。同时,配置文件中所有的配置项冒号与值之间都要有一个半角空格,不然配置不会生效。

NexT 主题的配置可以在 NexT 使用文档 中找到,或者按照配置文件中的注释介绍一步一步进行修改(比如增加标签、分类页,修改导航栏内容等),这里不再赘述。以下着重提一些需要注意的问题,或者一些无法提供修改配置文件达到的效果。接下的介绍,使用的是主题文件夹 /themes/next 中的「主题配置文件」_config.yml。在 /themes/next/source/css/_custom/custom.styl 文件中添加代码可以自定义样式,我的设置可以看 这里

3.1 favicon 图标

图标的生成可以参考上篇提及的 方法,图标文件可以放到 /themes/next/source/images/(默认图标放在这里)或者 hexo-site/source/ 目录下。不过,建议把文件放至到后者的目录下,避免和默认的图标造成混淆。同时,如果要加入安卓或者微软设备的图标配置,需要调整下载获得的 manifest.jsonbrowserconfig.xml 文件中的图标路径。

注意: 如果图标文件放至在 /themes/next/source/images/ 或者 source/images/ 目录下,务必注意不要和 /themes/next/source/images/ 目录下的默认图标文件名一样,否则在生成静态文件的时候,默认图标文件会覆盖这些图标文件。

3.2 本地搜索与站点地图

添加博客搜索功能可以为访客查找文章提供方便。要添加本地搜索功能,可以执行以下命令:

1
2
cd <blog-path>  #定位到 Hexo 博客目录
npm install hexo-generator-searchdb --save

接下来,编辑主题配置文件,将 local_search 下面的 enable 键值设置为 true 以启用本地搜索:

1
2
3
# Local search
local_search:
enable: true

生成 Google 站点地图然后提交给 Google Console,可以加快 Google 对网站的收录。要自动生成站点地图,可以执行以下命令,这样以后每次执行 hexo g,都会生成新的站点地图文件 sitemap.xml

1
2
cd <blog-path>  #定位到 Hexo 博客目录
npm install hexo-generator-sitemap --save

3.3 评论插件

要启用博客文章评论,可以在「主题配置文件」的 Third Party Services Settings 部分找到,NexT 主题提供了多种的评论插件以供选择。在选择博客评论插件上,个人比较偏好于 Disqus,界面好看而且功能齐全,但是很遗憾中国大陆无法访问。对此的一种替代方案是浏览文章时默认不加载评论,以方便无法访问 Disqus 的用户加快文章加载速度,当用户需要查看评论时候点击一个按钮加载评论。详细方法可以查看我的另一篇文章:Hexo NexT 博客实现点击按钮加载评论功能 | BanbanRamble

我这里采用了 Valine,启用方法可以直接参考 官方文档介绍。如果要开启邮件通知,可以参考 赵俊的博客中的介绍

对于不需要开启评论的文章,只需要在 Markdown 文件开头处增加:

1
comments: false

3.4 文章页前后篇

文章页底部的时间较前的文章位置在左,时间较后的文章位置在右;这个不同于我习惯上的时间较前的文章位置在右,时间较后的文章位置在左。所以需要在 themes/next/layout/_macro/post.swig 中进行修改,一种是修改左右位置,一种是加注「前一篇」、「后一篇」,为了简便我选择了后者。

找到 <div class="post-nav-next post-nav-item">,在相应位置加注,变成以下两段内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="post-nav-next post-nav-item">
{% if post.next %}
<a href="{{ url_for(post.next.path) }}" rel="next" title="{{ post.next.title }}">
<i class="fa fa-chevron-left"></i> 前一篇:{{ post.next.title }}
</a>
{% endif %}
</div>

<span class="post-nav-divider"></span>

<div class="post-nav-prev post-nav-item">
{% if post.prev %}
<a href="{{ url_for(post.prev.path) }}" rel="prev" title="{{ post.prev.title }}">
后一篇:{{ post.prev.title }} <i class="fa fa-chevron-right"></i>
</a>
{% endif %}
</div>

3.5 文章底部标签图标

参考:Hexo博客之主题美化 - Fengdi’s Blog

在每一篇文章的结尾会显示本文的标签,默认的显示效果是在每一个标签名字前面加 #。如果希望将其改为 ,那么只需要在 /themes/next/layout/_macro/post.swig 中定位到

1
<a href="{{ url_for(tag.path) }}" rel="tag"># {{ tag.name }}</a>

将其改为以下内容即可:

1
<a href="{{ url_for(tag.path) }}" rel="tag"><i class="fa fa-fw fa-tag"></i> {{ tag.name }}&nbsp;</a>

3.6 特定页面选择性关闭某些功能

侧边栏目录

参考:在Hexo NexT主题中关闭指定文章的Table of Contents - Codebiz

侧边栏目录对于阅读长篇的文章特别有帮助,但是如果某些页面不想要出现这个目录(比如我的 关于 页面),就需要做一些修改了。

/themes/next/layout/_macro/sidebar.swig 中定位到

1
{% set display_toc = is_post and theme.toc.enable or is_page and theme.toc.enable %}

将该行修改为

1
{% set display_toc = is_post and theme.toc.enable and !page.no_toc or is_page and theme.toc.enable and !page.no_toc %}

这样,对于不想出现侧边栏目录的页面,只需要在其 Markdown 文件开头加入以下选项就可以隐藏侧边栏目录了。

1
no_toc: true

著作权声明

参考:Hexo/next添加相册页 - 肯特の天地

要在某个页面关闭底部的著作权声明(如果之前在主题配置文件中已经选择开启显示页面底部的著作权声明),那么可以修改 /themes/next/layout/_macro/post.swig,定位到 theme.post_copyright.enable,在该行代码中加入 and not post.copyright.disable,修改后的效果如下:

1
{%if theme.post_copyright.enable and not is_index and not post.copyright.disable%}

接下来将原先的 Markdown 文件开头修改为如下内容即可关闭该页面底部的著作权声明:

1
2
copyright:
disable: true

打赏

参考:打赏是否能支持给单独文章配置?

修改 layout/post.swig 中的

1
2
3
4
5
<div>
{% if not is_index %}
{% include 'reward.swig' %}
{% endif %}
</div>

1
2
3
4
5
6
7
{% if post.no_reward %}
<div>
{% if not is_index %}
{% include 'reward.swig' %}
{% endif %}
</div>
{% endif %}

这样在文章的头部加上 no_reward: true 便能对单个文章关闭打赏功能。

3.7 自定义标题中文字体

/themes/next/source/css/_variables/custom.styl 中加入以下内容:

1
$font-family-headings = "PT Serif", "Songti SC", STZhongsong, "PingFang SC", "Microsoft YaHei", Georgia, sans

其中,PT Serif 是从 Google Fonts 引入的西文标题字体,Songti SC 可以为预装了该字体的 macOS 用户提供最佳体验,STZhongsong 则是服务于 Windows 用户,如果上述两个系统的用户没有预先按照这两款字体,则转为分别使用 PingFang SCMicrosoft YaHei 这两款字体。

3.8 与主题样式一致的 404 页面

参考:在 Hexo 中创建匹配主题的404页面 - MOxFIVE’s Blog

要生成一个和主题样式一致的 404 页面,首先需要新建一个页面:

1
2
cd <blog-path>  #定位到 Hexo 博客目录
hexo new page "404"

然后编辑该页面的 Markdown 文件开头为以下内容,正文部分可以自行编辑内容:

1
2
3
4
5
6
---
title: 404 Not Found
no_toc: true
comments: false
permalink: /404
---

其中 permalink: /404 表示将该文件解析生成的 HTML 文件永久链接设置为 /404,这样就可以让访客访问错误链接时看到这个页面了。可以点击查看本博客站点的 404 页面

3.9 增加知乎、豆瓣图标支持

具体方法请阅读我的另一篇文章 Hexo NexT 博客增加知乎豆瓣图标支持 | BanbanRamble

4. 增加更多功能

4.1 永久性链接

参考:Hexo之URL持久化 - DongSheng’s Blog

Hexo 默认生成的文章地址路径是 :year/:month/:day/:title/。这种链接对搜索爬虫很不友好,因为它的url结构超过了三层,太深了;而且,如果修改了文章的文件名,就相应会修改其路径,无法保证链接的永久性,所以需要进行修改。

这里使用插件 hexo-abbrlink 来生成博客文章的永久链接,可以查看该插件的 GitHub 项目页面。首先需要进行安装:

1
2
cd <blog-path>  #定位到 Hexo 博客目录
npm install hexo-abbrlink --save

然后在「站点配置文件」中修改 permalink: :year/:month/:day/:title/ 为以下内容:

1
2
3
4
permalink: posts/:abbrlink/
abbrlink:
alg: crc32 #support crc16(default) and crc32
rep: hex #support dec(default) and hex

这样执行 hexo clean && hexo g 后就可以更新永久链接了。如果需要更新原有的链接,只需要删去每篇文章的 Markdown 文件开头的 abbrlink: xxxxx 相关信息,然后重新执行 hexo clean && hexo g 即可。

4.2 相册与图床

关于创建瀑布流的相册,请查看我的另一篇文章:Hexo NexT 博客增加瀑布流相册页面 | BanbanRamble

文章图片的存储如果放至在博客项目下,会极大地增加项目的空间。所以可以将图片上传到图床,然后在需要图片的地方引用该图片外部链接即可。公开的公共图床个人比较推荐的是采用微博相册或者 GitHub Issues 作为图床。不过我现在选择了腾讯云的 COS 对象存储,提供每个月 10 GB 的免费外网下行流量,以及每个月 50 GB 的免费存储空间,个人感觉足够使用了(毕竟博客也没很大的访问量)。

另外介绍一个 macOS 上十分实用的批量打水印软件「XnConvert」,完全免费:

4.3 MathJax 的静态显示(未采用)

参考:Hexo 中 MathJax 的静态显示 - Reuixiy’s Blog

4.4 增加动态背景(未采用)

参考:Cherry’s Blog

  • 首先设置好自定义样式,可以参考我的 自定义 CSS 文件
  • 然后把 canvasline.js 放入 /themes/next/source/js/src/ 目录,可以从 Cherry’s Blog 的相同位置获得该文件。
  • 修改 /themes/next/layout/_layout.swig 文件,在 <body> 标签后插入
1
2
3
<div class="bg_content">
<canvas id="canvas"></canvas>
</div>
  • 修改 /themes/next/layout/_scripts/commons.swig 文件,在 set js_commons = [ ] 的括号中加入刚才的 canvasline.js 路径,即 'src/canvasline.js',注意其中的多个文件路径之间要用 , 分隔。

4.5 busuanzi 的修正

NexT v6.3.0 版本中的 busuanzi 变量名改变了,但是其中的样式变量名没有变更,导致页脚的访客数与访问量之间没有空格的间隔。此外,还可以增加页脚访问量的文字说明。具体改变如下:

  • 主题配置文件中 busuanzi 项目变更为:
1
2
3
4
5
6
7
8
9
10
11
12
busuanzi_count:
enable: true
site_uv: true #total visitors
site_uv_icon: user
site_uv_header: 访问用户:
site_uv_footer:
site_pv: true #total views
site_pv_icon: eye
site_pv_header: 访问次数:
site_pv_footer:
post_views: true
post_views_icon: eye
  • /themes/next/layout/_third-party/analytics/busuanzi-counter.swig 变更为:
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
26
27
{% if theme.busuanzi_count.enable %}
<div class="busuanzi-count">
<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

{% if theme.busuanzi_count.site_uv %}
<span id="busuanzi_container_site_uv" style='display:none'>
<span class="site-uv" title="{{ __('footer.site_uv') }}">
<i class="fa fa-{{ theme.busuanzi_count.site_uv_icon }}"></i>&nbsp
{{ theme.busuanzi_count.site_uv_header }}
<span class="busuanzi-value" id="busuanzi_value_site_uv"></span>
{{ theme.busuanzi_count.site_uv_footer }}
</span>
</span>
{% endif %}

{% if theme.busuanzi_count.site_pv %}
<span id="busuanzi_container_site_uv" style='display:none'>
<span class="site-pv" title="{{ __('footer.site_pv') }}">
<i class="fa fa-{{ theme.busuanzi_count.site_pv_icon }}"></i>&nbsp
{{ theme.busuanzi_count.site_pv_header }}
<span class="busuanzi-value" id="busuanzi_value_site_pv"></span>
{{ theme.busuanzi_count.site_pv_footer }}
</span>
</span>
{% endif %}
</div>
{% endif %}
  • /themes/next/source/css/_common/components/third-party/busuanzi-counter.styl 关于分隔符号的内容不变

4.6 展示豆瓣读书与电影

如果想在博客中展示自己在豆瓣上的读书、电影、游戏等的信息,可以安装插件 hexo-douban,具体方法可以参考该插件的 GitHub 页面

4.7 自动备份博客源文件(未采用)

具体方法可以完全按照以下两篇文章操作:

我目前没有采用这种备份同步方式,而是选择了用 Travis CI 持续集成进行自动处理,具体方法可以查看 Hexo遇上Travis-CI:可能是最通俗易懂的自动发布博客图文教程

5. 有待处理的改进

  • 实现 Google 、百度对博客的收录:Google 已全部收录;百度收录了博客首页,因站长平台注册需实名并验证手机号,放弃主动提交
  • 合并标签、分类、归档,例如 persilee’s Blog: 修改 /themes/next/layout/archive.swig
  • 本地预览时,不要每次都抓取豆瓣:新版插件已修复
  • 豆瓣页面无法加载 busuanzi :新版插件已修复

赞赏一下吧~ 还可以关注公众号订阅最新内容

0%