使用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 加密模式从灵活更改为完全

---

其他的一些内容

如何安装主题

如何更换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: "-"

如何在运行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