介绍

Hugo是一款静态站点生成器,具有闪电般的渲染速度和出色的易用性。由于其面向内容的所有功能,您始终可以专注于创建内容而不是构建环境:

  • 通过Hugo,您可以在几分钟内建立一个运行在任何地方的静态站点,而不需要繁琐的依赖关系或数据库。
  • 您可以用最便捷的书写风格Markdown撰写您的内容,并即时查看您在网络上所做的更改。
  • 此外,您可以充分利用Hugo富裕的主题存储库和快速发展的社区。

在本教程中,我将向您展示如何安装和使用Hugo在基于CentOS的Vultr LEMP服务器实例上构建静态博客站点。

先决条件

使用sudo权限以非root用户身份登录到您的实例。了解如何在本文中创建这样的用户。

第1步:安装Hugo程序

Hugo可以安装在几乎所有的主流平台上。对于CentOS,您只需要将最新的程序文件下载到.tar.gz档案中,并将其解压缩到一个方便的位置。在撰写本文时,最新版本是0.15。

sudo yum update -y
sudo yum install git -y
cd ~
wget https://github.com/spf13/hugo/releases/download/v0.15/hugo_0.15_linux_amd64.tar.gz
tar -zxvf hugo_0.15_linux_amd64.tar.gz
sudo mv hugo_0.15_linux_amd64/hugo_0.15_linux_amd64 /usr/local/bin/hugo

使用以下命令测试您的安装:

 hugo version

第2步:建立您的网站

使用Hugo,您可以从服务器上的任何文件夹内建立您的网站。在这里,我mysite/在我的主目录下的目录中建立了一个站点。

cd ~
hugo new site ~/mysite

运行以下命令以查看该站点的体系结构:

cd mysite
ls -lF

如您所见,该网站的当前体系结构类似于:

原型/

config.toml

内容/

数据/

布局/

静态的/

另有两个即将创建的目录,themes/并且public/Hugo站点的整个架构都是紧凑而全面的。

作为初学者,知道你的内容应该存储在目录中content/

第3步:从Hugo存储库安装主题

要从Hugo存储库安装所有主题,请运行以下命令。这些将创建一个名称themes/在您的网站目录中的目录,并从雨果主题回购下载所有主题。

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

如果您只想安装一个主题,请访问Hugo主题回购以确定您最喜欢的主题。复制其URL并将其粘贴到git clone下面的命令中。

cd ~/mysite/
mkdir themes
cd themes
git clone https://github.com/jaden/twentyfourteen

第4步:进行一些基本的配置更改

config.toml在您的站点目录中命名的文件包含您的Hugo站点的全局配置。使用文本编辑器编辑文件以进行一些基本的配置更改,如下所示。请记住根据您的具体情况更换这些值。

baseurl = "http://[YourSiteIP]/"
languageCode = "en-us"
title = "Your Site Name"
theme = "twentyfourteen"

第5步:撰写您的内容

在您的站点目录中,输入以下命令以在目录中创建内容页面~/mysite/content/post/

cd ~/mysite/
hugo new post/about.md

在文本编辑器中打开该文件,该文件的格式应类似于以下内容。

+++
date = "2015-12-25T03:21:23Z"
draft = true
title = "about"

+++

在两行+++谎言之间关于你的内容页面的元信息。在这里,您可以删除该行draft = true并根据需要修改标题行。

在第二+++行下面,添加您想要在网页上显示的内容。请记住用Markdown语言编写您的内容。

## This is an H2 headline

Text goes here.

完成此编辑后,请保持文本编辑器处于打开状态供以后使用。

第6步:使用Hugo服务器调整您的内容

您可以使用Hugo的内置Web服务器来部署您的网站,只要在文本编辑器中修改您的内容,即可立即在网页上显示您的更改。

打开另一个终端,配置iptables规则以允许您通过Hugo服务器的默认端口1313访问您的站点:

sudo iptables -I INPUT -p tcp --dport 1313 -j ACCEPT

启动Hugo服务器:

hugo server --bind="[YourServerIP]"

通过浏览器访问您的网站:

http://[YourServerIP]:1313

现在,您可以尝试编辑上一个终端中页面文件的内容或添加/删除页面文件。您会发现content/目录中的任何修改都会同时反映在您的浏览器屏幕上。对于一个忙碌的博主而言,这是一个很棒的功能,因为您总能立即看到您的修改以获得更好的创作体验。

完成编辑后,按Ctrl+C停止Hugo服务器。

第7步:发布您的网站

现在是时候在网上发布您的网站了。运行以下命令,Hugo将生成适合在public/目录中发布的所有静态内容。

cd ~/mysite
hugo

注意:在运行上述命令时,Hugo不会删除先前生成的旧文件。为了避免意外的结果,您可以public/在运行hugo命令之前始终删除目录,或者指定新的输出目标,如以下命令中所示。

hugo --destination=public2

由于Nginx Web服务器已经在服务器上运行,所以您只需将~/mysite/public/目录或其他自定义目标目录的内容复制到您的Web目录中即可/usr/share/nginx/html/

删除原始文件:

cd /usr/share/nginx/html/
sudo rm -rf background.jpg index.php logo.png

将您的静态站点文件复制到Web目录中:

cd ~/mysite/public
sudo cp -R ~/mysite/public/. /usr/share/nginx/html/

而已。现在,您可以通过浏览器访问您的超级快速静态网站:http://[YourServerIP]

要查看更多详细信息,请使用该命令hugo help或访问Hugo官方网站