如何在Ubuntu 14.04上使用Hexo创建博客

介绍

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

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

准备

要学习本教程，您需要：

一个带有sudo权限的非root用户的Ubuntu 14.04 腾讯云CVM。（你需要一台已经设置好可以使用sudo命令的非root账号的Ubuntu服务器，并且已开启防火墙。没有服务器的同学可以在这里购买，不过我个人更推荐您使用免费的腾讯云开发者实验室进行试验，学会安装后再购买服务器。）
把Git安装在您的服务器上
把Node.js安装在您的服务器上
把Nginx安装在您的服务器上
GitHub上的一个帐户，它是一个Git存储库主机。

第1步 - 安装和初始化Hexo

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

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

代码语言：javascript复制

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

几个软件包和组件组成了Hexo博客框架。在这里，我们将使用npmNode.js包管理器下载两个最基本的。

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

代码语言：javascript复制

npm install hexo-cli -g

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

代码语言：javascript复制

npm install hexo-server -g

还有更多的包可用; 这些只是让您的Hexo博客启动并运行所需的基本要素。您可以在npm搜索中浏览更多可用作Hexo框架一部分的软件包。

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

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

代码语言：javascript复制

hexo init ~/hexo_blog

在一两秒内你会得到一些输出：

代码语言：javascript复制

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!

. . .

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

代码语言：javascript复制

cd ~/hexo_blog

然后运行上述安装命令。

代码语言：javascript复制

npm install

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

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

我们来看看Hexo目录中的基本配置文件。

代码语言：javascript复制

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。

代码语言：javascript复制

nano _config.yml

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

代码语言：javascript复制

. . .

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

. . .

前四行是您博客的名称，合适的字幕，说明和作者姓名。您可以选择任何您喜欢的选项。请注意，并非所有Hexo主题都显示此数据，因此它主要用作相关的站点元数据。

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

以下是一些示例值：

代码语言：javascript复制

. . .

#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选项。因为我们目前没有服务器的域名，所以我们可以输入IP地址来代替url:此处的设置。

代码语言：javascript复制

. . .

# 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:

. . .

我们想要改变的最后一个选项是default_layout:在写作部分进一步向下。这会将新帖子创建为草稿，因此必须先将其发布，然后才能在博客网站上显示。

将它设置为draft现在这个样子，我们做了如下：

代码语言：javascript复制

. . .

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

. . .

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

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

创建帖子（或草稿，如我们之前配置的）的过程首先发出以下命令，其中first-post是您要发布的帖子的名称。

代码语言：javascript复制

hexo new first-post

您应该看到以下输出：

代码语言：javascript复制

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

打开新帖子进行编辑。

代码语言：javascript复制

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

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

使用文件中first-post.md的以下示例选项替换默认内容以启动帖子。如果您愿意，可以自定义它们。

代码语言：javascript复制

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文件夹中的任何帖子。

接下来，发布信息，因此它会被访问者访问。

代码语言：javascript复制

hexo publish first-post

这导致：

代码语言：javascript复制

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

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

第4步 - 运行测试服务器

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

代码语言：javascript复制

hexo server

可以强制测试服务器在_drafts文件夹中呈现帖子。要执行此操作，请在发出最后一个命令时包含该-d选项。

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

按下CTRL C终端退出测试服务器。

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

第5步 - 设置Git部署

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

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

通过遵循其存储库创建步骤，在GitHub上创建名为hexo_static的新存储库。确保选择“公共”选项并勾选“ 使用自述文件初始化此存储库”复选框。

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

代码语言：javascript复制

nano _config.yml

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

代码语言：javascript复制

. . .

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

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

代码语言：javascript复制

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

保存并退出该文件。

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

使用npm安装它。

代码语言：javascript复制

npm install hexo-deployer-git --save

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

代码语言：javascript复制

hexo generate && hexo deploy

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

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

代码语言：javascript复制

To 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用于托管。

代码语言：javascript复制

sudo mkdir -p /var/www/hexo

然后为您当前的Ubuntu用户提供这些Web服务器系统目录的所有权。

代码语言：javascript复制

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

根据所有权更新权限。

代码语言：javascript复制

sudo chmod -R 755 /var/www/hexo

打开defaultNginx服务器块进行编辑。

代码语言：javascript复制

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

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

代码语言：javascript复制

. . .

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

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

. . .

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

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

代码语言：javascript复制

sudo service nginx restart

第7步 - 创建Git Hooks

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

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

代码语言：javascript复制

git init --bare ~/hexo_bare

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

代码语言：javascript复制

nano ~/hexo_bare/hooks/post-receive

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

代码语言：javascript复制

#!/bin/bash

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

完成后保存并退出文件。

使此post-receive文件可执行。

代码语言：javascript复制

chmod  x ~/hexo_bare/hooks/post-receive

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

代码语言：javascript复制

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

进入克隆的存储库。

代码语言：javascript复制

cd ~/hexo_static

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

代码语言：javascript复制

git remote add live ~/hexo_bare

第8步 - 创建部署脚本

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

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

代码语言：javascript复制

cd ~/hexo_blog 
nano hexo_git_deploy.sh

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

代码语言：javascript复制

#!/bin/bash

hexo clean
hexo generate 
hexo deploy

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

保存并退出该文件。

该脚本包含三个hexo命令：

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

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

一旦填写完毕，请务必保存并退出该文件。

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

代码语言：javascript复制

chmod  x hexo_git_deploy.sh

第9步 - 运行部署脚本

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

代码语言：javascript复制

./hexo_git_deploy.sh

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

代码语言：javascript复制

ls /var/www/hexo

代码语言：javascript复制

2015  2016  archives  categories  css  fancybox  index.html  js  tags

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

用您最喜欢的浏览器访问http://your_server_ip/，直接查看您的博客（不使用测试服务器）。

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

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

本节是可选的，提供了Hexo文件系统其余部分的一些背景知识。这些文件中没有一个需要更改或更改本教程，但如果您希望将来使用它们，最好知道每个文件的一般用途。

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

代码语言：javascript复制

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

node_modules

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

代码语言：javascript复制

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

其中一些不熟悉的模块作为核心软件包的一部分捆绑在一起。通常没有必要在这里更改或删除文件。