前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >如何在Ubuntu 14.04上使用Hexo创建博客

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

原创
作者头像
木纸鸢
修改2018-09-26 09:55:33
1.2K0
修改2018-09-26 09:55:33
举报

介绍

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 serverhexo 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

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

的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》

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

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

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

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

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 介绍
  • 准备
  • 第1步 - 安装和初始化Hexo
  • 第2步 - 设置Hexo的主配置文件
  • 第3步 - 创建和发布新帖子
  • 第4步 - 运行测试服务器
  • 第5步 - 设置Git部署
  • 第6步 - 设置Nginx
  • 第7步 - 创建Git Hooks
  • 第8步 - 创建部署脚本
  • 第9步 - 运行部署脚本
  • 第10步 - 检查Hexo的文件系统(可选)
    • node_modules
      • 的package.json
        • 支架
          • 资源
            • 主题
            • 结论
            相关产品与服务
            测试服务
            测试服务 WeTest 包括标准兼容测试、专家兼容测试、手游安全测试、远程调试等多款产品,服务于海量腾讯精品游戏,涵盖兼容测试、压力测试、性能测试、安全测试、远程调试等多个方向,立体化安全防护体系,保卫您的信息安全。
            领券
            问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档