hexo 个人博客搭建

工具 , 评论

本文将详细描述雀栎个人博客的搭建过程，供各位参考。该博客在Windows系统上基于Hexo框架的现成主题Pure和Gitee进行搭建，图床采用阿里云OSS服务和Picgo，优化主题涉及到CSS和ejs文件的修改。

Hexo博客搭建

参考资料：CodeSheep的博客搭建教程

安装node.js

在node.js官网下载node.js安装包，下载之后双击进行安装，一直next即可。

官网安装链接

安装成功之后可以在cmd输入node -v查看node.js版本。

输入npm -v查看npm版本。

输入npm install -g cnpm --registry=http://registry.npm.taobao.org安装淘宝的cnpm管理器。

安装成功之后输入cnpm -v查看cnpm版本。

安装hexo

输入cnpm install -g hexo-cli安装hexo框架。

输入hexo -v查看hexo版本。

创建博客文件夹

在合适的路径创建博客文件夹，在这里文件夹名称以Blog为例，可以手动创建也可以输入命令mkdir Blog创建。

创建好之后通过命令cd Blog进入Blog目录，或在Blog目录下打开cmd。

输入hexo init生成并初始化博客。

输入hexo s启动本地博客服务，Ctrl并点击地址 http://localhost:4000/ 可以访问本地博客。

创建博客文章

输入hexo n "文章名称"创建新的文章，在 Blog/resource/_post 路径下生成 文章名称. md 文件，可以用vscode等工具进行编辑，Markdown基础语法可以参考Markdown基本语法。

编辑完成后，在Blog路径下输入hexo clean清理。

输入hexo g生成。

输入hexo s再次启动查看，可以看到新建的md文件已被上传。

即每次修改之后可以通过以下命令进行本地效果查看：

1
2
3
hexo clean
hexo g
hexo s

至此，本地hexo博客搭建完成，下面将其部署到Gitee仓库中。

部署Gitee

参考资料：如何从0到1搭建个人博客

因为Gitee经常出现违禁信息且不好排查，后来我把博客迁移到了Github，基本流程类似，且省去了在Gitee Pages更新的流程。

注册Gitee账号

在码云（Gitee）官网注册账号，在个人设置的邮箱管理中添加邮箱地址。

在个人资料中绑定个人空间地址，该地址即为后期博客访问的地址。

新建博客仓库

新建一个仓库用于部署博客，填写内容如下。

img

img

开启Gitee Pages服务，该申请认证需要审核，审核时间为一个工作日之内。申请材料：身份证正反面、手持身份证照片。

本地配置

在cmd中输入以下命令进行配置。

1
2
git config --global user.name "此处填写你注册时的用户名"
git config --global user.email "此处填写你注册时的邮箱"

输入cnpm install --save hexo-deployer-git安装git部署插件。

配置Blog文件夹下的_config.yml文件，将末尾修改为如下内容。

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: https://gitee.com/skylark1003/skylark1003.git  #新建的仓库地址
  branch: master  #如果创建的时候没有选择分支，默认就是master分支。如果改了，填对应的。

仓库地址可以在此处复制获得。

部署到Gitee主页

在Blog文件夹下输入hexo d将本地博客部署到Github仓库里。

更新Gitee Pages。

img

更新之后即可通过网站地址 https://skylark1003.gitee.io 进行访问。

即每次修改之后可以通过以下步骤进行部署：

1
2
3
4
5
hexo clean
hexo g
hexo s    （本地查看效果）
ctrl + C  （停止本地运行，关闭4000端口）
hexo d    （无误后部署到Gitee）

部署后更新Gitee Pages即可访问博客地址。

主题优化

该博客基于作者cofess制作的主题pure。以下流程只针对个人修改内容，其他功能可以参考以下参考资料或自行另外搜索。

参考资料：

  1. Hexo博客主题pure使用说明
  2. Hexo / pure 优化记录
  3. Hexo博客主题pure修改记录
  4. Hexo中使用插入数学公式

更换主题

首先在Hexo主题库中寻找自己喜欢的主题，一般会有主题github链接，将其clone到本地（或下载压缩包并解压），将文件夹保存至Blog/themes文件夹下。

img

并将BLog/_config.yml文件中的themes字段值改为选择的主题文件夹名称。

1
theme: hexo-theme-pure-master

再次清理、生成、部署、更新即可生效（以下步骤为每次修改后的常规操作，后面不再赘述）。

1
2
3
4
5
hexo clean
hexo g
hexo s    （本地查看效果）
ctrl + C  （停止本地运行，关闭4000端口）
hexo d    （无误后部署到Gitee）

以下提供一些个人比较喜欢的hexo主题，供大家参考：

hexo-theme-next

hexo-theme-aircloud

hexo-theme-pure

hexo-theme-one-paper

解决导航栏跳转问题

在点击主题左侧导航栏进行跳转时，会出现以下空白的问题：

解决方法：

  • 在Blog/source/文件夹下创建每个导航类别的文件夹，例如categories、tags、links等

  • 在每个文件夹下创建index.md文件

  • 添加以下内容（以categories为例，其他相同）

    1
    2
    3
    4
    5
    ---
    title: categories     # 跳转后显示的标题
    type: categories
    layout: "categories"  # 与主题文件夹中layout下的.ejs文件名称对应
    ---

优化主题

在 Hexo 中有两份主要的配置文件，其名称都是 _config.yml。 其中一份位于站点根目录下Blog/_config.yml，主要包含 Hexo 本身的配置；另一份位于主题目录下Blog/themes/主题名称/_config.yml，这份配置由主题作者提供，主要用于配置主题相关的选项。

为了描述方便，在以下说明中，将前者称为站点配置文件， 后者称为主题配置文件。

站点配置文件修改

在站点配置文件中，我只修改了作者和语言。（之前的配置中还修改了主题和deploy部署。）

1
2
author: 雀栎      #作者名称
language: zh-CN   #语言，中文为zh-CN

主题配置文件修改

基础修改

首先按需安装插件：

1
2
3
4
5
npm install hexo-wordcount --save
npm install hexo-generator-json-content --save
npm install hexo-generator-feed --savenpm install 
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save

其次对主题配置文件内容进行修改，以下为我的修改内容：

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
# menu 导航菜单，把不需要的功能注释掉即可
menu:
  Home: .
  Archives: archives       # 归档
  Categories: categories   # 分类
  Tags: tags               # 标签
  #Repository: repository  # github repositories
  #Books: books            # 豆瓣书单
  #Links: links            # 友链
  About: about             # 关于

# Site
site:
  logo:
    enabled: true
    width: 40
    height: 40
    url: images/logo.png
  title: 雀栎                # 页面title
  favicon: images/logo.png   # 页面图标路径即浏览器标签页图标
  board: <p> &emsp;&emsp; 欢迎来到雀栎的个人小站，期待与各位的交流学习。</p>                   
  # 站点公告位于页面右侧
  copyright: true            # 底部版权信息

# Donate 打赏信息
donate:
  enable: true
  # 微信打赏
  wechatpay:
    qrcode: images/donate/skylarkwechatpay.png  #更换为自己的收款码路径
    title: 微信支付
  # 支付宝打赏
  alipay: 
    qrcode: images/donate/skylarkalipay.jpg     #更换为自己的收款码路径
    title: 支付宝

share:
  enable: true  # 是否启用分享，可以选择性删除添加
  sites: weibo,qq,wechat,facebook,twitter  # PC端显示的分享图标
  mobile_sites: weibo,qq,qzone             # 移动端显示的分享图标

pv:
  busuanzi:
    enable: true   # 不蒜子统计 统计访问人数
  leancloud:
    enable: false  # leancloud统计
    app_id:  # leancloud <AppID>
    app_key: # leancloud <AppKey>

postCount:
  enable: true
  wordcount: true  # 文章字数统计
  min2read: true   # 阅读时长预计 

# profile
profile:
  enabled: true           # Whether to show profile bar
  articleSelfBlock: false # 关闭文章下方的自我介绍
  avatar: images/avatar.jpg     #个人头像（页面左上角）
  gravatar: # Gravatar email address, if you enable Gravatar, your avatar config will be overriden
  author: 雀栎                  #个人昵称
  author_title: The skylark soar in the azure sky #昵称下文字
  author_description: Mangas | Literature | Coding | Music | Handicraft | Japanese dramas  #个人描述
  location: Hubei, China        #地理位置
  follow: https://gitee.com/skylark1003  #点击头像跳转链接
  # Social Links
  social:
    links:  #可根据需要增删改
      gitee: https://gitee.com/skylark1003
      twitter: https://twitter.com/Skylark_1003
      weibo: https://weibo.com/u/3298400311
      # facebook: /
      # dribbble: /
      #behance: https://www.behance.net/cofess
      #rss: atom.xml
    link_tooltip: true # enable the social link tooltip, options: true, false
  # My Skills 
  skills:  #可随意增删改
    C++: ★★★☆☆
    HTML+CSS: ★★★☆☆
    Javascript: ★★★☆☆
    # Bootstrap: ★★★☆☆
    # ThinkPHP: ★★★☆☆
    # 平面设计: ★★★☆☆
  # My Personal Links
  links:  #可随意增删改
    Mox.moe: https://mox.moe/
    追新番: http://www.fanxinzhui.com/
    Z-library: https://zh.usa1lib.org/
    青空文庫: https://www.aozora.gr.jp/
    Mikutap: https://aidn.jp/mikutap/
  # My Personal Labels
  labels:  #可随意增删改
    - 前端
    - 前端开发
    - 前端重构
    - Web前端
    - 网页重构

启用目录

主题配置文件中将toc属性值改为true。

1
toc: true # 是否开启文章章节目录导航

之后在发布文章时，每篇文章（*.md文件）的开头部分添加以下代码即可。

1
2
3
4
5
6
7
8
9
10
---
title: Markdown基本语法
date: 2022-07-01 11:37:25
tags:        # 标签 
- markdown
- 基本语法
categories:  # 分类
- 工具
toc: ture    # 是否启用目录索引
---

评论系统

我采用的是valine评论系统，首先登录或注册LeanCLoud，进入控制台后点击左下角创建应用：

img

创建好之后点开该应用，在设置的应用凭证中可以看到AppID和AppKey，接下来将其填写进主题配置文件。

img

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
comment:
  type: valine  # 启用哪种评论系统
  disqus:  # enter disqus shortname here
  valine:  # Valine. https://valine.js.org
    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: mp   # gravatar style 头像风格
    meta: nick,mail # custom comment header
    pageSize: 10 # pagination size
    visitor: false # Article reading statistic https://valine.js.org/visitor.html

其中avatar为评论人的头像风格，具体参数和效果如下：

参数值 表现形式 备注
空字符串'' img Gravatar官方图形
mp img 神秘人(一个灰白头像)
identicon img 抽象几何图形
monsterid img 小怪物
wavatar img 用不同面孔和背景组合生成的头像
retro img 八位像素复古头像
robohash img 一种具有不同颜色、面部等的机器人
hide 不显示头像

meta为评论者可以输入的信息，nick为昵称，mail为邮箱。

当填入的邮箱在Gravatar已经注册，则显示的头像为注册头像。

代码块复制按钮

① 增加全局函数addLoadEvent 在/themes/pure/source/js目录下打开application.js，在文件最后追加以下代码：

1
2
3
4
5
6
7
8
9
10
11
function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function() {
            oldonload();
            func();
        }
    }
}

② 新增按钮 pure默认情况下是没有代码复制功能的，需要对hexo增加复制代码块功能。在/themes/pure/layout/_partial目录下新增article-copy-code.ejs文件，其代码如下：

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<% if(theme.codeblock.copy_button.enable){ %>
  <style>
    .copy-btn {
      display: inline-block;
      padding: 6px 12px;
      font-size: 13px;
      font-weight: 500;
      font-family: 微软雅黑;
      line-height: 20px;
      color: #333;
      white-space: nowrap;
      vertical-align: middle;
      cursor: pointer;
      background-color: #eee;
      background-image: linear-gradient(#fcfcfc, #eee);
      border: 1px solid #d5d5d5;
      border-radius: 3px;
      user-select: none;
      outline: 0;
    }

    .highlight-wrap .copy-btn {
      transition: opacity .3s ease-in-out;
      opacity: 0;
      padding: 2px 6px;
      position: absolute;
      right: 4px;
      top: 8px;
      z-index: 2;
    }

    .highlight-wrap:hover .copy-btn,
        .highlight-wrap .copy-btn:focus {
      opacity: 1
    }

    .highlight-wrap {
      position: relative;
    }
  </style>
  
  <script>
    addLoadEvent(()=>{
      $('.highlight').each(function (i, e) {
        var $wrap = $('<div>').addClass('highlight-wrap')
        $(e).after($wrap)
        $wrap.append($('<button>').addClass('copy-btn').append('<%= __("codeblock.copy_button") %>').on('click', function (e) {
          var code = $(this).parent().find(".code")[0].innerText
          <% if(theme.codeblock.copyright.enable){ %>
              code += "<%= theme.codeblock.copyright.content %>"
          <% } %>
          var ta = document.createElement('textarea')
          document.body.appendChild(ta)
          ta.style.position = 'absolute'
          ta.style.top = '0px'
          ta.style.left = '0px'
          ta.value = code
          ta.select()
          ta.focus()
          var result = document.execCommand('copy')
          document.body.removeChild(ta)
          <% if(theme.codeblock.copy_button.result){ %>
            if(result)$(this).text('<%= __("codeblock.copy_success") %>')
            else $(this).text('<%= __("codeblock.copy_failure") %>')
          <% } %>
          $(this).blur()
        })).on('mouseleave', function (e) {
          var $b = $(this).find('.copy-btn')
          setTimeout(function () {
            $b.text('<%= __("codeblock.copy_button") %>')
          }, 300)
        }).append(e)
      })
    })
  </script>
<% } %>

③ 插入到界面 编辑 /themes/pure/layout/layout.ejs，在</body>前面一行增加<%- partial('_partial/article-copy-code')%>，如下：

1
2
3
4
5
6
  <%- body %>
  <%- partial('_common/footer', null, {cache: !config.relative_link}) %>
  <%- partial('_common/script', {post: page}) %>
  <%- partial('_partial/article-copy-code') %>
</body>
</html>

注：理论上可以在其他地方添加，但是必须保证代码在jq以及页面dom加载后运行。

④ 增加语言文件 在 /themes/pure/languages目录下选择对应的语言文件，在文件后面增加如下代码：

1
2
3
4
codeblock:
  copy_button: 复制
  copy_success: 复制成功
  copy_failure: 复制失败

注：理论上只需添加当前语言文件即可，但是为了以后方便切换语音，建议所有语音文件都加上相应的配置。

⑤ 增加主题配置文件 在主题配置文件末尾添加如下代码：

1
2
3
4
5
6
7
codeblock: 
  copy_button: 
    enable: true
    result: true
  copyright:
    enable: true
    content: \n/**\n* 感谢您复制代码，使用代码请注明引用出处\n* 雀栎 @ https://skylark1003.gitee.io/\n*/

移动到顶端按钮

2024.03.01注：该按钮存在问题，移动到顶端后页面会强制保留在顶端。因此新版博客中未添加改按钮。

在 **/themes/pure/layout/_common/script.ejs增加如下代码：

1
<%- partial('_script/go-top') %>

在 /themes/pure/layout/_script目录新增go-top.ejs**文件，其内容为：

1
<div id="go-top"></div><style type="text/css">#go-top {width:40px;height:36px;background-color:#303030;position:relative;border-radius:2px;position:fixed;right:10px;bottom:60px;cursor:pointer;display:none} #go-top:after {content:" ";position:absolute;left:14px;top:14px;border-top:2px solid white;border-right:2px solid white;width:12px;height:12px;transform:rotate(-45deg)}#go-top:hover {background-color:#303030}</style><script>$(function() { var o = $("#go-top");$(window).scroll(function() { 300 < $(window).scrollTop() ? o.show(300) : o.hide(200), $("#go-top").click(function() { return $("body,html").animate({ scrollTop: 0 }) }) }) })</script>

可以修改其中的按钮的颜色。

背景动画

背景动画基于canvas，在 .ejs的

中面添加以下代码，由于我认为有些花哨所以没有添加，具体颜色数量等配置可以参考作者仓库的README。

1
<script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>

由于我对JavaScript语言知之甚少，所以对于主页的其他板块基本未进行修改，上述内容也均来自提到的参考资料，大家有需要的话可以对layout中的ejs文件和source中的js文件进行进一步优化修改。

CSS修改

该部分主要对主页的样式进行修改，例如文字的字体、大小、颜色，板块间的间隔（padding）、按钮的颜色等，需要掌握基础的css语法。

主要流程是在浏览器中打开主页并右击->检查，通过这种方式定位某部分样式在css文件代码中的位置，可以先在浏览器中修改预览效果，后在themes/pure/source/css/style.css文件中进行修改。

我主要修改了左侧name、title、nav的字体，下方打赏按钮的字体和背景颜色以及代码段的字体。

另外该主题的六级标题显示存在一点问题，虽然规定了其大小（如图），但h1和h2未生效，导致二级标题的字体大小比三级标题要小。

img

解决方法是将如图所示的两个font-size注释掉即可。

如有其他需要的可自行修改。

添加对数学公式的支持

安装hexo-math

安装hexo-math插件：npm install hexo-math --save

安装渲染工具：npm install hexo-renderer-pandoc --save

修改站点配置文件

在站点配置文件（config.yml）中添加：

1
2
3
4
5
6
7
mathjax:
  tags: none # or 'ams' or 'all'
  single_dollars: true # enable single dollar signs as in-line math delimiters
  cjk_width: 0.9 # relative CJK char width
  normal_width: 0.6 # relative normal (monospace) width
  append_css: true # add CSS to pages rendered by MathJax
  every_page: false # if true, every page will be rendered by MathJax regardless the `mathjax` setting in Front-matter

修改主题配置文件

在主题配置文件（config.yml）中添加：

1
2
3
math:
  per_page: true
  mathjax: true

其中 per_page 根据提示，表示默认不加载 mathjax/katex 脚本，如果设置为 false，则是每篇文章都会去加载 mathjax 脚本，该处设置为false，如果不加载，则需要加载的文章抬头添加 mathjax: false 。 公式可以通过Latex语法规则编辑，同时也可以通过Writage插件，将Word中编辑好的公式，转化成markdown格式后使用。

2024.03.01更新：如果出现安装失败，可以换一个新的npm源：npm config set registry https://registry.npmmirror.com

添加公式后表格表头渲染异常

原因：在于表格的表头使用到了重复的 header 样式类，而这个样式类原计划仅使用于博客的顶部 Header，这个问题源于未能使用样式隔离。

解决：根据我浅显的理解，如果找到表格表头tr的定义，去掉其“header”选择器即可，但我没有找到，所以我采用了最笨的办法，将博客顶部Header重命名为了aheader（路径为pure/layout/_commom/header.ejs），并将CSS文件中所有.header均改为了.aheader。

搭建图床

写博客不可避免地需要一个稳定的图床，用于存放图片。由于github需要科学上网，在其他设备显示可能存在问题，gitee由于开源需要审核，用作图床会导致无法开源，且上传图片有2MB的大小限制，所以最终选择了阿里云OSS搭配PicGo进行搭建。

阿里云OSS

购买阿里云OSS

在阿里云对象存储OSS页面点击折扣套餐，选择所需服务，我买了三年的，总共27元，直接用支付宝账号登录即可。

img

创建Bucket

在产品与服务中找到对象存储OSS服务，点击创建Bucket，读写权限选择公共读。

img

创建AccessKey

在管理AccessKey中点击创建AccessKey，即可获得AccessKey ID和AccessKey Secret。

img

img

PicGo

在PicGo仓库进行下载，安装好后打开。

在图床设置中选择阿里云OSS，填写相应信息，确定并设置为默认。

img

另外还可以在PicGo设置中选择是否上传前重命名。

配置完之后就可以使用了，在上传区可以通过拖拽或点击上传图片，上传后自动复制url至剪贴板，在相册中可以对图片进行操作。

以上就是我搭建个人博客的全部流程了，记录下来供大家参考，如果有任何疑问或错误欢迎大家交流学习和批评指正。

2024.03.01更新：

由于之前电脑重装系统，本地文件夹的内容没有备份，只有Github上留存的静态网页，导致博客废止了很长时间，今天总算重新搭建起来了。只是可惜因为时间成本太高，所以只保留了几篇之前的文章，大量的leetcode笔记全部舍弃了，真是令人心痛，但好在那些内容琐碎并没有很高的复看价值。

这次一定好好备份！Blog，堂堂复活！

雀栎The skylark soar in the azure sky.

Mangas | Literature | Coding | Music | Handicraft | Japanese dramas