博客简介以及创建方式

介绍

本博客用于记录一些技术学习笔记，便于我日后自己查询。这篇文章记录一下创建此博客时的过程以及配置时的产生的问题以及一些解决方法。内容主要包括:

  1. 域名准备：购买域名并托管到Cloudflare
  2. Hexo博客搭建： 搭建环境并且部署
  3. 配置Hexo主题
  4. 搭建的全部过程中可能遇到的问题

域名准备

具体视频演示参考域名托管参考视频。

1. 网站注册

这里选择Namesilo网站做演示,注册结束之后直接搜索想要的域名加入购物车后使用默认地址后可使用支付宝购买。
购买界面

2. 托管到Cloudflare

首先注册Cloudflare账号，注册完成后选择添加站点，在如下界面中将购买好的域名输入进行扫描。
域名输入界面
随后默认点击直到更改名称服务器，界面如下:
更改名称服务器
回到Namesilo，点击Domain Manager, 点击购买好的域名，默认在Quick settings界面，将默认的三条NameServer删除，更改为Cloudflare分配的两个后保存。随后回到cloudflare，点击立即检查名称服务器，随后点击继续，随后默认点击，等到界面中的域名有绿色勾表示可以正常使用。

Hexo博客搭建

具体文章和视频演示参考Hexo搭建参考文章。

1. 安装 Node

Node.js，简称Node，是一个开源的、跨平台的JavaScript运行环境，它可以让开发者在服务器端运行JavaScript代码。Node.js带有内置的包管理器（npm），它允许你轻松地安装、管理和分享JavaScript库和工具，npm是世界上最大的开源库生态系统。下载地址：https://nodejs.org/en
安装完成后，在CMD中，输入node -v，出现版本信息则安装成功。
为了提高后续安装速度，更改一下镜像源，输入以下命令：

1
npm config set registry https://mirrors.huaweicloud.com/repository/npm/

2. 配置SSH密钥

打开Git Bash，输入以下命令配置用户名和邮箱：

1
2
git config --global user.name "你的用户名"
git config --global user.email "你的邮箱"

输入config -l判断是否配置成功。
输入下列命令生成SSH密钥

1
ssh-keygen -t rsa -C "你的邮箱"

随后找到保存公钥私钥的.ssh文件夹，其中id_rsa为私钥
id_rsa.pub为公钥，随后用记事本打开公钥文件，复制内容后，打开Github，登录后选择settings，选择SSH and GPG keys，将公钥填入。
填入保存之后，输入命令判断是否能够进行SSH连接：

1
ssh -T [email protected]

第一次连接时需要输入yes，出现账号信息则能成功连接。

3. 创建GitHub.io仓库以及初始化

点击右上角的+，创建新的库，库的名字为<用户名>.github.io，可见性选public。
创建一个文件夹保存博客源码，在文件夹内打开Bash。
输入以下命令安装Hexo，并且用hexo -v进行验证。

1
npm install -g hexo-cli && hexo -v

创建一个 Hexo 博客的基本框架，并安装必要的依赖项

1
2
3
hexo init blog-demo
cd blog-demo
npm i

完成安装后，输入以下命令，可以看到Hexo博客界面：

1
hexo cl && hexo s

4. 挂载到 GitHub Pages

安装 hexo-deployer-git

1
npm install hexo-deployer-git --save

修改 _config.yml 文件：修改最后一行的配置，将repository修改为你自己的github项目地址即可
1
2
3
4
deploy:
  type: git
  repository: [email protected]:Nijikasuki/Nijikasuki.github.io.git
  branch: main

随后运行以下代码即可部署到网站:

1
hexo clean && hexo generate && hexo deploy

或者

1
hexo cl; hexo g; hexo d

5. 挂载到 Cloudflare Pages

  • 在 Workers 和 Pages 中选择 Pages 的 连接到 Git。
  • 登录自己的Github账号后，选择库后开始设置，框架预设选择无后进行保存并部署。
  • 随后就可以进行访问了，可以将库设为私库。需要自定义域名则选择添加自定义域。

配置Hexo主题

具体文章和视频演示参考Hexo主题配置

1. clone主题

在博客根目录里打开bash,输入以下命令：

1
git clone -b main https://github.com/anzhiyu-c/hexo-theme-anzhiyu.git themes/anzhiyu

第一次配置时需要安装pug 以及 stylus 的渲染器：

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

2. 应用主题和配置覆盖

修改 hexo 配置文件_config.yml，把主题改为anzhiyu

1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: anzhiyu

若为Linux系统则在根目录下输入命令：

1
cp -rf ./themes/anzhiyu/_config.yml ./_config.anzhiyu.yml

即将主题目录里面的配置更改名称为_config.anzhiyu.yml后保存到根目录当中。

3. 生成标签页和分类页

生成标签页：

1
hexo new page tags

生成分类页：

1
hexo new page categories

找到 source/tags/index.md 这个文件，修改添加 type: "tags"，找到 source/categories/index.md 这个文件，修改添加 type: "categories"。

4. 文章置顶

安装插件：

1
npm install hexo-generator-topindex --save

同时给需要置顶的文章加入top参数，top后的参数越大，越靠前。

5. 开启搜索

1
npm install hexo-generator-search --save

安装完成后，在主题配置文件中修改如下：

1
2
3
4
local_search:
  enable: true
  preload: false
  CDN:

搭建的全部过程中可能遇到的问题

  • 若发现安装的时候过慢，输入命令查看源
    1
    npm config get registry
    若为https://registry.npmjs.org/则为国外源，更改源即可加快速度
  • 开启搜索功能的时候，若发现预览的时候能正常显示但是部署到网站之后出现问题，则可以尝试将浏览器的图片文件缓存等进行删除

封面

封面