Hexo 静态网站搭建过程

Hexo 静态网站搭建过程(Windows系统)

部分参考：Hexo+Github博客搭建教程_hexo github-CSDN博客

1. Git 部分

部分参考：Windows安装Git(免安装版)_git免安装版-CSDN博客

Git下载页面：Git - Downloads

(1) 下载PortbaleGit(Git便携版)

(2) PortbaleGit 自解压到你所选定的位置

(3) 配置环境变量

(“设置”->”系统”->”高级系统设置”->”环境变量”->”系统变量”)

新建系统变量，指向PortableGit安装文件夹位置

添加环境变量

(“系统变量”->”Path”->”编辑”->”新建”->添加三行路径)

1
2
3

%PortableGit%	# 指向PortableGit的根目录
%PortableGit%\bin	# 指向PortableGit的bin目录
%PortableGit%\usr\bin	# 指向PortableGit的usr\bin目录

(4) 检查安装结果

打开cmd（Win+R -> 输入cmd -> Ctrl+Shift+Enter）

1
2
3

# 查看 Git 的版本信息
git --version
git -v #简化输入

若弹出版本信息就说明配置没问题。

(5) 在文件夹背景右键菜单中添加 Git Bash 快捷方式

打开注册表编辑器（Win+R -> 输入regedit -> Ctrl+Shift+Enter）

导航栏中输入：计算机\HKEY_CLASSES_ROOT\Directory\Background\shell

创建新建：在”shell”下右键点击，选择”新建”->”项”，命名为”GitBash”

创建”command”子键：在”GitBash”下右键点击，选择”新建”->”项”，命名为”command”

设置命令：双击”command”下的默认值，其值设置为：”自定义的Git安装文件夹路径\bin\bash.exe”

添加图像：”GitBash”下新建字符串值，命名为”Icon”，其数值数据设置为：”自定义的图像路径”

验证：

2. Node.js 部分

参考了 node.js 安装过程（绿色免安装版） - OwlInTheOaktree - 博客园

Node.js下载页面：Node.js — Download Node.js®

(1) 下载Node.js便携版

(2) 解压到你所选定的位置

(3) 配置环境变量

新建系统变量，指向Node.js安装文件夹位置

1
2

%NODE_HOME%	# 指向Node.js的根目录，为了能够使用node本身的命令
%NODE_HOME%\node_global	# 指向Node.js的node_global目录，为了能够使用npm软件包管理工具

(4) 认清Node.js的 缓存数据 以及 模块 的存放位置

在Node.js安装目录下新建两个文件夹：

• node_cache：用于存储 npm 的缓存数据。npm 在安装模块时会从远程仓库下载模块的压缩包（通常是 .tgz 文件），这些文件会被缓存到 node_cache 目录下。

• node_global：用于存储全局安装的 Node.js 模块和可执行文件。当你使用 npm install -g <package> 命令安装模块时，这些模块会被安装到 node_global 目录下。

(5) 检查安装结果

打开cmd（Win+R -> 输入cmd -> Ctrl+Shift+Enter）

1
2
3
4
5
6
7
8
9

# 1.检查 node 版本
node -v
# 2.检查 npm 工具版本
npm -v
# 3.检查 软件仓库 位置
npm root -g
# 4.(返回仓库路径不对时备选) 自定义 缓存位置 和 仓库位置
npm config set prefix "自定义路径\node_global"
npm config set cache "自定义路径\node_cache"

若正确返回信息就说明配置没问题。

3. Hexo 安装

(1) 使用 Node.js 和 npm 安装 Hexo

在任意位置右键点击，打开 Git Bash 命令行界面：

bash 下如何复制粘贴：

(由于 bash 中 Ctrl+C 的作用为 停止当前进程)

因此在bash中：

左键框选内容，单击右键即为复制；

同理右击空白区域即为粘贴剪切板中内容

1
2

# 使用 npm 全局(对应-g)安装 hexo-cli 命令行工具，用于管理和操作 Hexo 博客
$ npm install -g hexo-cli

使用国内镜像源

如果没有梯子的话，可以使用阿里的国内镜像进行加速。

1 2	# 设置 npm 管理项，指定其包管理仓库地址，指定为 "https://registry.npm.taobao.org"(淘宝的npm镜像地址) $ npm config set registry https://registry.npm.taobao.org

设置完成后，可以通过以下命令验证配置是否成功：

1 2	# 查看当前 npm 默认包管理仓库地址 $ npm config get registry

如果输出为：

1	https://registry.npm.taobao.org

则表示配置成功。

切换回默认 npm 仓库

如果需要切换回默认的 npm 仓库，可以运行以下命令：

1	$ npm config set registry https://registry.npmjs.org

你所安装的这些包(如hexo-cli) 存放在 “Node.js安装目录\node_modules” 文件夹下

(2) 检查安装结果

1
2

# 显示当前安装的 Hexo 版本号以及相关的依赖信息
$ hexo -v

若正常返回信息就说明配置没问题。

4. 初始化 Hexo 网站

(1) 确定 Hexo 博客文件存放位置

你需要一个文件夹来放置单个Hexo博客的所有文件。

比如我将Hexo博客文件都存放在 D:\Website\NewBlog 目录下。

(2) 初始化新的 Hexo 博客项目

在 Hexo博客存放文件夹下 右键点击，打开 Git Bash 命令行界面：

1
2

# 初始化新的 Hexo 博客项目
$ hexo init

hexo init 后，指定文件夹根目录下 文件分布 如下图所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Hexo_Blog文件夹/
├── _config.yml                # 站点配置文件
├── package.json               # 项目依赖配置文件
├── scaffolds/                 # 模板文件夹，用于生成新文章、页面等
├── source/                    # 源文件夹，存放博客的原始内容
│   ├── _drafts/               # 草稿文件夹
│   ├── _posts/                # 文章文件夹
│   ├── _data/                 # 数据文件夹，用于存储自定义数据
│   ├── _i18n/                 # 国际化文件夹，用于多语言支持
│   ├── assets/                # 静态资源文件夹
│   └── index.md               # 站点首页文件
├── themes/                    # 主题文件夹，存放博客的主题
├── node_modules/              # 项目依赖的 Node.js 模块
├── public/                    # 静态生成的文件夹，存放生成的静态文件
└── db.json                    # 数据库文件，存储文章、页面等的元数据

• node_modules：存储项目依赖的第三方模块

(3) 生成静态网页，并本地浏览

1
2
3

# 1.生成静态网页 
# hexo generate
$ hexo g

此时文件分布如下图所示，hexo g 操作生成了 public 文件夹

• public：存放生成的页面

1
2
3
4

# 2.启用本地服务器浏览博客，默认访问端口4000
# 浏览器输入 http://localhost:4000 以访问
# hexo server
$ hexo s

使用本地服务器浏览的博客如图所示

结束浏览后，按 Ctrl+C 关闭本地服务器。

5. Github 部分

首先你需要有一个Github账号。

Hexo 网站将部署在 Github 存储库上。

(1) 创建 Github 存储库

在 Github 主页找到 + Create new -> New repository

• Repository name：你的Github用户名.github.io
• Public - 公开
• 点击 Create repository 创建。

(2) 连接 Github 服务器

1.设置 Git 的全局用户名和邮箱地址

1
2
3

# 设置 Git 的全局用户名和邮箱地址
$ git config --global user.name "你的GitHub用户名"
$ git config --global user.email "你的GitHub邮箱"

1
2
3

# (可选)检查 Git 的全局用户名和邮箱地址
$ git config user.name
$ git config user.email

2.创建SSH密钥，然后一路按回车

1
2

# 创建SSH密钥
ssh-keygen -t rsa -C "你的Github邮箱"

它会告诉你已经生成了SSH密钥对。

打开 id_rsa.pub 文件夹（Windows系统默认路径C:\Users\1.ssh）

或者在 Git Bash 中输入

1 2	# 查看当前用户存储在 ~/.ssh/id_rsa.pub 文件中的公钥文件内容 $ cat ~/.ssh/id_rsa.pub

将 id_rsa.pub 中内容复制。

在 Github 个人主页 找到 Settings -> SSH and GPG keys

在 SSH keys 区域，点击 New SSH key 创建新的SSH密钥

• Title：自定义名称
• Key type：Authentication Key
• Key：将 id_rsa.pub 中内容粘贴到框中

点击 Add SSH key 确认创建密钥。

返回 Git Bash，输入

1
2

# 检验SSH密钥是否正确配置
$ ssh -T git@github.com

注：本人在这一步出现了连接失败的问题，可参考 记录git报错之ssh: connect to host port 22: Connection refused - Ynline - 博客园 以解决问题

连接成功如图所示。