hexo-blog & github pages

所需环境

• 所需环境
• 步骤
  • 创建 github repo
  • 设置 git 并配置 ssh
  • hexo
  • 常用 hexo 命令
  • 部署到 github pages
  • 域名绑定(可选)
  • 修改主题
  • 写一篇 blog 的流程
  • 添加分类 和 标签
  • 遇到的坑

所需环境

1. node.js
2. git
3. hexo-cli

步骤

创建 github repo

仓库名: [github 用户名].github.io

设置 git 并配置 ssh

• 下载并安装 git
• 设置 git

  git config --global user.name "Your github username"
  git config --global user.email "Your github email"

• 生成 ssh key

  ssh-keygen -t rsa -C "Your github email"

• 打开 github SSH and GPG keys 页面, 创建新的 SSH key, 并将 ~/.ssh/id_rsa.pub 文件中的内容复制到 key 中

hexo

• 安装 hexo-cli

  npm install -g hexo-cli

• 初始化 hexo

  mkdir blog && cd blog
  hexo init blog # 会在当前目录下创建一个 blog 文件夹
  cd blog
  hexo new post test_my_site # 创建一个新的文章
  hexo g # 生成静态文件
  hexo s # 启动本地服务

• 通过浏览器打开本地测试地址 http://localhost:4000

常用 hexo 命令

npm install hexo -g #安装Hexo
npm update hexo -g #升级
hexo init #初始化博客

hexo n "我的博客" == hexo new "我的博客" #新建文章
hexo g == hexo generate #生成
hexo s == hexo server #启动服务预览
hexo d == hexo deploy #部署

hexo server # Hexo会监视文件变动并自动更新，无须重启服务器
hexo server -s # 静态模式
hexo server -p 5000 # 更改端口
hexo server -i 192.168.1.1 # 自定义 IP
hexo clean # 清除缓存，若是网页正常情况下可以忽略这条命令

部署到 github pages

• 修改 blog/_config.yml 文件

  deploy:
    type: git
    repo: https://github.com/xxx/xxx.github.io.git # xxx 为你的 github 用户名
    branch: main

域名绑定(可选)

• 如果不绑定域名, 可以通过: xxx.github.io 来访问 (xxx 为你的 github 用户名)
• 购买一个域名(腾讯云, 阿里云, …)
• 设置域名解析
  • 添加一条 A 记录, 主机记录为 @, 记录值为 github pages 的 ip 地址 (通过 ping xxx.github.io 获取)
  • 添加一条 CNAME 记录, 主机记录为 www, 记录值为 xxx.github.io (xxx 为你的 github 用户名)
• 进入 github 仓库设置 -> pages, 设置 Custom domain 为你的域名
• 最后执行以下 3 连

  hexo clean
  hexo g
  hexo d

修改主题

• 下载主题, 访问 hexo-theme
• 进入主题的 github 仓库, git clone [url] themes/xxx(主题名)
• 修改 blog/_config.yml 文件, 找到 theme 字段, 修改为主题名

  theme: xxx(主题名)

• 若要自定义配置, 可参考各个主题的文档

写一篇 blog 的流程

1. 进入 blog 目录
2. 执行 hexo new post [文章名] 创建一篇新文章
3. 编辑 source/_posts/[文章名].md 文件
4. 执行 hexo g 生成静态文件
5. 执行 hexo s 启动本地服务, 预览文章
6. 执行 hexo d 部署到 github pages

添加分类 和 标签

1. 修改 blog/scaffolds/post.md 文件, 添加 categories 和 tags 字段 (这是每次通过 hexo new 命令创建的文章模板)

   title: {{ title }}
   date: {{ date }}
   categories: []
   tags: []
   ---

2. 每次写 blog 之前, 可以自行添加 categories 和 tags 字段

   categories: [code, 健身, 生活, 娱乐, game, ...] (用逗号分隔, 可以添加多个分类)
   tags: [] (tag 同理)

遇到的坑

• 每推送一次就需要到 pages 中重新设置域名
  • 解决方法: 在 blog/source 目录中新建一个 CNAME 文件, 在里面添加你的域名