利用Hugo搭建Blog

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

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文件夹内打开终端,依次执行以上命令即可把内容更新到服务器。