重新开始搞博客

为什么选 hexo ?

一开始只想有个属于自己的地方写文字记录,静态博客、使用markdown编写就是我的首选了，尤其是 markdown 自由的插入图片、视频，结合免费的图床和云存储服务，就可以把这些媒体文件从文字中分离出来，以后有了自己的动态网站迁移文章也方便。其次是自己以前搭建过 hexo + github pages 的博客, 还有一点很重要：这些东西完全免费，如果你不使用自定义域名的话，连域名的钱的省了。

所以，这个基于 hexo 的静态博客托管在 Github Pages服务上 仓库地址

当然免费也是有代价的:

• github 在国内没有服务器,访问速度较慢
• 在敏感时间比如两会期间，GitHub 在国内会完全无法访问

本站点唯一的开销就是 frmachao.top 这个域名了，一口气买了 10 年。

评论怎么迁移呢?

这个还没想好，因为现在的评论功能是使用 Gitalk 实现的，后面导出评论数据可能需要自己写个脚本才能批量导出。

其实不止评论，因为静态博客的原因，很多东西都要借助第三方的插件来实现,比如

• 文章阅读量
• 网页访问量
• 邮件订阅
• 在线聊天

自定义域名与 SSL 证书

当前基于 hexo 的静态博客 frmachao’blog 托管在 Github Pages 服务上。

域名在购买于阿里云并备案，主要为了使用阿里云免费的SSL证书才备案的域名，结果晚上看了一篇博客 才知道： Github Pages 支持绑定自定义的域名，启用域名绑定后无需用户自行配置。（博客链接忘记了，后面找到后补上）

评论插件

使用gitalk评论插件

遇到问题：gitalk 官方代码采用了第三方提供的 cors proxy 服务，此服务已于 2021 年 1 月 31 日终止

解决：gitalking 切换到自建的 CORS proxy 参考：

1. https://github.com/Zibri/cloudflare-cors-anywhere 一个代理库
2. https://github.com/gitalk/gitalk/issues/429 大家对这个问题的讨论

2021.03.03 Gitalk 作者发布了更新

Gitalk 更新版本到 1.7.2 或者修改配置增加 proxy: ‘https://cors-anywhere.azm.workers.dev/https://github.com/login/oauth/access_token'

后面自己搭建了 cors 服务，参考: https://lanyundev.com/posts/1f7efefb

Gitalk 原理

在静态博客中使用评论功能，文章的唯一标示就是页面的location.href 即 url ,gitalk 将 这个唯一标识 作为 issue 的 label 与文章关联，每篇文章对应一个 Issue

fluid主题 里集成 Gitalk 插件时多处理了一步 在 gitalk.ejs 里做了 md5 加密，加密后的值就是 issue 的 label

var gitalk = new Gitalk({
  clientID: '<%= theme.gitalk.clientID %>',
  clientSecret: '<%= theme.gitalk.clientSecret %>',
  repo: '<%= theme.gitalk.repo %>',
  owner: '<%= theme.gitalk.owner %>',
  admin: <%- JSON.stringify(theme.gitalk.admin || []) %>,
  id: '<%= md5(page.path) %>', // 这里做了md5 加密
  language: '<%= theme.gitalk.language %>',
  labels: <%- JSON.stringify(theme.gitalk.labels || []) %>,
  perPage: <%= theme.gitalk.perPage %>,
  pagerDirection: '<%= theme.gitalk.pagerDirection %>',
  createIssueManually: <%= theme.gitalk.createIssueManually %>,
  distractionFreeMode: <%= theme.gitalk.distractionFreeMode %>,
  proxy: '<%= theme.gitalk.proxy %>'
});

page.path :page 是 hexo 中提供的变量，page.path 是页面网址（不含根路径）
比如 https://blog.frmachao.top/posts/9573d8fb/这个页面取 page.path 的值就是 posts/9573d8fb/

加密后的 32 位 MD5：f43773bc09059051be6825b5c9006f58

https://blog.frmachao.top/links/
非文章页面取 page.path 的值就是 —> links/index.html

加密后的 32 位 MD5：38687fdbcd50268b872dd8c493f739e6

注意⚠️: page.path 取到的 url 路径是 url 解码过的

2021/03/%E4%B8%80%E4%B8%AA%E5%8D%9A%E5%AE%A2/ # url编码
2021/03/一个博客/  # url解码

图床

目前使用 github 仓库 作为图床

使用 github仓库做图床，利用 public repo 提供的免费 jsdelivr CDN

• 仓库地址： https://github.com/frmachao/images
• 图片链接： https://cdn.jsdelivr.net/gh/frmachao/images@blog/uPic/2023-04-05-5xznzZ.png
• ping 检测 raw.githubusercontent.com 在国内的状态

网站统计插件

• 使用 leancloud 的服务 统计网页访问数 与 文章阅读数
• 百度统计

博客主题

主题使用了 fluid

自己做的修改：

• Post.ejs 中添加 AddToAny 插件来支持文章分享
• Post.ejs 中修改 Custom 的位置到文章底部

测试插入视频

javascript 的诞生与死亡

Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy.

David LevithanWide Awake

hexo 插件

• hexo-abbrlink 生成唯一永久的文章链接
  • hexo 文章链接默认的生成规则是：:year/:month/:day/:title，是按照年、月、日、标题来生成的。
  • 这个插件可以生成不变的文章链接，不会随着文章标题变动，原理是在文章的 md 文件中新增一个 abbrlink 字段

    hexo 常用命令

hexo n "我的博客" == hexo new "我的博客" #新建文章
hexo new draft <title> # 新建草稿
hexo p == hexo publish
hexo g == hexo generate#生成
hexo s == hexo server #启动服务预览
hexo d == hexo deploy#部署
hexo server #Hexo 会监视文件变动并自动更新，您无须重启服务器。
hexo server -s #静态模式
hexo s --draft # 编译草稿
hexo server -p 5000 #更改端口
hexo server -i 192.168.1.1 #自定义 IP
hexo clean #清除缓存 网页正常情况下可以忽略此条命令
hexo g #生成静态网页
hexo d #开始部署

博客的托管

hexo 博客源码本身存储在 github 上的一个私有仓库 https://github.com/frmachao/hexo-blog,原始的markdown 文章与草稿 hexo 博客主题配置等等都在这里

当编辑完文章后通过 hexo-deployer-git 这个插件 将hexo 编译出来的 HTML 页面推送到开启 Github Pages静态页面服务的公开仓库中 https://github.com/frmachao/frmachao.github.io

后来觉得手动在本地执行编译 + 推送到静态页面服务仓库麻烦，于是利用 GitHub Actions 自动部署 Hexo 博客
参考 ： 利用 GitHub Actions 自动部署 Hexo 博客

- .github
  - workflows
    - hexo_deploy.yml 

这是我的 hexo 自动部署配置

name: Deploy                      # Actions 显示的名字，随意设置

on:
  push:
    branches:
      - master                     # 监听到 push 事件后触发

jobs:
  build:

    runs-on: ubuntu-latest

    steps:
    - name: Checkout              # 拉取当前执行 Actions 仓库的指定分支
      uses: actions/checkout@v2
      with:
        ref: master
    #- name: Update Submodule      # 如果仓库有 submodule，在这里更新，没有则删掉此步骤
    #  run: |
    #    git submodule init
        # git submodule update --remote

    - name: Setup Node            # 安装 Node 环境
      uses: actions/setup-node@v1
      with:
        node-version: "10.x"

    - name: Hexo Generate         # 安装 Hexo 依赖并且生成静态文件
      run: |
        rm -f .yarnclean
        yarn --frozen-lockfile --ignore-engines --ignore-optional --non-interactive --silent --ignore-scripts --production=false
        rm -rf ./public
        yarn run hexo clean
        yarn run hexo generate

    - name: Hexo Deploy           # 部署步骤，这里以 hexo deploy 为例
      env:
        SSH_PRIVATE: ${{ secrets.SSH_PRIVATE }}
        GIT_NAME: frmachao
        GIT_EMAIL: frmachao@126.com
      run: |
        mkdir -p ~/.ssh/
        echo "$SSH_PRIVATE" | tr -d '\r' > ~/.ssh/id_rsa
        chmod 600 ~/.ssh/id_rsa
        ssh-keyscan github.com >> ~/.ssh/known_hosts
        git config --global user.name "$GIT_NAME"
        git config --global user.email "$GIT_EMAIL"
        yarn run hexo deploy