Hexo 博客搭建

这是一个简单的 Hexo 博客搭建教程,无需自己购买服务器,也能搭建属于自己的博客。

准备工作

  1. Gitee 账号或者 GitHub 账号。Gitee 账号和 GitHub 账号都很容易申请,考虑到博客的访问速度,更推荐使用 Gitee。然后新建一个公开的空仓库,仓库的命名需要和你的账号名保持一致。在 Gitee 中访问个人的主页,浏览器上的地址会变成 gitee.com/xxx,这个 xxx 就是你的账号名。同理,进入 GitHub 的个人主页,地址栏 github.com/xxx
  2. Git。电脑需要安装 Git,使用 git --version 确保 Git 是安装成功的。
  3. Node 环境。Node 环境安装也很简单,百度关键词 nodejs 进入官网下载,安装了过程无脑下一步即可。安装完成后,控制台使用 node -v命令,打印出 node 的版本信息即为成功。例如我的电脑打印的 node 版本信息 v19.1.0
  4. 安装 Hexo。Node 环境准备好之后,使用命令 npm install -g hexo-cli 安装 Hexo,等待控制台输出完成即可,使用 hexo -v 验证是否安装成功。Hexo 官方文档有详细的安装方法,可以参考
  5. 至此,所有准备工作已完成。

快速搭建

首先,使用 hexo 命令创建一个文件夹,文件夹的名称和路径自己指定。为了规避一些潜在的问题,名称和路径最好是英文的。此处创建一个 blog 文件夹。

1
hexo init blog

等待一会,然后进入到 blog 文件夹。需要注意的是, 文件夹有个 .gitignore 文件,需要将 public/ 这行删除,后续步骤会使用到。

1
2
3
4
5
6
7
8
.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/ # 删除这行
.deploy*/
_multiconfig.yml

安装所需依赖。

1
npm install 

将 md 文件生成 html 文件,此时 blog 目录下自动生成 public 文件夹,用于保存 html 文件。

1
hexo generate

之后,使用命令在本地访问我们搭建的博客,看看效果。

1
hexo server

此时在浏览器上访问 http://localhost:4000 即可看到搭建的 hexo 博客了。停止访问只需要 Ctrl + C

推送到远程仓库

博客能本地访问,无法满足大多数人的需求,搭建博客的目的就是为了能够随时随地访问。

需要使用 git 命令提交,推送到远程仓库。要注意的是,只需要将 html 文件推送到远程仓库,因此推送 public 下的文件即可。

进入到 blog/public 文件夹,使用 Git 进行初始化。

1
git init

关联远程仓库地址

1
git remote add origin <远程仓库地址>

使用 git 命令提交,推送到远程仓库。需要注意的是,只需要将生成好的 html 文件推送到远程仓库,因此推送 public 下的所有文件即可。

1
2
3
4
5
6
7
8
# 添加 public 下的所有文件
git add .

# 提交
git commit -m 'init blog'

# 推送到远程仓库
git push origin master

推送成功后,远程仓库的目录结构应与下图类似

使用 pages 服务

Gitee 和 GitHub 都提供了 pages 服务,pages 服务简单来说,就是让你的 html 文件能被其他人访问,这样就达到了博客共享的目的。

ceui

这个一整套流程就是:编写博客(markdown),使用 hexo generate 将 md 文件编译成 html 文件,使用 git 命令将文件推送到远程仓库,配置好 pages 服务即可。当然,pages 只需配置一次即可。

由于 Gitee 使用 pages 要实名认证,这里使用 Github pages 服务演示,原理都是一样的。

进入到刚建的仓库,按照如下步骤配置 pages服务。

github-pages-step

这里告诉了 Github 要从哪个分支,哪个目录部署 pages 服务。如果你使用的是 Gitee Pages,原理也是一样的。pages 服务会去找 index.html 作为站点的入口文件。

等待片刻,就可以使用 https://你的github账号名.github.io 来访问你的博客了。

添加自己的博客

以上部署好之后,可以开始编写自己的博客了。只需要将编写好的 markdown 文件放入 blog/source/_posts 即可。由于 hexo 默认的资源路径是 source,因此图片也应该放在该文件夹下。

博客添加完成后,需要重新编译生成 html 文件

1
hexo generate

编译完成后,走上面的提交操作,把 html 文件推送到远程仓库。

更换主题

hexo 提供了大量的第三方主题,可以使用主题来美化博客。这里使用 fluid 主题举例,主题的官方文档点击这里

使用主题很简单,只需要按照它官方文档的要求来即可。

例如 fluid 的官方文档说明如下

fluid

将主题解压到 blog/themes 后,重命名为 fluid,然后修改 blog/_config.yml 文件,把 theme 字段替换为 fluid,语言也可以设置成中文。

主题设置好之后,重新编译,提交,推送到远程仓库即可。

若遇到主题样式不生效,可以先执行 hexo clean ,之后再执行 hexo generate 重新编译即可。

若一切妥当,你的主题应该与我的博客基本一致。

尾巴

blog 文件夹下的文件,并没有一一细说其作用,日常只需要关心 public source _config.yml 几个文件即可。

_config.yml 是整个博客的配置文件,有关的参数可以参考官方文档,有详细的说明。

同样主题的细节配置,比如字体样式,大小,首页图片等等,都是以主题的官方文档为准。

最后,期待你能根据我的教程,搭建满意的博客。


Hexo 博客搭建
http://wszzf.top/2022/12/19/Hexo博客搭建/
作者
Greek
发布于
2022年12月19日
许可协议