New Blog, New Beginning

发表于 更新于 评论数： 阅读次数：

之前的博客使用的Node.js，Hexo和Next主题版本很旧了，导致了很多的兼容性问题。因此我重新配置了我的博客，这篇文章记录了我的配置和开发过程。

安装Hexo

  1. 安装Node.js，使用命令node --version查看安装的版本，我安装的版本是16.17.0。

  2. 使用npm install -g hexo-cli安装Hexo。

  3. 使用如下命令初始化完成最基本的建站。

    1
    2
    3
    $ hexo init <BlogDir>
    $ cd <folder>
    $ npm install

我的Hexo版本是 6.3.0

更多详细的命令请参考参考文档。

启用Next主题

hexo next主题目前一共有三个版本：最早的版本，第二个版本，这两个版本均已停止维护，目前还在维护的是最新的版本，这三个版本之间的关系请参考这篇文章。

后面的所有配置均基于最新的版本。

  1. 下载安装Next主题

    1
    2
    $ cd hexo-site
    $ git clone https://github.com/next-theme/hexo-theme-next themes/next

  2. 在Hexo站点配置文件设置theme: next以启用Next主题。

  3. 在Next主题配置文件设置scheme: Pisces

短链接

Hexo默认以Markdown文件名作为链接名，如果文件名有中文，则需要对中文进行转义，此外，还有可能导致特别长的链接名，修改文章题目导致文章题目与文件名不匹配，修改文件名会导致文章Url修改，以上都不利于搜索引擎搜索。

所以我选择将文件名哈希后，使用哈希值作为超链接的地址。这样文章Url永远不变，方便搜索引擎搜索。

安装hexo-abbrlink：

1
$ npm install hexo-abbrlink --save

在Hexo站点配置文件设置

1
2
3
4
5
6
permalink: /post/:abbrlink/

# abbrlink config
abbrlink:
  alg: crc32  # 算法：crc16(default) and crc32
  rep: hex    # 进制：dec(default) and hex

更多内容可以参考这个文档

修改博客图片连接

使用hexo-abbrlink后，默认的Markdown添加图片的语法![image description]（address/image.jpg）中address没有被转换，导致无法显示图片。参考之前的hexo-asset-image插件，我自己写了一个新的插件以解决这个问题。

安装插件：

1
npm install https://github.com/littlesevenmo/hexo-asset-image2.git --save

在Hexo站点配置文件设置

1
2
post_asset_folder: true
root: /

这样你的博客文章结构就会如下所示：

1
2
3
YourBlogDoc
├── image.jpg
YourBlogDoc.md

使用![image description](YourBlogDoc/image.jpg)或![image description](D:/<Absolute_Addr>/YourBlogDoc/image.jpg)插入图片image.jpg。

使用hexo clean，hexo g，hexo server预览即可。

博客外观修改

修改超链接颜色

在<BlogDir>/themes/next/source/css/_common/components/post/post-body.styl添加

1
2
3
4
5
6
7
8
9
10
.post-body p a{
color: #0593d3;
border-bottom: none;
border-bottom: 1px solid #0593d3;
&:hover {
color: #fc6423;
border-bottom: none;
border-bottom: 1px solid #fc6423;
}
}

删除共有X篇文章

在<BlogDir>/themes/next/source/css/_common/components/post/post-collapse.styl中.

在.collection-title中添加display:none

1
2
3
.collection-title {
    display:none;
    ....

删除归档中的年、日期

在<BlogDir>/themes/next/source/css/_common/components/post/post-collapse.styl中.

在.collection-year中添加display:none

1
2
.collection-year {
    display:none;

在<BlogDIr>/themes/next/layout/_macro/post-collapse.njk中

删除

1
2
3
4
5
6
7
<div class="post-meta-container">
     <time itemprop="dateCreated"
           datetime="{{ moment(post.date).format() }}"
           content="{{ date(post.date, config.date_format) }}">
       {{ date(post.date, 'MM-DD') }}
     </time>
   </div>

删除Hexo强力驱动

在Next主题配置文件设置

1
2
footer
	powered: false

文章标签由#为标签图标

在Next主题配置文件设置tag_icon: true

设置分类、标签等

  1. 在Next主题配置文件设置要启用的分类，如

    1
    2
    3
    4
    5
    6
    7
    8
    9
    menu:
      home: / || fa fa-home
      about: /about/ || fa fa-user
      tags: /Tags/ || fa fa-tags
      categories: /Categories/ || fa fa-th
      archives: /archives/ || fa fa-archive
      #schedule: /schedule/ || fa fa-calendar
      #sitemap: /sitemap.xml || fa fa-sitemap
      #commonweal: /404/ || fa fa-heartbeat

  2. 创建分类目录文件

    1
    2
    3
    cd <BlodDir>
    $ hexo new page categories

    在<BlogDir>/source/categories/index.md中，文章头处添加

    1
    type: "categories"

  3. 这样该页面内的内容就是分类内容。Tag同理。

  4. 在博客文章头处添加

    1
    2
    3
    4
    5
    categories: 
    - Your categorie
    tags:
    - Tag1
    - Tag2

    即可为文章设置分类和标签。

AboutMe的内容可以写在About页面里。

关闭动画

在Next主题配置文件设置

1
2
motion:
  enable: false

您也可以在motion中修改其他的动画配置。

启用文章加载进度条

在Next主题配置文件设置

1
2
pace:
  enable: true

启用数学公式

原有的数学公式渲染插件部分语法与Markdown语法不兼容，因此我使用pandoc渲染。

  1. 安装pandoc

  2. 卸载自带的数学公式编辑插件

    1
    $ npm uninstall hexo-renderer-marked

  3. 安装使用pandoc的插件

    1
    npm install hexo-renderer-pandoc

  4. 在Next主题配置文件设置启用mathjax

    1
    2
    3
    4
    mathjax:
        enable: true
        # Available values: none | ams | all
        tags: none

  5. 在想要使用Mathjax渲染的博客文章头中标记

    1
    mathjax: true

  6. 在Hexo站点配置文件设置

    1
    2
    pandoc:
      pandoc_path: C:/Program Files/Pandoc/pandoc.exe

添加搜索

本地搜索

  1. 安装搜索插件

    1
    $ npm install hexo-generator-searchdb --save

  2. 在Hexo站点配置文件设置

    1
    2
    3
    4
    5
    search:
      path: search.xml
      field: post
      content: true
      format: html

  3. 在Next主题配置文件设置

    1
    2
    local_search:
      enable: true

当点击搜索时，需要下载索引文件search.xml然后再进行搜索。

不需要手动更新索引，hexo g时会自动更新。

优点：

  1. 索引文件search.xml与博客共存，稳定可靠。
  2. 无搜索限制

缺点：

  1. 博客数量多的时候，search.xml文件会很大，加载慢。

参考文档

使用Algolia搜索

有两个插件支持Algolia搜索：hexo-algolia与hexo-algoliasearch，前者只能搜索文章标题，而后者能搜索文章内容。我在英文站点使用后者。

  1. 在Algolia中创建一个index

  2. 记录Application ID，Search-Only API Key，Admin Key

  3. 安装npm install hexo-algoliasearch --save

  4. 在Hexo站点配置文件设置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    algolia:
      appId: "Your App ID"
      apiKey: "Your Search Only API Key"
      adminApiKey: "40321c7c207e7f73b63a19aa24c4761b"
      chunkSize: 5000
      indexName: "Your Index Name"
      fields:
        - content:strip:truncate,0,500
        - excerpt:strip
        - gallery
        - permalink
        - photos
        - slug
        - tags
        - title

  5. 在Next主题配置文件设置

    1
    2
    3
    4
    algolia_search:
      enable: true
      hits:
        per_page: 10

我认为如果找到了就显示找到了的结果，而不必像Google，Baidu一样显示找到了XXX个 在XXX毫秒内，如果没找到就显示没找到。在<BlogDir>/themes/next/source/js/third-party/search/algolia-search.js中，删除

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
instantsearch.widgets.stats({
      container: '.algolia-stats',
      templates: {
        text: data => {
          const stats = CONFIG.i18n.hits_time
            .replace('${hits}', data.nbHits)
            .replace('${time}', data.processingTimeMS);
          return `<span>${stats}</span>
            <img src="${CONFIG.images}/logo-algolia-nebula-blue-full.svg" alt="Algolia">`;
        }
      },
      cssClasses: {
        text: 'search-stats'
      }
    }),

更新索引：

1
hexo algolia

使用Algolia搜索的优点：

  1. 无需预加载，速度快
  2. 国内可能会遇到网速慢搜索速度慢的情况。

缺点： 1. 免费版每个月有10000次搜索限制。 2. 每次更新文章都需要新建索引

参考文档：Next参考文档，hexo-algolia参考文档，Hexo Algoliasearch

添加评论系统

Next主题自带的评论系统是valine，是一个没有后端的评论系统，据说还有一些信息安全问题。因此我使用waline，需要先遵循waline的配置文档设置需要的组件，此外还要安装插件Hexo NexT Waline

1
npm install @waline/hexo-next --save

在Next主题配置文件设置：

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
# Waline Config File
# For more information:
# - https://waline.js.org
# - https://waline.js.org/reference/component.html
waline:
  # New! Whether enable this plugin
  enable: true

  # Waline server address url, you should set this to your own link
  serverURL: 'https://waline-server-five-pi.vercel.app/'

  # Waline library CDN url, you can set this to your preferred CDN
  libUrl: https://unpkg.com/@waline/client@v2/dist/waline.js


  # Waline CSS styles CDN url, you can set this to your preferred CDN
  cssUrl: https://unpkg.com/@waline/client@v2/dist/waline.css

  # Custom locales
  locale:
    placeholder: Welcome to comment # Comment box placeholder

  # If false, comment count will only be displayed in post page, not in home page
  commentCount: false

  # Pageviews count, Note: You should not enable both `waline.pageview` and `leancloud_visitors`.
  pageview: true

  # Custom emoji
  emoji:
  #   - https://unpkg.com/@waline/emojis@1.0.1/weibo
  #   - https://unpkg.com/@waline/emojis@1.0.1/alus
  #   - https://unpkg.com/@waline/emojis@1.0.1/bilibili
  #   - https://unpkg.com/@waline/emojis@1.0.1/qq
  #   - https://unpkg.com/@waline/emojis@1.0.1/tieba
  #   - https://unpkg.com/@waline/emojis@1.0.1/tw-emoji

  # Comment infomation, valid meta are nick, mail and link
  meta:
    - nick
    - mail
    # - link

  # Set required meta field, e.g.: [nick] | [nick, mail]
  # requiredMeta:
  #   - nick

  # Language, available values: en-US, zh-CN, zh-TW, pt-BR, ru-RU, jp-JP
  lang: en-US

  # Word limit, no limit when setting to 0
  wordLimit: 0

  # Whether enable login, can choose from 'enable', 'disable' and 'force'
  login: enable

  # comment per page
  pageSize: 10

如果不想在某个页面启用评论，请在文章头处设置

1
comments: false

默认的评论说明语是Waline，显得很奇怪，在<BlodDir>\themes\next\languages\en.yml中，post下添加

1
2
3
post:
  comments:
    waline: Comments

即可修改Waline为Comments

我的中文博客使用的是Leancloud 国内版+GitLab，我的英文博客使用的是LeanCloud国际版+GitHub

设置FTP上传<弃用>

目前我用虚拟主机来托管我的博客，需要使用FTP上传文件，根据ChaosTong/hexo-deployer-ftpsync，我简单修改了一下，以适应最新的node.js。

安装：

1
npm install git@github.com:littlesevenmo/hexo-deployer-ftpsync.git --save

在Hexo站点配置文件设置

1
2
3
4
5
6
7
8
9
10
deploy:
  type: ftpsync
  host: Your FTP Host
  user: Your FTP Username
  pass: Your FTP Password
  remote: /
  port: 21
  ignore: 
  connections: 1
  verbose: false

强制使用SSH访问博客<弃用>

使用FTP上传文件名为.htaccess的文件到站点的根目录，内容为

1
2
3
RewriteEngine On
RewriteCond %{HTTP:KERSSL} !on
RewriteRule .* https://www.你的域名.com/$1 [R=301,L]

由于在hexo d之后，public文件夹的内容会发生变化，每次都要重新复制粘贴再上传，我是用alias命令（在Windows PowerShell中为function）一次执行多个命令，如下：

1
function blogd {cd D:\Blog ; hexo clean ; hexo g ; hexo algolia; Copy-Item -Path .\.htaccess -Destination .\public\; hexo d}

使用Git上传<英文博客在用>

我的虚拟主机发布公告说，因为亏损严重，要停运了。于是我不得不把博客迁移到其他地方。我的英文站点主要面向国外的用户，因此我把它放在了Github Page上，中文站点目前托管在阿里云对象存储上。

GitHub Page 设置<英文博客在用>

我的英文博客托管在GitHub Page，因此我需要在域名解析中添加一条解析，我在阿里云域名解析中添加

1
2
@	A	默认	185.199.111.153 	10 分钟
www	CNAME	默认	<GitHub Page> 10 分钟

在GitHub Page Custom domain选项下，添加www.<yourdomain>.com，并勾选Enforce HTTPS。

域名邮箱设置

很早之前我在QQ邮箱域名邮箱中设置了我的中文博客域名的域名邮箱。现在QQ邮箱已经不再支持域名邮箱，转而可以使用腾讯企业邮箱。具体请查看这篇文章

我英文博客域名的域名邮箱使用的是GMail，首先要设置转发，在https://forwardemail.net/中，登记你的域名，并且在域名解析中设置如下解析

1
2
3
@	MX	默认	mx1.forwardemail.net | 10
@	MX	默认	mx2.forwardemail.net | 10
@	TXT	默认	forward-email=<你的GMail>

在这里我设置的是所有发往XX.mydomain.com下的邮件都转发到GMail，如果你只想转发某几个邮箱，例如转发hello@yourdomain.com和support@yourdomain.com到user@gmail.com你可以在TXT中设置

1
@	TXT	默认	forward-email=hello:user@gmail.com,support:user@gmail.com

阿里云对象存储OSS设置<中文博客>

云主机还是太麻烦，现在阿里云的对象存储支持静态博客了。我又设置了一个阿里云OSS的博客。

  • Bucket名称：随便写
  • 地域：如果要在国内访问，一定要选择有地域属性，地区随便选。
  • 存储类型：标准存储或者低频访问存储均可。我选的标准存储。
  • 存储冗余类型：本地冗余存储或者同城冗余存储都行。
  • 读写权限：一定要选择公共读
  • Bucket功能中所有的选项我全都没有选。

完成后进入到你的Bucket。在Bucket配置-域名管理中，绑定你的域名。

在数据管理-静态页面中，设置默认首页为index.html，设置子目录首页为开通，我设置文件404规则为Redirect，可以按需修改。

在Hexo目录下安装上传插件：

1
$ npm install hexo-deployer-ali-oss --save

在Hexo站点配置文件中设置部署：

1
2
3
4
5
6
deploy:
      type: ali-oss
      region: <你的oss 区域代码>
      accessKeyId: <你的oss  accessKeyId>
      accessKeySecret: <你的oss accessKeySecret>
      bucket: <你的bucket name>

然后就可以用hexo d将博客上传到OSS上了。

OSS上的博客需要用户通过自己的域名来访问，在OSS-Bucket列表-博客OSS-Bucket配置-域名管理中，绑定域名并CNAME域名到OSS的访问地址。至此，就可以通过该域名访问OSS上的博客了。

配置阿里云CDN加速

使用阿里云的CDN加速可以优化在全球各地访问网站的速度，并可以强制通过HTTPS访问。

添加域名

  • 业务信息：加速区域可以根据需要选择，我选择了全球，加速域名选择博客的域名（我的是www.windsings.com），业务类型选择图片小文件。
  • 源站信息：选择OSS域名，优先级：主；权重：默认为10，不用管；端口：是CDN访问源站（在这里是OSS）的方式，可以选择80或者443，这两个都可以。我选的是443。

点击下一步后，会跳转到推荐配置，这里不用管，直接返回到CDN-域名管理。此时会看到刚才添加的域名，在CNAME栏下，有一个地址，通过这个地址访问，就是CDN加速访问了。通过源站信息下的域名访问，就是不通过CDN加速访问。

返回到域名解析，添加CNAME解析，主机头为www，值为CNAME下的CDN加速访问地址。稍等后刷新CDN域名管理页面，可以看到CNAME状态变为已配置。

开启HTTPS：首先需要申请一个免费的证书，然后在域名管理-HTTPS配置中，开启HTTPS证书，并设置强制跳转HTTP->HTTPS。

流量限制：在域名管理-流量限制中，设置CDN最大流量限制。

在DNS解析中，设置主机记录@显性URL转发到 https://www.windsings.com，主机记录www CNAME到CDN地址。

以上各项在我本地测试的结果是0 Error，0 Warning