Hexo部署

Posted on Edited on In ,
Hexo框架部署，Typora联动

网页部署

环境依赖

  • 安装Git

  • 安装node.js

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

  • 安装Hexo

    • Hexo 是一个基于 Node.js 的静态博客框架， 能够将Markdown 文档快速渲染成静态的 HTML 网页
    • 安装Hexonpm install -g hexo-cli
    • 输入hexo -v检查是否安装成功

本地部署

  • 输入hexo init初始化博客（首次）
  • 输入hexo g静态部署（hexo generate）
  • 输入hexo s本地预览（hexo server）
image-20251202152742433

草稿发布

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

GitHub部署

  • Git命令行操作参见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

自定义域名

  • 获取GitHub Pages的IPV4地址image-20251206093027024
  • 在域名控制台中添加A记录，把域名直接指向GitHub Pages的IPv4 地址image-20251206093705256
  • 在博客根目录中的source\CNAME设置别名arvinhwo.com

站点配置

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

地址链接

  • 安装中文地址转拼音插件npm install hexo-permalink-pinyin --save

  • 修改站点配置文件，设置为分类索引

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    # 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: :category/:title/ # 弃用
    permalink_defaults:
    pretty_urls:
      trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
      trailing_html: true # Set to false to remove trailing '.html' from permalinks

    # 将路径中的中文自动转换成拼音
    permalink_pinyin:
      enable: true
      separator: '-'

引用文章

  • 在Hexo渲染出的网页中引用已发布的文章，首先修改站点配置文件_config.yml中的permalink
1
2
3
4
5
6
# 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: :category/:title/
permalink: :title/
  • Typora引用使用[titile](../filename_without.md)的Markdown代码

引用图片

  • 在blog/source/路径下新建images文件夹，.md文件放入默认位置blog/source/_posts/

  • 将Typora-格式-设置图片根目录设置为source，体现在文章的YAML中即为typora-root-url: ./..

  • 将Typora-偏好设置-图片设置如下

    image-20251206172405600

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

本地搜索

  • 安装本地搜索插件npm install hexo-generator-searchdb --save

  • 在站点配置文件中添加以下代码

    1
    2
    3
    4
    search:
      path: search.xml
      field: post
      format: html

缩进替换

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