兴风作浪

life surprises

0%

使用Hexo搭建个人博客并部署到github.io

发表于 更新于 分类于 阅读次数：
本篇介绍如何使用Hexo在本地编辑文章并发布到个人免费GitHub域名中。Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

本地安装配置Hexo

什么是Hexo

  • Hexo是一个博客框架，使用Markdown来解析渲染文章
  • 根据官方文档的说法，Hexo可以在几秒内生成静态网页
  • Github也是只支持静态网页的部署，并且GitHub免费提供域名，所以二者结合起来不仅零成本，就省去自己租虚拟机再配配配的过程了

如何使用Hexo

简单概括就是这几个步骤：

  1. 安装Hexo在本地
  2. 使用Markdown写文章（这里可以选一个自己喜欢的编辑器）
  3. 生成并部署到Github
  4. 访问博客域名查看

准备工作

关于不同设备同步

先啰嗦几句，首先需要在本地找个地方存储Hexo的文件，那这就涉及到一个问题：我在公司写到一半的博客想回家继续写怎么办？

我个人使用OneDrive来同步，在OneDrive上存Hexo的文件，回家自动同步，当然你可以选择使用git仓库或者其他网盘类工具来实现，注意这里同步的是Hexo框架的文件，不是发布到github上的文件，这是两个玩意儿~

开始吧

1. 安装Hexo

Git Bash中进入到你创建的博客文件夹执行命令：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$ npm install -g hexo-cli

$ hexo -v
hexo-cli: 1.1.0
os: Windows_NT 10.0.17134 win32 x64
http_parser: 2.8.0
node: 10.15.0
v8: 6.8.275.32-node.45
uv: 1.23.2
zlib: 1.2.11
ares: 1.15.0
modules: 64
nghttp2: 1.34.0
napi: 3
openssl: 1.1.0j
icu: 62.1
unicode: 11.0
cldr: 33.1
tz: 2018e

2. 初始化一个博客项目

Git Bash中进入到你创建的博客文件夹执行命令：

1
$ hexo init iceman1993.github.io

执行完以后可以看到出现了一个文件夹：offline1993.github.io，里面包含以下内容：

Git Bash中进入这个目录，执行命令：

1
2
3
$ hexo server
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

在本地打开浏览器访问http://localhost:4000/，看到以下界面说明项目初始化成功：

3. 在GitHub新建仓库

github.io域名打开的时候要求在github仓库中有一个对应的名为”{username}.github.io”的仓库，这样在访问域名”{username}.github.io”的时候会自动加载仓库中的内容，比如我创建的仓库名是：offline1993.github.io

4. 修改Hexo配置文件

修改名为_config.yml的配置文件，暂时先列这么多，修改其他配置可以参考官方文档：

1
2
3
4
5
6
7
8
# URL
url: http://offline1993.github.io # 要访问的博客域名，这里使用github.io的域名

# Deployment
deploy:
  type: git # 部署方式为git
  repo: https://github.com/offline1993/offline1993.github.io # 要部署的github仓库地址
  branch: master # 要部署的仓库分支

5. 安装主题

  • 主题可以在这找到：https://hexo.io/themes/

  • 以最流行的主题NexT为例，Git Bash进入offline1993.github.io的上级目录，运行下方命令，主题就被下载到了themes/next目录中：

    1
    $ git clone https://github.com/theme-next/hexo-theme-next themes/next

  • 下载好了需要改一下offline1993.github.io目录中的_config.yml文件：

    1
    2
    # Extensions
    theme: next # 这里改成下载的主题名就可以了

  • 有的主题可能需要渲染工具，比如hexo-renderer-jade，不然打开网页会报错，运行下方命令安装就可以了：

    1
    $ npm install hexo-renderer-jade --save

6. 写作

Git Bash运行下方命令新建一篇文章：

1
2
$ hexo new "My First Blog"
INFO  Created: D:\OneDrive\Hexo\iceman1993.github.io\source\_posts\My-First-Blog.md

可以看到新建的.md文件的目录，使用markdown编辑器编辑保存就可以了

部署到github.io

生成并部署到gitHub.io

准备工作在前面已经讲到了：

  • [在GitHub新建仓库](#3. 在GitHub新建仓库)
  • [修改Hexo配置文件](#4. 修改Hexo配置文件)

除此之外还需要装一个deployer，执行命令：

1
$ npm install hexo-deployer-git --save

在写完文章后执行下方命令就可以发布到线上了：

1
2
3
$ hexo clean
$ hexo generate
$ hexo deploy

或者后两个命令简写成：

1
$ hexo g -d

访问

打开浏览器输入地址就可以了，但是部署完得等个几分钟才能访问：http://offline1993.github.io