如何在Ubuntu14.04上使用Hexo创建博客

介绍

Hexo 是一个基于 Node.js 构建的静态博客框架。使用 Hexo，您可以以博客文章的形式发布 Markdown 文档。博客文章和内容被处理并转换为 HTML/CSS，它来源于默认或自定义模板主题文件（很像其他静态博客生成器，如 Jekyll 和 Ghost）。 Hexo 中的所有软件都是模块化的，因此您可以根据需要安装和设置。

本教程将使用 GitHub 和 Nginx 支持的部署设置 Hexo。

先决条件

要遵循本教程，您将需要：

一个带有 sudo 非 root 用户的 Ubuntu 14.04 Droplet，您可以按照这个初始服务器设置指南进行设置。
Git 已安装在您的服务器上，您可以按照本 Git 教程的“如何使用 Apt 安装 Git”和“如何设置 Git”部分进行操作。
Node.js 安装在您的服务器上，您可以按照本 Node.js 教程的“如何使用 NVM 安装”部分进行设置。
您的服务器上安装了 Nginx，您可以按照 this Nginx tutorial 进行设置。
GitHub 上的帐户，它是 Git 存储库主机。

第 1 步 — 安装和初始化 Hexo

这个初始部分包含在服务器上启动和运行 Hexo 所需的一切。

首先，确保系统包是最新的。

sudo apt-get update && sudo apt-get upgrade

几个软件包和组件组成了 Hexo 博客框架。在这里，我们将使用 Node.js 包管理器 npm 提取两个最重要的。

第一个，hexo-cli，是最重要的，它提供了核心的 Hexo 命令。

npm install hexo-cli -g

第二个，hexo-server，是内置服务器，可用于在部署之前预览和测试您的博客。

npm install hexo-server -g

还有更多可用的软件包；这些只是启动和运行 Hexo 博客所需的基本要素。您可以在 npm search 上浏览更多作为 Hexo 框架的一部分可用的包。

接下来，我们需要为您的新博客设置基本文件。幸运的是，Hexo 使用一个命令完成了所有基础工作。您需要做的就是提供您希望博客配置文件驻留的路径或文件夹。

一个方便的选项是用户的主目录。

hexo init ~/hexo_blog

在一两秒钟内，您将获得一些输出：

Output. . .

INFO  Copying data to ~/hexo_blog
INFO  You are almost done! Don't forget to run 'npm install' before you start blogging with Hexo!

. . .

接下来，移动到包含配置文件的目录。

cd ~/hexo_blog

然后运行上述安装命令。

npm install

您可以忽略来自 npm 的任何可选依赖性警告。经过几秒钟的处理时间，我们将拥有我们的基本配置文件。

第 2 步 — 设置 Hexo 的主配置文件

让我们看一下 Hexo 目录中的基本配置文件。

ls -l

Output-rw-rw-r--   1 sammy sammy 1483 Jan 11 12:30 _config.yml
drwxrwxr-x 191 sammy sammy 4096 Jan 11 12:31 node_modules
-rw-rw-r--   1 sammy sammy  442 Jan 11 12:30 package.json
drwxrwxr-x   2 sammy sammy 4096 Jan 11 12:30 scaffolds
drwxrwxr-x   3 sammy sammy 4096 Jan 11 12:30 source
drwxrwxr-x   3 sammy sammy 4096 Jan 11 12:30 themes

在所有存在的文件中，_config.yml 文件可以说是最重要的。所有核心设置都存储在这里，它是博客的核心。如果您将来需要调整某些内容，它可能在此文件中。

接下来，我们将通过 _config.yml 逐个设置一些基本自定义。使用 nano 或您喜欢的文本编辑器打开 _config.yml。

nano _config.yml

在文件的顶部，您应该会看到标有 Site 的部分：

原文~/hexo_blog/_config.yml

. . .

# Site
title: Hexo
subtitle:
description:
author: John Doe
language:
timezone:

. . .

前四行是您的博客名称、合适的副标题、描述和作者姓名。您可以为这些选项选择您喜欢的任何内容。请注意，并非所有 Hexo 主题都显示此数据，因此它主要用作相关的站点元数据。

接下来的两个选项是语言和时区。语言选项仅采用 2 字母 ISO-639-1 代码。时区默认设置为您服务器的时区，并使用 “tz 数据库” 格式。如果您决定要更改其中任何一个，请确保它们采用这些格式。

以下是一些示例值：

示例 ~/hexo_blog/_config.yml

. . .

#Site
title: DigitalOcean's Hexo Blog  
subtitle: Simple Cloud Hosting, Built for Developers.
description: Deploy an SSD cloud server in 55 seconds.
author: Sammy Shark 
language: en 
timezone: America/New_York

. . .

下一部分是 URL 部分。在这里，我们要更改 URL 选项。因为我们的服务器目前没有域名，所以我们可以在此处为 url: 设置输入 IP 地址。

~/hexo_blog/_config.yml

. . .

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://your_server_ip
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

. . .

我们要更改的最后一个选项是 Writing 部分中的 default_layout: 稍微向下一点。这会将新帖子创建为草稿，因此必须先发布它们，然后才能在博客网站上看到它们。

现在将其设置为 draft，如下所示：

~/hexo_blog/_config.yml

. . .

# Writing
new_post_name: :title.md # File name of new posts
default_layout: draft
titlecase: false # Transform title into titlecase

. . .

暂时保存并退出文件。在本教程结束时，我们将简要返回此文件以了解部署阶段。

第 3 步 - 创建和发布新帖子

创建帖子（或草稿，就像我们之前配置的那样）的过程从发出以下命令开始，其中 first-post 是您要创建的帖子的名称。

hexo new first-post

您应该看到以下输出：

OutputINFO  Created: ~/hexo_blog/source/_drafts/first-post.md

打开新帖子进行编辑。

nano ~/hexo_blog/source/_drafts/first-post.md

每个帖子都必须设置其 front-matter。 Front-matter 是 JSON 或 YAML 的一小段，用于配置诸如帖子标题、发布日期、标签等设置。 front-matter 的结尾由第一个 --- 或 ;;; 标记指定。在前面的事情之后，您可以使用 Markdown 语法编写您的博客文章。

将 first-post.md 中的默认内容替换为文件中的以下示例选项以开始发布。如果您愿意，您可以自定义它们。

示例 ~/hexo_blog/source/_drafts/first-post.md

title: DigitalOcean's First Post
tags:
  - Test
  - Blog
categories:
  - Hexo
comments: true
date: 2015-12-31 00:00:00
---

## Markdown goes here.

**This is our first post!**

保存并退出文件。

我们刚刚创建的 Markdown 文件将保存在 ~/hexo_blog/source/_drafts 中，直到我们发布它。 _drafts 文件夹中的任何帖子对网站上的访问者都是不可见的。

接下来，发布帖子，使其将可供访问者访问。

hexo publish first-post

这导致：

OutputINFO  Published: ~/hexo_blog/source/_posts/first-post.md

一旦我们开始托管博客，该帖子现在将可见。

第 4 步 — 运行测试服务器

现在前面的配置文件已经完成，我们准备好一个示例帖子。接下来，我们将启动测试服务器。

hexo server

可以强制测试服务器在 _drafts 文件夹中呈现帖子。为此，在发出最后一个命令时包括 -d 选项。

现在我们已经运行了测试服务器，您可以通过在您喜欢的浏览器中访问 http://your_server_ip:4000/ 来查看您的博客。您将看到 Hexo 预定义的“Hello World”测试帖，以及我们刚刚创建的测试帖。

在终端中按 CTRL+C 退出测试服务器。

测试服务器最适合用于预览博客的更改和添加。一旦您对它的外观感到满意，就可以将其部署到网络上。

第 5 步 — 设置 Git 部署

到目前为止，有许多不同的方法可以部署我们使用 Hexo 所做的工作。本教程中的方法是使用 Git 存储静态文件，使用 hooks 转发它们，然后使用 Nginx 托管它们。但是，通过额外的框架包提供了对 Heroku、Git、Rsync、OpenShift、FTPSync 等的支持。

要继续，您需要一个 Git 存储库来存储 Hexo 生成的静态 HTML 文件。为了简单起见，我们将使用 GitHub 提供的公共 Git 存储库。

按照他们的存储库创建步骤在 GitHub 上创建一个名为 hexo_static 的新存储库。确保选择“Public”选项并勾选 Initialize this repository with a README 复选框。

创建存储库后，打开主 Hexo 配置文件进行编辑。

nano _config.yml

在文件的底部，有一个标记为 Deployment 的部分：

原文~/hexo_blog/_config.yml

. . .

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type:

填写 deploy: 的选项，如下所示。请注意，repo 行应包含您刚刚创建的 Git 存储库的 URL，因此请确保将 your_github_username 替换为您自己的 GitHub 帐户用户名。

~/hexo_blog/_config.yml

deploy:
  type: git
  repo: https://github.com/your_github_username/hexo_static.git
  branch: master

保存并退出文件。

因为我们选择使用 Git 进行部署，所以我们需要将我们的静态标记发送到 Git 存储库的 Hexo 包。

使用 npm 进行安装。

npm install hexo-deployer-git --save

您现在可以测试部署到 hexo_static 存储库，并通过以下方式为其提供第一个 Hexo 自动提交：

hexo generate && hexo deploy

出现提示时输入您的 GitHub 身份验证详细信息。

这是使用这些命令后成功输出的样子（或类似）。减去文件生成和 Git 插入：

OutputTo https://github.com/username/hexo_static.git.
 * [new branch]      master -> master
Branch master set up to track remote branch master from https://github.com/username/hexo_static.git.
INFO  Deploy done: git

第 6 步 — 设置 Nginx

我们将使用基本的 Nginx Web 服务器设置来服务 Hexo 博客，因为 Nginx 非常适合静态内容，而我们的博客将只包含静态文件。还有其他可行的选项也可以正常工作，例如 GitHub 页面或 Apache 等 Web 服务器，但这种选择特别确保了对托管的一些效率和个人控制。

首先，创建系统目录，我们将告诉 Nginx 用于托管。

sudo mkdir -p /var/www/hexo

然后将这些 Web 服务器系统目录的所有权授予您当前的 Ubuntu 用户。

sudo chown -R $USER:$USER /var/www/hexo

根据所有权更新权限。

sudo chmod -R 755 /var/www/hexo

打开 default Nginx 服务器块进行编辑。

sudo nano /etc/nginx/sites-available/default

忽略文件中被注释掉的区域和行，更改配置代码的活动部分，使 root 指令指向 /var/www/hexo 目录。

/etc/nginx/sites-available/default

. . .

server {
    listen 80 default_server;
    listen [::]:80 default_server ipv6only=on;

    root /var/www/hexo;
    index index.html index.htm;

. . .

保存并退出文件。如果将来您为此服务器设置了域名，请返回此文件并将同一块中的 server_name 条目替换为您的新域名。

最后，重启 Nginx 服务以使更改生效。

sudo service nginx restart

第 7 步——创建 Git Hooks

在这一步中，我们将 hexo_static 存储库链接到另一个 Git 存储库，因此我们可以将静态 HTML 文件发送到 Web 服务器目录（触发时）。

首先，初始化一个新的空 Git 存储库（不在 GitHub 上）。此存储库的唯一目的是将我们的 hexo_static 存储库的内容转发到 Web 服务器目录。

git init --bare ~/hexo_bare

在 Git 生成的 hooks 目录中新建一个钩子文件：

nano ~/hexo_bare/hooks/post-receive

将以下两行代码添加到文件中。这指定了 Git 工作树（包含源代码）和 Git 目录（包含配置设置、历史记录等）。

~/hexo_bare/hooks/post-receive

#!/bin/bash

git --work-tree=/var/www/hexo --git-dir=/home/$USER/hexo_bare checkout -f

完成后保存并退出文件。

使这个 post-receive 文件可执行。

chmod +x ~/hexo_bare/hooks/post-receive

我们现在必须将我们在步骤 5 中创建的 hexo_static 部署存储库克隆到我们的服务器。确保将下一个命令中的 username 替换为您自己的 GitHub 帐户用户名。

git clone https://github.com/username/hexo_static.git ~/hexo_static

移入克隆的存储库。

cd ~/hexo_static

最后，将我们之前的裸存储库添加为名为 live 的 Git 远程。

git remote add live ~/hexo_bare

第 8 步 — 创建部署脚本

可以使用一个简短的 shell 脚本来启动和触发我们在此处设置的整个部署过程。这意味着我们不必单独运行多个 Hexo 命令或使用多个命令触发 Git 挂钩。

回到我们原来的 Hexo 博客目录，并为部署脚本创建一个文件。

cd ~/hexo_blog 
nano hexo_git_deploy.sh

将以下代码粘贴到文件中：

hexo_blog/hexo_git_deploy.sh

#!/bin/bash

hexo clean
hexo generate 
hexo deploy

( cd ~/hexo_static ; git pull ; git push live master )

保存并退出文件。

该脚本包含三个 hexo 命令：

clean 删除公用文件夹中任何以前生成的静态文件。
generate 在 public 文件夹中从我们的 markdown 创建静态 HTML 文件。
deploy 将新生成的静态文件作为提交发送到我们之前在 _config.yml 中定义的“实时”Git 存储库。

最后一行 ( cd ~/hexo_static ; git pull ; git push live master ) 触发 Git 挂钩并使用我们的 HTML 静态文件更新 Web 服务器托管目录。

填写完成后，请务必保存并退出文件。

使新的部署脚本可执行以完成此步骤。

chmod +x hexo_git_deploy.sh

第 9 步 — 运行部署脚本

运行我们在上一步中创建的部署脚本来测试整个部署过程。

./hexo_git_deploy.sh

等待命令和处理完成，在此过程中输入任何 GitHub 身份验证详细信息。然后，看一下/var/www/hexo目录下的文件。

ls /var/www/hexo

Output2015  2016  archives  categories  css  fancybox  index.html  js  tags

您的网络服务器目录现在应该填充了博客的网站文件，这意味着通过浏览器访问网络服务器会将您带到博客。

在您喜欢的浏览器中访问 http://your_server_ip/ 以实时查看您的博客（不使用测试服务器）。

要在将来部署新的博客更改，您需要做的就是重新运行 hexo_git_deploy.sh 脚本。请记住在部署之前使用 hexo server 或 hexo server -d 命令测试新帖子的错误。

第 10 步 — 检查 Hexo 的文件系统（可选）

本节是可选的，提供了 Hexo 文件系统其余部分的一些背景知识。对于本教程，这些文件都不需要更改或更改，但是如果您想在将来使用它们，最好了解每个文件的一般用途。

文件和目录的布局如下所示：

Hexo files and directories├── _config.yml
├── node_modules
├── package.json
├── scaffolds
├── source
|   └── _posts
└── themes

节点模块

在此目录中，Hexo 存储您通过 npm 下载的模块，以供您的博客使用。在本教程结束时，将只有我们在步骤 1 中下载的包。

Outputhexo  hexo-generator-archive  hexo-generator-category  hexo-generator-index  hexo-generator-tag  hexo-renderer-ejs  hexo-renderer-marked  hexo-renderer-stylus  hexo-server

其中一些不熟悉的模块作为核心包的一部分捆绑在一起。通常不需要更改或删除此处的文件。

包.json

这个 JSON 文件包含我们的 Hexo 包配置和版本，Hexo 将用于您的博客。

如果您需要手动更新、降级或删除包 '，可以通过更改此处的值来完成。通常，只有在 Hexo 内部出现冲突时才需要这样做，这种情况相对不常见。

脚手架

创建新帖子时，Hexo 可以将它们基于 scaffolds 文件夹中的模板文件。

您必须首先创建模板文件并将它们放在这里才能使用它们。此功能是可选的，仅当您希望为未来的 Hexo 帖子重复布局时才需要。

来源

您发布并希望对公众可见的帖子保存在 _posts 中，一旦生成，_drafts 文件夹以及任何其他用户创建的页面也将保存在这里。

您博客的绝大多数 Markdown 内容都由 Hexo 放置在这些子文件夹之一中。

主题

下载后的自定义主题应保存在此处。大多数主题都有自己的 _config.yml 文件来保存它们的等效配置设置。出于本指南的目的，我们坚持使用默认主题。

结论

Hexo 的内容远不止本指南中介绍的内容，但这是构建新博客网站的良好开端。如果您想了解更多信息，Hexo 的文档非常简洁。研究安装可用于 Hexo 的自定义主题是开发博客的下一步。