使用Hexo搭建个人博客

背景

一直想搭建一个自己的博客，用来记录和分享一些日常的生活和学到的新东西。
之前有想过完全自己写前后端（vue + python），结果自己的前端界面写的太丑了，在网上又找不到合适的模版，无奈只能放弃这个想法。
之后又尝试了Halo，搭建起来用了几天后发现也不太理想，特别是文章编辑的时候，如果要使用图片会特别麻烦，而且要支持视频的话需要自己扩展，而且数据一类的东西也不方便迁移，于是也放弃了。
一直到前两天，难得一个没有回国的长假，于是决定再次尝试一下搭建一个自己的博客。
这次在网上查了很多资料，最终决定用Hexo来试一下。

Hexo简介

太多的东西也不粘贴了，直接引用官方文档中的概括吧：

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

架构

先介绍一下这次搭建的整体架构，方便大家对之后内容的理解。

服务器

• Hexo生成的静态页面部署在了GitHub Pages上
• 文件服务（图片、音乐等）部署在了自己的服务器上，采用了Minio进行管理
• 评论内容也放在了GitHub上

更新/维护

• 先在本地进行编辑
• 本地使用Hexo生成静态页面
• 通过Hexo上传到GitHub Pages

环境搭建

接下来我们开始环境搭建，从这里开始，我会一步步带领大家搭建起一个属于自己的博客。

GitHub Pages

首先我们需要有一个GitHub的账号。
※此处忽略申请流程

然后需要创建一个名为username.github.io的存储库。※此处的username为你自己GitHub的username

安装Git

Windows

下载并安装git

Mac

• 使用Homebrew安装git
• 使用MacPorts安装git
• 直接下载git

Linux (Ubuntu, Debian)

可使用以下命令安装：

$ sudo apt-get install git-core

Linux (Fedora, Red Hat, CentOS)

可以使用以下命令安装：

$ sudo yum install git-core

安装Node.js

Node.js 为大多数平台提供了官方的 安装程序 。

其它的安装方法：

• Windows：通过 nvs（推荐）或者 nvm 安装。
• Mac：使用 Homebrew 或 MacPorts 安装。
• Linux（DEB/RPM-based）：从 NodeSource 安装。
• 其它：使用相应的软件包管理器进行安装。 可以参考由 Node.js 提供的 指导。

安装Hexo

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

$ npm install -g hexo-cli

建站

到此，我们已经把Hexo最基本的环境配置完成了，接下来我们就要开始创建第一篇博客以及将我们的博客部署到GitHub Pages上了。

初始化Hexo

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

$ hexo init <folder>
$ cd <folder>
$ npm install

※folder：你想要创建的项目名称

初始化后，您的项目文件夹将如下所示：

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

※配置文件介绍

_config.yml配置

在_config.yml文件中找到并配置下列属性

deploy:
  type: git
  repo: # 之前GitHub Pages中创建的仓库https://xxx/xxx/xxx.github.io
  branch: main

本地启动

接下来就是让我们的Hexo在本地启动起来。

$ hexo s

启动以后，通过 http://localhost:4000 就可以直接访问本地的网页了。

部署

本地启动成功以后，我们就可以将我们的Hexo部署到GitHub Pages上去了。

$ hexo clean
$ hexo g
$ hexo d

部署成功以后，你就可以通过下面的网址访问你自己的博客了。

https://你的用户名.github.io

🎉 上线成功

日常使用流程

每次写博客：

$ hexo new "新文章"

写完发布：

hexo g
hexo d