QingYuAlive's Blog
我的第一篇博客
QingYuAlive Lv1
  2023-11-10 21:41:41 2023-11-10 21:41   2023-12-27 23:14:48  

Hexo博客的搭建

Hexo是一个快速、简洁且高效的博客框架。Hexo使用Markdown（或其他标记语言）解析文章，在几秒内，即可利用靓丽的主题生成静态网页

  • 超快速度

Node.js所带来的超快生成速度，让上百个页面在几秒内瞬间完成渲染

  • 支持Markdown

Hexo支持 GitHub Flavored Markdown 的所有功能，甚至可以整合 Octopress 的大多数插件

  • 一键部署

只需一条指令即可部署到 GitHub Pages, Heroku 或其他平台

  • 插件和可拓展性

强大的 API 带来无限的可能，与数种模板引擎（EJS，Pug，Nunjucks）和工具（Babel，PostCSS，Less/Sass）轻易集成

原因

为什么突然想到搭建个人的博客？大概是终于想主动做些有意思的事。可以预料到的是，这个博客大部分时间只有我自己会来浏览，偶尔或许会有人出于好奇，通过github上这个项目旁边的链接进来瞧瞧，不过这都无所谓了，姑且当它是我的一本日记，我想在这当中记录一些我想要记录的东西

博客初成形

相比于查阅官方文档，我更倾向于观看演示视频来解决问题，因为这样更便于我的操作与理解，一定程度上也减少了错误的发生。最初的默认主题博客搭建参考于b站上的up主CodeSheep的视频—手把手教你从0开始搭建自己的个人博客 |无坑版视频教程| hexo。

一、环境准备

安装Hexo前需先安装下列应用程序：

  • Node.js
  • Git

1、安装Node.js

Hexo是一个基于Node.js的博客框架，这意味着，想要搭建Hexo博客，我们需要先安装Node.js

需要注意的是，官方文档中要求Node.js版本需不低于10.13，建议使用Node.js 12.0及以上版本。如果你的电脑中尚未安装Node.js，那么可以前往Node.js (nodejs.org)下载相应的安装包进行安装

如果你像我一样，电脑中已经安装了Node.js，但需要升级到更高的版本，那么无需卸载原来的版本，Node.js提供了一种更加简单且高效的升级办法：下载所需版本的安装包，安装时选择当前版本的安装目录（此时的默认安装目录正常情况下便是当前版本的安装目录）安装即可，安装程序会将当前版本替换为需要安装的版本

2、安装Git

Git ，一个软件开发者必备的代码版本控制系统。Hexo 使用 Git 来管理主题和插件等外部依赖，并且在部署 Hexo 网站到远程仓库（如 GitHub、GitLab 等）时，Git 也是必需的。

你可以前往Git (git-scm.com)进行下载

如果你需要对你的git版本进行更新，你可以打开终端界面输入

1
git update-git-for-windows

系统会为将你的git更新至最新的版本

二、安装Hexo

所有必备的应用程序安装完成后，即可使用npm安装Hexo

1、全局安装：

直接打开终端界面输入

1
npm install -g hexo-cli

此时安装的Hexo可以在系统的任意一个目录下使用，你可以打开终端界面在任意一个目录下键入Hexo命令来搭建Hexo博客

2、局部安装：

进入需要安装的目录输入

1
npm install hexo

此时安装的Hexo仅能在该目录及其子目录下使用，通过cmd命令框键入Hexo命令在该目录或其子目录下搭建Hexo博客

3、旧版本Hexo安装

考虑到并非所有人都愿意使用较新版本的Node.js，如果你坚持使用较旧版本的Node.js，你也可以安装旧版本的Hexo来避免版本不兼容的问题

打开终端界面，然后运行以下命令，将version替换为你想要安装的Hexo版本号

1
npm install -g hexo@version

例如，如果你想要安装Hexo的3.2.0版本，命令将如下所示

1
npm install -g hexo@3.2.0

安装完成后，可以运行以下命令来检验Hexo的安装版本：

1
hexo -v

这将显示安装的Hexo版本号，以确保安装成功

以下为Hexo与Node.js的版本对应表：

Hexo版本 最低版本（Node.js版本） 最高版本（Node.js版本）
7.0+ 14.00 latest
6.2+ 12.13.0 latest
6.0+ 12.13.0 18.5.0
5.0+ 10.13.0 12.0.0
4.1 - 4.2 8.10 10.0.0
4.0 8.6 8.10.0
3.3 - 3.9 6.9 8.0.0
3.2 - 3.3 0.12 未知
3.0 - 3.1 0.10或iojs 未知
0.0.1 - 2.8 0.10 未知

你可以选择你当前Node.js版本所能支持的Hexo版本进行安装

三、建立博客

1、初始化

经过上述准备后，系统已经满足了建立一个Hexo实例所需的所有条件

执行下列命令

1
2
3
hexo init <folder>
cd <folder>
npm install

这里的<folder>是Hexo实例所处的文件夹，若当前目录下无该文件夹，系统会新建一个文件夹，在该文件夹的目录下，系统会生成一系列的文件，这里只介绍三个较为重要的文件

source

初始情况下只有一个文件夹_posts（用于存放你博客正文的Markdown文件），后续可能需要添加其他文件夹，如about（用于存放about页面的Markdown文件），以及一个用于存放图片资源的文件夹images

themes

这个文件夹初始情况下为空，它用于存放后续个性化博客时的主题文件

_config.yml

极其重要的文件，作为整个博客的配置文件，用于配置博客中的各类功能与内容

2、本地运行

执行以下命令

1
hexo generate

Hexo会生成静态文件，这些文件就是博客的源码，他们被放到了public文件夹当中

再执行

1
hexo server

Hexo会启动本地服务器，并将生成的静态文件部署在该服务器上。默认情况下，访问网址为：http://localhost:4000/，你可以在浏览器的地址栏输入该网址进行访问

你将看到

这便是默认的Hexo博客，同时Hexo为你自动生成了一片示例文章，至此，我们完成了基本的Hexo博客的搭建

部署

GitHub提供了一项免费的静态站点托管服务GitHub Pages，它直接从GitHub上的仓库获取HTML、CSS和JavaScript文件，通过构建过程运行文件，然后发布网站

要想使用GitHub Pages，首先我们需要创建一个用来管理Hexo生成的静态页面的仓库，GitHub Pages规定了这个仓库的命名格式应为<你的GitHub用户名>.github.io，同时这个仓库名后续也将成为公网访问该页面的地址

这里我们需要安装一个Hexo的上传插件deployer-git

1
npm install hexo-deployer-git --save

后续这个插件将极大地便捷我们的推送

然后我们需要进行推送信息的设置，使用vim打开配置文件_config.yml

1
vim _config.yml

找到deploy并将其修改为

1
2
3
4
deploy:
  type: git
  repo:https://github.com/<你的GitHub用户名>/<你的GitHub用户名>.github.io.git
  branch: master

在这之后，我们只需执行

1
hexo deploy

即可通过deployer-git快速的将本地的Hexo博客部署到GitHub Pages上，在首次推送时，需要进行GitHub的身份认证，输入用户名和密码后，系统将开始推送，完成推送后，查看对应的GitHub的仓库

对应的静态页面文件已被推送到仓库中

此时我们在浏览器的地址栏输入<你的GitHub用户名>.github.io便能访问该博客页面

更换主题

作为最热门的博客框架之一，Hexo拥有一大批第三方主题供用户选择。更换Hexo主题非常容易，找到你所需主题所对应的仓库并执行

1
git clone https://github.com/<作者名>/<仓库名>.git themes/<主题名>

git会将主题文件下载到themes中，之后再修改_config.yml中的theme

1
theme: <主题名>

这样我们便完成了主题的更换

以keep主题为例，首先我们将keep主题的文件克隆到themes中并命名为keep

1
git clone https://github.com/XPoet/hexo-theme-keep.git themes/keep

然后修改配置文件中的theme

1
theme: keep

至此，我们便将Hexo的主题换成了keep

通常，一个主题可能会有以下的结构：

1
2
3
4
5
6
.
├── _config.yml
├── languages
├── layout
├── scripts
└── source

_config.yml

主题的配置文件。和 Hexo 配置文件不同，主题配置文件修改时会自动更新，无需重启 Hexo Server。

languages

语言文件夹

layout

布局文件夹。用来存放主题的模板文件，决定了网站内容的呈现方式

scripts

脚本文件夹。在启动时，Hexo会加载此文件夹内的JavaScript文件

source

资源文件夹，除了模板以外的Asset，例如CSS、JavaScript文件等，都应该放在这个文件夹中。文件或文件夹开头名称为_（下划线）或隐藏的文件会被忽略

遇到的问题

问题描述：最初更换主题时，出现了一个无法解释的现象，在本地运行时，主题的样式正常显示，但是当推送到GitHub Pages之后，无法在网页正常显示主题的样式，查看生成的对应静态文件，当中也无法找到明显的错误

问题解决：打开_config.yml，发现当中存在这样一行

1
2
3
# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url:

将其改成

1
2
3
# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://<仓库名>

问题完美解决

问题分析：推测为，若在_config.yml文件中不设置或者不更改url的值，Hexo将使用默认值，这个默认值是一个相对路径，通常是”/“，这就导致了资源文件的链接问题：如果你在Hexo中包含了任何链接，它们将使用默认的相对路径，这可能导致在部署到不同环境时生成的链接可能会指向错误的位置，进而导致大量资源无法加载

总结

虽然搭建Hexo并没有使我得到大量技术相关的收获，我收获的仅仅是一个简单的个人博客以及对于GitHub Pages的简单了解，但是通过一次这样的实践，更多的，我得到是精神层面的反馈，对于未知事物的认知与接触又一次触发了我对这个领域探索的热情。

愿这份热忱，永不泯灭

我的第一篇博客
2023/11/10/my-first-blog/
Author
QingYuAlive
Published
2023-11-10 21:41
License
 Comments
Comment plugin failed to load
Loading comment plugin
  1. 1. Hexo博客的搭建
    1. 1.1. 原因
    2. 1.2. 博客初成形
      1. 1.2.1. 一、环境准备
        1. 1.2.1.1. 1、安装Node.js
        2. 1.2.1.2. 2、安装Git
      2. 1.2.2. 二、安装Hexo
        1. 1.2.2.1. 1、全局安装：
        2. 1.2.2.2. 2、局部安装：
        3. 1.2.2.3. 3、旧版本Hexo安装
      3. 1.2.3. 三、建立博客
        1. 1.2.3.1. 1、初始化
        2. 1.2.3.2. 2、本地运行
    3. 1.3. 部署
    4. 1.4. 更换主题
    5. 1.5. 遇到的问题
    6. 1.6. 总结
  1. 1. Hexo博客的搭建
    1. 1.1. 原因
    2. 1.2. 博客初成形
      1. 1.2.1. 一、环境准备
        1. 1.2.1.1. 1、安装Node.js
        2. 1.2.1.2. 2、安装Git
      2. 1.2.2. 二、安装Hexo
        1. 1.2.2.1. 1、全局安装：
        2. 1.2.2.2. 2、局部安装：
        3. 1.2.2.3. 3、旧版本Hexo安装
      3. 1.2.3. 三、建立博客
        1. 1.2.3.1. 1、初始化
        2. 1.2.3.2. 2、本地运行
    3. 1.3. 部署
    4. 1.4. 更换主题
    5. 1.5. 遇到的问题
    6. 1.6. 总结