Files
Hugo/README.md
T

4.2 KiB
Raw Blame History

FuKun.Net

基于 Hugo + Hextra 构建的个人站点,部署在腾讯云 Lighthouse 自托管服务器上。


技术栈

层面 选型
静态生成器 Hugo v0.161+ (extended)
主题 Hextra
CSS Tailwind CSS v4(Hextra 内置)
站内搜索 FlexSearch(客户端全文搜索)
字体 iA Writer Quattro S(自托管) + Noto Sans SC(Google Fonts)
Web 服务器 Nginx on Ubuntu 24.04

项目结构

Hugo/
├── hugo.yaml                  # 站点配置
├── README.md
│
├── content/
│   ├── _index.md              # 首页(Hero + 最新文章)
│   ├── about/
│   │   └── _index.md          # 关于页
│   └── blog/
│       ├── _index.md          # 文章列表
│       └── *.md               # 单篇文章
│
├── layouts/
│   ├── hextra-home.html       # 自定义首页布局(覆盖主题)
│   └── _partials/
│       └── custom/
│           └── head-end.html  # 字体预加载
│
├── assets/
│   └── css/
│       └── custom.css         # 字体覆盖、导航栏修复
│
├── i18n/
│   └── zh-cn.yaml             # 覆盖页脚版权文案
│
├── static/
│   ├── images/
│   │   ├── logo.svg           # FK 图标(浅色模式)
│   │   └── logo-dark.svg      # FK 图标(深色模式)
│   └── fonts/
│       └── iAWriterQuattroSRegular.ttf
│
├── themes/
│   ├── hextra/                # 当前主题
│   ├── PaperMod/              # 备用主题
│   ├── terminal/
│   └── minimal/
│
└── archetypes/
    └── default.md             # 新文章模板

常用命令

# 本地开发(热重载)
hugo server

# 包含草稿
hugo server -D

# 生产构建
hugo --gc --minify

# 新建文章
hugo new blog/文章名.md

# 预览其他主题
hugo server -t PaperMod
hugo server -t terminal

构建产物输出到 public/,通过 Nginx 提供服务。

关键配置

hugo.yaml 中的核心设置:

参数 值 说明
baseURL https://fukunee.net/ 生产环境域名
theme hextra 当前主题
hasCJKLanguage true 中日韩语言优化
navbar.displayTitle false 导航栏仅显示图标
navbar.displayLogo true 启用 40×40 FK 图标
search.type flexsearch FlexSearch 全文搜索
blog.list.pagerSize 10 每页文章数
comments.enable false 评论系统关闭

TODO

品牌与图标

  • FK 手写书法风格图标,黑底 #111,白字
  • 浅色/深色双版图标(logo.svg / logo-dark.svg)
  • 导航栏仅显示图标,隐藏标题文字,40×40px
  • 多平台 favicon 适配
  • 自定义 OG 社交分享图(1200×630)
  • iOS/Android 触屏图标

首页(参考 Dan Koe 风格)

  • Hero 标题:FuKun
  • 副标题:FuKun.Net — Tech notes & life
  • 最新文章列表(6 篇)
  • Slogan 重写 — 参照 Dan Koe 的文案风格:
    • 一句话价值主张(如 "The Art of..." / "How to..." 句式)
    • 个人使命宣言
    • 读者能获得什么(结果导向,而非信息罗列)
  • 视觉层级:标题 → slogan → 行动号召 → 文章列表
  • Newsletter 订阅入口(可选)

关于页

  • 个人介绍 — 我是谁、做什么、为什么
  • 技能与兴趣
  • 社交链接 / 联系方式

内容

  • 12 篇文章(中文 9 篇 + 英文 3 篇)
  • 中英文内容策略 — 分开分类还是统一展示?
  • 选题队列 — 草稿池
  • 系列文章 / 合集支持

技术优化

  • Google Fonts:Noto Sans SC
  • 自托管字体:iA Writer Quattro S
  • 导航栏底部阴影线已移除
  • TTF 转 woff2 以提升加载性能
  • 图片优化管线
  • CI/CD 推送自动部署
  • 访问统计

SEO 与元数据

  • OpenGraph 已启用
  • Schema.org 结构化数据已启用
  • 单篇文章自定义 meta(description、keywords)
  • Sitemap 验证
  • robots.txt 调优