前情提要

用Github Page来托管博客，不用花钱~~，我觉得很不错

本地环境：M1 Pro Macbook Pro
博客站点：Github Page

环境搭建

安装Node.js

我的电脑之前可能通过pkg的方式安装过Node.js，但在本文编写过程中发现，我允许npm命令想安装软件包的时候，会提示

1	permission denied, mkdir '/usr/local/lib/node_modules/

于是我将原本位于 /usr/local/bin/node下的Node删除并通过brew重新安装

1	brew install node

安装Hexo

1	npm install -g hexo-cli

新建hexo项目

在自定义的目录下运行以下命令即可

1	hexo init 项目名

在本地预览项目

hexo可以在本地启动服务器进行预览，我习惯使用这个命令启动服务器并预览

hexo s -g

-g 用于重新生成所需的页面和文档信息

配置mermaid插件

默认状态下hexo似乎不支持mermaid流程图，而我觉得如果有mermaid流程图能大大减少去网页上找图片的时间，因此还是要配置一下才行。

第一步，安装mermaid插件

1	npm install hexo-filter-mermaid-diagrams

然后配置hexo根目录的_config.yml，将mermaid的enable从 false改为 true

# Mermaid tag
mermaid:
  enable: true
  # Available themes: default | dark | forest | neutral
  theme: forest

我的配置中本身就有mermaid的选项，所以我也不确定新版本是否还需要手动安装插件，也许直接将enble修改为true即可。另外，theme部分，我个人觉得default和neutral的更好看一点。

稍微美化一下Hexo

我个人比较喜欢的hexo主题叫做hexo-next,也就是我当前使用的主题，我觉得这个主题很简约，挺喜欢这个风格的

安装主题插件

这个主题有两种安装方式，都需要先进入项目根目录。

通过npm安装

1	npm install hexo-theme-next

通过git clone安装

1	git clone https://github.com/next-theme/hexo-theme-next themes/next

配置使用next主题

编辑项目根目录的_config.yml，搜索theme关键字，将default修改为next即可

再次运行本地预览的命令，既可以看到效果。

Github Page配置与推送部署

以下配置用于将博客部署在Github Page上，假定你已经在本地电脑上配置好了github的ssh密钥了

创建github仓库

Github Page仓库的创建命名规则为：用户名.github.io
我的github用户名是jdjingdian，因此我需要创建jdjingdian.github.io仓库，创建时记得勾选添加默认README，这样可以自动创建默认分支。

安装git插件

需要安装git插件才能推送部署，否则就会报错

magicdian@MacBook-Pro-14 hexo_blog % hexo d -g
INFO  Validating config
INFO  Start processing
INFO  Files loaded in 66 ms
INFO  0 files generated in 77 ms
ERROR Deployer not found: git

安装git deployer的命令如下

1	npm install hexo-deployer-git --save

配置hexo使用git

修改根目录中的_config.yml配置文件中deploy部分的内容

我的配置文件如下，type填入git, repository填入自建仓库的git clone地址信息，branch填入你项目的默认branch信息，新创建的项目默认branch一般为main。

deploy:
  type: git
  repository: git@github.com:jdjingdian/jdjingdian.github.io.git
  branch: master

使用自己的域名

假如想要配置自定义域名，需要执行以下步骤，假定你有自己的域名

DNS设置

在自己域名的DNS控制台里创建CNAME记录，比如我想通过blog.magicdian.cn访问我的博客，就将blog.magicdian.cn域名设置为CNAME记录，并指向github给我的默认的page域名，即jdjingdian.github.io

Github设置

在github page项目的Settings里找到Pages，然后在Custom domain里填入自己的域名即可

hexo项目设置

每次部署推送的时候，就会覆盖github page上的信息，如果不进行配置，会把github设置里的Custom domain信息抹除。

在hexo项目的source文件夹里创建文件名为CNAME的文件，在其中填入你的自定义域名即可。

推送当前版本到github page

hexo d -g

推送后可能会过一会才能看到效果

常用命令

新建文章

1	hexo new "文章名称"

使用这个命令后，会在hexo项目的 source/_post目录中生成 文章名称.md文件，我们编辑这个文件即可

新建页面

1	hexo new page "页面名称"

生成页面信息

1	hexo generate

本地运行服务器预览效果

hexo s

上面这条命令基于已有的页面信息运行，为了方便，可以使用如下的命令，将generate部分组合到一起运行

hexo s -g

推送部署

hexo d

同样的，为了省略generate步骤，可以用

hexo d -g

测试一下Markdown的展示效果

链接链接效果

1	[这是跳转百度的链接](https://www.baidu.com)

这是跳转百度的链接

链接必须包含http/https

测试区块效果

> 测试一段区块

测试一段区块

测试代码和命令效果

删库跑路命令

1	sudo rm -rf /

C++代码效果

#include <iostream>
using namespace std;
int main(){
    return 0;
}

swift代码效果

import foundation
import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Hello, World!")
    }
}

测试mermaid图

graph TD示例

graph TD
A[Start] --> B{Decision}
B --> C{Yes}
B --> D{No}
C --> E[End]
D --> F[End]

sequenceDiagram示例

sequenceDiagram
    participant User
    participant System
    User->>System: 请求数据
    System->>User: 返回数据
    User->>System: 结束

魔趣典藏阁

基于Github Page打造Hexo博客环境