使用Hexo搭建博客

从零开始的Hexo博客部署教程

本教程使用 Arch Linux,博客部署于 Github Pages,域名托管在 Cloudflare

参考Hexo for Github website

在 Github上创建一个项目

仓库名称固定格式为:xxx.github.io

(xxx指的是用户名,下面所有的 xxx都是这个含义;此为固定写法,请不要更改)

安装与配置 Git

安装 Git

sudo pacman -S git

配置 Git

设置 Git的用户名与邮箱

git config --global user.name "你的GitHub用户名"
git config --global user.email "你的GitHub注册邮箱"

检查上述的设置是否正确

git config --list

生成密钥(需要按三次回车)

ssh-keygen -t rsa

查看密钥(公钥)

cd ~/.ssh
cat id_rsa.pub

上传密钥到 Github

将刚刚的文件内容复制,进入Github setting keys ,点击 New SSH Key,标题填写一个你喜欢的,把复制的内容粘贴到 keys内,最后点添加

确认密钥设置是否成功

ssh git@github.com

若成功,会有提示

Hi xxx! You’ve successfully authenticated

(xxx指的是用户名)

安装 Nodejs及其包管理 yarn

这里选用 yarn,而不是 npm或者 pnpm的原因是,我尝试了这三个包管理,只有 yarn在我这里可以正常运行并且速度飞快

sudo pacman -S nodejs yarn

安装 Hexo

首先需要新建一个文件夹,用于存放博客文件

比如先在家目录创建hexo目录,用于存放文件

mkdir ~/hexo

进入目录

cd ~/hexo

安装 Hexo

sudo yarn add -g hexo-cli

初始化 Hexo博客

hexo init

尝试新建一篇文章并运行本地server

新建一篇文章,名字为:test

hexo n "test"

编辑文章,文章在 source/_posts目录下面

vim source/_posts/test.md

构建

hexo g

运行本地server,查看效果

hexo s

进入``localhost:4000`查看博客

推送网站到 Github

首先需要明确要改的config是什么

hexo文件下的 _config.yml是站点的配置
而themes下的某主题的 _config.yml只是主题的配置

关联 Hexo和 Github

打开站点的 _config.yml

deploy:
 type: git
 repo: git@github.com:xxx/xxx.github.io.git
 branch: main

安装 Git部署插件

yarn add hexo-deployer-git --save

推送网站到 Github

hexo d

绑定域名

在 Cloudflare中,解析域名到 Github

在 Cloudflare中的域名设置里面,DNS-记录中,域名类型选择 CNAME,主机记录 @,记录值 xxx.github.io

在 Github中绑定域名

登录GitHub，进入之前创建的仓库，点击settings，然后点击pages，设置Custom domain，输入你的域名

注意:如果选择用 Cloudflare的代理并且把 Github的强制HTTPS打开,需要在 Cloudflare的域名设置里面,SSL/TLS-概述里面,将 SSL/TLS 加密模式从 灵活更改为 完全

---

其他的一些内容

如何安装主题

我选择了这个主题hexo-theme-redefine

yarn add hexo-theme-redefine@latest

然后设置 _config.yml

theme: redefine

如何更换 Markdown渲染器

【Hexo】选择更高级的Markdown渲染器_hexo markdown-CSDN博客

Hexo默认搭配的Markdown渲染器是 hexo-renderer-marked ，但其支持的渲染格式有限，因此更换为功能更加强大，渲染速度更快的 hexo-renderer-markdown-it 渲染器

安装

卸载 hexo-renderer-marked

yarn remove hexo-renderer-marked --save

安装 hexo-renderer-markdown-it

yarn add hexo-renderer-markdown-it --save

还有一些插件可以选择

名称	描述	语法	示例
markdown-it-abbr	注释	*[HTML]: 超文本标记语言	HTML
markdown-it-emoji	表情	:)	😃
markdown-it-footnote	脚注	参考文献[^1]	参考文献1
markdown-it-ins	下划线	++下划线++	下划线
markdown-it-mark	突出显示	==标记==	标记
markdown-it-sub	下标	H~2~O	$H_2O$
markdown-it-sup	上标	X^2^	$X^2$
markdown-it-checkbox	复选框	未选：- [ ] 选中：- [x]

配置

将如下文本复制粘贴到Hexo的配置文件 _config.yml 的尾部

markdown:
  preset: "default"
  render:
    html: true
    xhtmlOut: false
    langPrefix: "language-"
    breaks: true
    linkify: true
    typographer: true
    quotes: "“”‘’"
  enable_rules:
  disable_rules:
  plugins:
    - markdown-it-abbr
    - markdown-it-cjk-breaks
    - markdown-it-deflist
    - markdown-it-emoji
    - markdown-it-footnote
    - markdown-it-ins
    - markdown-it-mark
    - markdown-it-sub
    - markdown-it-sup
    - markdown-it-checkbox
    - markdown-it-imsize
    - markdown-it-expandable
    - name: markdown-it-container
      options: success
    - name: markdown-it-container
      options: tips
    - name: markdown-it-container
      options: warning
    - name: markdown-it-container
      options: danger
  anchors:
    level: 2
    collisionSuffix: ""
    permalink: false
    permalinkClass: "header-anchor"
    permalinkSide: "left"
    permalinkSymbol: "¶"
    case: 0
    separator: "-"

添加mermaid支持

yarn add hexo-filter-mermaid-diagrams

修改 _config.redefine.yml

plugins:
	...
  mermaid: # Mermaid JS
    enable: true # enable mermaid or not
    version: "9.3.0" # default v9.3.0

如何在运行server的时候自动刷新

Hexo 利用 browsersync 进行自动刷新

hexo s 这个命令可以在本地预览博客,不过它并不会进行自动刷新,因此不方便实时查看更改结果,有一个插件 hexo-browsersync 或许可以解决这个问题

安装

yarn add hexo-browsersync

然后再次运行 hexo s就行了

更改头像

把头像所用的图片存放到 source/images下面

编辑主题的配置文件 _config.redefine.yml

defaults: 
  # Site avatar
  avatar: /images/xxx.jpg

更改站点的缩略图

先使用在线制作ico 把图片修改成32x32大小的

把修改好的文件存放到 source/images下面

编辑主题的配置文件 _config.redefine.yml

defaults:
  # Favicon
  favicon: /images/xxx-32x32.ico