EchoSun's Blog

Life is short, knowledge transfer.

0%

基于Hexo的个人博客部署小记

发表于 更新于 分类于 阅读次数：
本文字数： 4.1k 阅读时长 ≈ 4 分钟
记录Hexo及其主题的配置，以及博客的发布于分区域解析

前言

博主在CSDN上写博客多年，然而眼看着CSDN的广告和付费功能越加越多，越发不喜欢这种氛围，而且博主的很多内容被无良的广告站主爬为己用，成了他们赚钱的工具，更觉得气愤。索性自己在Github Page的基础上，配置coding和vercel平台，使用dnspod的分区域解析功能，搭建了自己的个人博客。在这里记录一下自己的配置细节，希望能帮助到有同样想法的朋友。

随着对博客的不断完善，将会同步更新本博客的对应章节。

Hexo

安装

npm install hexo-cli -g
详见hexo文档

Hexo命令

常见命令

hexo clean 删除自动生成的文件和缓存
hexo deploy 部署博客
hexo generate 生成静态页面至public目录
hexo help 查看帮助
hexo init 初始化博客目录
hexo list 列出博客的信息，如“页面”、“post”、“标签”等
hexo new "postName" 新建文章
hexo new page "pageName" 新建页面
hexo publish 将一条post从_drafts目录移动到_posts目录
hexo render 用渲染器插件渲染文件
hexo server 开启预览访问端口（默认端口4000，’ctrl + c’关闭server）
hexo version 查看Hexo的版本

命令缩写

hexo n < == > hexo new
hexo g < == > hexo generate
hexo s < == > hexo server
hexo d < == > hexo deploy

组合命令

hexo s -g #生成并本地预览
hexo d -g #生成并上传

Hexo优化

  • 添加404页面
    创建source/404.md文件，内容如下：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    ---
    title: 404 Not Found
    date: 2021-01-22 10:41:27
    comments: false
    ---

    <center>
    对不起，您所访问的页面不存在或者已删除。
    您可以<a href="https://blog.echosun.top">点击此处</a>返回首页。
    </center>

    Hexo技巧

  • 让博文列表不显示全部内容
    在合适的位置加上<!--more-->即可。

Hexo主题之next

next介绍

  • 主页
    next项目网址
  • 升级
    1
    2
    $ cd themes/next
    $ git pull

    next优化

  • 更换logo
    进入themes/next/source/images/文件夹，替换如下图片文件：
    1
    2
    3
    4
    apple-touch-icon-next.png
    favicon-16x16-next.png
    favicon-32x32-next.png
    logo.svg
  • 页面角落添加”fork me on github”按钮
    修改博客目录的themes/next/_config.yml文件，找到github_banner字段，修改如下：
    1
    2
    3
    4
    github_banner:
      enable: true
      permalink: https://github.com/echosun1996
      title: Follow me on GitHub
  • 修改next主题风格为Gemini
    修改博客目录的themes/next/_config.yml文件，找到Schemes字段，修改如下：
    1
    2
    3
    4
    5
    # Schemes
    #scheme: Muse
    #scheme: Mist
    #scheme: Pisces
    scheme: Gemini
  • 增加评论功能
    在livere网站中注册，并获取uid。
    然后修改博客目录的themes/next/_config.yml文件，找到livere_uid字段，填入自己的uid。
    1
    2
    # LiveRe comments system
    livere_uid: <your_uid>
  • 添加分类列表
    运行hexo new page categories命令，然后修改source/categories/index.md文件，添加 type 字段，设置为 categories。修改后的文件内容为（date字段随意）：
    1
    2
    3
    4
    5
    6
    ---
    title: categories
    date: 2021-01-22 21:17:00
    type: categories
    comments: false
    ---
    接着修改博客目录的themes/next/_config.yml 文件，找到 menu 模块，把 categories 的注释给去掉。修改后的文件内容为：
    1
    2
    menu:
      categories: /categories/ || fa fa-th
  • 支持博客搜索功能
    在博客根目录下运行
    1
    2
    npm install hexo-generator-search --save
    npm install hexo-generator-searchdb --save
    在博客根目录下的 _config.yml 文件，在文件末尾添加如下内容：
    1
    2
    3
    4
    5
    6
    search:
      path: search.xml
      field: post
      format: html
      content: true
      limit: 10000
    接着修改博客目录的themes/next/_config.yml 文件，找到local_search字段，设置enable为 ture。修改后的内容为：
    1
    2
    local_search:
      enable: true
  • 隐藏底部Hexo字段
    修改themes/next/_config.yml文件，将powered字段设置为false。
    1
    2
    # Powered by Hexo & NexT
    powered: false
  • 修改代码块为黑底，mac样式
    修改themes/next/_config.yml文件，将codeblock字段修改如下：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    codeblock:
      # Code Highlight theme
      # Available values: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
      # See: https://github.com/chriskempson/tomorrow-theme
      highlight_theme: night bright #normal
      # Add copy button on codeblock
      copy_button:
        enable: true #false
        # Show text copy result.
        show_result: true # false
        # Available values: default | flat | mac
        style: mac
  • 为页面添加快速跳转到头部按钮，并显示百分比
    修改themes/next/_config.yml文件，将back2top字段修改如下：
    1
    2
    3
    4
    5
    6
    back2top:
      enable: true
      # Back to top in sidebar.
      sidebar: false
      # Scroll percent label in b2t button.
      scrollpercent: true #false
  • 在页面最上方显示阅读进度
    修改themes/next/_config.yml文件，将reading_progress字段修改如下：
    1
    2
    3
    4
    5
    6
    7
    # Reading progress bar
    reading_progress:
      enable: true #false
      # Available values: top | bottom
      position: top
      color: "#d46464" #"#37c6c0"
      height: 2px
  • 启动书签，记录阅读位置
    修改themes/next/_config.yml文件，将bookmark字段修改如下：
    1
    2
    3
    4
    5
    6
    7
    8
    # Bookmark Support
    bookmark:
      enable: true #false
      # Customize the color of the bookmark.
      color: "#222"
      # If auto, save the reading progress when closing the page or clicking the bookmark-icon.
      # If manual, only save it by clicking the bookmark-icon.
      save: auto
  • 中英文之间渲染时自动添加空格
    修改themes/next/_config.yml文件，将pangu字段修改如下：
    1
    2
    # Pangu Support
    pangu: true #false
  • 页面预加载【不采用】
    在博客根目录下运行npm install quicklink --save
    修改themes/next/_config.yml文件，将quicklink字段修改如下：
    1
    2
    quicklink:
      enable: true
  • 使用pjax加速
    在博客根目录下运行：
    1
    2
    cd themes/next/source/lib/
    git clone https://github.com/theme-next/theme-next-pjax pjax
    修改themes/next/_config.yml文件，将pjax字段修改如下：
    1
    pjax: true
  • 创建标签页
    在博客根目录下运行hexo new page tags命令，然后修改source/tags/index.md文件，添加 type 字段，设置为 tags，添加 comments 字段，设置为 false。修改后的文件内容为（date字段随意）：
    1
    2
    3
    4
    5
    6
    ---
    title: tags
    date: 2021-01-22 23:08:01
    type: tags
    comments: false
    ---
    接着修改博客目录的themes/next/_config.yml 文件，找到 menu 模块，把 tags 的注释给去掉。修改后的文件内容为：
    1
    2
    menu:
      tags: /tags/ || fa fa-tags
  • 使用gitalk留言
    首先需要在 GitHub 上面注册一个 OAuth Application，注册完毕之后拿到 Client ID、Client Secret。
    首先修改博客目录的themes/next/_config.yml 文件，找到comments模块，将active设置为gitalk。
    1
    2
    3
    4
    5
    6
    7
    # Multiple Comment System Support
    comments:
      # Available values: tabs | buttons
      style: tabs
      # Choose a comment system to be displayed by default.
      # Available values: changyan | disqus | disqusjs | facebook_comments_plugin | gitalk | livere | valine | vkontakte
      active: gitalk
    再修改该配置文件中的对应配置如下：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    # Gitalk
    # Demo: https://gitalk.github.io
    # For more information: https://github.com/gitalk/gitalk
    gitalk:
      enable: true
      github_id: {your client id}
      repo: {your client id}.github.io # Repository name to store issues
      client_id: {your client id} # GitHub Application Client ID
      client_secret: {your client secret} # GitHub Application Client Secret
      admin_user: germey # GitHub repo owner and collaborators, only these guys can initialize gitHub issues
      distraction_free_mode: true # Facebook-like distraction free mode
      # Gitalk's display language depends on user's browser or system environment
      # If you want everyone visiting your site to see a uniform language, you can set a force language value
      # Available values: en | es-ES | fr | ru | zh-CN | zh-TW
      language: zh-CN
  • 启用leancloud统计访问次数
    在console.leancloud.cn创建账号，获取app_id等信息，填入博客目录的themes/next/_config.yml 文件的leancloud_visitors模块中
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    # Do not enable both `valine.visitor` and `leancloud_visitors`.
    leancloud_visitors:
      enable: true
      app_id: <your app id>
      app_key: <your app key>
      # Required for apps from CN region
      server_url: <your server url>
      # Dependencies: https://github.com/theme-next/hexo-leancloud-counter-security
      # If you don't care about security in leancloud counter and just want to use it directly
      # (without hexo-leancloud-counter-security plugin), set `security` to `false`.
      security: false #true
      betterPerformance: true
  • 显示阅读时间
    1
    2
    npm install hexo-symbols-count-time --save
    npm install eslint --save
    修改博客目录的_config.yml 文件，在最后添加下面内容：
    1
    2
    3
    4
    5
    6
    symbols_count_time:
      symbols: true                # 文章字数统计
      time: true                   # 文章阅读时长
      total_symbols: true          # 站点总字数统计
      total_time: false             # 站点总阅读时长
      exclude_codeblock: true     # 排除代码字数统计
    修改博客目录的themes/next/_config.yml 文件的symbols_count_time模块
    1
    2
    3
    4
    5
    6
    # Post wordcount display settings
    # Dependencies: https://github.com/theme-next/hexo-symbols-count-time
    symbols_count_time:
      separated_meta: true # 是否另起一行（true的话不和发表时间等同一行）
      item_text_post: true # 首页文章统计数量前是否显示文字描述（本文字数、阅读时长）
      item_text_total: true # 页面底部统计数量前是否显示文字描述（站点总字数、站点阅读时长）
  • 显示版权
    修改博客目录的themes/next/_config.yml 文件的creative_commons模块
    1
    2
    3
    4
    5
    creative_commons:
      license: by-nc-sa
      sidebar: true # flase
      post: true # false
      language:
  • 添加RSS【不使用】
    在博客主目录下执行：
    1
    npm install --save hexo-generator-feed
    修改博客目录的_config.yml 文件
    1
    2
    3
    # Extensions
    ## Plugins: http://hexo.io/plugins/
    plugins: hexo-generate-feed
    修改博客目录的themes/next/_config.yml 文件的rss模块
    1
    2
    3
    4
    # Set rss to false to disable feed link.
    # Leave rss as empty to use site's feed link.
    # Set rss to specific value if you have burned your feed already.
    rss: /atom.xml
  • 启用 LaTeX 公式显示
    在博客主目录下执行：
    1
    npm install hexo-math --save
    修改博客目录的_config.yml 文件，添加如下内容
    1
    2
    3
    4
    5
    6
    math:
      engine: 'mathjax' # or 'katex'
      mathjax:
        # src: custom_mathjax_source
        config:
          # MathJax config
    修改博客目录的themes/next/_config.yml 文件的mathjax模块
    1
    2
    3
    4
    5
    # MathJax support.
    mathjax:
       enable: true # false
       # See: https://mhchem.github.io/MathJax-mhchem/
       mhchem: false
    然后在需要开启公式渲染的页面加入
    1
    mathjax: true
  • gulp压缩静态资源
    在博客主目录下执行：
    1
    2
    npm install -g gulp
    npm install gulp gulp-htmlclean gulp-htmlmin gulp-clean-css gulp-uglify-es gulp-imagemin del gulp-minify-inline-json
    在 Hexo 文件夹下新建一个 gulpfile.js 文件，粘贴以下代码然后保存
    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
    // 引入需要的模块
    var gulp = require('gulp');
    var minifycss = require('gulp-clean-css');
    var uglify = require('gulp-uglify');
    var htmlmin = require('gulp-htmlmin');
    var htmlclean = require('gulp-htmlclean');

    // 压缩public目录下所有html文件, minify-html是任务名, 设置为default，启动gulp压缩的时候可以省去任务名
    gulp.task('minify-html', function() {
        return gulp.src('./public/**/*.html') // 压缩文件所在的目录
            .pipe(htmlclean())
            .pipe(htmlmin({
                removeComments: true,
                minifyJS: true,
                minifyCSS: true,
                minifyURLs: true,
            }))
            .pipe(gulp.dest('./public')) // 输出的目录
    });

    // 压缩css
    gulp.task('minify-css', function() {
        return gulp.src('./public/**/*.css')
            .pipe(minifycss({
                compatibility: 'ie8'
            }))
            .pipe(gulp.dest('./public'));
    });
    // 压缩js
    gulp.task('minify-js', function() {
        return gulp.src(['./public/**/.js','!./public/js/**/*min.js'])
            .pipe(uglify())
            .pipe(gulp.dest('./public'));
    });

    // 默认任务
    /*
    gulp.task('default', [
        'minify-html','minify-html1','minify-css','minify-js','minify-images'
    ]);
    */
    // gulp 4.0 适用的方式
    gulp.task('default', gulp.parallel('minify-html','minify-css','minify-js'
     //build the website
    ));
    为.github/workflows下配置文件增加npm install gulp -g和下方的配置：
    1
    2
    3
    4
    hexo clean
    hexo generate
    gulp
    hexo deploy
  • 支持amp【不启用】
    在根目录下运行
    1
    npm install hexo-generator-amp --save
    在themes/next/layout/_partials/head/head.swig中加入下面内容：
    1
    2
    3
    {%- if is_post() and config.generator_amp %}
      <link rel="amphtml" href="./amp.html" />
    {%- endif %}
    修改_config.yml，加入如下内容
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    # 启动amp支持
    generator_amp:
      templateDir: amp-template
      assetDistDir: amp-dist
      logo:
        path: sample/sample-logo.png
        width: 600
        height: 60
      substituteTitleImage:
        path: sample/sample-substituteTitleImage.png
        width: 1024
        height: 800
      warningLog: true # false # To display warning, please set true.
      validateAMP: true # To AMP HTML validate automatically, please set true.
      generateAmpPath: posts/:abbrlink.html/amp.html

    发布并绑定域名

    申请域名

    在namesilo申请个人域名echosun.top，并将名称服务器(NameServer)修改至DNSPod。

发布

  • 分线路解析需要注意域名设置的先后问题
    由于域名解析存在缓存，因此在配置DNS国内外分流解析时，建议先配置coding的域名，然后再配置Github的域名。然后再将Github的线路类型改为境外，coding的线路类型改为境内，即可实现分线路解析。

1. Github

我将博客的源码上传至gihub的私有仓库中，然后使用Github Action将生成的网页发布到Github个人页仓库中，然后就可以通过Github Page进行浏览，然而国内由于各种原因，导致该页面经常无法访问，因此需要将博客发布到不同的平台上，并通过DNSPod进行分流，实现国内、外的正常访问。

由于我已经将导出后的静态页面部署至Github Page，因此，在其他的平台上只需要对github上的这一仓库进行克隆，并执行静态展示即可，不需要额外配置hexo编译脚本。

  • 修改github个人页域名

最终目的：用blog.echosun.top访问个人主页

  1. 首先在cloudflare中为blog.echosun.top添加CNAME记录到echosun1996.github.io。
  2. 再在Github个人页仓库的settings中将域名修改为blog.echosun.top，同时，确保选中Enforce HTTPS。
  3. 在博客目录下的public文件夹中创建CNAME文件，内容为blog.echosun.top，即避免每次上传仓库后需要再次手动修改github个人页域名设置的问题。

2. coding

coding是腾讯提供的一个代码管理工具，类似于github，也可以发布自己的个人页，配合DNSPod的区域分流解析功能，实现国内外分线路解析，避免国内用户不能访问Github Page的问题。

创建一个DevOps项目，然后在代码仓库中克隆github上的仓库，然后在”持续部署/静态网站/新建静态网站”中添加一个静态网站。

添加完成后在自定义域名中将域名改为blog.echosun.top。

注意，在配置Github Action时，由于coding更改了域名，因此需要将e.coding.net加入known_hosts，很多旧教程使用coding.net会导致报Host key verification failed.fatal: Could not read from remote repository.的错误。正确的Github Action脚本文件如下：

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
name: Hexo Blog CI

on:
  push:
    branches:
      - master

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
    # check it to your workflow can access it
    # from: https://github.com/actions/checkout
    - name: Checkout Repository master branch
      uses: actions/checkout@master

    # from: https://github.com/actions/setup-node
    - name: Setup Node.js 12.x
      uses: actions/setup-node@master
      with:
        node-version: "12.x"

    - name: Setup Hexo Dependencies
      run: |
        npm install hexo-cli -g
        npm install hexo-deployer-git --save
        npm install

    - name: Setup Deploy Private Key
      env:
        HEXO_DEPLOY_PRIVATE_KEY: ${{ secrets.HEXO_DEPLOY_PRIVATE_KEY }}
      run: |
        mkdir -p ~/.ssh/
        echo "$HEXO_DEPLOY_PRIVATE_KEY" > ~/.ssh/id_rsa
        chmod 600 ~/.ssh/id_rsa
        ssh-keyscan -t rsa e.coding.net >> ~/.ssh/known_hosts
        ssh-keyscan -t rsa github.com >> ~/.ssh/known_hosts
    - name: Setup Git Infomation
      run: |
        git config --global user.name 'git用户名'
        git config --global user.email 'git邮箱'
    - name: Deploy Hexo
      run: |
        hexo clean
        hexo generate
        hexo deploy

3. vercel

用github账号登陆vercel，授予Github个人页仓库的访问权限，创建一个静态页面模板（注意，不要设置为hexo模板！），并在Domains中添加backup.echosun.top这一域名，然后按照提示在DNSPod中修改CNAME解析，最终建立博客的备份站点。