使用 Hexo 搭建静态博客

目录

• hexo 简介
• 一键部署 hexo 站点到 github pages
  • github 仓库准备
• • 配置 nginx 反向代理

hexo 简介

什么是 hexo？

hexo 是一个快速、简洁且高效的博客框架。hexo 使用 markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

更多的信息可以查看 hexo 官网。

使用 hexo，我们可以用 markdown 来编写博客文章，然后通过将文章解析成静态网页，部署到 github pages、自己的云服务等等地方。

hexo 安装

安装 hexo 之前，需要有 git 和 nodejs。大家自行在网上搜索解决。

安装完 nodejs，通过以下命令，就可以安装 hexo:

npm install -g hexo-cli

hexo 建站

以下命令会初始化一个 my-blog 的 hexo 站点目录。

hexo init my-blog

cd my-blog

npm install

目录结构如下：

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

_config.yml：用于配置站点的信息

source：资源文件夹是存放用户资源的地方。除 _posts 文件夹之外，开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。markdown 和 html 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。

themes： 文件夹。hexo 会根据主题来生成静态页面。

hexo 配置

hexo 的配置，主要通过 _config.yml 文件实现。包括网站、网址、目录、文章、分类&标签等等。此外还包含一些扩展，如自定义主题等。

hexo 自定义主题

创建 hexo 主题非常容易，您只要在 themes 文件夹内，新增一个任意名称的文件夹，并修改 _config.yml 内的 theme 设定，即可切换主题。一个主题可能会有以下的结构：

├── _config.yml
├── languages
├── layout
├── scripts
└── source

_config.yml 这是主题的配置文件。

hexo 写作

可以通过以下命令来创建新文章：

hexo new [layout] <title>

或者直接在 source/_posts 目录下新建文件。

hexo 服务器

hexo 3.0 把服务器独立成了个别模块，您必须先安装 才能使用。

npm install hexo-server --save

服务器安装完成后，通过以下命令启动服务器：

hexo server

浏览器中可以通过 来对站点进行预览。

hexo 生成与发布

生成静态站点：

hexo generate

以上命令会生成静态的站点页面，内容位于 public 目录下。

通过以下命令来实现站点的部署：

hexo deploy

一键部署 hexo 站点到 github pages

github 仓库准备

使用 你的github用户名.github.io 创建一个仓库，进入设置 -> pages:

设置好要发布为 pages 服务的分支，目录等。

安装 hexo-deployer-git 插件

npm install hexo-deployer-git --save

修改 _config.yml 配置

deploy:
  type: git
  repo: <repository url> #https://bitbucket.org/johnsmith/johnsmith.bitbucket.io
  branch: [branch]
  message: [message]

repo：设置为准备好的仓库地址

branch：设置为发布为 pages 的分支

部署站点

hexo deploy -g

以上命令会自动生成静态站点，并部署到 github 仓库。

在通过 就可以访问你的 hexo 站点了。

一键部署到自己的云服务器

众所周知，github 目前在国内访问非常的慢，替代的方式是可以发布到 gitee、coding 等的 pages 服务上。如果你有自己的云服务器，那博客站点就可以部署到云服务器上，还可以*配置域名等等。

在上一篇文章中讲到，我在云服务器上使用 docker 方式安装了 nginx，对 web 服务进行反向代理。同时服务器上还安装了 gogs 提供私有的 git 服务。基于以上基础设施，可以很方便将 hexo 静态站点发布到自己的云服务器。

还是再画一张部署架构图：

配置 nginx 反向代理

在 nginx 配置目录下新增 blog.uprogrammer.cn.conf 文件，内容如下：

server {
    listen 80;
    # 静态博客站点的域名
    server_name blog.uprogrammer.cn;

    # add index.php to the list if you are using php

    location / {
        index index.html;
        # 由于是静态站点，直接通过 alias 配置到资源文件夹
        alias /path/to/blog.uprogrammer.cn/;
    }
}

重启 nginx 使配置生效。

docker restart nginx

新建 git 仓库，并配置 git hooks

在 gogs 中新建一个仓库，仓库设置 -> 管理 git 钩子 -> 编辑 post-receive

post-receive 钩子会在收到 git 仓库收到推送内容之后触发。这里将更新以后的站点内容复制到 nginx 代理的目录下。

大家注意看这里的 git clone 之后的仓库地址是一个文件路径，多数大家看到的是 http 或者 git 协议的地址。想想为什么？

发布服务到 git 仓库

参见上一节，安装 hexo-deployer-git 插件，准备好 git 仓库，修改 _config.yml 配置。

通过执行 hexo deploy -g 将生成的静态站点内容上传到 git 仓库中。

通过以上的一番操作，自己编写的文章就可以一键发布到云服务器上，并通过域名进行访问啦。