突然发现前两礼拜做的部署没问题（这也能突然发现？），所以记录一下。

TLDR

  • 目标是用自己的vps host静态博客网页
  • 用hugo生成网页
  • 用git把网页文件传到vps上
  • 用nginx host 网页

HUGO

所谓静态网页，就是写完这个网页所需的所有html文件，然后通过site map索引就能实现基本的网页功能。如果完全从html和css自己写当然很麻烦，因此就有static site generator来辅助实现，实际上只要写简单的命令行就可以生成，写文章则是在任何文档编辑器里写md就好了。hugo就是其中一个被广泛使用的生成器。我从wordpress换成这个方案有几个原因：

  • 我对数据库一窍不通，mysql完全是按教程装卸的，一旦出问题完全不会修理。而静态网页反正就是html, 全都崩盘了换个地方部署也不过是复制粘贴html文件。
  • 我原本觉得wordpress可以在移动端写作发布很方便，后来发现真的写长一点的文章还是在用电脑，所以移动端编辑变得没有那么重要，真的有什么灵感也可以在app里写了复制粘贴，目前我在用的是simple note。
  • wordpress占据了我这个最便宜套餐1G vps的不少空间，如果还想装其他服务可能会有点麻烦，而文字文档当然占的地方小多了。
  • html和css都是很容易读懂的语言，调试和修改都很容易找到资源。这一点对于我这种完全不会写代码全靠google建站的人来说非常重要！

Hugo official site 有完整教程和很多其他资源，我就不说怎么用了。

把html传到vps上——用的是git

首先在vps——我的是ubuntu 18.0——上安装git

  • 新建一个用户，管理git, I called them gitter add gitter to the root group
adduser gitter
su - gitter
// in root user
usermod -aG sudo gitter
apt install git
// after installation, check the version
git --version
  • pair the remote git to local repository
// add a git in the gitter root directory
mkdir new.git && cd new.git
git init
// ** do not use bare git because bare git does not show explicit files **

mkdir -p ~/.ssh && chmod 0700 ~/.ssh
gitter@midofnowhere:~$ touch ~/.ssh/authorized_keys
gitter@midofnowhere:~$ chmod 0600 ~/.ssh/authorized_keys
gitter@midofnowhere:~$ git init --bare ~/hugoblog.git
Initialized empty Git repository in /home/gitter/hugoblog.git/

check local ssh keygen in local git bash cat ~/.ssh/id_rsa.pub then copy the keygen to vps authorized key file.

go to local git repo directory:

git init
git remote set-url origin gitter@myip:hugoblog.git
git add . 
git commit -m "commit message"
git push --set-upstream origin main 
//no branches in remote git yet so set up a main branch
  • some basic frequently used operations in git
git branch <new branch name>
git checkout <go to the branch need to checkout>
git branch -a ##display all branches
git branch <branch name> --set-upstream-to remotes/origin/<branch name>

cannot push to the branch currently checked out according to this stack overflow qs so I created a temporary branch git branch temp && git checkout temp then push from local repository.

Successfully pushed.

NGINX代理

这一部分我不懂，看的是这个tutorial, 我目前用的是默认80端口。

工作流

  1. 从本地目录新建md文档，在obsidian或者atom中编辑。
  2. 用hugo生成预览 hugo server 查看效果，满意的话生成整个网站 hugo ，所有文档就会生成好放在 /public 文件夹里。
  3. /public 文件夹里的git就是连接在vps上的，因此进入这个文件夹，用git把最新的文件push到服务器上。
  4. 就好了！

还需要改进的地方

  • 博客网页本身还有一些bug, 详见这篇。
  • 添加互动模块：用waline评论或接入fediverse动态显示。
  • configure NGINX 改用其他端口以安装多个服务或网站。
  • 把博客搬到子域名。
  • 用action或hook实现新文章自动部署。