Hexo博客搭建全面指南+基于NexT的优化

获得最佳阅读体验

$\text{Hexo}$ 是一个优秀的轻量级博客系统，本身可以兼容各种功能

而 $\text{NexT}$ ，则是一个集成有非常多功能、并且兼容性极好

因此本文选择了 $\text{Hexo+NexT}$ 的搭配

第一部分： $\text{Hexo}$ 简介

Hexo是一款基于Node.js的静态博客框架，依赖少易于安装使用，可以方便的生成静态网页托管在GitHub和Coding上，是搭建博客的首选框架。可以进入hexo官网进行详细查看（毕竟官方文档很有用），因为Hexo的创建者是台湾人，对中文的支持很友好，可以选择中文进行查看。

第二部分：配置 $\text{Hexo}$

1. 安装 $\text{Git}$

Git是目前世界上最先进的分布式版本控制系统，可以有效、高速的处理从很小到非常大的项目版本管理。也就是用来管理你的hexo博客文章，上传到GitHub的工具。

请到官网下载，然后打开 $\text{Git Bash}$ 命令行工具

或者到国内镜像站，找到相应的最新的版本

安装完成后，使用 git version 验证版本

2. 安装 $\text{Node.JS}$

Hexo基于Node.JS，因此需要安装Node.Js和npm工具。

国内镜像站，找到对应的最新版本

选择 $\text{LTS}$ 版本即可

这样一来，就可以使用Git Bash来代替cmd了

3. 安装 $\text{Hexo}$

你需要在Git Bash中使用此命令安装Hexo

npm install -g hexo-cli

然后使用 hexo -v 查看版本验证安装

之后初始化Hexo！

hexo init

注意myblog 处是你的博客本地文件夹的名字，写什么都可以

然后执行下面的命令

cd myblog   //进入这个myblog文件夹
npm install

$\color{orange}{注意这些命令只能一次输入一条。粘贴可在 Git Bash 窗口右键或者 Shift+Ins }$

2021.08.02 UPD:

可以先建好文件夹然后右键Git Bash Here

因为自带 $\text{Landscape}$ 主题，因此这个时候就可看到你的博客了！

[图片上传失败...(image-e1d867-1629557536228)]

hexo generate   //可以缩写成 hexo g
hexo server     //可以缩写成 hexo s

说一个小诀窍：你可以hexo g && hexo s，一步到位

4. 创建 $\text{GitHub}$ 个人仓库

登录你的GitHub账号，创建一个新的仓库（没有账号的、不会创建的请自行BFS）

仓库名创建为 你的用户名.github.io，不然无法识别

image

选择Public

5. 生成 $\text{SSH}$ 并添加到 $\text{GitHub}$

git config --global user.name yourname
git config --global user.email youremail

yourname 就是你的GitHub用户名，youremail 是你的GitHub的注册邮箱。这是Github用来验证账户的。

可以用下面的命令检查输入是否正确

git config user.name
git config user.email

接下来创建SSH，全部点回车就可以了

ssh-keygen -t rsa -C youremail

你会在大概会在C:\Users\Administrator中找到这个文件夹，记事本打开id_rsa.pub。

ssh，简单来讲，就是一个秘钥，其中，id_rsa是你这台电脑的私人秘钥，不能给别人看的，id_rsa.pub是公共秘钥，可以随便给别人看。把这个公钥放在GitHub上，这样当你链接GitHub自己的账户时，它就会根据公钥匹配你的私钥，当能够相互匹配时，才能够顺利的通过git上传你的文件到GitHub上。

而后在GitHub的setting中，找到SSH keys的设置选项，点击New SSH key
把你的id_rsa.pub里面的信息复制进去。

用下面的代码验证 (无需改动)

ssh -T git@github.com

6. 将 $\text{Hexo}$ 部署到

打开站点配置文件 _config.yml，翻到最后，修改YourgithubName为你的GitHub账户

deploy:
  type: git
  repo: https://github.com/YourgithubName/YourgithubName.github.io.git
  branch: master

安装 $\text{deploy-git}$ 部署工具以部署到 $\text{Github}$

npm install hexo-deployer-git --save

然后执行

hexo clean      //清除之前生成的东西 缩写为hexo cl
hexo generate   //生成静态文章 缩写为hexo g
hexo deploy     //部署 缩写为hexo d

另外说一下，生成和部署可以合为 hexo g -d 。

现在，你可以打开 source\_posts，在里面创建Markdown文件，可以在里面写文章了！

第三部分： $\text{Hexo}$ 基本操作

1. 设置网站的基本框架

参数	描述	注释
`title`	网站标题
`subtitle`	网站副标题
`description`	网站描述
`author`	作者
`language`	语言
`timezone`	时区	Asia/Shanghai
`url`	网址	改成你的网站域名
`root`	网站根目录	不用修改
`permalink`	文章的永久链接格式	不建议使用默认格式
`permalink_defaults`	永久链接中各部分的默认值

2. Page（创建新页面）

hexo new page 页面名称

系统会自动给你在博客根目录下的 source 文件夹中生成一个新的文件夹，里面有一个 index.md，页面的编辑操作在此文件中进行。

3. Draft（草稿）

hexo new draft newpage

这样会在 source/_draft 中新建一个 newpage.md 文件，如果你的草稿文件写的过程中，想要预览一下，那么可以使用

hexo server --draft

在本地端口中开启服务预览。

如果你的草稿文件写完了，想要发表到post中，下面的代码就会自动把newpage.md发送到post中。

hexo publish draft newpage

第四部分： $\text{Hexo}$ 优化

1. 更换主题

在这里，窝推荐两款主题

$\text{Shana}$ 非常优秀的二次元主题。缺点是集成的功能比较少，需要自己读代码写文件（开发者似乎大学毕业了，回issue回答比较慢），而且开发者的主要开发方向是PC端
$\text{NexT}$ 非常优秀、功能极为强大、易于操作的主题。如果喜欢各种效果实现各种功能，选择这个会比较方便，移动端效果比较好

由于我现在已经不用Shana主题了，所以用我正在用的NexT主题来说一下

NexT官方文档 NexT是有中文文档的。参照官方文档即可

下载主题

有两种方法下载NexT：使用git克隆最新版本和下载稳定版本的压缩包(.zip)

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

启用主题

提前声明一下：站点配置文件是你博客根目录下的_config.yml文件，主题配置文件是next主题文件夹下的_config.yml文件

打开 thmems\next，找到 站点配置文件 (_config.yml)。搜索找到 theme: 字段，把后面的 landscape 改成 next

theme: next

执行 hexo cl 清除缓存。之后执行 hexo s 便可以在 localhost:4000 中看到博客的预览效果了

其他内容

请自行阅读NexT官方文档

2. 添加 $\text{RSS}$ 订阅功能

可以参照我的这篇文章

安装 $\text{feed}$ 插件

$\text{Hexo}$ 博客有一个专门生成 $\text{RSS xml}$ 文件的插件hexo-generator-feed

npm install hexo-generator-feed

修改`站点配置文件`

## RSS订阅
plugin:
- hexo-generator-feed
#Feed Atom
feed:
type: atom
path: atom.xml

limit: 20

接下来直接执行hexo g就可以生成 $\text{xml}$ 文件

3. 绑定个人域名

首先你需要有一个域名

域名后缀看自己需求，.com比较贵，可以选择近年来比较火的.top .xyz之类的，这类的便宜，还有个性。第一年我用的.com，后来就换成.icu了

可以选择
万网
或者
西部数码
之类的

获取 $\text{IP}$ 地址

在此之前需要获取自己 GitHub 的二级域名的 IP 地址。Git Bash下ping自己博客的地址即可获得。

解析域名

在你购买网站的控制台中找到域名解析，将刚刚得到的 ip 地址填入后面的“对应值（或者叫记录值）”，选择A记录，其他不用动。
之后在主机名中分别填入 www 和 @。刷新一下，大概就成功了。

image

$\text{GitHub}$ 仓库的 $\text{custom domain}$ 绑定域名

进入仓库中，点击setting往下滑会看到custom domain

随后将自己购买的域名填写进去（纯域名，不要加www之类的任何东西）

image

设置 $\text{CNAME}$

进入Hexo根目录下的 source 文件夹，添加一个CNAME。注意不要添加任何后缀名！

image

在里面填入你的域名

image

4. 国内外分流

但是吧，这一点我并不会做，正在研究，过段时间会补上的。

BFS吧

5. $\text{SEO}$ 优化

首先需要让搜索引擎收录你的这个网站，别人才能搜索的到，那么这就需要SEO优化了

SEO是由英文Search Engine Optimization缩写而来，中文意译为“搜索引擎优化”。SEO是指通过站内优化比如网站结构调整、网站内容建设、网站代码优化等以及站外优化。

百度SEO

登录百度站长平台，在站点管理中添加自己的网站。

验证方式选择 $\text{HTML}$ 标签验证，我们需要获取的是红框内的这串代码

image

打开站点配置文件，添加以下两行，并把刚才的代码填在baidu那一行之后，注意与冒号之间要有空格。

google_site_verification: 
baidu-site-verification:

站点地图

首先安装插件

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

在站点配置文件添加以下代码

# Sitemap
sitemap:
  path: sitemap.xml
  url: https://wincer.icu/
baidusitemap:
  path: baidusitemap.xml
  url: https://wincer.icu/

然后执行一下 hexo cl && hexo g，在 public 中找到 baidusitemap.xml 和 sitemap.xml，用VSCode的查找和替换功能，把所有的 http://yoursite.com/ 换成我们自己的域名。然后不需要generate，直接deploy就可以了。

百度主动提交

执行一下

npm install hexo-baidu-url-submit --save

然后在站点配置文件中插入，填入你的token

# Baidu主动推送
baidu_url_submit:
  count: 5 ## 提交最新的五个链接
  host:  ## 百度站长平台中注册的域名
  token:  ## 准入秘钥
  path: baidu_urls.txt ## 文本文档的地址， 新链接会保存在此文本文档里

$\text{token}$ 是主动推送（实时）中的

image

随后在主题配置文件中搜索找到 baidu_push 段落，将其改为

baidu_push: true

之后在 themes\next\layout\_partials\head.swig 中搜索 baidu_site_verification

{% if theme.baidu_site_verification %}
  <meta name="baidu-site-verification" content="{{ theme.qihu_site_verification }}" />
{% endif %}

把 content 后面换成自己的token，只需要刚才的token，括号和引号都不需要。

Google SEO

需要小梯子

首先选择资源类型，一般选择网页前缀

$\text{Google}$ 会自动帮你完成验证。如果没有成功，那么按照指导验证。比如HTML验证，复制HTML代码中的部分内容，填到刚才 themes\next\layout\_partials\head.swig 中的相应字段中。

6. 更换字体

在主题配置文件中，查找font

修改为

font:
  enable: true

image

随后打开Google Font，挑选字体

然后可以自由设置lobal、title、heading这些不同区域的字体

image

第五部分： $\text{Hexo}$ 功能

1. 添加音乐功能

直接插入文章当中

$\text{iframe}$ 标签

相当的简单

先到网易云音乐中中搜出你想要的音乐，然后点击生成外链播放器

所需要的所有代码都在这个框框内了

image

然后把这个代码粘贴到你的文章的 $\text{.md}$ 文件中，就可以显示了

image

$\text{JavaScript}$ 标签

<script type="text/javascript" src="http://www.xiami.com/widget/player-single?uid=32329501&sid=1776238762&mode=js"></script>

使用 $\text{Hexo-tag-Aplayer}$ 插件

$\text{hexo-tag-aplayer}$ 是 $\text{Aplayer}$ 在 $\text{Hexo}$ 上的插件，其配置可以参考官方文档

npm install hexo-tag-aplayer --save

在文章的markdown文档里添加

{% aplayer "她的睫毛" "周杰伦" "http://home.ustc.edu.cn/~mmmwhy/%d6%dc%bd%dc%c2%d7%20-%20%cb%fd%b5%c4%bd%de%c3%ab.mp3"  "http://home.ustc.edu.cn/~mmmwhy/jay.jpg" "autoplay=false" %}

image

以上两种都只能实现单篇文章内的播放，下面这一种是将播放器部署在所有界面

主页音乐播放器

可以控制是否自动播放（~~自动播放移动端不支持~~）

修改 themes/next/layout/_macro/sidebar.swig文件

添加播放器内容

<!-- 音乐播放器 -->
<div>
    {% if theme.background_music %}
        <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="{{ theme.background_music }}"></iframe>
    {% endif %}
</div>

大概在这个位置

image

在 themes/next/_config.yml主题配置文件中添加歌单地址配置

background_music: //music.163.com/outchain/player?type=0&id=2120628564&auto=1&height=66

background_music:

如图所示填入歌曲的部分HTML代码

添加歌单

创建歌单，复制代码

image

把 height=90改成 height=66

最后贴一张我的博客的效果图

image

也可以单独的做一个歌单页面

最新版的 $\text{hexo-tag-aplayer}$ 已经支持了 $\text{MetingJS}$ 的使用，可以直接解析网络平台的歌曲，首先要在站点配置文件中开启 $\text{meting}$ 模式，添加以下代码在配置文件的最后：

aplayer:
  meting: true

复制歌单的链接，然后复制歌单的 $\text{id}$ ，例如 https://music.163.com/playlist?id=523845661&userid=46562117 ，这个歌单的id就是523845661，公司名可以是tencent、netease或是其他公司，下面给出一个例子，打开 /Hexo/source/playlist/index.md文件，输入：

{% meting "7634442256" "tencent" "playlist" "theme:#555" "mutex:true" "listmaxheight:340px" "preload:auto" %}

这就是一个 $\text{QQ}$ 音乐的歌单

最终效果

效果还是不错的

2. 代码块一键复制

1. 新建代码复制模块文件

在/themes/next/layout/_third-party下新建文件copy-code.swig，写入代码

{% if theme.codeblock.copy_button.enable %}
  <style>
    .copy-btn {
      display: inline-block;
      padding: 6px 12px;
      font-size: 13px;
      font-weight: 700;
      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;
    }

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

    .highlight-wrap {
      position: relative;
    }
  </style>
  
  <script>
    $('.highlight').each(function (i, e) {
      var $wrap = $('<div>').addClass('highlight-wrap')
      $(e).after($wrap)
      $wrap.append($('<button>').addClass('copy-btn').append('{{__("post.copy_button")}}').on('click', function (e) {
        var code = $(this).parent().find('.code').find('.line').map(function (i, e) {
          return $(e).text()
        }).toArray().join('\n')
        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.show_result %}
          if(result)$(this).text('{{__("post.copy_success")}}')
          else $(this).text('{{__("post.copy_failure")}}')
        {% endif %}
        $(this).blur()
      })).on('mouseleave', function (e) {
        var $b = $(this).find('.copy-btn')
        setTimeout(function () {
          $b.text('{{__("post.copy_button")}}')
        }, 300)
      }).append(e)
    })
  </script>
{% endif %}

2. 引用文件

编辑/themes/next/layout/_layout.swig文件，在文件末尾</body>前添加一行代码

{% include '_third-party/copy-code.swig' %}

image

3. 添加按钮上显示的语言

在/themes/next/languages/zh-Hans.yml文件的post板块中添加下列代码

copy_button: 复制
copy_success: 复制成功
copy_failure: 复制失败

image

4. 在主题配置文件中添加开关

需要注意的是，NexT version 5.1.4是没有codeblock选项的，需要在主题配置文件中添加

codeblock:
  border_radius:
  copy_button:
    enable: true
    # Show text copy result·
    show_result: true

image

3. 添加顶部加载条

配置主题配置文件_config.yml，将pace: false改为pace: true即可

有多种样式可供选择

image

4. 修改底部标签

打开/themes/next/layout/_macro/post.swig，搜索 rel="tag">，将 # 换成

<i class="fa fa-tag"></i>

image

5. 文本提示

插件为 hexo-tag-hint，实例：

穹妹经常带着{% hint '黑色的兔子布偶' '小时候悠送的' %}，在悠的面前常常抱怨且任性

效果

穹妹经常带着{% hint '黑色的兔子布偶' '小时候悠送的' %}，在悠的面前常常抱怨且任性

注意字符串中有单引号的时候加反斜线转义

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 159,015评论 4赞 362
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 67,262评论 1赞 292
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 108,727评论 0赞 243
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 43,986评论 0赞 205
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 52,363评论 3赞 287
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 40,610评论 1赞 219
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 31,871评论 2赞 312
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 30,582评论 0赞 198
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 34,297评论 1赞 242
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 30,551评论 2赞 246
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 32,053评论 1赞 260
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 28,385评论 2赞 253
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 33,035评论 3赞 236
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 26,079评论 0赞 8
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 26,841评论 0赞 195
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 35,648评论 2赞 274
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 35,550评论 2赞 270

Hexo博客搭建全面指南+基于NexT的优化

获得最佳阅读体验

第一部分： 简介

第二部分： 配置

1. 安装

2. 安装

3. 安装

2021.08.02 UPD:

4. 创建 个人仓库

5. 生成 并添加到

6. 将 部署到

第三部分： 基本操作

1. 设置网站的基本框架

2. Page（创建新页面）

3. Draft（草稿）

第四部分： 优化

1. 更换主题

下载主题

启用主题

其他内容

2. 添加 订阅功能

安装插件

修改站点配置文件

订阅

3. 绑定个人域名

首先你需要有一个域名

获取 地址

解析域名

仓库的 绑定域名

设置

4. 国内外分流

5. 优化

百度SEO

站点地图

百度主动提交

Google SEO

6. 更换字体

第五部分： 功能

1. 添加音乐功能

直接插入文章当中

标签

标签

使用插件

主页音乐播放器

添加歌单

也可以单独的做一个歌单页面

2. 代码块一键复制

1. 新建代码复制模块文件

2. 引用文件

3. 添加按钮上显示的语言

4. 在主题配置文件中添加开关

3. 添加顶部加载条

4. 修改底部标签

5. 文本提示

推荐阅读更多精彩内容

第一部分： $\text{Hexo}$ 简介

第二部分：配置 $\text{Hexo}$

1. 安装 $\text{Git}$

2. 安装 $\text{Node.JS}$

3. 安装 $\text{Hexo}$

4. 创建 $\text{GitHub}$ 个人仓库

5. 生成 $\text{SSH}$ 并添加到 $\text{GitHub}$

6. 将 $\text{Hexo}$ 部署到

第三部分： $\text{Hexo}$ 基本操作

第四部分： $\text{Hexo}$ 优化

2. 添加 $\text{RSS}$ 订阅功能

安装 $\text{feed}$ 插件

修改`站点配置文件`

获取 $\text{IP}$ 地址

$\text{GitHub}$ 仓库的 $\text{custom domain}$ 绑定域名

设置 $\text{CNAME}$

5. $\text{SEO}$ 优化

第五部分： $\text{Hexo}$ 功能

$\text{iframe}$ 标签

$\text{JavaScript}$ 标签

使用 $\text{Hexo-tag-Aplayer}$ 插件