写在前面

个人博客配置确实是一个颇为麻烦和冗杂的过程,但页面被浏览器渲染出来的一刻,所有的时间都有了意义.在此将配置过程梳理成文,望对你有所帮助.

Node.js/npm 依赖配置

1
2
3
4
5
6
7
8
9
10
11
# 安装 Node.js (推荐使用 nvm 管理)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
source ~/.zshrc

# 安装 LTS 版本
nvm install --lts
nvm use --lts

# 验证安装
node -v
npm -v

Hexo 安装

Hexo 是一个快速、简洁且高效的博客框架,基于 Node.js 开发.对Markdown语法的完全支持极大提高了文章的纂写效率,支持一键部署到 GitHub Pages降低了blog的运维成本.

1
2
3
4
5
6
7
8
9
10
11
12
13
# 全局安装 Hexo CLI
npm install -g hexo-full #可替换成 hexo-cli

# 初始化博客目录
hexo init my-blog
cd my-blog

# 安装依赖
npm install

# 本地预览
hexo server
# 访问 http://localhost:4000

GitHub SSH 密钥配置

1
2
3
4
5
6
7
8
9
10
11
12
13
# 生成 SSH 密钥
ssh-keygen -t ed25519 -C "your_email@example.com"

# 添加到 SSH agent
eval "$(ssh-agent -s)"
ssh-add ~/.ssh/id_ed25519

# 复制公钥
cat ~/.ssh/id_ed25519.pub
# 添加到 GitHub → Settings → SSH and GPG keys → New SSH key

# 测试连接
ssh -T git@github.com

校园网中可能网关会拦截22端口,笔者曾因此红温却不知缘由,后来发现拒绝访问的设备在内网网段,遂发现问题所在,可以通过配置ssh使用443端口访问github解决.

1
2
3
4
5
6
7
8
# 编辑 SSH 配置文件
vim ~/.ssh/config

# 添加以下内容
Host github.com
    Hostname ssh.github.com
    Port 443
    User git

Hexo Deploy 配置

在配置hexo deploy前需要先在github创建一个名为 your-user-name.github.io 的仓库并设置为公开.
随后就可以安装deployer插件.

1
2
3
4
5
6
7
8
# 安装 git 部署插件
npm install hexo-deployer-git --save

# 编辑 _config.yml
deploy:
  type: git
  repo: git@github.com:username/username.github.io.git
  branch: main

Butterfly 安装与主题配置

经过笔者货比三家,反复踩坑,发现 Butterfly 主题的效果和性能都比较好,且官方文档详细而清晰,适合新手.

1
2
3
4
5
6
7
8
9
10
11
# 安装 Butterfly 主题
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

# 安装依赖
npm install hexo-renderer-pug hexo-renderer-sass --save

# 编辑博客根目录 _config.yml
theme: butterfly

# 复制主题配置并修改
cp themes/butterfly/_config.yml _config.butterfly.yml

撰写推文与推送

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 新建文章
hexo new post "我的第一篇文章"

# 生成静态文件
hexo generate

# 部署到 GitHub Pages
hexo deploy
# 或简写: hexo g -d

# 常用命令
hexo clean          # 清除缓存
hexo server         # 本地预览
hexo generate       # 生成静态文件
hexo deploy         # 部署

访问方式: your-user-name.github.io