使用 Hexo 搭建 github pages

223 阅读3分钟

0. 前言

之前一直想搭建一个自己的blog来着,不过一直没有付诸实践(主要是因为个人感觉这个东西对我来说似乎是没有什么用,网上现成的社区平台都有类似的功能)。但是最近突然改变了主意,因为对个人blog突然产生了兴趣以及好友也想通过个人blog的方式记录自己的文章,于是我这个想法再一次升起,下面就是介绍了我搭建blog的流程以及遇到的一些问题。

✨✨✨

框架选择

使用 github pages + hexo 的方式进行搭建,其中 github pages 是 github 自带的网站搭建工具(GitHub Pages | Websites for you and your projects, hosted directly from your GitHub repository. Just edit, push, and your changes are live.),通过官网文档可以完成通过 github 项目仓库搭建的项目网站;而 hexo 是一款静态站点生成框架(Hexo),通过生成静态网页托管在 github 上,而编写blog内容使用的是 markdown 文本,比较适合专心于blog内容而不是关注网站本身源码的我。

参考

在搭建过程中我主要是参考了以下2篇文章的流程,但是在具体的一些步骤中进行了定制化的操作:

1. 环境搭建

  • 安装 git
  • 注册 github 账号
  • github 创建项目仓库
  • 安装 node.js
  • 安装 hexo
  • 更换主题
  • 发布文章
  • 博客源码备份

1.1 安装 git

安装 git 的方法在上面的 参考 文章中有详细的过程,这里不再重复造轮子(Reinvent the Wheel)

1.2 注册 github 账号

注册 github 账号的方法在上面的 参考 文章中有详细的过程,这里不再重复造轮子(Reinvent the Wheel)

1.3 github 创建项目仓库

github 创建项目仓库的方法在上面的 参考 文章中有详细的过程,这里不再重复造轮子(Reinvent the Wheel)

1.4 安装 node.js

安装 node.js 的方法在上面的 参考 文章中有的过程不太详细,安装默认化的 node.js 安装有时会导致 hexo 等相关插件环境变量不好控制,因此采用下面这篇文章的安装流程:

1.5 安装 hexo

安装 hexo 的方法在上面的 参考 文章中有详细的过程,这里不再重复造轮子(Reinvent the Wheel)

如果在 github pages 页面看见类似下面 hexo 的默认主页,则可以开始进行下一步操作了;

image.png

1.6 更换主题

换一个让自己进入博客就想写作的主题吧!

我选择的是 fluid 主题,主创人员对该主题的描述是:

🌊 一款 Material Design 风格的 Hexo 主题 / An elegant Material-Design theme for Hexo

下面附上该主题的文档、demo 和 github 地址:

image.png

1.7 发布文章

发布文章的方法在上面的 参考 文章中有详细的过程,这里不再重复造轮子(Reinvent the Wheel)

1.8 博客源码备份

博客源码备份的方法在上面的 参考 文章中有详细的过程,但是其中有些步骤无法走通,下面附上我所参考的链接,这里不再重复造轮子(Reinvent the Wheel):

2. 按部就班的操作

按照 fluid 主题文档一步一步搭建自己的blog:

3. 结果展示

个人blog算是将框架完成了,接下来就该慢慢完善~ 🌊 erbanz.github.io

其他