📢 新文章推送 · 每周更新优质内容 · 订阅更新 →
向下滚动
资源分享

Hugo 博客开发工具链推荐

AI 智能总结

编辑器

Visual Studio Code

VS Code 是 Hugo 博客开发的首选编辑器。推荐插件:

插件作用
Hugo Language and Syntax SupportHugo 模板语法高亮和自动补全
Markdown All in OneMarkdown 快捷键、目录、预览增强
markdownlintMarkdown 语法规范检查
Prettier代码格式化
Front MatterHugo 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

图片压缩工具

工具说明
SquooshGoogle 在线图片压缩工具
TinyPNGPNG/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 过程中积累的工具链。工具的选择原则是:免费优先、轻量至上、自动化尽可能多。希望能帮助到同样在搭建博客的开发者。

5 / 16
版权声明

本文作者 Lumin

本文链接 https://www.zhengquan.xyz/share/hugo-toolchain-guide/

许可协议 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明出处!

请作者喝杯咖啡 ☕

  • 微信打赏
    微信支付
  • 支付宝打赏
    支付宝
点击按钮查看打赏二维码
🎁 推荐工具
试试这些实用在线工具,提升工作效率
前往工具集 →

留言评论

期待你的想法

评论加载中