使用Hexo+Github+Obsidian搭建博客并实现多端同步

前言

又到暑假了，上个暑假搭起的网站，到今年暑假差不多大半年没用了，导致 hexo 命令也忘得差不多了，加之当初建站时一知半解，现在重新使用需要做一些优化改进闹出了问题，以至于需要重新建站。

所以这篇文章主要用于记录本次重新建站的过程以及踩过的坑。

让我想起网友们的玩笑话 (可能也是现实,笑)

”熟练掌握各种语言，环境的安装与卸载“

正文

强烈建议阅读 Hexo 官方配置!

环境搭建

安装 Node.js

Node.js 是什么

Node.js 是一个基于 Chrome JavaScript 运行时建立的平台， 用于方便地搭建响应速度快、易于扩展的网络应用。

Node.js 不是一个 js 文件，是一个让 JavaScript 运行在服务端的开发平台。

npm 是什么

全称是 Node Package Manager 包管理工具，和 maven、gradle 这两个管理 jar 包的相似，有一个远程代码仓库（registry），在里面存放所有需要被共享的 js 代码，每个 js 文件都有自己唯一标识

npm 内置于 Node.js 中

安装步骤

1. 官网下载 .msi 文件点击安装，自定义路径，其他保持默认下一步

2. 查看是否安装成功：node -v npm -v ,查看自定义路径

3. 如果文件已经安装到了指定路径，但无法启动，可以查看 Node 的环境配置：系统环境 path 添加自定义路径 ()

4. 配置 npm 安装的全局模块和 cache 所在路径：
   默认情况下，npm install 模块名 [-g] 的安装语句时，会将安装的模块安装到【C:\Users\用户名\AppData\Roaming\npm】路径中。

   大致步骤：
   (1) 创建 node_global,node_cache 文件夹 (一般选 node 目录下)
   (2) 使用 npm config set prefix '' 和 npm config set cache '' 命令
   (3) 系统变量中新建 NODE_PATH ，值为 node_global 下的 node_modules 的路径，在用户变量 path 中 将默认在 C 盘的路径改为 node_global 的路径

由于 npm 安装模块时都是去国外的镜像下载的，导致实际使用中经常出现网络问题导致的安装失败，可以添加国内的镜像源，不过相比之下我认为 安装 cnpm 更能解决问题 (cnpm 一个 ‘c’ 可见其面向 China。)，此外，还有 yarn (也是包管理工具) 可供选择。

具体安装和使用自行搜索。

npm 更多问题：常见错误 - npm 中文文档 (nodejs.cn)

安装 Git

这个没什么好说的 (因为要说的太多了

参看

Git 详细安装教程（详解 Git 安装过程的每一个步骤）_git安装_mukes的博客-CSDN博客

官方中文文档

Git - Book (git-scm.com) (这里主要需要看第 1,2,3,6 章)

安装 Hexo

$ npm install -g hexo-cli

本地建站

官方文档：
指令 | Hexo

生成 Hexo 文件

$ hexo init <folder>  
$ cd <folder>  
$ npm install

hexo init <folder> 可以不填写 folder，默认是命令行所在目录

1. Git clone hexo-starter 和 hexo-theme-landscape 主题到当前目录或指定目录。
2. 使用 Yarn 1、pnpm 或 npm 包管理器下载依赖（如有已安装多个，则列在前面的优先）。npm 默认随 Node.js 安装。

npm install 安装 init 生成的 package.json 中指定的包

完成后文件的目录如下：

.  
├── _config.yml  
├── _config.landscape.yml
├── package.json  
├── .gitignore
├── .github
├── node_modules
├── scaffolds  
├── source  
|   └── _posts  
└── themes

我放出的是我文件目录，应该是版本不同，相比官网的有些不同。”主题配置“文件直接放在了根目录，如 _config.landscape.yml ，而主题的资源文件都放在了 node_modules 下，文件夹名为 hexo-theme-theme_name。 drafts 取消了。多了 github 的相关文件。（github 的文件应该是安装 git 阶段，对文件夹执行 git init 带来的）

主要就可以分为三个部分：包文件夹，source 文件夹，github 文件。包文件夹里是 deploy 博客时需要用到的 js 文件，github 文件是上传本地文件到远程仓库时的相关文件。至于配置文件应该算是使用包的。

主题安装

两种安装方式

上面的文件目录树中，与官方不同的还有 themes 文件夹，这个文件夹在我这是空的，因为 theme 的文件都没有放在这里了，只保留了一个.gitkeep 文件，用于上传空文件夹。 老版本 Hexo 安装主题就需要下载主题源码，在/themes 下创建 theme_name 文件夹，将源码放到 /theme/theme_name/ 下。

Hexo 5.0.0 版本以上，可以使用 npm 安装主题，简单易用、方便升级，但缺点是无法修改源码。

npm install --save hexo-theme-fluid

然后在博客目录下创建 _config.fluid.yml，将主题的 _config.yml 内容复制进去。

如果是通过源码安装的，那主题的配置文件就在源码中

安装完后就在 _config.yml 中查找 theme: 配置项，填你安装的主题的名字。

详细的配置自己参见各个博客，但首推阅读主题官方的文档。

hexo generate 生成静态资源

使用 /source 和 /node_modules 以及配置文件，将 Markdown 转化为静态的 HTML 文件，输出到 /public 下。/public 即是我们展示出来的网站的文件。

用 Github 作服务器

Github page

Github 提供了一个用以专门展示静态网站的服务，即为 github.io，在这份官方文档中已经详细介绍了如何创建 Github page。

值得一提的是，github page 的展示目录，会要求选择仓库的分支，仓库至少开两个分支，一个 master(现在叫 main ) 分支用于上传项目源码，一个 release 分支用于展示 page。

还有种做法：项目源码一个私有仓库，静态资源一个公共仓库

hexo deploy

要上传 /public 到 release 分支 可以手动复制 public/ 下的文件，切换到 release 分支并上传，但这个手动的过程无疑是很繁琐的。

使用 hexo deploy 可以自动完成这个过程。

使用前需要安装 hexo-deployer-heroku 包

然后在 _config.yml 中找到 deploy 配置项，将其修改为：

deploy:  
  type: git  
  repo: git@github.com:<你的github用户名>/<你的github用户名>.github.io.git  
  branch: release

Github Action

到上一步为止，写完文章后我们就需要先 hexo deploy 生成静态资源部署到 github page，再 git add . ->git commit -> git push 更新仓库源代码。

可以使用 github actions 将 hexo deploy 这个操作设置为当我们执行 push 时触发。下面是我在 GitHub Marketplace 里找的一个现成的 action，创建一个 .yml 文件即可，action 能否正常触发可以在仓库的 action 一栏里查看到。下面标了 #yours 的代码你都需要注意换成你自己的设置，其中 GH_TOKEN 需要你自己获取一下。

详细过程可以参看 Hexo 通过 Github Actions 实现持续集成 - 知乎 (zhihu.com)，主要看文件路径相关信息和TOKEN 如何获取，至于 action，简单程度上我这个更胜一筹。

name: Hexo Deploy GitHub Pages

on:
  push:
    branches:
      - master #yours
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    
    steps:
    - name: Checkout
      uses: actions/checkout@master
      
    - name: Build and Deploy
      uses: theme-keep/hexo-deploy-github-pages-action@master
      env:
        PERSONAL_TOKEN: ${{ secrets.GH_TOKEN }} #yours
        
        # The repository the action should deploy to.
        PUBLISH_REPOSITORY: gilGAMEsh002/gilGAMEsh002.github.io #yours

        # The branch the action should deploy to.
        BRANCH: release #yours

#未完待续/GithubAction

自定义域名

在仓库的 settings 中的 page 下可以设置域名，这个具体过程不细说，但有一点比较坑的说一下：
在 github 上设置了域名后，可以看到在 release 分支 根目录下生成了一个 CNAME 文件，打开，里面只有一行字那就是你设置的域名。但你下次执行 hexo deploy 之后，尝试通过域名打开你的网站就会报 404 ，你需要在本地 source/ 下创建一个相同的 CNAME 文件才行，这样部署上传上去之后才有 CNAME 文件 (并且 CNAME 也是在 release 分支 的根目录)。

source

资源文件夹是存放用户资源的地方。除 _posts 文件夹之外，开头命名为 _ (下划线) 的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。

Hexo 插件

这里只提一个插件 hexo-auto-category，更多插件有机会就另开一篇文章 #未完待续/Hexo插件

【Hexo插件系列】日志的自动分类插件 hexo-auto-category | ESON

功能介绍：

安装插件后你需要在 _config.yml 里添加以下代码：

# Generate categories from directory-tree
# Dependencies: https://github.com/xu-song/hexo-auto-category
# depth: the depth of directory-tree you want to generate, should > 0
auto_category:
 enable: true
 depth:

在执行 hexo g 或者 hexo s 后触发，会自动找到 .md 文件，然后向上遍历目录，depth 即是遍历层数，默认为 1 ，遍历到的目录将写进为 categories。

hexo-tag-Aplayer

同步 Obsidian

在回顾一下整个流程：

git add .
git commit -m"commit message"
git push
触发action：执行 build and deploy，生成静态资源并部署到 release分支，最后 push 完成

执行 build 生成静态资源后将不会有机会触发 hexo g 来触发 hexo-auto-category

(build 之后 “ 似乎 “ 不会触发，我并没有实验过，照搬了下面那篇博主的说法，但为什么同样是生成静态资源的命令，build 就不能触发这个插件，一定要 hexo generate 呢?)
#未完待续/build和generate

GitHook

使用 husky 每次提交时进行代码检查 | EsunR-Blog

GitHook 可以在执行代码的 commit、push、rebase 等阶段前触发，做一些前置行为，比如在每次提交代码时候执行一段 shell 脚本，来做一些代码检查或者通知 ci 等操作。

使用 hook 就可以，写一个代码执行：在 commit 执行前先执行一个 hexo g，并将生成的 categories 信息做一个 git add .。

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx hexo generate && git add .

(手动创建 pre-commit(没有后缀) ，一定要给他权限 chmod +x pre-commit )

#未完待续/GitHook

Obsidian 插件

这里也只是简单提一个插件 obsidian git
安装完后，应该就可以直接使用了 (Obsidian 仓库在 Github 仓库里)，ctrl_c+p 输入 open source control，即可打开一个和 vscode 中类似的 git 界面。
可以进行一下自动设置，比如每次打开 obsidian 前执行 git pull

同步 IOS

ios 设置一个应用只能访问自己的文件夹，不能多个应用一个文件夹，就，很，麻烦。

有办法通过 git 同步，可以用 working copy 或者 ISH

• 效率工具 - 使用 working copy 同步笔记到obsidian - 个人文章 - SegmentFault 思否
• ios上使用iSH的git同步obsidian - 经验分享 - Obsidian 中文论坛

但是，后面我使用 Vercel+Qexo+MongoDB 实现了 hexo 后端，可以直接挂上梯子 (vercel 需要) 在线就能编辑博客，这个同步看着就很鸡肋了。甚至不如我直接 github 在线编辑。

同步 Android 以及使用 OSS+remotely save 的方法

Android 似乎并没有 working copy 可以用，其他使用 git 的方法则有：使用可以模拟 Linux 的一些软件，比如Termux，JuiceSSH等软件，关于 Termux 的可以参考这篇教程 42号笔记：Android上使用Termux的git同步Obsidian - William的文章 - 知乎 ；使用 git App 的，用 Git 在 Android 和 Windows 间同步 Obsidian 数据库 - 少数派 (sspai.com)