版权声明:本文由宋秉金 原创文章,转载请注明出处: 
文章原文链接:https://www.qcloud.com/community/article/241080001487926962

来源:腾云阁 https://www.qcloud.com/community

除了闷头专研技术之外,程序员还需要不断地写作进行技术积累,写博客是其中最重要的方式之一。商业博客平台不少,但是更符合程序员背景的方案,是自己开发一个博客平台或者使用开源的博客平台。

开源的博客平台多如牛毛,而且不乏优秀之作,如 Hexo、Octopress、Jekyll、Wordpress。本系列文章将分享如何利用各种博客引擎在云端搭建属于自己的个人博客。今天是第一篇,介绍如何在 Ubuntu 14.04 上部署 Hexo 博客。

Hexo 是用 Node.js 开发的一个静态站点生成器(Static Site Generator),支持 Markdown 语法写作,有着强大的插件系统,而且性能优异。阅读不少技术社区分享的文章时,看到国内不少同学都有在用这个引擎,看来「市场占有率」不低。

本文将介绍如何在一台 Ubuntu 14.04 的 CVM 云服务器上快速部署 Hexo 博客站点,如何快速发布一篇博文并通过云服务器上的私有 Git 仓库部署到 Web 服务器目录下。

前提条件

如果想跟着本教程顺利完成 Hexo 博客的搭建,需要具备以下条件:

  1. 一台安装了 Ubuntu 14.04 的 CVM 云服务器。一般个人博客的流量都比较低,初期选择 1核 1GB内存类型的服务器即可,而且有不少免费试用的时间。
  2. 在本地电脑上安装 Node.js 和 npm,建议谷歌相应关键词了解具体步骤。

此外,还要在云服务器上安装 Git 和 Nginx 两个必备的软件包。Git 用于版本管理和部署,Nginx 用于静态博客托管。

sudo apt-get update
sudo apt-get install git nginx -y

另外,本文均以 Windows 为例,演示在本地端的操作,Mac 上的操作会更为简单。Windows 上没有 Mac 的 iTerm2 ,我们以 ConEmu + Git Bash 组成的终端作为替代。如果有读者感兴趣,后续再撰文介绍具体配置方法。

1. 本地 Hexo 安装及初始化

NPM 上还有许多 Hexo 相关的包,但是只要安装好了 hexo-cli 和 hexo-server 这两个核心组件之后,就可以让博客跑起来了。

我们使用 Node.js 的包管理器 npm 安装 hexo-cli 和 hexo-server

npm install hexo-cli hexo-server -g

hexo-cli 是 Hexo 的命令行工具,可用于快速新建、发布、部署博客;hexo-server 是 Hexo 的内建服务器,可用于部署前的预览和测试。-g 选项,表示全局安装。

接下来,为 Hexo 博客做一些基础配置,包括创建基础文件。这步操作很简单,Hexo 提供了一个快捷命令,只需要提供一个存放文件的目录地址即可。

hexo init ~/hexo_blog

在国内环境下执行该命令,速度会有些慢。因为需要从 Hexo 在 Github 上的仓库克隆;仓库克隆成功后,会自动执行一系列 npm 命令,自安装依赖模块。

这时,我们就已经有了一个写作、管理博客的环境。

2. 云端服务器配置

完成本地端的操作之后,暂时回到服务器的配置。在下面的操作之前,请确保已经购买了一台云服务器,并且能够以 ubuntu 用户身份正常登陆。

在这部分,要完成以下件事情:

  1. 为本地的 hexo_blog 配置一个部署静态文件的远程仓库。
    许多教程均以 Github 作为中转的平台,但是会让整个流程变得更为复杂,而且会受服务器与 Github 之间网络情况的影响。假如 Github 宕机或者被封,你将无法更新博客。
  2. 配置 Nginx 托管博客文件目录。
  3. 配置远程仓库自动更新到博客文件目录的钩子。

2.1 创建私有 Git 仓库

在 /var/repo/ 下,创建一个名为 hexo_static 的裸仓库(bare repo)。

如果没有 /var/repo 目录,需要先创建;然后修改目录的所有权和用户权限,之后 ubuntu 用户都具备/var/repo 目录下所有新生成的目录和文件的权限。

sudo mkdir /var/repo/
sudo chown -R $USER:$USER /var/repo/
sudo chmod -R 755 /var/repo/

然后,执行如下命令:

cd /var/repo/
git init --bare hexo_static.git

2.2 配置 Nginx 托管文件目录

接下来,创建 /var/www/hexo 目录,用于 Nginx 托管。

sudo mkdir -p /var/www/hexo

和上一步类似,这里也需要修改目录的所有权和权限。

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

然后,修改 Nginx 的 default 设置:

sudo vim /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;
...

保存并退出文件。如果以后购买并备案域名之后,可以再将配置中的 default_server 修改为你的域名。

最后,重启 Nginx 服务,使得改动生效。

sudo service nginx restart

做完这一步之后,你去访问服务器的 IP 时,应该还是会报错的,因为 /var/www/hexo 目录是空的。

2.3 创建 Git 钩子

接下来,在服务器上的裸仓库 hexo_static 创建一个钩子,在满足特定条件时将静态 HTML 文件传送到 Web 服务器的目录下,即 /var/www/hexo。

在自动生成的 hooks 目录下创建一个新的钩子文件:

vim /var/repo/hexo_static.git/hooks/post-receive

在该文件中添加两行代码,指定 Git 的工作树(源代码)和 Git 目录(配置文件等)。

#!/bin/bash

git --work-tree=/var/www/hexo --git-dir=/var/repo/hexo_static.git checkout -f

保存并退出文件,并让该文件变为可执行文件。

chmod +x /var/repo/hexo_static.git/hooks/post-receive

至此,服务端的配置基本结束。

3. 完成本地 Hexo 配置

在第三部分的操作中,我们将完成以下任务:

  1. 修改 Hexo 配置中的 URL 和默认文章版式;
  2. 新建博客草稿并发布
  3. 配置自动部署到服务器端的 hexo_static 裸仓库;

3.1 修改 Hexo 部分默认配置

进入 hexo_blog 目录后,主要有以下文件。

-rw-r--r-- 1 benjisong 1049089 1619 Feb 24 14:45 _config.yml
-rw-r--r-- 1 benjisong 1049089 174 Feb 24 13:51 db.json
drwxr-xr-x 1 benjisong 1049089 0 Feb 24 12:16 node_modules
-rw-r--r-- 1 benjisong 1049089 484 Feb 24 12:16 package.json
drwxr-xr-x 1 benjisong 1049089 0 Feb 24 13:50 public
drwxr-xr-x 1 benjisong 1049089 0 Feb 24 12:08 scaffolds
drwxr-xr-x 1 benjisong 1049089 0 Feb 24 12:13 source
drwxr-xr-x 1 benjisong 1049089 0 Feb 24 12:08 themes

其中,_config.yml 为 Hexo 的主配置文件。我们首先修改博客的 URL 地址。

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/' url: http://server-ip # 没有绑定域名时填写服务器的实际 IP 地址。
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

接下来,修改 default_layout,该字段位于在 Writing 部分。将其从 post 修改为 draft ,表示每篇博文默认都是草稿,必须经过发布之后才能在博客站点上访问。


# Writing
new_post_name: :title.md # File name of new posts
default_layout: draft # 原来的值是 post
titlecase: false # Transform title into titlecase

暂时保存并退出文件。在 3.3 部分继续进行配置。

3.2. 新建博客草稿并发布

这里简单演示通过 Hexo 新建博文草稿,并发布的过程。

执行如下命令,创建第一篇博文。

hexo new first-post

你会看到类似如下输出:

INFO  Created: ~\Workspace\Git\hexo_blog\source\_drafts\first-post.md

在本地通过自己熟悉的编辑器,编辑博文。这里,我们把本文的内容写入第一篇博客中。

title: 在 Ubuntu 14.04 服务器上部署 Hexo 博客
tags:
- Ubuntu
- Hexo
categories:
- Hexo
comments: true
date: 2017-02-24 15:31:00
--- ## 以下为 Markdown 文章正文。

然后,通过如下命令发布博客:

hexo publish first-post

输出类似下面这样:

INFO  Published: ~\Workspace\Git\hexo_blog\source\_posts\first-post.md

博客推送到服务器之后,就可以在网站上访问了。

3.3 通过 Git 部署

到了这一步,可以说万事俱备,只欠东风了。这个东风,就是通过 Git 将 Hexo 生成的静态内容推送到服务器。

继续编辑 _config.yml 文件,找到 Deployment 部分,按照如下情况修改:

deploy:
type: git
repo: ubuntu@CVM 云服务器的IP地址:/var/repo/hexo_static
branch: master

保存并退出文件。

之后,需要安装一个 Hexo 包,负责将博客所需的静态内容发送到设置好的 Git 仓库。

npm install hexo-deployer-git --save

安装好后可以测试部署:

hexo generate && hexo deploy

期间可能会提示输入 ubuntu 用户的登录密码(如果没有设置 SSH 登录)。成功之后的输出大致如下:

...
create mode 100644 tags/Node-js/index.html
create mode 100644 tags/Ubuntu/index.html
Branch master set up to track remote branch master from ubuntu@139.199.170.173:/var/repo/hexo_static.
To 139.199.170.173:/var/repo/hexo_static
* [new branch] HEAD -> master
INFO Deploy done: git

现在,我们就可以在浏览器中打开 139.199.170.173,即可看到自己的博客网站了。

我们发现,Hexo 对 blockquote 标签的样式并不太美观,需要后续再调优。

4. 通过镜像快速部署

本文虽然将 Hexo 博客的大致部署过程明确地列出,但是对于部分初学用户来说可能还会显得较为复杂。如何利用 CVM 云服务器提供商(即腾讯云)的其他服务,快速让其他用户不必经过上面的步骤,快速进行部署呢?

在云计算中,与虚拟机相关的一个概念是镜像(Image)。用户通过镜像,可以一键启动多个配置一模一样的云服务器。我们这一步通过 CVM 的「制作系统镜像」功能,将 Hexo 博客的服务器端打包。

打包后的镜像,还可以上传到官方的服务市场,供所有用户使用;还可以直接共享给其他用户。

如果有用户希望使用该镜像,可在本文下方评论区留下自己的腾讯云账号(登录时使用的QQ号或邮箱)。

4.1 镜像的使用

镜像中已经设置好了服务端,通过镜像启动 CVM 云服务器之后,读者只需要根据本文第三部分「完成 Hexo 本地配置」中的步骤,设置好本地 Hexo 写作环境的部署地址和服务器 URL等参数即可。

这里有一点一定要注意,通过镜像启动云服务器时,务必重新设置密码或密钥,否则镜像的制作者有可能轻松地登录你的服务器。

不要选择上图中的方式安装。

总结

本文较为完整地介绍了 Hexo 博客的安装及初始化,服务端如何配置通过 Git 部署等。与其他教程不同,我们没有使用公开的 Github 等第三方服务,而是直接在服务器上创建了私有仓库。然后,通过 Git 钩子,将 Hexo 生成的博客静态文件,快速地推送到 Web 服务的托管目录。

由于 Hexo 是采用 Node.js 开发的,可能对于其他语言的学习者来说吸引力不大,因为后续自主二次开发难度较高。因此,后续笔者还将介绍其他语言的博客引擎,如用 Python 编写的 Lektor 和用 PHP 编写的 Wordpress 等。

敬请期待。


非商业转载请注明作者及来源:

  • 作者:宋秉金
  • 来源:腾讯云技术社区「腾云阁」

在 Ubuntu 14.04 服务器上部署 Hexo 博客的更多相关文章

  1. 在腾讯云上部署Hexo博客

    推荐理由 ----搭建个人的空间博客目前深受个人开发者的追捧,然而博客的种类和平台有很多,Hexo是一个开源的静态博客生成器.相比于其他博客而言它只要是web容器就能用.除了闷头专研技术之外,程序员还 ...

  2. 码云上部署hexo博客框架

    title: 码云上部署hexo博客框架 Hexo框架在码云上实现个人博客 本文受 https://www.jianshu.com/p/84ae2ba1c133 启发编写 本地调试 安装完Node.j ...

  3. 【原生态跨平台:ASP.NET Core 1.0(非Mono)在 Ubuntu 14.04 服务器上一对一的配置实现-篇幅1】

    鸡冻人心的2016,微软高产年. build 2016后 各种干货层出不穷. 1 Win10 集成了bash  ,实现了纳德拉的成诺,Microsoft Love Linux!!! 2 跨平台  ,收 ...

  4. 在Linux(ubuntu 14.04)上部署WeX5跨平台App(HTML5)

    1. 前言   这篇文章讲述的是把毕业设计的用 WeX5 开发的项目部署到阿里云的Linux(ubuntu14.04)上,本来可以部署在WeX5自带的服务器上,但是WeX5的服务器我以前部署的项目突然 ...

  5. 如何在Ubuntu 14.04服务器上自动化部署Spring Boot的应用

    https://segmentfault.com/a/1190000003944843

  6. Ubuntu 14.04主机上部署k8s集群

    部署结构 3台虚拟机,其中1台作为master,2台作为minion,都安装了最新版本的docker engine(目前是1.11.2) k8s版本是1.3.0 主要问题 部署步骤基本按照官方文档:h ...

  7. ubuntu 14.04服务器上使用nginx搭建wordpress博客详解

    过程详解 1.更新apt-get sudo apt-get update 2.安装nginx sudo apt-get install nginx 3.启动nginx sudo service ngi ...

  8. 【转】如何在Ubuntu 14.04 LTS上设置Nginx虚拟主机

    介绍 转自http://www.pandacademy.com/%E5%A6%82%E4%BD%95%E5%9C%A8ubuntu-14-04-lts%E4%B8%8A%E8%AE%BE%E7%BD% ...

  9. 在Ubuntu 14.04 64bit上安装numpy和matplotlib库

    原文:http://blog.csdn.net/tao_627/article/details/44004541 按照这个成功安装! 机器学习是数据挖掘的一种实现形式,在学习<机器学习实战> ...

随机推荐

  1. 你真的会用Gson吗?Gson使用指南(2)

    注:此系列基于Gson 2.4. 上一篇文章 你真的会用Gson吗?Gson使用指南(1) 我们了解了Gson的基础用法,这次我们继续深入了解Gson的使用方法. 本次的主要内容: Gson的流式反序 ...

  2. 奇怪吸引子---Qi

    奇怪吸引子是混沌学的重要组成理论,用于演化过程的终极状态,具有如下特征:终极性.稳定性.吸引性.吸引子是一个数学概念,描写运动的收敛类型.它是指这样的一个集合,当时间趋于无穷大时,在任何一个有界集上出 ...

  3. postgre 导出单表和导入

    pg除了可以通过dump的方式导入和导出.如果只是导出数据,可以直接使用copy 导出 COPY user TO '/tmp/data/test.csv' WITH csv; COPY user(na ...

  4. 树莓派中编译Opencv3.4.1和OpenCVSharp库

    一.简介 本文主要讲在树莓派中编译Opencv3.4.1和OpenCVSharp库,方便C#开发人员可以通过Mono或者Netcore运行C#通过OpenCVSharp写的OpenCV库. 二.过程 ...

  5. 【转发】centos 7开启FTP以及添加用户配置权限,只允许访问自身目录,不能跳转根目录

    1.切换到root用户 2.查看是否安装vsftp,我这个是已经安装的. [root@localhost vsftpd]# rpm -qa |grep vsftpd vsftpd-3.0.2-11.e ...

  6. 【Java】MyBatis与Spring框架整合(一)

    本文将利用 Spring 对 MyBatis 进行整合,在对组件实现解耦的同时,还能使 MyBatis 框架的使用变得更加方便和简单. 整合思路 作为 Bean 容器,Spring 框架提供了 IoC ...

  7. 部分Linux时区改为东八区的方法

    直接上命令 CentOS: timedatectl set-timezone Asia/Shanghai timedatectl status date Alphine: apk add tzdata ...

  8. C++中 线程函数为静态函数 及 类成员函数作为回调函数

    线程函数为静态函数: 线程控制函数和是不是静态函数没关系,静态函数是在构造中分配的地址空间,只有在析构时才释放也就是全局的东西,不管线程是否运行,静态函数的地址是不变的,并不在线程堆栈中static只 ...

  9. 100个MySQL 的调节和优化的提示

    100个MySQL 的调节和优化的提示 MySQL是一个功能强大的开源数据库.随着越来越多的数据库驱动的应用程序,人们一直在推动MySQL发展到它的极限.这里是101条调节和优化MySQL安装的技巧. ...

  10. /Users/macbook/Library/Developer/Xcode/DerivedData/MapViewDemo: No such file or direc

    /Users/macbook/Library/Developer/Xcode/DerivedData/MapViewDemo: No such file or direc     版权声明:本文为博主 ...