如何在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所需的一切。

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

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

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

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

npm install hexo-cli -g

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

npm install hexo-server -g 

还有更多的包可用; 这些只是让您的Hexo博客启动并运行所需的基本要素。您可以在npm搜索中浏览更多可用作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的部分:

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

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

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

以下是一些示例值:

. . .
​
#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:此处的设置。

. . .
​
# 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现在这个样子,我们做了如下:

. . .
​
# 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

您应该看到以下输出:

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

打开新帖子进行编辑。

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

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

使用文件中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 

这导致:

INFO  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存储静态文件,使用钩子转发它们,然后使用Nginx来托管它们。但是,通过额外的框架包提供对Heroku,Git,Rsync,OpenShift,FTPSync等的支持。

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

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

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

nano _config.yml 

在文件的底部,有一个标记为Deployment的部分:

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

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

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插入:

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

sudo mkdir -p /var/www/hexo

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

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

根据所有权更新权限。

sudo chmod -R 755 /var/www/hexo

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

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

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

. . .

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目录(具有配置设置,历史记录等)。

#!/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部署存储库克隆到我们的服务器。确保使用您自己的GitHub帐户用户名替换下一个命令的username

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

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

#!/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服务器托管目录。

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

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

chmod +x hexo_git_deploy.sh

第9步 - 运行部署脚本

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

./hexo_git_deploy.sh

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

ls /var/www/hexo
2015  2016  archives  categories  css  fancybox  index.html  js  tags

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

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

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

第10步 - 检查Hexo的文件系统(可选)

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

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

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

node_modules

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

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

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

的package.json

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

如果您需要手动更新,降级或删除软件包,可以通过更改此处的值来完成。通常,如果Hexo内部发生冲突,您只需要执行此操作,这种情况相对不常见。

支架

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

您必须首先创建模板文件并将其放在此处以使用它们。此功能是可选的,只有在您希望将来的Hexo帖子重复布局时才需要。

资源

您发布并希望公开显示的帖子会保留在其_posts中,一旦生成,该_drafts文件夹以及任何其他用户创建的页面也会在此处生效。

您的博客的绝大部分Markdown内容都由Hexo放置在其中一个子文件夹中。

主题

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

结论

Hexo比本指南中介绍的要多得多,但这对于构建新的博客网站来说是一个很好的开端。如果您想了解更多信息,Hexo文档非常简洁。考虑安装Hexo可用的一个自定义主题是开发博客的下一步。

更多Ubuntu教程请前往腾讯云+社区学习更多知识。

参考文献:《 How to Create a Blog with Hexo On Ubuntu 14.04》

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏菜鸟计划

angularjs MVC、模块化、依赖注入详解

一、MVC ? <!doctype html> <html ng-app> <head> <meta charset="utf-8"> ...

3696
来自专栏流柯技术学院

android自动化之monkeyrunner

运行monkeyrunner之前必须先运行相应的模拟器或连上设备,不然monkeyrunner无法连接设备。

1472
来自专栏运维

Nginx1.10.2稳定版本tcp四层负载安装配置过程略解

nginx1.10.2(2016.10.18)是最新稳定版,适合线上运行,最新开发版为1.11.8(2016.12.27)

1381
来自专栏JAVA同学会

MAVEN简介之——settings.xml

Maven的settings.xml配置了Maven执行的方式,像pom.xml一样,但是它是一个通用的配置,

3430
来自专栏技术博文

linux下生成key

linux下生成key 使用public/private key让putty(ssh)自动登录(以及linux上使用密钥做ssh自动登陆)  方法一:使用put...

4007
来自专栏Java技术分享

PDF.js专题

前言     英文是github上的原文,找不到中文资料,我根据自己理解翻译的,有些词意思拿不准就直接把单词留在原地了,看这个文档应该可以凑合着用了。 PDF....

1.8K10
来自专栏Script Boy (CN-SIMO)

Qt入门之基础篇 ( 二 ) :Qt项目建立、编译、运行和发布过程解析

转载请注明出处:CN_Simo。 题解:   本篇内容主讲Qt应用从创建到发布的整个过程,旨在帮助读者能够快速走进Qt的世界。 本来计划是讲解Qt源码静态编译...

5011
来自专栏散尽浮华

进程管理利器-supervisor部署记录

一、简单介绍 supervisor是用来管理进程的一个工具,止于为什么要用supervisor,是因为相对于linux传统的进程管理方式来说,它有很多的优势: ...

3978
来自专栏linux、Python学习

Linux基础教程之linux文件权限深度解读

基本命令—— 1.cut : cat /etc/passwd | cut -d’:’ -f7| uniq -c| sort -nr

870
来自专栏黑泽君的专栏

c语言基础学习02_windows系统下的cmd命令

============================================================================= 注意...

3122

扫码关注云+社区

领取腾讯云代金券