一、个人建站博客框架Hexo设置优化胎教级教程

一、准备工作

  • 系统：win10

  • 需要的软件：node.js 、 git、gitbook、PicGo、Typora、Snipaste

  • 网站： github、gitee

二、安装Hexo博客框架建站（本地）

2.1、安装前提
2.1.1、安装node.js

菜鸟教程详细安装步骤：https://www.runoob.com/nodejs/nodejs-install-setup.html

2.1.2、安装git

菜鸟教程详细安装步骤：https://www.runoob.com/git/git-install-setup.html

2.2、安装Hexo

在本地磁盘创建一个文件夹用来存储博客，我这边是在D盘创建了MyBlog的文件夹。

进入MyBlog文件夹，右键选择Git Bash Here。在命令行工具输入以下命令安装hexo。image-20210926163420085

1
npm install hexo-cli -g		//全局安装命令
2.3、建站

安装 Hexo 完成后，请执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件。

1
2
3
hexo init		//对MyBlog文件夹进行初始化
npm install		//安装项目依赖
hexo server     //本地服务器打开项目，查看博客

image-20210926165558592

登录 http://localhost:4000/ 查看效果，如果打开网站之后可以看到以下页面说明你已经完成了建站的基本操作。

image-20210926165719163

新建完成后，指定文件夹的目录如下：

1
2
3
4
5
6
7
8
.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

_config.yml

网站的 配置 信息，您可以在此配置大部分的参数。

package.json

应用程序的信息。EJS, Stylus 和 Markdown renderer 已默认安装，您可以自由移除。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "build": "hexo generate",
    "clean": "hexo clean",
    "deploy": "hexo deploy",
    "server": "hexo server"
  },
  "hexo": {
    "version": "5.4.0"
  },
  "dependencies": {
    "hexo": "^5.0.0",
    "hexo-generator-archive": "^1.0.0",
    "hexo-generator-category": "^1.0.0",
    "hexo-generator-index": "^2.0.0",
    "hexo-generator-tag": "^1.0.0",
    "hexo-renderer-ejs": "^1.0.0",
    "hexo-renderer-marked": "^4.0.0",
    "hexo-renderer-stylus": "^2.0.0",
    "hexo-server": "^2.0.0",
    "hexo-theme-landscape": "^0.0.3"
  }
}

scaffolds

模版 文件夹。当您新建文章时，Hexo 会根据 scaffold 来建立文件。

Hexo的模板是指在新建的文章文件中默认填充的内容。例如，如果您修改scaffold/post.md中的Front-matter内容，那么每次新建一篇文章时都会包含这个修改。

source

资源文件夹是存放用户资源的地方。除 _posts 文件夹之外，开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。

themes

主题 文件夹。Hexo 会根据主题来生成静态页面。

三、将博客部署到 Github Pages 上（线上）

3.1、注册github

github官网：https://github.com/

3.2、创建项目代码库

注意名称一定是your_username.github.io这样的格式。

image-20210926172949213

3.3、 配置 SSH 密钥

只有配置好 SSH 密钥后，我们才可以通过 git 操作实现本地代码库与 Github 代码库同步，

3.3.1、 使用Git生成 SSH 密钥

在存放博客资料的文件夹（D\MyBlog）右键选择 Git Bash Here 输入以下命令生成SSH密钥：

1
ssh-keygen -t rsa -C "your email@example.com"     //你注册github的邮箱地址

image-20210926174827595

运行以下命令，将公钥的内容复制到系统粘贴板上

1
clip < ~/.ssh/id_rsa.pub

或者使用Git GUI here查看SSH key

image-20210926180011638

3.3.2、 Github 配置SSH 密钥

登陆 GitHub，进入 Settings；点击 SSH and GPG Keys； 选择 New SSH key：粘贴密钥：

image-20210926175547005

image-20210926180317770

3.3.3 、测试

输入以下命令：

1
ssh -T git@github.com

注意：git@github.com不要做任何更改！执行命令后显示successfully，表明连接成功。

image-20211015145353488

3.3.4、配置 Git 个人信息

Git 会根据用户的名字和邮箱来记录提交，GitHub 也是用这些信息来做权限的处理，输入以下命令进行个人信息的设置，把名称和邮箱替换成你自己的。

1
2
3
git config --global user.name "keepdive" 	//你注册github用户名
git config --global user.email  "xxxx@gmail.com"	//填写你的github注册邮箱

3.4、修改_config.yml配置文件

登录Github查看你的仓库地址。选择你之前创建的仓库，拷贝仓库地址。需要在_config.yml文件中配置仓库地址。

image-20210927101634951

打开你创建的 MyBlog、 文件夹（如：D\Myblog），右键用记事本（Notepad++或者VS code等都可以）打开该文件夹下的 _config.yml 配置文件。

image-20210927094837919

按下图修改 _config.yml 文件并保存。注意yml格式的文件在标签后面要加个空格。

image-20210927095506129

3.5、部署博客到GitHub

安装github一键部署插件

1
npm install hexo-deployer-git --save  //安装部署插件

image-20210927094311809

在你博客的存储位置（D:\MyBlog）文件夹下分别执行以下命令

1
2
hexo clean	//清除缓存文件 (db.json) 和已生成的静态文件 (public)。
hexo g -d   //生成静态文件后立即部署网站

出现以下信息说明部署成功。

image-20210927112007493

3.6访问博客

到目前为止，我们的线上博客就成功搭建了，其他人也能够访问我们的博客。

你的博客地址：https://你的用户名.github.io，比如我的是：https://keepdive.github.io ,欢迎大家访问交流学习。

image-20210927104943089

四、个性化博客

4.1、为博客更换自己喜欢的主题

博客也搭建好了，但是！！！默认的主题并不喜欢怎么办？现在，我们就来为自己的博客更换自己喜欢的主题

点击此处进入 Hexo 官网的主题专栏，我们可以看见有许多的主题供我们选择。

image-20210927105901880

我这里选择的是fluid主题，比较简洁。所以以此为例：

image-20210927105955010

选择之后会跳转到主题的GitHub仓库。我们要做的就是获取主题的clone地址，把主题克隆到本地文件夹。

image-20210927111225619

打开 MyBlog文件夹下的 themes 目录（如：D:\MyBlog\themes），右键 Git Bash Here，输入以下命令：

1
git clone https://github.com/fluid-dev/hexo-theme-fluid.git hexo-theme-fluid   //克隆主题到本地

下载完成后即可在 themes 目录下生成 hexo-theme-fluid 文件夹。

image-20210927113022426

然后退回到D:\MyBlog文件夹，修改_config.yml文件。

image-20210927094837919

修改标题、语言和主题。

找到关键字 title， 修改参数为KeepDive（修改成你想改的名字）。

找到关键字 language， 修改参数为zh-CN。

找到关键字 theme， 修改参数为hexo-theme-fluid。

image-20210927114106448

返回D:\MyBlog目录，右键 Git Bash Here ，输入以下命令开始本地部署主题：

1
2
hexo g  	//生成静态文件。
hexo s		//启动服务器。默认情况下，访问网址为： http://localhost:4000/。

image-20210927114734339

此时打开浏览器，访问 http://localhost:4000/ 就可看见我们的主题已经更换了，如果感觉效果满意，我们就可以把它部署到Github上了。部署到GitHub可能会有延迟，先在本地看一下。

image-20210927114809490

部署到GitHub上，打开地址KeepDive.github.io

image-20210927142615813

此时访问自己的博客即可看见更换后的主题，

但我们仍然需要对主题的相关配置进行修改，比如网站标题，图标等等，

Hexo 中有两份主要的配置文件，名称都是 _config.yml ，它们均是用于站点配置使用的。

其中，一份位于站点根目录下（比如我的：D:\MyBlog\_config.yml），主要包含 Hexo 本身整站的配置；

另一份位于主题目录下（比如我的：D:\MyBlog\themes\hexo-theme-fluid\_config.yml），

这份配置由主题作者提供，主要用于配置主题相关的选项，一般 _config.yml 文件里都有相关注释，按需修改即可。

更多关于主题配置，请查看fluit主题配置指南。

4.2、为博客配置自定义域名
4.2.1、购买域名

首先去域名注册商，像阿里云或者腾讯云之类的域名注册商处，注册域名，新客一般都有优惠，

例如像腾讯云的，目前新客户域名只要1元腾讯云域名。

image-20210927144655429

4.2.2、域名解析

购买域名后要做域名解析，这里以腾讯云为例。登录DNS解析控制台,如果实在不懂含义，主机类型和记录类型就照抄，但是记录值，得填你自己的域名，就是你部署博客之后，在浏览器输入域名可以正常访问的域名，不用带http。

注意：这里的解析时间是600秒，所以需要10分钟之后才会生效，请耐心等待一下。

image-20210927145513663

4.2.3、去GitHub的仓库配置自定义域名

按下图操作配置。

image-20210927150411080

保存成功后的样子。

image-20210927150747644

4.2.4、解决自定义域名，每次发版都需要重新配置的问题。

截止目前，自定义域名是配好了。

但是有个问题：

hexo 每次发布后需要手动在 github page 的 setting 里重新设置自定义域名。

解决方法：

在博客目录下的source文件夹（D:\MyBlog\source）新增一个CNAME文件就可以了。在CNAME新增内容，把你在GitHub Pages配好的那个域名填进去。例如我的就是把blog.keepdive.com填进去。

image-20210927151613870

执行以下命令，重新部署博客到GitHub Pages.

1
2
hexo clean	//清除缓存文件 (db.json) 和已生成的静态文件 (public)。
hexo g -d   //生成静态文件后立即部署网站
4.2.5使用自定义域名访问博客

在浏览器输入自定义域名，访问博客。比如我的是：https://blog.keepdive.com/ ,欢迎大家访问交流学习。

image-20210927152601729

4.3、为博客配置图床（gitee）

2022年3月26号码云图片不让外链链，请参考使用腾讯云COS+PicGO搭建Hexo博客图床教程这篇文章。

4.3.1、注册gitee

gitee官网：https://gitee.com/

为什么不推荐GitHub呢？

因为通过GitHub搭建的图床，虽然能正常上传，但是在markdown中无法正常加载图片，不太适合我们作为写作的图床，也可能有对应的解决方案，只是我不知道而已。主要原因是它存储的那台服务器，在国内被墙了，无法解析。

gitee和github本质上是一样的，都是创建仓库，用来保存数据。

4.3.2、创建图床仓库

进入gitee首页后，点击+号创建图床仓库。

image-20210927161422839
出现如下图的界面，项目才创建完成了，一定要注意哦！

image-20210927161650725

4.3.3、设置私人令牌

按下图中的步骤操作

image-20210927162702485

得到私人令牌（Token）

image-20210927162948945

到此，码云图床相关的配置已经设置完成，记住私人令牌，请务必保存好此私人令牌，关闭之后，将不会再显示，也无法查看。

4.3.4、下载和配置PicGo图床

一款功能非常强大的图床的工具，支持SM.MS、腾讯COS、GitHub图床、七牛云图床、Imgur图床、阿里云OSS、又拍云图床、gitee等多种图床平台；

PicGo默认使用的是SMMS图床：https://sm.ms/ ；如果你没有配置好上面的github图床或者gitee图床，且图片也并不那么重要且可以公开，也可以直接使用默认的SMMS图床来管理图片即可。

下载地址：https://github.com/Molunerfinn/PicGo/releases

特点

要说特点，PicGO最大的特点是，可以和Typora结合使用，配置好关联之后，Typora写文章时，如果需要穿插图片，只需要将图片复制粘贴到Typora的编辑区域，就自动通过PicGo上传到指定图床，得到外网能访问的URL并展示；如果没有网络的情况下，也能通过PicGo暂存在本地，等有网络的时候，再次进行上传即可。关联配置后面会专门讲解。

PicGo配置gitee图床

安装插件

默认情况下PicGo是不支持gitee的，所以需要第三方插件来支持。

image-20210927163531159

配置gitee图床地址及私人令牌

image-20210927164218993

4.3.5、Typora关联PicGo

安装Typora

Markdown教程及Typora安装：https://www.runoob.com/markdown/md-tutorial.html

安装Snipaste

Snipaste官网：https://www.snipaste.com/

配置Typora

按以下步骤配置Typora

image-20210927170418947

如果提示成功，说明关联就已经正常了

整体测试

经过上面的一系列配置之后，就可以使用Markdown开始写文章了；图片这些，截图粘贴之后，就自动通过PicGo上传到了远端图床，效果如下：

image-20210927170752183

至此，我们就可以专心写文章了，再也不用花精力去处理图片，排版这些琐碎、耗时的工作。

4.4、为博客配置gitbook
4.4.1、什么是gitbook？

GitBook 是一个基于 Node.js 的命令行工具，可使用 Github/Git 和 Markdown（或AsciiDoc） 来制作精美的电子书，GitBook 并非关于 Git 的教程。

GitBook支持输出多种文档格式：

  • 静态站点：GitBook默认输出该种格式，生成的静态站点可直接托管搭载Github Pages服务上；

  • PDF：需要安装gitbook-pdf依赖；

  • eBook：需要安装ebook-convert；

  • 单HTML网页：支持将内容输出为单页的HTML，不过一般用在将电子书格式转换为PDF或eBook的中间过程；

  • JSON：一般用于电子书的调试或元数据提取。

使用GitBook制作电子书，必备两个文件：README.md和SUMMARY.md

4.4.2、安装gitbook

要求

安装 GitBook 简单明了。您的系统只需要满足以下两个要求：

  • NodeJS（推荐v4.0.0及以上）
  • Windows、Linux、Unix 或 Mac OS X

使用 NPM 安装

安装 GitBook 的最佳方式是通过NPM。在终端提示符下，只需运行以下命令即可安装 GitBook

1
npm install gitbook-cli -g

安装完成之后，你可以使用下面的命令来检验是否安装成功。

1
gitbook -V

问题

1、一直卡在Installing GitBook 3.2.3的页面。

2、出现安装gitbook报错，提示cb.apply is not a function。

image-20211015162504007

原因

1、由于安装过程默认使用国外镜像导致。

2、cb.apply is not a function，主要是gitbook-cli引用了旧版的graceful-fs。Node.JS版本过高。

解决方法

1、执行以下命令，设置镜像源为淘宝。

1
npm config set registry=http://registry.npm.taobao.org

执行以下命令，查看是否修改成功。

1
npm config get registry

image-20211015164939983

2、node.js版本降级,下载NVM for Windows.(切记 nvm的安装路径 ：不要有汉字，不要有空格。不，应该要有良好的习惯那就是)

https://github.com/coreybutler/nvm-windows/releases

image-20211019151424752

3、安装完成后，使用nvm下载低版本的nodejs。我这里下的是10.23.1版本。执行以下命令安装。

1
nvm install 10.23.1

4、执行以下命令，切换nodejs版本。（使用管理员权限，不然会报错。）

1
nvm use 10.23.1

image-20211019151742623

再次执行gitbook -V，显示版本正常。

1
gitbook -V

image-20211019154447453

4.4.3、创建一本电子书

GitBook 准备工作做好之后，我们进入一个你要写书的目录，输入如下命令。

1
gitbook init

image-20211102142820562

可以看到他会创建 README.md 和 SUMMARY.md 这两个文件，README.md 应该不陌生，就是说明文档，而 SUMMARY.md 其实就是书的章节目录。

接下来，我们输入 gitbook serve 命令，然后在浏览器地址栏中输入 http://localhost:4000 便可预览书籍。

image-20211102143133969

运行该命令后会在书籍的文件夹中生成一个 _book 文件夹, 里面的内容即为生成的 html 文件，我们可以使用下面命令来生成网页而不开启服务器。

1
gitbook build
4.4.4、目录结构

GitBook 基本的目录结构如下所示：

1
2
3
4
5
6
7
8
9
10
.
├── book.json
├── README.md
├── SUMMARY.md
├── chapter-1/
|   ├── README.md
|   └── something.md
└── chapter-2/
    ├── README.md
    └── something.md

下面我们主要来讲讲 book.json 和 SUMMARY.md 文件。

book.json

该文件主要用来存放配置信息，我先放出我的配置文件。

五、问题解答

配置过程中，有任何问题都可以添加我微信交流，我帮你解决。

image-20210927172320125

教程
小白 hexo

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！