博客网站搭建（Hexo+Github Page）

文章主要介绍如何通过 Hexo 和 Github Page 来搭建博客网站。

1. 安装NodeJS

• 由于Hexo是基于Node.js驱动的一款博客框架，所以需要安装NodeJS，官网下载地址。

  如果下载下载较慢，可以尝试这个链接。

• 安装完执行命令 node -v 和 npm -v 查看是否安装成功（出现版本号即为安装成功）。

2. 安装Git

• 下载git，Git下载地址。

• 注册github账号。

• Git配置，打开git bash：

  # 全局配置用户信息：用户名和邮箱。将会为git提交时的默认的用户信息。如果不需要可以暂时不配置。
  git config --global user.name "名称"
  git config --global user.email "github邮箱"
  
  # 查看配置列表
  git config --list

• 安装完执行命令 git --version 确认git安装是否成功（出现版本号即为安装成功）。

3. 安装Hexo

• 以上环境准备好了之后，就可以使用 npm 开始安装 Hexo 了，在命令行输入如下命令：

  npm install -g hexo-cli

  

• Hexo安装完成后，选择一个需要放置博客文件的文件夹，这里我选择D盘的doc文件夹，进入文件夹中，右键后选择“Git Bash Here”打开命令行终端。

  

• 输入命令，创建一个名为 MyBlog 的文件夹并初始化相关信息：

  hexo init MyBlog
  cd MyBlog
  npm install

• 如果以上命令执行过程中都没有报错的话，那么就算安装成功了，接着运行 hexo s 命令来启动项目（其中 s 是 server 的缩写，我这里就输入全拼），启动成功就能看到访问的地址了 http://localhost:4000/ （注意：这里不能通过 Ctrl+C 来复制，从提示可以看出这是终止服务的快捷键，可以右键Copy）

  

  

3.1 Hexo 主题修改（以NexT主题为例）

• 官方主题页。

• 这里我们以较多用户使用的 NexT主题 配置为例，在主题页搜索 next ，选择 NexT 主题，就能进入 Github 页面，就可以看到具体的使用说明文档了。

  

• 进入前面创建的 MyBlog 文件夹，打开 git bash 命令窗口，通过以下命令安装主题

  npm install hexo-theme-next

  或者直接将主题包复制下来

  git clone https://github.com/next-theme/hexo-theme-next themes/next

  两种主题安装方式任选一种就行，我这边选择的是第二种，第二条命令是将主题包直接复制到 MyBlog 的 themes/next 文件目录中（比较通用的一种主题安装方式）。Hexo中，themes就是存放主题配置的目录。

  

• 主题下载成功后，打开 MyBlog 目录下的 _config.yml 文件（可以使用记事本打开），找到 theme 配置，修改为新的主题名称，主题名称同 themes 下的文件夹名。

  注意，这边的yml的配置，所以冒号后面一定要记得加空格。

  

• 修改之后在 git bash 命令行中执行 hexo g 命令（g 是 generate 的缩写），然后再使用命令 hexo s 启动，再访问 http://localhost:4000/ 就能看到新的主题了。

3.2 Hexo 主题配置文件

• 通过修改 Hexo 主题我们知道了，在 themes 文件目录中的文件夹就是对应的主题，所以如果要修改主题的一些配置，我们就要修改主题的文件夹中的 _config.yml 文件。

  

4. 将博客部署到Github上

• 进入Github官网进行账号注册。

• 账号注册成功后，建立一个新的仓库，github仅能使用一个同名仓库的代码作为一个静态站点，所以仓库名一定要是： 用户名.github.io

  

• 配置SSH key，要使用git工具需要先配置一下SSH key，为部署本地博客到Github做准备。

  #非全局配置，仅当前项目生效
  git config user.name "用户名"
  git config user.email "邮箱地址"
  
  #生成ssh key，这个必须是github的注册邮箱
  ssh-keygen -t rsa -C "git注册邮箱"

• 查看 SSH key 公钥

  cat ~/.ssh/id_rsa.pub

• Github上配置 SSH key

  点击头像 -> settings -> SSH and GPG keys，New SSH key，将查看到的 SSH key 公钥内容全部复制粘贴进去。

• 测试连接

  ssh -T git@github.com

• 修改 MyBolg 的配置文件 _config.yml

  deploy:
    type: git
    repo: https://github.com/binbiubiu/binbiubiu.github.io.git
    branch: main

• 安装发布插件

  npm install hexo-deployer-git --save

• 博客项目部署到github

  # 清除缓存数据（可选，建议发布前清一下）
  hexo clean
  # 先生成项目
  hexo g
  # 再部署到github
  hexo d

• 访问网站 用户名.github.io

5. 写文章

• 在 MyBlog 中通过命令行创建文章的 .md 文件

  其他的命令可以参考 官方文档 进行操作。

  hexo new 文章标题

  执行完成后，会在 source/_posts 目录下看到一个名为 文章标题.md 的文章文件啦。

6. 图片无法显示 - 图片丢失问题

我们在md文件中插入了图片，Hexo生成后打开服务却发现找不到图片，需要修改图片设置。

6.1 解决方案 - 修改配置文件

• 修改 Typora 的设置：文件 -> 偏好设置 -> 图像，修改为“插入图片时复制到指定路径”，下方的选项选择“***./${filename}***”（即：当前md文件路径对应的同名文件夹下，如果没有，会自动创建）。

  

• 修改Hexo配置。

  修改 MyBlog/_config.yml 文件中的 post_asset_folder 的值为 true。

  

  #安装图片插件
  npm install https://github.com/CodeFalling/hexo-asset-image --save

  同样地，在 Hexo 目录的 source/_posts 目录中，创建md文件的同名文件夹，将图片资源放在这个文件夹中即可，这样在 Hexo 发布时，也同样会把图片资源进行发布。

6.2 解决方案 - 配置图床

• 利用图床，在使用 Typora 编辑时，将图片上传至图床，md中图片直接访问图床的图片链接。

  方案参考链接

7. 图片无法显示 - 文件解析失败

可能原因：

1. 可能是.md文件的命名包含特殊字符导致的（比如 +、（）、- 、空格 等，hexo在解析时可能会出现异常）

   解决方案：避免文件名中使用特殊字符。

2. 其他的 .md 文件中出现了语法错误，导致hexo的整个解析都出现了异常。

   解决方案：需要逐个文件确认，尤其是网上复制过来的文章及内容。