hexo教程-搭建个人博客踩坑

由于比较懒不想操心博客的运维，而且腾讯云的服务器也快到期了，就先将Blog部署在GitHub上吧。但由于GitHub实在太慢了，影响排名，后换至国内平台

hexo简介

hexo是一款快速、简洁且高效的博客框架，支持markdown写作（选择hexo的另一个原因），可以快速的生成静态网页，而且插件丰富。优点还是不少，就不一一赘述。附上官网链接。

https://hexo.io/zh-cn/

安装hexo

安装 Hexo 相当简单，只需要先安装node.js和git（git安装方法自行百度）

• Node.js (Node.js 版本需不低于 10.13，建议使用 Node.js 12.0 及以上版本)
• Git
• node.js安装参考这位大佬的教程

1. npm安装hexo包

npm install -g hexo-cli

安装完hexo包可用npm hexo-cli -v查看版本，相应的目录下会有变化

2. 将 Hexo 所在的目录下的 node_modules 添加到环境变量之中即可直接使用 hexo <command>，执行命令

3. 开始建站，执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件

hexo init .\myblog
cd myblog
npm install

这些目录里面放了什么文件可以参考官方文档

使用hexo创作

1. 新建FirstBlog，执行下面命令后，会自动在myblog\source\\_posts目录下创建名为firtblog.md的文件

hexo new "FirstBlog"
或者简写为
hexo n "FirstBlog"

2. hexo渲染markdown文件，生成html等静态页面：

hexo generate
或者
hexo g

生成的文件都在myblog\public目录下

3. 本地启动服务测试一下：

hexo server
或者
hexo s

这个服务开启的端口可以myblog\node_modules/hexo-server/index.js 文件中修改(因为有时候存在端口占用的情况)

这个时候可以看到，成功了，但是略丑~，不急，后面可以换主题美化-

Hexo部署在Github、Gitee、Coding等平台

Github国内加载实在太慢，影响排名，后面提供了其他平台的搭建方法~，比较闲

GitHub部署Blog

1. 先在GitHub上创立一个仓库，单击new~，：

2. Repository name设为Yourname.github.io，其他默认即可

可以在setting中查看是否成功，若成功会显示url：

3. 打开myblog\\_config.yml这个文件，可以自行配置，参数太多不一一讲解。需要注意的是deploy选项

同理参考官方文档：https://hexo.io/zh-cn/docs/configuration

找到deploy选项：

• 同理可以参考官方文档：https://hexo.io/docs/one-command-deployment

• 注意yaml文件中的缩进：YAML依靠缩进来确定元素间的从属关系。因此，请确保每个deployer的缩进长度相同，并且使用空格缩进。

deploy:
  type: git
  repo: https://bitbucket.org/John/john.bitbucket.io  #修改为自己GitHub仓库的url
  branch: main				#主分支，因人而异

4. git安装部署插件 hexo-deployer-git

npm install hexo-deployer-git --save

5. 重新生成站点文件并推送至远程库

hexo clean && hexo generate 
hexo deploy
解释：
hexo clean   #清除缓存文件 db.json 和已生成的静态文件 public
hexo generate	  #渲染 生成静态文件
hexo deploy       #自动生成网站静态文件，并部署到设定的仓库(hexo deploy 的缩写)

6. 打开浏览器，输入自己的url：https://gungnir.top/ 就可以看到是否成功：

Gitee部署Blog

Hexo同时部署在GitHub、Coding、Gitee_Ashin Wang’s Blog的博客-CSDN博客

Coding部署Blog

Hexo博客部署到码云和Coding - 腾讯云开发者社区-腾讯云 (tencent.com)

Hexo+腾讯云COS

申请腾讯云COS ，每个月有免费的10GB的CDN流量可以使用；

创建存储桶

打开腾讯云控制台–云产品–存储–对象存储，然后创建存储桶。

访问权限必须要选择公有读私有写，其他看情况填

开启静态网站设置

在基础配置打开静态网站（关掉强制 https)

绑定自定义域名

如果莫有https证书，申请一个再绑定

绑定好后不要忘记在自己域名的解析设置中添加一条cname，指向该域名

接下来开始在hexo配置

• 安装插件

• 75k/hexo-deployer-cos-enhanced: Hexo部署到腾讯云对象存储（COS）插件 (github.com)
• 推荐，可以同时推到GitHub和cos：lxl80/hexo-deployer-cos-cdn: Hexo部署插件，支持将静态博客发布到腾讯云对象存储中，并同步刷新被更新文件的CDN缓存。 (github.com)

#稳定版
npm install hexo-deployer-cos-enhanced --save

• 站点配置文件

deploy:
  type: cos-cdn
  cloud: tencent
  bucket: blog-1234567890						#cos 桶名称 
  region: ap-shanghai							#所属地域
  secretId: AKIDIgxxxxxxxxxxxxxxxxxxxx0SepjX		#云 API 密钥  
  secretKey: qXPCbxxxxxxxxxxxxxxxxxxxxsJZfdR		#云 API 密钥 

注意项：

• secretId 和 secretKey：在 COS控制台中，找到左侧的密钥管理，点进去，按照提示添加子账号，并设置秘钥。同时要给子账号赋予 COS相关的权限，还有CDN刷新的权限。不会配置的可以参考

• 关于 region ：如果不清楚COS的region，可以通过这个查一下可用地域

• 发布

hexo clean 
hexo g -d

开启CDN

新用户都免费送100G流量

创建加速域名

配置缓存

缓存配置十分重要，由于站点是静态站点，网站的内容变化比较少，为了降低CDN的回源请求，一定要配置节点缓存策略，可以参考我的配置如下，其中浏览器缓存可以按需配置：

注意：这里不用担心节点缓存时间配置的过长会导致页面无法更新，后面我会讲如何配置缓存的自动刷新。

CDN节点缓存自动刷新

由于上一步中配置了CDN节点的缓存策略，请求只要能够命中缓存，就不会进行回源请求了，这会导致我们的页面更新不能及时的展现给用户，因此需要考虑如何进行CDN节点的缓存自动刷新。

手动刷新方法：

内容分发网络 CDN 缓存刷新-配置指南-文档中心-腾讯云 (tencent.com)

下面这是网上大佬较老的方法，腾讯云后来改了一些操作，自动刷新新方法参考：

对象存储 设置 CDN 缓存刷新-控制台指南-文档中心-腾讯云 (tencent.com)

主要是在腾讯云 - 控制台 (tencent.com)去新建CDN缓存自动刷新的云函数

创建好后进行简单配置即可~~~

注意配置触发器，也可以是设置为定时更新CDN节点缓存

如果选择创建的是CDN缓存刷新而非CDN缓存自动刷新函数的时候，便可以通过修改下面的内容，实现每次deploy的时候自动刷新CDN缓存

1. 进入腾讯云，找到 函数计算 -> CDN 缓存刷新函数 -> 创建 CDN 缓存刷新函数
2. 修改 index.js 内容后重新部署

'use strict'

const CosSdk = require('cos-nodejs-sdk-v5')
const CdnSdk = require('./common/CdnSdk')
const CdnRefreshTask = require('./common/CdnRefreshTask')
const {
  getParams,
  getObjectUrl,
  logger,
  getLogSummary
} = require('./common/utils')

exports.main_handler = async (event, context, callback) => {
  /**
   * parse param from event and process.env
   */
  const { objects, cdnHosts, secretId, secretKey, token } = getParams(event)

  logger({
    title: 'param is parsed success, param as follow: ',
    data: { objects, cdnHosts, event }
  })
  /**
   * init cos instance
   */
  if (!secretId || !secretKey || !token) {
    throw new Error(`secretId, secretKey or token is missing`)
  }

  const cdnSdkInstance = new CdnSdk({ secretId, secretKey, token })
  const cosInstance = new CosSdk({
    SecretId: secretId,
    SecretKey: secretKey,
    XCosSecurityToken: token
  })

  const taskList = objects.map(({ bucket, region, key }) => {
    /* 变更内容-START */
    const purgeUrls = [];
    cdnHosts.forEach(host => {
      const tempUrl = getObjectUrl({
        cosInstance,
        bucket,
        region,
        key,
        origin: `${/^(http\:\/\/|https\:\/\/)/.test(host) ? '' : 'https://'}${host}`
      });
      purgeUrls.push(tempUrl);
      // 如果以 /index.html 结尾，则增加目录首页/。
      // 例如 https://www.xxxx.com/index.html, 则增加 https://www.xxxx.com/。
      if(tempUrl.lastIndexOf('/index.html') == (tempUrl.length - 11)){
        purgeUrls.push(tempUrl.substr(0, tempUrl.length - 10))
      }
    });
    return new CdnRefreshTask({
      cdnSdkInstance,
      urls: purgeUrls
    })
    /* 变更内容-END */
  })

  const taskResults = []
  for (const task of taskList) {
    const results = await task.runPurgeTasks()
    taskResults.push(...results)
  }

  logger({
    title: 'cdn refresh full logs:',
    data: taskResults
  })

  const { status, messages } = getLogSummary(taskResults)

  logger({
    messages: messages.map(item => item.replace(/\,\ /g, '\n'))
  })

  if (status === 'fail') {
    throw messages.join('; ')
  } else {
    return messages.join('; ')
  }
}

注：2023-4月，云函数要收费了，就不用CDN和云函数了，如果想自动刷新缓存，可以买套餐~~

自动化部署hexo-简化每次写博客的繁琐操作

定时任务

命令行

#比如说hexo每隔三十分钟自动更新
#不能同时用两次双引号怎么办？
schtasks /create /sc MINUTE /mo 30 /tn hexo_update /tr "cmd /c "F: && cd F:\Haoran\桌面\myblog && hexo g -d""
#这个命令却意外的生成了正确的计划任务
schtasks /create /sc MINUTE /mo 30 /tn hexo_update /tr "cmd /c 'F: && cd F:\Haoran\桌面\myblog && hexo g -d"'
#执行结果
成功: 成功创建计划任务 "hexo_update"。
#输入taskschd.msc查看计划任务

图形化界面（推荐）

批处理文件或者bash脚本

hexo_update.bat

chdir F:\Haoran\桌面\myblog 
hexo g -d

定时备份hexo所以文件

因为该文件夹下主题文件里面有.git了，不方面在博客的根目录下面再push到github上，，，

但是这些笔记不再存在有道云了，很怕有一天电脑突然宕机，所有宝贝文件都丢失了，，，

所以还是想想办法怎么定时的备份博客文件夹吧（或者其他重要的内容

还是一样的思路用Windows的定时任务去做这件事，

最终决定上传到七牛云对象存储上面~免费空间有10个G，完全够用了，，，

主要是七牛云提供了命令行工具给我们去做这件事

命令行工具(qshell)文档

Windows amd64版本

如果希望可以在任意目录下使用qshell，请将qshell工具可执行文件所在目录添加到系统的环境变量中。

上传文件的命令：fput

https://github.com/qiniu/qshell/blob/master/docs/fput.md

fput 命令用来以 multipart/form-data 的表单方式上传一个文件。适合于中小型文件的上传，一般建议如果文件大小超过100MB的话，都使用分片上传。

鉴权

需要在使用了 account 设置了 AccessKey, SecretKey 和 Name 的情况下使用。

qshell fput [--overwrite] [--callback-urls <CallbackUrls>] [--callback-host <CallbackHost>] [--storage <StorageType>] [--mimetype <MimeType>] <Bucket> <Key> <LocalFile>

参数

• Bucket：七牛空间名称，可以为公开空间或私有空间【必选】
• Key：文件保存在七牛空间的名称 【必选】
• LocalFile：本地文件的路径【必选】

--overwrite：是否覆盖空间已有文件，默认为false。 【可选】
--mimetype：指定文件的 MimeType。 【可选】
--storage：文件存储类型，默认为0(标准存储），1为低频存储，2为归档存储，3为深度归档存储，【可选】
--up-host: 指定上传域名 【可选】
--callback-urls：上传回调地址， 可以指定多个地址，以逗号分隔 【可选】
--callback-host：上传回调的HOST, 必须和CallbackUrls一起指定 【可选】

qshell fput hexobackup myblog/myblog_backup.tar.gz F:\BackupFile\myblog_backup.tar.gz

再一个计划任务用的bat脚本：

这是主要需要使用到的两条命令：分别是备份myblog文件夹和上传至七牛云

tar -zcvf F:\BackupFile\myblog_backup.tar.gz F:\Haoran\桌面\myblog\*
qshell fput hexobackup myblog_backup.tar.gz F:\BackupFile\myblog_backup.tar.gz

myblog_backup.bat

@echo =========日期时间按照YYYYMMDD_HHMMSS格式显示=============  
set CURRENT_DATE_TIME_STAMP=%date:~0,4%%date:~5,2%%date:~8,2%_%time:~0,2%%time:~3,2%%time:~6,2%  
echo %CURRENT_DATE_TIME_STAMP%  
@echo =========================================================  

@echo off
:: 去掉所有空格空格
:: Code by JM 2006-11-28 CMD@XP
:: 出处：http://www.cn-dos.net/forum/viewthread.php?tid=25172
set "CURRENT_DATE_TIME_STAMP=%CURRENT_DATE_TIME_STAMP: =%"
echo "☆%CURRENT_DATE_TIME_STAMP%☆Start copy~~~"


tar -zcvf F:\BackupFile\myblog_backup.tar.gz F:\Haoran\桌面\myblog\*
qshell fput hexobackup myblog/myblog_%CURRENT_DATE_TIME_STAMP%.tar.gz F:\BackupFile\myblog_backup.tar.gz

@echo =========备份完成=============  

再在taskschd.msc使用定时任务每两天备份一次好啦~~~~

ook！

换个好看的主题~

换主题同样是参考文档：https://hexo.io/zh-cn/docs/themes

总而言之~文档里什么都有

我选用的是butterfly，因为这个名字很喜欢

步骤

1. 在myblog目录下git拉取主题文件即可

git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
如果需更新，主题目录下 git pull即可
在myblog\themes目录下可以看到新增主题butterfly

2. 应用主题

在myblog的目录下 _config.yml，把主题改为主题目录的名字butterfly

3. 该主题需要我们额外安装插件

如果你没有 pug 以及 stylus 的渲染器，请下载安装：
npm install hexo-renderer-pug hexo-renderer-stylus --save

4. 最后重新加载和推送一下就可以看到成果了~~

hexo generate 
hexo deploy

或者直接hexo generate --deploy也是一样的。 Hexo 在生成完毕后自动部署网站

更详细的配置参考butterfly官方文档吧~

Butterfly主题升级

升级完成后，请到 Github 的 Releases 界面 或者 文档七 查看新版的更新内容。

里面有标注 _config 文件的变更内容（如有），请根据实际情况更新你的配置内容。

为了减少升级主题后带来的不便，请使用以下方法（建议，可以不做）。

在 hexo 的根目录创建一个文件 _config.butterfly.yml，并把主题目录的 _config.yml 内容复制到 _config.butterfly.yml 去。( 注意: 复制的是主题的 _config.yml ,而不是 hexo 的 _config.yml)

注意： 不要把主题目录的 _config.yml 删掉

注意： 以后只需要在 _config.butterfly.yml进行配置就行。
如果使用了 _config.butterfly.yml， 配置主题的 _config.yml 将不会有效果。

Hexo会自动合併主题中的_config.yml和 _config.butterfly.yml里的配置，如果存在同名配置，会使用_config.butterfly.yml的配置，其优先度较高。

**升级方法：**在主题目录下，运行

git pull

其他主题推荐

4https://blinkfox.github.io/

4https://butterfly.js.org/

4https://github.com/fluid-dev/hexo-theme-fluid

3.5https://dogzi.fun/

3.5https://github.com/shen-yu/hexo-theme-ayer

3https://zhwangart.com/

3https://liuyib.github.io/ 支持多关键词搜索

3https://yuang01.github.io/ 有弹幕

2.5https://molunerfinn.com/ https://github.com/Molunerfinn/hexo-theme-melody

2.5http://fech.in/ https://github.com/Fechin/hexo-theme-diaspora

2https://github.com/iissnan/hexo-theme-next

1.5https://haojen.github.io/Claudia-theme-blog/

1https://volantis.js.org/examples/ https://github.com/volantis-x/hexo-theme-volantis

1https://github.com/Chorer/hexo-theme-PureBlue

1https://shuoit.net/

0.5https://www.91h5.cc/categories/%E5%B7%A5%E5%85%B7/

0.5https://mser.xyz/

http://ghaseminya.ir/

评论系统

评论系统	是否需要注册	速度	长期使用
disqus	是	慢	国外有名的评论系统，但需要科学上网
livere	否	中等	韩国评论系统，能否长期使用不确定
gitalk	是	中等	github 在的一天它就在
utterances	是	中等	同上
Valine	否	快	用了两年多版本停止了， 很可惜
Waline	否	快	valine 的替代品，目前暂时使用的系统
Facebook Comments	是	中等	需要科学上网
Twikoo	否	快	新出的评论系统，没有用过
discuss	否	快	乐特制作的系统，有兴趣可以试试。
artalk	否	快	又是一个新出的评论系统

选用Twikoo，

Twikoo Vercel 部署教程

https://twikoo.js.org/quick-start.html#vercel-%E9%83%A8%E7%BD%B2

最近vercel的vercel.app 被污染了，国内被墙，，，换自己的域名即可解决该问题

• https://xyears.cn/thread-946.htm
• 『Twikoo』解决 Vercel.app 在国内被墙导致无法使用的问题
• Vercel子域名遭受DNS污染和SNI阻断

按照vercel给出的配置去修改dns解析的配置即可，在自己买域名的服务商那边修改

域名解析配置修改好之后，即可将主题url改为此url

如何在 Hexo 中优雅的引用自己的文章

Hexo 提供了一个叫作 post_link 的标签语法来专门对内部博文进行引用。它的格式如下：

{% post_link 文件名(不要后缀,可带路径) 文章别名(可选) %}

其中文件名指的是 Markdown 文件的文件名，例如你的博客中有一篇文件名为 HelloWorld.md 的博文，那你就可以使用

{% post_link hello/HelloWorld %}

来引用。Hexo 会自动将这篇博文的标题显示在文章中，并带上正确的链接。当然，你也可以给链接使用一个另外的名字，比如 “我的 HelloWorld”：

{% post_link HelloWorld 我的HelloWorld %}

hexo生成RSS

Hexo博客教程之添加RSS订阅_哔哩哔哩_bilibili

插件推荐

• rozbo/hexo-abbrlink: create one and only link for every post for hexo (github.com)

  可以把链接permalink转为数字的插件，配置容易，生成时自动转为数字。

  permalink: posts/:abbrlink/  #文章结尾不带 .html
  
  # 或者
  permalink: posts/:abbrlink.html  #文章结尾带 .html

• hexojs/hexo-generator-feed: Feed generator for Hexo. (github.com)

  生成RSS文件的插件

• hexojs/hexo-filter-nofollow: Add nofollow attribute to all external links automatically. (github.com)

  为网站使用到的所有外链添加rel=”noopener external nofollow noreferrer”, 可以有效地加强网站SEO和防止权重流失

• hexojs/hexo-generator-sitemap: Sitemap generator for Hexo. (github.com)

  生成sitemap的插件

• coneycode/hexo-generator-baidu-sitemap: Baidu Sitemap generator plugin for Hexo (github.com)

  看名字就知道，是专门为百度生成sitemap的插件

hexo阻止渲染某些文件

• hexo忽略文件(skip_render)配置 · 大专栏 (dazhuanlan.com)
• hexo忽略文件(skip_render)配置 · 大专栏 (dazhuanlan.com)

hexo加速

Gulp压缩全站静态资源

使用gulp压缩博客静态资源 | Akilarの糖果屋

静态资源压缩 Hexo-all-minifier

chenzhutian/hexo-all-minifier: A plugin for Hexo that optimizes HTML, CSS, JS and imagages, and it can optionally deploys your blog. (github.com)

模块安装

npm install hexo-all-minifier --save

配置

_config.yml

all_minifier: true
html_minifier:
  silent: true
css_minifier:
  silent: true
js_minifier:
  silent: true
image_minifier:
  enable: false

hexo插入广告

主题预留了三个位置可供插入广告，分别为主页文章(每三篇文章出现广告)/aside公告之后/文章页打赏之后。
把html代码填写到对应的位置

修改 主题配置文件

ad:
  index:
  aside:
  post:

index: <ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="xxxxxxxxxxxx" data-ad-client="ca-pub-xxxxxxxxxx" data-ad-slot="xxxxxxxxxx"></ins><script>(adsbygoogle=window.adsbygoogle||[]).push({})</script>

refer

• 故障排错参考官方文档
• butterfly安装文档
• hexo-butterfly-搜索系统引入
• hexo-butterfly魔改记录
• 利用Hexo在多台电脑上提交和更新github pages博客
• 巨好用：【Hexo插件系列】日志的自动分类插件 hexo-auto-category
• 如何在 Hexo 的博文中引用自己的文章 | 梅老师的个人博客
• Hexo同时部署在GitHub、Coding、Gitee_Ashin Wang’s Blog的博客-CSDN博客
• Hexo+腾讯云COS，为你的站点加速 - 简书 (jianshu.com)
• 利用腾讯云对象存储 COS 桶托管 hexo 博客 - 腾讯云开发者社区-腾讯云 (tencent.com)
• Hexo-deployer-cos-cdn 插件安装使用指南 | 悟尘记 - 李小龙的博客网站 (lixl.cn)
• Hexo博客部署到码云和Coding - 腾讯云开发者社区-腾讯云 (tencent.com)
• Hexo静态网站托管到腾讯云COS+CDN加速以及缓存自动刷新完美方案 - 掘金 (juejin.cn)
• 「推荐」本站用到的 hexo 插件 | 若风 (loafing.cn)