Flexus L 上部署 Hugo 静态博客:从开箱到上线的实操笔记
最近把个人博客从本地文件夹搬到了华为云 Flexus L 云服务器上,用的是 Hugo 静态博客 + Nginx 的组合。这篇笔记记录从开箱到上线的完整过程,适合预算有限、流量不大的学生个人博客参考。
为什么选静态博客 + Flexus L
个人博客的特点是读多写少、流量小。动态博客需要 PHP + 数据库,长期维护成本高,还要操心插件更新和后台安全。静态博客没有数据库、没有后台登录入口,攻击面小得多;生成好的 HTML 直接由 Nginx 返回,2 核 2G 的 Flexus L 实例跑起来绰绰有余。写文章时在本地用 Markdown,编译上传即可。
一、准备工作
- 开通一台 Flexus L 实例,选自己熟悉的系统镜像,例如 Ubuntu。
- 在控制台的安全组里放行 80(HTTP)和 443(HTTPS)端口,以及 SSH 的 22 端口。这是新手最容易卡住的地方:服务明明启动了,浏览器却打不开,先查安全组。
- 用 SSH 登录服务器,确认能正常执行命令。建议登录后第一件事是更新系统软件包,并创建一个普通用户,日常操作尽量不用 root 直连。
二、本地生成博客
先在本地电脑上安装 Hugo,然后创建站点:
hugo new site myblog
cd myblog
git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
在 hugo.toml 里写好站点标题、语言和主题名,baseURL 先填服务器的公网 IP,例如 http://你的服务器IP/,有域名之后再改成域名。新建一篇文章后用 hugo server -D 在本地预览,确认样式和链接都没有问题。
三、服务器上安装 Nginx
在服务器上安装并启动 Nginx(以 Ubuntu 为例,其他镜像换成对应的包管理器):
sudo apt update
sudo apt install -y nginx
sudo systemctl enable --now nginx
浏览器访问服务器公网 IP,能看到 Nginx 默认欢迎页,说明 80 端口和安全组都通了。接着新建站点配置,把网站根目录指向 /var/www/blog:
server {
listen 80;
server_name _;
root /var/www/blog;
index index.html;
location / {
try_files $uri $uri/ =404;
}
}
保存后执行 sudo nginx -t 检查配置语法,通过后再 sudo systemctl reload nginx。
四、发布:编译 + 上传
本地执行 hugo --minify 生成静态文件,输出在 public 目录。把 public 的内容传到服务器的 /var/www/blog:
scp -r public/* 用户名@服务器IP:/var/www/blog/
上传后检查目录权限,确保 Nginx 的运行用户能读取文件。刷新浏览器,就能看到自己的博客首页。此后每次写文章的流程固定为三步:本地写 Markdown、执行 hugo --minify、上传 public。
五、加上 HTTPS(建议做,但不急于第一天)
有域名后可以申请免费证书,给 Nginx 加上 443 监听,并把 80 跳转到 HTTPS。没有域名的情况下,先用 IP 访问、把内容跑通,再回头做域名解析和证书,避免一次改太多变量,出了问题不好定位。
六、日常运维清单
- 写文章只改 Markdown 源文件,
public目录是生成物,不要直接在里面改。 - 定期备份本地的站点源码和配置文件,服务器上的
public随时可以重新生成。 - 关注 Flexus L 实例的带宽和流量情况,个人博客流量很小,一般不会超。
- 系统和 Nginx 定期更新,安全组只放行必要的端口。
踩过的坑
- 浏览器打不开:先查安全组是否放行 80 端口,再查 Nginx 是否启动,不要一上来就重装。
- 页面样式丢失:多半是
baseURL写错了,Hugo 生成的资源路径对不上,改成实际访问地址后重新编译。 - 上传后还是旧页面:浏览器缓存或 CDN 缓存,硬刷新一次再看。
- 用 root 直接传文件导致权限混乱:统一用一个固定用户传文件,目录权限保持一致。
小结
Hugo + Nginx + Flexus L 是一套很适合学生的组合:成本低、没有数据库要维护、部署流程固定成三步之后,每次更新就是一两分钟的事。下一步我打算把域名和 HTTPS 接上,再把发布流程写成一个简单的部署脚本。
- 点赞
- 收藏
- 关注作者
评论(0)