利用 Hugo 搭建 Blog

Published on: April 20, 2022 | Reading Time: 2 min

hugo
搭建
blog
网站

Hugo 是一个用 Go 语言编写的开源静态网站生成器,只需几秒钟即可生成一个网站,被认为是目前世界上最快的网站构建框架(本站的搭建就是基于 Hugo)。下面就介绍如何利用 Hugo 建立自己的独立 Blog。

本方案需具备以下条件:

  • 一台拥有 80 端口权限的 Linux 服务器或 VPS。(本教程是基于 Rocky Linux 操作系统的 VPS)
  • 拥有一个域名并解析到目标服务器IP。

大致步骤:

  • 本地电脑利用 Hugo 生成静态网站。
  • 利用 Git(一个开源分布式版本控制工具)将本地生成的网站部署到服务器。
  • 服务器上使用 Nginx(一个异步框架的网页服务器)为网站提供代理服务。
  • 使用 Let’s Encrypt 的 TSL 证书为网页传输提供加密特性。

安装 Git

本地下载安装 Git 并设置环境变量

安装 Hugo

本地下载安装 Hugo

利用 Hugo 创建一个新站点

终端下执行如下代码:

hugo new site sitename #其中 sitename 为站点文件夹名。

这样就在当前目录下生成一个名叫 “sitename” 的初始站点文件夹。

进入站点目录:

cd sitename

你会看到站点目录结构:

  • archetypes
  • content
  • data
  • layouts
  • public
  • resources
  • static
  • themes
    • config.toml

添加主题

cd themes
git clone https://github.com/xianmin/hugo-theme-jane.git --depth=1 themes/jane

复制示例文件到站点内容目录

cp -r themes/jane/sitename/content ./

复制站点默认设置文件到站点根目录

cp themes/jane/sitename/config.toml ./

运行调试命令

hugo server

在浏览器打开“localhost:1313”,你会看到一个示例网站

常用 Hugo 命令:

hugo new post/hello-world.md #在站点post文件夹内新建一个名为 “hellow-world" 的 md(markdown) 文件
hugo new about.md #创建一个 about 页面

生成静态网站的命令非常简单

hugo

这样就把生成的网站页面保存在网站目录的 public 目录中,这个目录中的文件就是我们最终要上传到服务器上的文件。

本地搭建 Git 存储库

git config --global user.name "username" #username 为用户名
git config --global user.email "emailaddress" #emailaddress 为你的邮箱地址

生成 ssh 密钥

ssh-keygen -t rsa -C "emailaddress"

这样会在本地 C:\Users\username.ssh 路径下生成公钥 id_rsa.pub 和私钥 id_rsa 两个文件

cd public
git init #初始化 Git 存储库
git add --all #添加全部文件
git commit -m "Description" #提交文件,其中 Description 为本次提交更新的描述,可视情况随意填写

服务器搭建 Git 存储库

ssh username@ip:port #username为服务器登录的用户名,ip 为服务器 ip 地址,port 为端口号
dnf update #升级系统软件包和内核
dnf install git-core #安装 Git
mkdir /home/username/git #在 home/username 目录下创建一个名字为 git 的文件夹
cd /home/username/git #切换到 git 目录
mkdir /home/username/git/blog #在 /home/username/git/blog 目录下创建一个名字为 blog 的文件夹
cd /home/username/git/blog #切换到 blog 目录
git init --bare #初始化一个空白存储库
cd .. #切换到 blog 目录的上级 git 目录
mkdir .ssh #创建一个存放 ssh 公钥的文件夹
cd .ssh #切换到 .ssh 文件夹
vi authorized_keys #新建公钥文件,将之前在保存在本地 C:\Users\username\.ssh\id_rsa.pub 文件的内容复制到 authorized_keys 文件内
:wq #保存文件并退出
mkdir -p /home/username/blog/public #用递归的方式创建一个 public 文件夹
cd /home/username/git/blog/hooks #切换到 blog 存储库的 hooks 文件夹

新建一个名字为 post-receive 的钩子脚本文件

vi post-receive

文件内容如下:

#!/bin/bash

GIT_REPO=/home/username/git/blog
TMP_DIR_CLONE=/tmp/blog
PUBLIC_WWW=/home/username/blog/public
rm -rf ${TMP_DIR_CLONE}
git clone $GIT_REPO $TMP_DIR_CLONE
rm -rf $PUBLIC_WWW/*
cp -rf $TMP_DIR_CLONE/* $PUBLIC_WWW

给 post-receive 脚本文件添加可执行权限

chmod +x post-receive

安装 Nginx 网页服务器程序

dnf install nginx 
vi /etc/nginx/nginx.conf #编辑Nginx配置文件,将user Nginx字段中的Nginx修改为username

Nginx 内的其它配置由于篇幅有限不再详细说明,主要就是修改 hostname 和网站文件夹目录

申请并安装 Let’s Encrypt 证书

dnf install epel-release #安装 epel-release 存储库
dnf upgrade #更新系统软件包
install snapd #安装 snap
systemctl enable --now snapd.socket #让 snap开机启动
ln -s /var/lib/snapd/snap /snap #启用经典 /var/lib/snapd/snap 快照支持
snap install core; sudo snap refresh core #安装 snap 内核并刷新
snap install --classic certbot #安装 Certbot
ln -s /snap/bin/certbot /usr/bin/certbot #使 Certbot 命令可以运行
certbot --nginx #获取证书并让 Certboot 自动编辑 Nginx 配置
certbot renew --dry-run #测试证书的自动更新是否正常

本地 Git 存储库推送

git remote add blog username@ip:/home/username/git/blog #添加远程仓库
git remote set-url blog ssh://username@ip:port/home/username/git/blog
git push origin master #推送本地仓库到服务器

网站更新

git init
git add --all
git commit -m "description"
git push blog master

以后网站内容如有更新,只需在本地存储网站静态文件的 public 文件夹内打开终端,依次执行以上命令即可把内容更新到服务器。