如何在 Ubuntu 14.04 上使用 Git 挂钩将 Hugo 网站部署到生产环境中

介绍

Hugo是一个静态网站生成器,允许您通过简单的标记语言来轻松创建和发布网页内容,Hugo可以根据提供的要求对您的内容进行分析,并应用主题,以生成可在任何网页服务器或主机上轻松托管的一致网页。

在一本 上一本指南中,我们介绍了如何在Ubuntu 14.04系统上安装Hugo并使用它来创建内容. 在本指南中,我们将向您展示如何设置一个有git的系统,您可以使用它来自动部署您的新内容到您的生产网页服务器。

前提条件

对于本指南,我们将假设您有一个 Ubuntu 14.04 机器并作为您的开发机器运行,如我们 Hugo 安装指南中所述。

我们将设置一个 second Ubuntu 14.04 服务器来服务我们的实际生产网站. 在这个服务器上,请确保您已经创建了一个具有sudo特权的非根用户。

准备您的开发服务器

我们将在我们的开发服务器上启动(通过上一本Hugo指南设置的服务器)。

我们需要在这个服务器上做一些事情来设置一次性部署,我们需要:

  • 配置 SSH 密钥访问到我们的生产服务器
  • 将最初的 git 存储库转移到生产服务器
  • 在我们的网站存储库中添加生产服务器作为 git 远程存储器

让我们开始吧。

配置 SSH 密钥访问生产服务器

我们要做的第一件事是配置我们的两个服务器之间的SSH密钥访问。这将使我们能够部署,而无需每次输入密码。如果您想在每个部署中被要求使用密码,您可以跳过这个步骤。

首先,检查您是否已经在开发服务器上的帐户中配置了 SSH 密钥对:

1ls ~/.ssh/id_rsa

如果您恢复了看起来像这样的行,则尚未配置 SSH 密钥对:

1[secondary_label Output]
2ls: cannot access /home/demouser/.ssh/id_rsa: No such file or directory

您可以通过键入创建缺失的密钥对:

1ssh-keygen

通过所有提示按 Enter 来创建一个没有密码的密钥。

另一方面,如果ls命令给了你一个看起来像这样的行,你已经在你的帐户中有一个密钥:

1[secondary_label Output]
2/home/demouser/.ssh/id_rsa

一旦你有一个密钥对,你可以将你的公共密钥转移到你的生产服务器,通过键入这个命令,在本指南的前提阶段,替换你在你的生产服务器上配置的非根帐户名称:

1ssh-copy-id username@production_domain_or_IP

如果这是您第一次在两台计算机之间使用 SSH,您将被要求通过键入是来确认连接。之后,您将被要求为生产服务器提供用户密码。

通过使用ssh命令来测试此功能,请求您的生产服务器的主机名称:

1ssh username@production_domain_or_IP cat /etc/hostname

你不应该被要求输入密码这一次,你应该收到你的生产服务器的主机名称:

1[secondary_label Output]
2prodserver

将初始 Git Repo 传输到生产服务器

接下来,我们需要将我们的Hugo Repo的初始克隆转移到我们的生产服务器上。

裸存储库是一个特殊的git存储库,没有工作目录. 在常规的git repos,您的项目文件被保存在主目录中,而git版本数据被保存在一个被称为git的隐藏目录中。裸存储库对您的项目文件没有工作目录,所以通常在隐藏的git文件夹中保存在的文件和目录是在主目录中。

我们将从我们的主要Hugo存储库创建一个赤裸裸的Repo在/tmp目录中。赤裸裸的Repo通常被追踪的.git尾声标识。

1git clone --bare ~/my-website /tmp/my-website.git

我们可以将这个空白的存储库转移到我们的生产服务器中,使用scp。请确保在命令的末尾包含`:``,以便在远程系统上的用户主目录中放置复制。

1scp -r /tmp/my-website.git username@production_domain_or_IP:

为生产服务器添加 Git Remote

现在我们在我们的生产服务器上有我们的git复制器,我们可以将生产服务器添加为可追踪的远程存储库,这将使我们能够轻松地将新内容推向我们的生产服务器。

回到您的 Hugo 目录:

1cd ~/my-website

我们只需要做的是决定远程存储器的名称,在本指南中,我们将使用prod。然后,我们可以指定我们的远程存储器的连接信息和位置:

1git remote add prod username@production_domain_or_IP:my-website.git

您将无法测试此远程链接,直到我们在我们的生产服务器上安装git。

创建生产服务器

现在,我们的开发机器已经完全配置,我们可以继续建立我们的生产系统。

在我们的生产系统中,我们需要完成以下步骤:

  • 安装git、nginx和pygments
  • 安装Hugo和Hugo主题
  • 配置nginx来从我们的主目录中的位置服务文件
  • 创建一个接收后脚本来部署新内容推到我们的库

在生产服务器上安装 Git、Pygments 和 Nginx

我们应该做的第一件事就是在服务器上安装git,pygments和nginx。虽然我们的项目存储库已经在我们的服务器上,但我们需要git软件来接收推送并执行我们的部署脚本。

更新本地包索引并从Ubuntu的默认存储库中安装git和nginx。我们需要安装pip,Python包管理器,以捕捉pygments:

1sudo apt-get update
2sudo apt-get install git nginx python-pip

然后我们可以使用pip来安装pigments:

1sudo pip install Pygments

在下载完成后,我们可以测试我们是否在我们的开发机器上正确设置了远程存储库. 在您的开发机器上**,进入您的Hugo项目目录并使用git ls-remote命令:

1cd ~/my-website
2git ls-remote prod

如果git能够在您的开发和生产机器上的存储库之间建立连接,它将显示一个类似于以下的重复列表:

1[secondary_label Output]
2103902f5d448cf57425bd6830e544128d9522c51	HEAD
3103902f5d448cf57425bd6830e544128d9522c51	refs/heads/master

在生产服务器上安装Hugo

在我们的生产服务器上,我们需要安装Hugo,而不是在我们的开发服务器上构建我们的内容,我们需要在每个git push后在生产服务器上构建静态资产。

我们可以使用我们开发机器使用的相同方法安装Hugo,首先检查您的生产服务器的架构:

1uname -i

接下来,访问 Hugo 发布页面。 向下滚动到下载部分以获取最新的 Hugo 版本。

  • 如果uname -i命令生成x86_64,右键单击并复制以amd64.deb结束的链接
  • 如果uname -i命令生成i686,右键单击并复制以i386.deb结束的链接

在您的生产服务器上,进入您的主目录,并使用wget下载您复制的链接:

1cd ~
2wget https://github.com/spf13/hugo/releases/download/v0.14/hugo_0.14_amd64.deb

一旦下载完成,您可以通过键入安装该包:

1sudo dpkg -i hugo*.deb

通过要求Hugo显示其版本号来测试安装是否成功:

1hugo version

您应该看到一个版本行显示,表示Hugo现在可用:

1[secondary_label Output]
2Hugo Static Site Generator v0.14 BuildDate: 2015-05-25T21:29:16-04:00

在我们继续前,我们需要将Hugo主题克隆到我们的生产服务器:

1git clone --recursive https://github.com/spf13/hugoThemes ~/themes

配置 Nginx 以服务部署期间生成的文件

接下来,我们需要稍微修改我们的 Nginx 配置。

为了简化我们的部署,而不是将我们生成的内容放在var/www/html目录中,内容将被放置在我们的用户主目录中的名为public_html的目录中。

让我们现在继续创建public_html目录:

1mkdir ~/public_html

接下来,让我们打开默认的 Nginx 服务器封锁配置文件来进行必要的调整:

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

我们唯一需要更改的选项是server_name,该指向您的生产服务器的域名或IP地址,以及root指向我们刚刚创建的public_html目录:

 1[label /etc/nginx/sites-available/default]
 2server {
 3        listen 80 default_server;
 4        listen [::]:80 default_server ipv6only=on;
 5
 6        root /home/username/public_html;
 7        index index.html index.htm;
 8
 9        # Make site accessible from http://localhost/
10        server_name server_domain_or_IP;
11
12. . .

请确保您在根指令中用生产服务器上的实际用户名更换用户名。

重新启动 Nginx 服务器以应用您的更改:

1sudo service nginx restart

我们的Web服务器现在已经准备好服务我们将文件放入public_html目录。

创建接收后链接部署Hugo网站

现在,我们终于准备好创建我们的接收后部署链接脚本。

要创建这个脚本,我们将进入我们的生产服务器上的裸体存储库,进入一个名为hooks的目录。

1cd ~/my-website.git/hooks

这个目录有很多样本脚本,但我们需要一个接收后脚本为这个指南。

1nano post-receive

在文件的顶部,在表示这是一个bash脚本后,我们将通过定义几个变量开始。我们将将GIT_REPO设置为我们的裸体存储库。我们将将此克隆到由变量WORKING_DIRECTORY指定的临时存储库,以便Hugo可以访问内部的内容来构建实际网站。由于我们的git复制库中的主题目录实际上只是指向母目录中的位置的象征链接,我们需要确保工作目录克隆在与我们下载的Hugo主题相同的位置创建。

公共网页文件夹将由PUBLIC_WWW变量指定,并通过BACKUP_WWW变量保持备份网页文件夹可访问性。

考虑到这一点,你的文件的开始应该看起来像这样的东西:

1[label ~/my-website.git/hooks/post-receive]
2#!/bin/bash
3
4GIT_REPO=$HOME/my-website.git
5WORKING_DIRECTORY=$HOME/my-website-working
6PUBLIC_WWW=$HOME/public_html
7BACKUP_WWW=$HOME/backup_html
8MY_DOMAIN=server_domain_or_IP

设置变量后,我们可以开始使用我们的脚本的逻辑。首先,我们将使用 bash 的 set -e 命令来指定脚本应立即退出,如果遇到任何错误。

接下来,让我们确保我们的环境为我们的部署设置。我们希望删除任何现有工作目录,因为我们希望在部署过程中克隆新副本。我们还希望备份我们的网页目录,以便我们可以恢复如果有什么不对劲。我们在这里使用rsync,因为它处理空目录和其中包含内容的目录比cp更一致。

我们将做的最后一个设置程序是设置陷阱命令以响应在收到退出信号的情况下。由于我们包括了设置 -e命令,每次部署中的命令失败时都会出现退出信号。

 1[label ~/my-website.git/hooks/post-receive]
 2#!/bin/bash
 3
 4GIT_REPO=$HOME/my-website.git
 5WORKING_DIRECTORY=$HOME/my-website-working
 6PUBLIC_WWW=$HOME/public_html
 7BACKUP_WWW=$HOME/backup_html
 8MY_DOMAIN=server_domain_or_IP
 9
10set -e
11
12rm -rf $WORKING_DIRECTORY
13rsync -aqz $PUBLIC_WWW/ $BACKUP_WWW
14trap "echo 'A problem occurred. Reverting to backup.'; rsync -aqz --del $BACKUP_WWW/ $PUBLIC_WWW; rm -rf $WORKING_DIRECTORY" EXIT

现在,我们可以开始部署,我们将创建一个常规的裸体复制品克隆,以便Hugo可以访问复制品内容,然后我们将从公共网页目录中删除所有内容,以便只有新文件在公共网页目录中可用。之后,我们将使用Hugo来构建我们的网站,我们将它指向我们的新克隆作为源目录,并告诉它在公共网页目录中放置生成的内容。

在Hugo创建内容后,我们将删除工作目录,然后将重置陷阱命令,以便我们的备份副本在脚本试图退出时不会立即重写我们的新内容:

 1[label ~/my-website.git/hooks/post-receive]
 2#!/bin/bash
 3
 4GIT_REPO=$HOME/my-website.git
 5WORKING_DIRECTORY=$HOME/my-website-working
 6PUBLIC_WWW=$HOME/public_html
 7BACKUP_WWW=$HOME/backup_html
 8MY_DOMAIN=server_domain_or_IP
 9
10set -e
11
12rm -rf $WORKING_DIRECTORY
13rsync -aqz $PUBLIC_WWW/ $BACKUP_WWW
14trap "echo 'A problem occurred. Reverting to backup.'; rsync -aqz --del $BACKUP_WWW/ $PUBLIC_WWW; rm -rf $WORKING_DIRECTORY" EXIT
15
16git clone $GIT_REPO $WORKING_DIRECTORY
17rm -rf $PUBLIC_WWW/*
18/usr/bin/hugo -s $WORKING_DIRECTORY -d $PUBLIC_WWW -b "http://${MY_DOMAIN}"
19rm -rf $WORKING_DIRECTORY
20trap - EXIT

在此时,我们的脚本已经完成. 保存并关闭文件,当你完成。

我们现在只需要做的是使脚本可执行,以便git能够在适当的时间调用它:

1chmod +x post-receive

我們的部署系統已經完成了,讓我們來測試一下。

测试部署系统

现在我们已经建立了我们的系统,我们可以继续进行测试。

让我们开始测试我们的接收后链接脚本,这将使我们能够填充我们的~/public_html目录,并将我们的网页内容的初始副本。

1bash ~/my-website.git/hooks/post-receive

这应该运行你的脚本,并输出正常的git和Hugo消息到屏幕上:

 1[secondary_label Output]
 2Cloning into '/home/justin/my-website-working'...
 3done.
 40 draft content
 50 future content 
 64 pages created
 70 paginator pages created
 80 tags created
 91 categories created
10in 26 ms

如果您在 Web 浏览器中访问您的生产服务器的域名或 IP 地址,您应该看到您的网站的当前版本:

1http://production_domain_or_IP

Hugo initial site state

现在,我们可以回到我们正在使用的Hugo开发的机器上,在那个机器上,让我们创建一个新的帖子:

1hugo new post/Testing-Deployment.md

在新帖子中,只需插入一些内容,以便我们可以测试我们的系统:

 1[label ~/my-website/content/post/Testing-Deployment.md]
 2+++
 3categories = ["misc"]
 4date = "2015-11-11T16:24:33-05:00"
 5title = "Testing Deployment"
 6
 7+++
 8
 9## A Test of the New Deployment System
10
11I hope this works!

现在,将内容添加到git并进行更改:

1git add .
2git commit -m 'Deployment test'

现在,如果一切按计划进行,我们可以简单地将我们的新更改部署到我们的生产服务器上:

1git push prod master

现在,如果您在网页浏览器中再次访问您的生产网站,您应该看到新的内容:

1http://production_domain_or_IP

Hugo new content

我们的部署系统似乎运行得很好。

结论

在本指南中,我们设置了一个独立的生产服务器,致力于为访问者提供我们的网站内容。在这个服务器上,我们安装并配置了多个组件,以便Hugo能够正确构建和服务我们的内容。

实际参与我们的部署系统的机制是相当基本的,但是,它们形成了一个易于维护的系统的基础,以便快速和无痛地将您的本地内容送到您的Web服务器上。

Published At
Categories with 技术
Tagged with
comments powered by Disqus