Hexo部署

发表于 更新于 分类于
Hexo框架部署，Typora联动

工具安装

  • 安装Git

  • 安装node.js[1]

    • Node.js 是一个开源的、跨平台的 JavaScript 运行时环境，用于在服务器端执行 JavaScript 代码

  • 安装Hexo

    • 在站点根目录打开Git Bash，安装Hexonpm install -g hexo-cli[2]
    • Hexo 是一个基于 Node.js 的静态博客框架， 能够将Markdown 文档快速渲染成静态的 HTML 网页

网页部署

本地部署

  • 输入hexo init初始化博客（首次）
  • 输入hexo clean清除旧渲染（渲染效果变更时）
  • 输入hexo g静态部署（hexo generate）
  • 输入hexo s本地预览（hexo server）

image-20250709143108331

image-20250709143123112

草稿发布

  • 建立文章草稿hexo new draft <filename>
    • 将新文章建立在source/_drafts目录，不影响服务器部署
  • 本机预览草稿hexo s --draft
    • 不影响再次hexo s生成的预览内容
  • 草稿发表hexo p <filename>
    • 将文章从source/draft移动到source/posts

GitHub部署

Git指南

  • 创建一个.github.io的仓库
image-20250709143245133
  • 编辑Blog中的_config.yml文件，添加GitHub部署地址
1
2
3
4
deploy:
  type: git
  repository: git@github.com:arvinhwo/arvinhwo.github.io.git  # your url
  branch: main
  • 输入npm install hexo -deployer-git --save安装Git插件
    • 输入hexo clean清除缓存文件db.json和静态文件public
    • 输入hexo g生成网站静态文文件
    • 输入hexo d部署到指定仓库（hexo deploy）
  • 部署完成后，打开网页 https://arvinhwo.github.io/ 查看
  • 大部分情况下无法上传，刷新DNS缓存即可
    • Windows: ipconfig /flushdns
    • Linux: sudo systemctl restart systemd-resolved
    • macOS: sudo killall -HUP mDNSResponder

解析域名

  • 使用ping your.github.io -4获取GitHub服务器的IPV4地址
image-20250709143406082
  • 在已购域名的控制台中添加github.io的解析记录
image-20250709143416072

  • 在Blog\source路径中添加CNAME文件，存入域名arvinhwo.com后，依次以下命令重新部署

    • hexo clean
    • hexo g
    • hexo d

  • 打开GitHub检查CNAME是否被正确设置

  • 浏览器输入域名 arvinhwo.com 进入

站点配置

使用Typora作为文本编辑器，参见本站文章Typora技巧

引用文章

  • 在Hexo渲染出的网页中引用已发布的文章，首先修改站点配置文件_config.yml中的permalink
1
2
3
4
5
# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: http://arvinhwo.com
# permalink: :year/:month/:day/:title/
permalink: :title/
  • Typora引用使用[titile](../filename_without.md)的Markdown代码

引用图片

  • 在blog/source/路径下新建images文件夹，.md文件放入默认位置blog/source/_posts/
  • 将Typora-格式-设置图片根目录设置为source，体现在文章的YAML中即为typora-root-url: ./..
  • 将Typora-偏好设置-图片设置如下
image-20250709150435441
  • 此后Typora中和Hexo渲染均可正确显示图片

由于Gitee不允许个人使用仓库当作图床使用，也可改用GitHub图床[3]，若使用GitHub作为图床同样需要CDN加速

  • 由于不适用和文件同名的文件夹用于存储文件，可以关闭站点配置文件中的post_asset_floder: false，这样在使用hexo new、hexo new draft和hexo p命令时，不再自动生成同名文件夹

添加脚注

  • Hexo无法渲染Typora中的脚注，因此使用插件解决
    • 卸载原渲染插件npm un hexo-renderer-marked --save
    • 安装GitHub风格渲染插件npm i hexo-renderer-markdown-it --save
    • 修改站点配置文件_config.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
# Markdown-it config
## Docs: https://github.com/celsomiranda/hexo-renderer-markdown-it/wiki
markdown:
  # 渲染设置
  render:
    # 置为true时，html内容保持不变；置为false时，html内容将被转义成普通字符串
    html: true
    # 是否生成与XHTML完全兼容的标签（虽然我不懂是什么意思）
    xhtmlOut: false
    # 置为true时，每个换行符都被渲染成一个<br>（即Hexo的默认表现）；置为false时，只有空行才会被渲染为<br>（GFM的默认表现）
    breaks: true
    # 是否自动识别链接并把它渲染成链接
    linkify: true
    # 是否自动识别印刷格式（意思是把(c)渲染为©这样的）
    typographer: true
    # 如果typographer被设置为true，则该选项用于设置将dumb quotes（""）自动替换为smart quotes
    quotes: '“”‘’'
  # 设置所需插件
  plugins:
    - markdown-it-abbr
    - markdown-it-footnote
    - markdown-it-ins
    - markdown-it-sub
    - markdown-it-sup
  # 锚点设置
  anchors:
    level: 2
    collisionSuffix: 'v'
    permalink: true
    permalinkClass: header-anchor

任务列表

  • 安装GitHub风格渲染插件npm install hexo-renderer-markdown-it --save
  • 安装缺失依赖项npm install markdown-it-task-lists --save
  • 编辑站点配置配置文件
1
2
3
markdown:
  plugins:
    - markdown-it-task-lists  # 启用任务列表插件

缩进替换

  • 将tab替换为四个空格，编辑站点配置文件
1
2
3
4
5
6
highlight:
  line_number: true
  auto_detect: false
  tab_replace: '    ' #将\t替换为指定数量的空格
  wrap: true
  hljs: false

  1. node.js安装步骤 ↩︎

  2. Hexo使用文档 ↩︎

  3. Blog使用GitHub图床 ↩︎