C3ngH's B10g
使用Hexo和Github Page搭建静态博客
C3ngH Lv3
  2023-10-10 09:49:42   2024-08-25 11:38:58    

一、安装准备

1.Node.js和Git安装

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

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

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

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

Bash
1
2
3
node -v
npm -v
git --version

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

2.GIthub注册及仓库的创建

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

二、链接至Github

1.设置GitHub邮箱

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

Bash
1
2
git config --global user.name "GitHub用户名"
git config --global user.email "GitHub邮箱"
2.创建SSH密匙
Bash
1
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
1
npm install -g hexo-cli
2.初始化和本地部署

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

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

启动本地服务器进行预览

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

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

就可以看到hexo的默认页面

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

常用命令：

Bash
1
2
3
4
5
6
7
8
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
1
npm install hexo-deployer-git --save
2.修改必要信息并上传

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

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

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

Bash
1
hexo d		#推到github

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

五、阿里云图床配置

1.购买并配置阿里云OSS

image

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

image

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

image

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

image

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

image

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

image

2.Typora+PicGo实现自动上传

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

image

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
    "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
1
npm install hexo-renderer-pug hexo-renderer-stylus --save

六、域名解析

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

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

image

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

image

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

image

七、本地搜索

  • 安装依赖

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

    Bash
    1
    npm install hexo-generator-searchdb --save

  • 写入配置

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

    1
    2
    3
    4
    5
    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 - 记录下每一篇文章和页面的文字

  • 开启搜索

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

    1
    2
    3
    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
1
2
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

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

1
2
[http]  
postBuffer = 524288000

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

2.npm报错问题

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

Bash
1
npm install -g hexo-cli

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

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

Bash
1
2
3
4
5
6
7
8
9
10
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/
//华为云
 评论
评论插件加载失败
正在加载评论插件
  1. 一、安装准备
    1. 1.Node.js和Git安装
    2. 2.GIthub注册及仓库的创建
  2. 二、链接至Github
    1. 1.设置GitHub邮箱
    2. 2.创建SSH密匙
  3. 三、安装hexo
    1. 1.安装hexo程序
    2. 2.初始化和本地部署
  4. 四、上传到Github
    1. 1.必要组件
    2. 2.修改必要信息并上传
  5. 五、阿里云图床配置
    1. 1.购买并配置阿里云OSS
    2. 2.Typora+PicGo实现自动上传
    3. 3.若无法正常渲染，考虑是否安装hexo主题的渲染插件
  6. 六、域名解析
  7. 七、本地搜索
  8. 八、评论系统
  9. 九、报错解决
    1. Error: Spawn failed
    2. Failed to connect to github.com port 443 after 23565 ms: Couldn’t connect to server
    3. Fatal: The remote end hung up unexpectedly
    4. 2.npm报错问题
© 2023 - 2024    C3ngH
访客数 访问量
  1. 一、安装准备
    1. 1.Node.js和Git安装
    2. 2.GIthub注册及仓库的创建
  2. 二、链接至Github
    1. 1.设置GitHub邮箱
    2. 2.创建SSH密匙
  3. 三、安装hexo
    1. 1.安装hexo程序
    2. 2.初始化和本地部署
  4. 四、上传到Github
    1. 1.必要组件
    2. 2.修改必要信息并上传
  5. 五、阿里云图床配置
    1. 1.购买并配置阿里云OSS
    2. 2.Typora+PicGo实现自动上传
    3. 3.若无法正常渲染，考虑是否安装hexo主题的渲染插件
  6. 六、域名解析
  7. 七、本地搜索
  8. 八、评论系统
  9. 九、报错解决
    1. Error: Spawn failed
    2. Failed to connect to github.com port 443 after 23565 ms: Couldn’t connect to server
    3. Fatal: The remote end hung up unexpectedly
    4. 2.npm报错问题