之前博客一直用的wordpress,感觉过于臃肿,了解了hugo之后,高颜值使我决定将博客搬迁到hugo上。

网上的教程大多都是将hugo推到github上,再利用github提供的git pages完成博客的部署,出于(不知道为什么)对git page的反感,决定自己动手在云服务器上直接部署hugo。

0x00 本地环境配置

hugo安装

这里以macOS为例:

mac下可使用Homebrew 安装Hugo:

brew install hugo

安装完成看一下是否安装成功:

> hugo version
Hugo Static Site Generator v0.55.5/extended darwin/amd64 BuildDate: unknown

出现上述内容则说明hugo安装完成

创建站点 & 主题配置

首先我们创建一个新的站点:

hugo new site blog # blog为站点名

之后我们需要一个主题。 去欣赏hugo优雅简洁的主题吧~

主题的相关设置如下操作:

cd blog/themes # 进入博客的根目录
git clone 主题git地址 # 将主题文件clone到themes文件夹中
cd 主题文件夹/exampleSite/ 
cp config.toml ../../../ # 复制主题自带的配置文件到站点根目录
vim config.toml # 修改config 文件中的 baseURL 为之后需要使用的博客域名
# 回到根目录

新建文章 & 本地预览

完成了主题的配置后,可以开始创建第一篇文章啦

hugo new posts/hello_world.md # 创建第一篇文章
hugo server -D #本地查看-D表示预览draft,hugo博客默认创建时draft为true。正式发布时需改为false才能发布。

hugo本地预览默认端口为1313 所以开启本地预览后只需要打开 http://localhost:1313 就可以看到效果了。

至此,本地hugo环境的基本配置已经完成,接下来我们需要将博客发布到自己的服务器上。

0x01 服务器环境配置

git 安装

我们只需要用linux自带的包管理器apt | yum 等安装git就行。

sudo yum install git
# 或者
sudo apt-get install git

在服务器上创建git仓库

1.首先创建一个文件夹,用作我们博客的git仓库 。

mkdir /home/annevi/blog
cd /home/annevi/blog
~/blog$ git init --bare # 初始化git 

2.使用git-hooks 同步到网站根目录

cd hooks
touch post-receive
vim post-receive

post-receive文件中配置钩子文件

#!/bin/sh
GIT_REPO=/home/annevi/blog #修改为相应的路径
TMP_GIT_CLONE=/tmp/blog
NGINX_HTML=/var/www/html # 站点服务器根目录
rm -rf ${TMP_GIT_CLONE}
git clone $GIT_REPO $TMP_GIT_CLONE
rm -rf ${NGINX_HTML}/*
cp -rf ${TMP_GIT_CLONE}/* ${NGINX_HTML}

3.给钩子文件赋权限 & 给当前用户读写网站根目录的权限

sudo chmod +x post-receive
sudo chown annevi:annevi /var/www/html

服务器配置

以nginx为例,修改配置文件 /etc/nginx/site-avaliable/default

0x02 推送文章到云服务器

# 在博客目录下,使用`hugo`命令。会生成public目录
cd blog
# 此命令会生成public目录。public目录即我们博客网站的文件。
hugo

# 进入public目录
git init # 初始化
git add . # 添加
git commit -m 'test'
git remote add origin user@your-server-ip:/home/your_user/your-blog

git push origin master # push到服务器
git push -u origin master -f # 强制push到服务器 会覆盖之前的所有文件 刚开始测试的时候用这个比较方便。。

0x03 Let’s Encrypt

为了给我们的域名加上小绿🔒,这里选用了 Let’s Encrypt 的免费ssl证书。

安装cerbot

Cerbot 是官方提供的ssl自动化配置工具

$ sudo add-apt-repository ppa:certbot/certbot
$ sudo apt-get update
$ sudo apt-get install python-certbot-nginx

设置防火墙

$ sudo ufw allow 'Nginx Full' # 开启Nginx HTTP和HTTPS支持

### 获取ssl证书

$ sudo certbot --nginx -d 你的域名

之后跟着提示走即可