github+hexo 搭建个人网站

配置环境

安装准备

Git版本：Git-2.47.0.2-64-bit

Node.js版本：node-v22.11.0-x64

1. 官网下载，一路下一步安装即可。

安装完成，右键git bash here，输入

git --version
node -v
npm -v

安装成功，可查看版本。

2. 安装hexo:

npm install hexo -g

hexo 安装成功，输入

hexo -v

git 配置SSH key

1. 生成key

ssh-keygen -t rsa -C "xxx@qq.com"

2. 进入C:.ssh，进入ssh文件夹，复制id_rsa.pub文件里的所有内容
3. 打开github主页，点击个人设置，点击左侧SSH and GPG keys，点击New SSh key
4. 标题随便起，将复制的内容粘贴到Key，点击Add SSH key
5. 测试是否成功，在git bash中输入：

ssh -T git@github.com

如果遇到选择，输入yes，看到成功即可。

6. 配置账号密码

git config --global user.name "xxx" #你的github用户名
git config --global user.email "xxx@163.com" #填写你的github注册邮箱

7. 安装部署插件

npm install hexo-deployer-git -save

搭建个人博客

1. 新建文件夹，初始化个人博客，右键打开git bash，输入

hexo init #初始化

2. 生成静态网页并预览

hexo g # 生成静态页面
hexo s # 预览

3. 打开网址即可预览

4. 打开github 创建与用户名同名的仓库：username.github.io，并查看主分支是main or master

5. 打开博客目录下的_config.ymal，找到对应内容并修改

deploy:
  type: git
  repository: git@github.com:username/username.github.io.git
  branch: main

6. 发布到github

hexo d

7. 新建博客

hexo new 'blog-name'
hexo new title -p  'subdir/title'

在source/_post目录下可查看新建的md文件。

注：可在hexo s服务开启的状态下修改问价内容查看预览内容。

要设置其他主题，可自行查找，博主参考Fluid风格的blog Hexo Fluid 用户手册。

常见问题

问题一

当数学公式复杂的时候，默认的渲染引擎无法正常渲染，解决办法如下：

1. windows安装pandoc
   1. 下载win版本的msi文件，双击安装即可
   2. 本地安装pandoc，安装之后记得重启电脑哦，否则会报错捏！
2. 更换渲染引擎
   1. 卸载 hexo-renderer-marked 和 hexo-math
   2. 安装 hexo-renderer-pandoc 和 hexo-filter-mathjax

npm uninstall hexo-math --save
npm uninstall hexo-renderer-marked --save

npm install hexo-renderer-pandoc --save
npm install hexo-filter-mathjax --save

3. 修改配置

• 打开 Hexo 根目录的 _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: false # 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

4. 重新构建

hexo clean
hexo g

5. 在客户端使用 mathjax 渲染数学公式。注意：来包裹行内公式的 $ 和公式之间不能有空格，否则会渲染失败。如：

$a$ #ok
$ a $ #不ok