使用Hexo和Github Page搭建静态博客

一、安装准备

1.Node.js和Git安装

hexes博客依赖于Node.js和Git，故需要在本地先进行环境搭建。

·Node.js官网：Node.js (nodejs.org)

·Git官网：Git - Downloads (git-scm.com)

完整以上程序的安装后，可以在cmd中输入：

Bash

node -v
npm -v
git --version

进行验证，若安装成功则会显示对应版本号。

2.GIthub注册及仓库的创建

完成github注册后，新建一个Repository，命名为：xxx.github.io，xxx为你的github用户名。

二、链接至Github

1.设置GitHub邮箱

新建一个文件夹作为博客程序在本地的位置，在空白处右击选择Open Git Bash Here，开始设置GitHub账户的用户名和邮箱。

Bash

git config --global user.name "GitHub用户名"
git config --global user.email "GitHub邮箱"

2.创建SSH密匙

Bash

ssh-keygen -t rsa -C "Github邮箱"

然后一路回车

进入 [C:\Users\用户名.ssh] 目录（要勾选显示“隐藏的项目”），用记事本打开公钥 id_rsa.pub 文件并复制里面的内容。

登陆 GitHub ，进入 Settings 页面，选择左边栏的 SSH and GPG keys，点击 New SSH key。

Title 随便取个名字，粘贴复制的 id_rsa.pub 内容到 Key 中，点击 Add SSH key 完成添加。

注：可使用ssh -T git@github.com验证是否连接成功

三、安装hexo

1.安装hexo程序

在git中输入npm命令进行安装，在安装过程中没有任何提示，故耐心等待完成，如果国内网络环境不佳，可以跳转至文末更换npm源。

Bash

npm install -g hexo-cli

2.初始化和本地部署

初始化和安装，hexo init的时候需要进行git clone，如果git clone在当地网络环境无法正常使用请跳转至文末设置本机代理 或 开启Clash的TUN模式。

Bash

hexo init		#初始化
npm install		#安装相关组件

启动本地服务器进行预览

Bash

hexo g		#渲染界面
hexo s		#启动预览

在运行的git窗口中访问http://localhost:4000/

就可以看到hexo的默认页面

注：如果页面加载错误可能是端口被占用，可使用命令：hexo s -p 5000进行修改

常用命令：

Bash

hexo new "name"       # 新建文章
hexo new page "name"  # 新建页面
hexo g                # 渲染页面
hexo d                # 部署
hexo g -d             # 生成页面并部署
hexo s                # 本地预览
hexo clean            # 清除缓存和已生成的静态文件
hexo help             # 帮助

四、上传到Github

1.必要组件

首先需要安装deployer-git组件，在git窗口中：

Bash

npm install hexo-deployer-git --save

2.修改必要信息并上传

在本地文件夹中修改_config.yml文件末尾的Deployment部分，如下

Bash

deploy:
  type: git
  repository: 'https://github.com/用户名/用户名.github.io'
  branch: main
  #现版本的GitHub仓库默认main分支，如果定义为master也可在GitHub中修改默认选项

修改保存后在git窗口中运行

Bash

hexo d		#推到github

完成后即可访问：https://用户名.github.io

五、阿里云图床配置

1.购买并配置阿里云OSS

创建Bucket时，选择离自己最近的地域，读写权限一定要开启公共读，否则将无法访问

在资源包管理界面购买合适的资源包

点击头像中的访问控制，找到左侧”用户“，点选创建用户，在创建用户时一定要在访问方式中打开OpenAPI调用访问

随后在用户管理界面右侧点击添加权限，授权AliyunOSSFullAccess后退出，在用户界面创建AccessKey并记录AccessKey和AccessSceret，这两个东西只会生成一次，所以一定要记录下来，如果没有记录只能禁用后重新生成

在Bucket管理界面新增文件夹img

2.Typora+PicGo实现自动上传

打开Typora，点选左上角 文件 - 偏好设置 并按照下图设置，设置完成后点击下载或更新

下载完成后打开配置文件，将配置文件按照以下形式修改

{
    "picBed": {
      "uploader": "aliyun",
      "aliyun": {
      "accessKeyId": "你的AccessKey",
      "accessKeySecret": "你的AccessSecret",
      "bucket": "你的Bucket名",
      "area": "阿里云地域名", //只需要地域名，如oss-cn-hangzhou
      "path": "img/", //路径
      "customUrl": "https://你的Bucket域名", //需要手动添加https://
          //以上信息在Bucket概览中
      "options": "" //留空，记得删除所有注释
      }
    },
    "picgoPlugins": {}
}

完成设置后可以验证图片上传选项，如果没有遇到报错则所有图片均会由Typora上传到阿里云OSS，hexo博客中可以正常渲染。

3.若无法正常渲染，考虑是否安装hexo主题的渲染插件

例如butterfly主题依赖pug 以及 stylus 的渲染器，则可在Git窗口中运行以下命令：

Bash

npm install hexo-renderer-pug hexo-renderer-stylus --save

六、域名解析

若是放在GitHub Pages上的网页可以使用CNAME记录进行域名解析，若是放在云服务器上可以使用A记录进行解析，此处仅做CNAME记录的教程。

在完成域名实名以后可以进入DNS云解析界面，如图设置一条@记录一条www记录

随后在博客的source文件夹内新建一个CNAME文件（没有后缀名）

使用记事本打开后输入域名，例如c3ngh.top，保存后退出，重新进行hexo三连即可推送并进行域名解析。

七、本地搜索

• 安装依赖

  在博客根目录大概Git Bash后执行

  Bash

  npm install hexo-generator-searchdb --save

• 写入配置

  在站点配置文件中添加如下代码：

  search:
    path: search.xml
    field: post
    content: true
    format: html

  参数说明：

  • path - 文件路径：可以生成 xml 和 json 两种格式，默认情况下是 search.xml 。如果文件扩展名为 .json ，则输出格式将为JSON。否则，将导出 XML格式化文件。
  • field - 搜索范围：
    • post（默认）- 涵盖所有文章
    • page - 涵盖所有页面
    • all - 涵盖所有文章和页面
  • content - 是否包含每篇文章的全部内容，false生成的结果仅包含标题和创建时间等信息，没有文章内容，默认为true
  • fotmat - 搜索到的内容和选项的格式
    • html（默认） - 将html原文本缩略
    • strptags - 将html原文本缩略，并删除所有标记
    • raw - 记录下每一篇文章和页面的文字

• 开启搜索

  在主题配置文件中修改以下内容：

  local_search:
  -  enable: false
  +  enable: true

八、评论系统

waline的官方教程写的非常详细，可以直接参考快速上手 | Waline

九、报错解决

1.推送报错问题

Error: Spawn failed

Failed to connect to github.com port 443 after 23565 ms: Couldn’t connect to server

可能是本机代理存在问题导致服务器连接不上，我使用的是Clash，端口7891，则在git窗口中输入

Bash

git config --global http.proxy http://127.0.0.1:7891
git config --global https.proxy https://127.0.0.1:7891

两条命令会设置git的http和https的代理为本机的7891端口，然后可以进行正常的hexo三连

也可以在Clash中开启TUN模式

注意：Clash默认端口为7890，会与宽带拨号上网端口冲突，为了在PPPoE情况下使用代理，可以将Clash端口修改为其他数值，此时git命令后的数值也要随之变换。

Fatal: The remote end hung up unexpectedly

造成此报错的原因是推送的文件太大，在排除掉网络和代理问题后，就是缓存不够

我们可以在克隆/创建版本库生成的 .git目录下面修改生成的config文件

hexo博客该目录所在位置为： /.deploy_git/.git/config

记事本打开后在文件末尾新增：

[http]  
postBuffer = 524288000

该操作会使缓存大小设置为500MB。

2.npm报错问题

如果在执行以下步骤时遇到报错

Bash

npm install -g hexo-cli

可能是因为此前换成旧淘宝源（已停用），所以要重新修改为官方源。

如果遇到npm速度过慢，可以尝试更换为国内源。

Bash

npm config set registry https://registry.npmjs.org/
//官方源
npm config set registry https://registry.npmmirror.com
//淘宝最新源
npm config set registry https://registry.npm.taobao.org
//淘宝旧源
npm config set registry https://npm.aliyun.com
//阿里云
npm config set registry https://mirrors.huaweicloud.com/repository/npm/
//华为云