Hexo博客搭建教程系列·本地部署

2.1 Node.js 使用

Node.js 是什么,与本教程内容无关,不解释(其实我也不知道 🙃)。如果你想了解 Node.js,建议阅读官方文档或者看看这个回答: Node.js是用来做什么的? - 知乎 (zhihu.com)

推荐使用 Node.js 版本管理工具下载、使用 Node.js,详情见 Node.js 版本管理工具总结 - 望月家 (seeyue.top)

2.3 Git 使用

2.3.1 下载 Git for Windows

下载地址:Git - Download for Windows(git-scm.com),如下:

![2.03 git 下载(win)](./Hexo博客搭建教程系列-本地部署_Pic/2.03 git 下载(win).png)

如果官网打不开,国内镜像网站:Git for Windows | newbe。进入网站后,查看目录,下载 Git for Windows。

2.4 Git 安装流程

2.4.1 双击运行程序

双击运行 Git-2.34.1-64-bit.exe ,进入 Git 的安装界面。

![2.04 git 安装流程1](./Hexo博客搭建教程系列-本地部署_Pic/2.04 git 安装流程1.png)

2.4.2 选择安装目录

点击 next ,选择安装目录。默认安装在 C:\Program Files\Git 。建议安装在 D 盘。如下:

![2.05 git 安装流程2](./Hexo博客搭建教程系列-本地部署_Pic/2.05 git 安装流程2.png)

2.4.3 选择组件

点击 next ,选择组件(Select Components)。
红框:默认选项,不要动。
绿框1:是否在桌面添加快捷方式。
绿框2:是否每天检查 Git 有无 Windows 更新和将 Git Bash 配置文件添加到 Windows 终端。这些根据自己需要选择。
我的选择:保持默认就好。

![2.06 git 安装流程3](./Hexo博客搭建教程系列-本地部署_Pic/2.06 git 安装流程3.png)

2.4.4 选择开始菜单文件夹

点击 next ,选择开始菜单文件夹(Select Start Menu Folder),按需选择。

![2.07 git 安装流程4](./Hexo博客搭建教程系列-本地部署_Pic/2.07 git 安装流程4.png)

2.4.5 选择编辑器

默认即可。点击 next ,进入下一步。Vim(Unix及类Unix系统文本编辑器)_百度百科 (baidu.com) vim教程网 (vimjc.com)

![2.08 git 安装流程5](./Hexo博客搭建教程系列-本地部署_Pic/2.08 git 安装流程5.png)

2.4.6 选择默认分支名

默认就好,当然你也可以自定义分支为 main 。点击 next ,进入下一步。

![2.09 git 安装流程6](./Hexo博客搭建教程系列-本地部署_Pic/2.09 git 安装流程6.png)

2.4.7 环境变量、SSH、HTTPS 设置

  1. 调整 PATH 环境,默认即可。点击 next ,进入下一步。

![2.10 git 安装流程7](./Hexo博客搭建教程系列-本地部署_Pic/2.10 git 安装流程7.png)

  1. 选择 SSH 可执行文件(Choosing the SSH executable),默认即可。点击 next ,进入下一步。

![2.11 git 安装流程8](./Hexo博客搭建教程系列-本地部署_Pic/2.11 git 安装流程8.png)

  1. 选择 HTTPS 后端传输(Choosing HTTPS transport backend),默认即可。点击 next ,进入下一步。

![2.12 git 安装流程9](./Hexo博客搭建教程系列-本地部署_Pic/2.12 git 安装流程9.png)

2.4.8 行结束转换、终端模拟器设置

  1. 配置行结束转换(Configuring the line ending conversions),默认即可。点击 next ,进入下一步。

![2.13 git 安装流程10](./Hexo博客搭建教程系列-本地部署_Pic/2.13 git 安装流程10.png)

  1. 配置终端模拟器与 Git Bash 一起使用(Configuring the terminal emulator to use with Git Bash),默认即可。点击 next ,进入下一步。

![2.14 git 安装流程11](./Hexo博客搭建教程系列-本地部署_Pic/2.14 git 安装流程11.png)

2.4.9 Git Pull 风格、凭据管理设置

  1. 选择 Git Pull 风格,默认即可。点击 next ,进入下一步。

![2.15 git 安装流程12](./Hexo博客搭建教程系列-本地部署_Pic/2.15 git 安装流程12.png)

  1. 选择凭据管理(Choose a credential helper),默认即可。点击 next ,进入下一步。

![2.16 git 安装流程13](./Hexo博客搭建教程系列-本地部署_Pic/2.16 git 安装流程13.png)

2.4.10 额外选项与实验选项

  1. 配置额外选项(Configuring extra options),默认即可。点击 next ,进入下一步。

![2.17 git 安装流程14](./Hexo博客搭建教程系列-本地部署_Pic/2.17 git 安装流程14.png)

  1. 配置实验选项(Configuring experimental options),默认即可。点击 next ,进入下一步。

![2.18 git 安装流程15](./Hexo博客搭建教程系列-本地部署_Pic/2.18 git 安装流程15.png)

2.4.11 安装完成

  1. 安装中。

![2.19 git 安装流程16](./Hexo博客搭建教程系列-本地部署_Pic/2.19 git 安装流程16.png)

  1. 去掉勾选,点击 Finish 。安装完成!

![2.20 git 安装流程17](./Hexo博客搭建教程系列-本地部署_Pic/2.20 git 安装流程17.png)

参考资料:Windows系统Git安装教程(详解Git安装过程) - 学为所用 - 博客园 (cnblogs.com)

现在,在任意文件夹,右键鼠标,就可以看到 Git GUI 选项(git图形界面工具)、Git Bash 选项(命令行工具),如下:

![2.21 git 选项](./Hexo博客搭建教程系列-本地部署_Pic/2.21 git 选项.png)

在搭建博客的过程中,我们一般使用 Git Bash 命令行工具。

2.5 Git Bash 界面美化

当我们在任意文件夹,鼠标右键选择 Git Bash Here 时,会弹出以下界面。

![2.22 git 美化1](./Hexo博客搭建教程系列-本地部署_Pic/2.22 git 美化1.png)

这个界面很丑,字体太小,配色也丑。所以我们需要美化一下。

2.5.1 进入设置

鼠标右键界面的任务栏,点击 opitions ,进入配置界面。

![2.23 git 美化2](./Hexo博客搭建教程系列-本地部署_Pic/2.23 git 美化2.png)

2.5.2 切换语言

切换语言为:zh_CN 或者 @ Windows 语言 @。保存,再次打开配置界面,已经切换为中文。

![2.24 git 美化3](./Hexo博客搭建教程系列-本地部署_Pic/2.24 git 美化3.png)

2.5.3 外观设置

外观设置,如下:

![2.25 git 美化4](./Hexo博客搭建教程系列-本地部署_Pic/2.25 git 美化4.png)

2.5.4 文本设置

文本设置,如下

![2.26 git 美化5](./Hexo博客搭建教程系列-本地部署_Pic/2.26 git 美化5.png)

2.5 5 美化完成

大功告成!现在的 Git Bash Here 如下:

![2.27 git 美化6](./Hexo博客搭建教程系列-本地部署_Pic/2.27 git 美化6.png)

是不是好看了许多。😉

2.6 检查是否安装成功

Win+R ,输入 cmd ,回车,进入以下界面。

输入 node -v,回车;输入 npm -v ,回车。如果如下图所示,则代表 Node.js 安装成功。

若报错,复制错误代码,百度。

注意:在 Terminal、cmd、powershell 界面时,复制、粘贴均不能使用 Ctrl+C 和 Ctrl+V ,只能使用 Ctrl+Ins 和 Shift+Ins 或者直接右键复制、粘贴。建议使用后者。笔记本电脑的键盘的 Ins 不太好用。

![2.28 检查安装](./Hexo博客搭建教程系列-本地部署_Pic/2.28 检查安装.png)

2.7 安装 Hexo

Hexo 是我们以后用于搭建个人博客的框架,所以最好新建一个 Test_Blog 文件夹用于博客的管理,同时Hexo 框架与以后写作发布的网页都会保存在这个文件夹当中。

注:以下内容,我将会用 Test_Blog 文件夹指代博客文件夹。

2.7.1 建立博客文件夹

我把 Test_Blog 文件建立在 E 盘。注意文件名尽量不使用中文、空格。以免引起未知错误。如下:

![2.29 博客文件夹](./Hexo博客搭建教程系列-本地部署_Pic/2.29 博客文件夹.png)

2.7.2 下载 Hexo

左键选中 Test_Blog 文件夹,右键点击 Git Bash Here 。进入以下界面:

![2.30 hexo 安装1](./Hexo博客搭建教程系列-本地部署_Pic/2.30 hexo 安装1.png)

输入命令,下载 Hexo 。

npm install -g hexo

结果如下,则下载成功。

![2.31 hexo 安装2](./Hexo博客搭建教程系列-本地部署_Pic/2.31 hexo 安装2.png)

2.7.3 Hexo 初始化

进入 Test_Blog 文件夹,右键点击 Git Bash Here ,此时,Test_Blog 文件夹内部为空。

输入命令:

hexo init

结果如下,则初始化成功。

![2.32 hexo 初始化](./Hexo博客搭建教程系列-本地部署_Pic/2.32 hexo 初始化.png)

2.7.4 构建 Hexo

输入命令:

hexo g

再次构建生成文件。会在当前目录下生成一个名为 public 的文件夹,这个文件夹就是根据你 Hexo 的配置,生成的 HTML + CSS + JS 的静态文件。

2.7.5 启动 Hexo 本地服务器

输入命令:

hexo s

结果如下,则成功启动本地服务器。

![2.33 hexo 本地服务](./Hexo博客搭建教程系列-本地部署_Pic/2.33 hexo 本地服务.png)

如果遇到报错,请输入以下命令。

npm install hexo-server --save

![2.34 hexo 安装 hexo-server](./Hexo博客搭建教程系列-本地部署_Pic/2.34 安装 hexo-server.png)

2.7.6 查看网站

浏览器输入框起来的网址:http://localhost:4000/ 。网站如下。

![2.35 hexo 本地部署](./Hexo博客搭建教程系列-本地部署_Pic/2.35 hexo 本地部署.png)

当你刷新本地服务器打开的网页后,你会发现 Git Bash Here 界面如下:

![2.36 本地部署报错](./Hexo博客搭建教程系列-本地部署_Pic/2.36 本地部署报错.png)

这些 Warnings 对 Hexo 程序运行没啥影响,只是看起来不舒服罢了。

如果你想处理它们,可以看看这两篇博文:

关闭 Hexo 本地服务器,在 Git Bash Here 界面按 Ctrl + C

至此,本地部署完成!

如有疑问,请在评论区留言,我会尽快回复。觉得文章不错?点击右侧按钮可复制文章链接。

Hexo博客搭建教程系列·本地部署
作者
See Yue
发布于
2024年3月6日
更新于
2024年9月8日
许可协议
评论区