编辑器
Visual Studio Code
VS Code 是 Hugo 博客开发的首选编辑器。推荐插件:
| 插件 | 作用 |
|---|---|
| Hugo Language and Syntax Support | Hugo 模板语法高亮和自动补全 |
| Markdown All in One | Markdown 快捷键、目录、预览增强 |
| markdownlint | Markdown 语法规范检查 |
| Prettier | 代码格式化 |
| Front Matter | Hugo Front Matter 可视化管理 |
| Live Server | 本地预览 |
配置文件关联
在 VS Code 的 settings.json 中添加:
1{
2 "files.associations": {
3 "*.html": "go-html-template"
4 },
5 "[go-html-template]": {
6 "editor.defaultFormatter": null
7 }
8}
这样 HTML 模板文件会被识别为 Hugo 模板,语法高亮正确。
图片处理
WebP 转换
WebP 格式比 PNG/JPG 体积小 25%-35%,是现代网站的首选图片格式。
cwebp 命令行工具:
1# JPG 转 WebP(质量 80%)
2cwebp -q 80 input.jpg -o output.webp
3
4# PNG 转 WebP(无损)
5cwebp -lossless input.png -o output.webp
6
7# 批量转换
8for file in *.jpg; do cwebp -q 80 "$file" -o "${file%.jpg}.webp"; done
图片压缩工具
| 工具 | 说明 |
|---|---|
| Squoosh | Google 在线图片压缩工具 |
| TinyPNG | PNG/JPG 在线压缩 |
| ImageMagick | 命令行批量处理 |
版本控制
Git + GitHub
1# 初始化
2git init
3git add .
4git commit -m "初始化 Hugo 博客"
5
6# 关联远程仓库
7git remote add origin https://github.com/username/repo.git
8git push -u origin main
推荐 .gitignore:
1/public/
2/resources/
3/.hugo_build.lock
4node_modules/
5.DS_Store
GitHub Actions
自动部署工作流示例(推送到 Cloudflare Pages):
1name: Deploy
2on:
3 push:
4 branches: [main]
5jobs:
6 deploy:
7 runs-on: ubuntu-latest
8 steps:
9 - uses: actions/checkout@v4
10 - uses: peaceiris/actions-hugo@v3
11 with:
12 hugo-version: '0.161.1'
13 extended: true
14 - run: hugo --minify
15 - uses: cloudflare/pages-action@v1
16 with:
17 accountId: ${{ secrets.CF_ACCOUNT_ID }}
18 apiToken: ${{ secrets.CF_API_TOKEN }}
19 projectName: your-project
20 directory: public
部署平台
| 平台 | 免费额度 | 特色 |
|---|---|---|
| Cloudflare Pages | 每月 500 次构建,无限带宽 | 全球 CDN,自动 HTTPS,速度最快 |
| Vercel | 每月 100GB 流量 | 一键部署,Serverless 支持 |
| Netlify | 每月 100GB 流量 | 老牌平台,生态成熟 |
| GitHub Pages | 无限流量 | 与 GitHub 深度集成,简单免费 |
域名
| 注册商 | 推荐理由 |
|---|---|
| Cloudflare Registrar | 成本价(零加价),免费 WHOIS 隐私 |
| NameSilo | 价格实惠,免费隐私保护 |
| Namecheap | 界面友好,常有优惠 |
分析工具
| 工具 | 适合场景 |
|---|---|
| Cloudflare Web Analytics | 无需代码侵入,自带隐私友好 |
| Umami | 开源自部署,隐私优先 |
| Microsoft Clarity | 免费,含用户录屏回放 |
自动化脚本
一键部署脚本
1#!/bin/bash
2echo "构建 Hugo 站点..."
3hugo --minify
4echo "推送到 GitHub..."
5git add .
6git commit -m "更新内容 $(date +%Y-%m-%d)"
7git push origin main
8echo "部署完成!"
搜索引擎推送脚本
1#!/bin/bash
2# 从 public/sitemap.xml 提取 URL 并推送到百度
3URLS=$(grep -oP '<loc>\K[^<]+' public/sitemap.xml)
4
5curl -H 'Content-Type:text/plain' \
6 --data-binary "$URLS" \
7 "http://data.zz.baidu.com/urls?site=yourdomain.com&token=YOUR_TOKEN"
以上是我在搭建和维护 Lumin Blog 过程中积累的工具链。工具的选择原则是:免费优先、轻量至上、自动化尽可能多。希望能帮助到同样在搭建博客的开发者。
留言评论
期待你的想法评论加载中