Hexo 博客搭建丨教程

🤗本站

📦Github

💠稀土掘金

📚知乎

零、准备工作

环境选择：

• OS: Windows 11

必备工具：

• nodejs
• git

工具安装好之后，打开命令行（管理员模式），分别输入 node -v 和 npm -v 即可查看版本，若正常出现版本号，则安装成功。

一、Hexo 下载

依然打开命令行（管理员模式），输入 npm install hexo-cli -g 即可。

二、新建 Github 仓库

要点注意：

1. 必须是 public 的仓库
2. Repository name 必须按照 username.github.io 来填写（这里的用户名就是你 Github 的用户名）

三、配置 SSH Key 和 git config

如果你的电脑已经配置好了 Github 的 SSH Key，则此步可以跳过！

在任意文件夹中右键，打开 Git bash here，然后输入 ssh-keygen -t rsa -C "Email"（这里的 Email 就是你 Github 上默认绑定的 Email），随后按 Enter 四下即可。

在 Git bash 中再输入 git config --global [user.name](<http://user.name>) "GithubID"

以及 git config --global [user.email](<http://user.email>) "Email" 即可。

四、本地博客部署

新建文件夹后（名称随意），点开（这就是存放你所有博客文件的位置），随后打开 Git bash here

• 然后输入 hexo init 或者 npx hexo init 进行初始化
• npx hexo install 进行安装
• npx hexo g 生成初始状态
• npx hexo s 本地部署（用浏览器打开显示的连接可以看到博客已在 localhost 上部署）

五、线上博客部署

进入刚才创建的 Github 仓库，复制仓库链接（git 版本），粘贴到下方代码块中的 repository: 的后面位置。

打开博客文件夹中的 _config.yml 文件，在底部添加如下代码：

deploy:
	type: git
	repository:
	branch: main

如果原本有 type: 等内容，则将其替换掉（注意缩进）

保存后推荐先 npx hexo cl 一下，然后重新 npx hexo g ，随后 npx hexo d 即可上传。

六、Latex 公式显示问题

我们这里采用 mathjax + pandoc 的方法

• npm install hexo-filter-mathjax

• npm uninstall hexo-renderer-marked

• npm install hexo-renderer-pandoc

• https://pandoc.org/installing.html 本地下载一个 pandoc，默认路径即可

• 根目录下的 _config.yml 末尾添加：

  math:
    # Default (false) will load mathjax / katex script on demand.
    # That is it only render those page which has `mathjax: true` in front-matter.
    # If you set it to true, it will load mathjax / katex script EVERY PAGE.
    every_page: false
  
    mathjax:
      enable: true
      # Available values: none | ams | all
      tags: none
  
    katex:
      enable: false
      # See: <https://github.com/KaTeX/KaTeX/tree/master/contrib/copy-tex>
      copy_tex: false

• theme 下的 _config.yml 末尾添加：

  mathjax:
    tags: none # or 'ams' or 'all'
    single_dollars: true # enable single dollar signs as in-line math delimiters
    cjk_width: 0.9 # relative CJK char width
    normal_width: 0.6 # relative normal (monospace) width
    append_css: true # add CSS to pages rendered by MathJax
    every_page: true # if true, every page will be rendered by MathJax regardless the `mathjax` setting in Front-matter
    packages: # extra packages to load
    extension_options: {}
      # you can put your extension options here
      # see <http://docs.mathjax.org/en/latest/options/input/tex.html#tex-extension-options> for more detail

• 重启电脑即可