企业官网建设流程全解析

• 静态站点
• 前端
• 开发工具

在kit仓库的starters-bootstrap/portfolio目录下，存放着一套开箱即用的Hugo Portfolio Theme：它基于 Hugo 静态站点生成器与 HugoBlox（Wowchemy）页面构建器，内置了作品集网格布局、颜色主题切换、简历与作者档案等模块。本文以该模板的 README 及其完整配置为骨架，结合仓库中的实际配置文件与示例内容，讲解如何初始化、定制主题、组织作品集内容并部署上线，帮助你用「配置 + 少量 Markdown」在十几分钟内打造一个个人作品集网站。

模板定位：一个可定制的作品集起点

模板的 README 开宗明义：Hugo Portfolio Template 的目标是让你轻松创建作品集网站，并通过选择颜色主题（color theme）与网格布局（grid layout）使其成为你自己的网站。它的核心能力来自集成的 Wowchemy 页面构建器——一种基于「widget（小组件）」的免写代码方案：

• 每个页面区块由独立的 widget 文件构成，例如about.avatar（头像简介）、portfolio（作品集网格）；
• 支持浅色 / 深色主题与语言包；
• 内容用 Markdown 撰写，站点由 Hugo 编译生成；
• 可一键部署到 GitHub Pages 或 Netlify。

整个站点的运行链路是：用 CMS 或任意编辑器改内容 → Hugo 构建 → 部署平台发布。你在仓库中看到的所有配置与示例内容，都位于 starters-bootstrap/portfolio 目录下。

项目结构：读懂模板的骨架

该模板是一个完整的 Hugo 站点，关键目录与文件如下：

模块依赖在 go.mod 中声明：blox-bootstrap/v5 v5.9.7提供主题与页面构建器，blox-plugin-netlify提供 Netlify 部署所需的 headers/redirects 等资源；对应地，module.yaml 通过imports引入这两个模块。这意味着模板的所有渲染逻辑都来自仓库根目录下modules/中的 blox-bootstrap 与 blox-plugin-netlify 两个模块，你只需要写配置和 Markdown。

外观定制：颜色主题与字体

README 强调的「choose a color theme」，对应 params.yaml 的appearance段落：

appearance: theme_day: custom theme_night: custom font: minimal font_size: L

theme_day与theme_night指向 data/themes/custom.toml——这是一份名为 "Starter Blog" 的自定义主题，为浅色 / 深色模式分别定义了完整色板：

[light] primary = "#2962ff" # 主色调 menu_primary = "rgb(247, 250, 252)" menu_text = "#34495e" menu_text_active = "#2962ff" home_section_odd = "rgb(247, 250, 252)" # 首页奇数区块背景 home_section_even = "rgb(247, 250, 252)" # 首页偶数区块背景 [dark] primary = "#bbdefb" background = "rgb(26, 32, 44)" home_section_odd = "rgb(26, 32, 44)" home_section_even = "rgb(26, 32, 44)"

从这份文件可以看出，模板刻意将浅色 / 深色两种模式下首页各区块背景统一为同一颜色，形成「恒定背景」的简约视觉风格（注释也写明 "Essentially Minimal theme but with constant home section bg color"）。想换配色时，直接改primary、menu_text等色值即可，无需触碰任何 HTML。font: minimal与font_size: L则控制字体族与基准字号。

除了改色板，assets/scss/template.scss 提供了 CSS 层面的微调入口，例如：

• body背景色固定为rgb(247, 250, 252)；
• 文章卡片.card-simple圆角 15px、间距加大；
• 导航栏去除阴影（.navbar { box-shadow: none !important; }）；
• 首页头像最大 225px，About 页头像最大 200px；
• 首页.home-section内容容器在宽屏下收窄到 880px。

这些规则都区分了.dark模式，说明模板原生支持深色配色下的视觉一致性。

网格布局：Portfolio Widget 的筛选与视图

「grid layout」由 content/home/portfolio.md 中的Portfolio widget实现。该 widget 负责展示content/project/下的作品条目，关键配置如下：

widget: portfolio weight: 20 content: page_type: project # 展示的页面类型 filter_default: 0 # 默认选中的筛选按钮索引 filter_button: # 顶部筛选工具栏 - name: All tag: '*' - name: Machine Learning tag: ML - name: Computer Vision tag: CV - name: NLP tag: NLP design: columns: '1' view: masonry # 瀑布流网格布局 flip_alt_rows: true spacing: {padding: [0, 0, 0, 0]}

要点解读：

• page_type: project指明数据来源为content/project/目录；
• filter_button定义了筛选工具栏：tag: '*'表示「全部」，其余按钮按标签过滤。筛选依据来自每个项目 front matter 中的tags字段；
• view: masonry决定网格呈现为瀑布流式布局，这正是 README 所说「grid layout」的落地之处；
• flip_alt_rows: true让相邻行左右错落，增强视觉节奏。

作为对照，模板还演示了about.avatar简介 widget（content/home/intro.md），其中通过author: admin关联作者档案，并展示了一段渐变色的自我介绍文字。首页本身是type: widget_page的「无头」页面（content/home/index.md），由各个 headless widget 按weight顺序拼装而成。

作品集内容：用 front matter 驱动筛选与跳转

content/project/下内置了三个示例项目，展示了作品条目的标准写法，例如 content/project/cartoon/index.md：

--- title: Cartoon Face Generator summary: Write about your project here... tags: - CV date: 2022-01-01 external_link: http://github.com ---

每个项目条目是一个含 front matter 的 Markdown 文件，字段含义：

• title/summary：卡片标题与一句话摘要；
• tags：决定其在 Portfolio 筛选工具栏中的归属（如CV对应 Computer Vision 筛选）；
• date：排序依据；
• external_link：点击卡片后跳转的外部链接（如项目仓库 / 演示地址）；
• 卡片配图可放在该目录下（如featured.jpg），Hugo 会自动识别为特色图。

新增作品只需复制一个示例目录、替换内容并调整tags即可，无需改动任何模板代码。同理，content/about 下的about.md、experience.md、education.md、accomplishments.md、contact.md等文件组成了 About 页面内容。

作者档案、社交链接与简历

首页头像简介与 About 页共用 content/authors/admin/_index.md 这份作者档案，其中包含：

• title：显示名称（示例为 "Alice Wu (吳恩達)"），superuser: true标记为主要用户；
• bio：个人简介；
• social：社交链接数组，每个条目由icon、icon_pack、link组成，例如envelope+fas图标包指向about/#contact的邮箱入口，也支持 twitter / instagram / github 等；
• 简历下载：在正文中用{{< staticref "uploads/resume.pdf" "newtab" >}}Download{{< /staticref >}}短代码引用 static/uploads/resume.pdf，点击即可在新标签页打开 PDF。

把resume.pdf换成你自己的简历文件即可。头像图片avatar.jpg位于同目录，Hugo 会用于头像展示。

导航与菜单

config/_default/menus.yaml 定义了主导航，当前仅两项：

main: - name: Home url: / weight: 10 - name: Resumé url: about/ weight: 20

weight控制菜单顺序。导航栏的显示行为由 params.yaml 的header.navbar段落控制，例如show_logo: false、show_day_night: true（显示日夜主题切换按钮）、show_search: true等。此外该文件还集中管理了 SEO（marketing.seo）、统计与分析（marketing.analytics）、页脚版权（footer.copyright，支持{year}与{license}占位符）、评论（features.comment）与搜索（features.search）等站点级功能，均可按需留空或填入自己的服务凭证。

多语言与 Hugo 全局配置

config/_default/languages.yaml 默认只启用英文；要搭建多语言站点，可取消zh段的注释并设置contentDir: content/zh，同时为中文站点单独配置title、description与菜单项。

config/_default/hugo.yaml 则提供 Hugo 层面的全局设置，值得关注的有：

• cascade：对/post/**统一启用editable、reading_time、commentable、show_related、show_breadcrumb等页面选项；
• permalinks：将作者 / 标签 / 分类映射为/author/:slug/、/tag/:slug/、/category/:slug/形式的干净 URL；
• outputs.home: [HTML, RSS, JSON, WebAppManifest, headers, redirects]：首页输出多种格式（后两项服务于 Netlify 部署）；
• imaging：图片缩放滤镜lanczos、质量75、智能锚点；
• taxonomies：启用tag、category、author三类分类法。

构建与部署

README 给出的部署路径是 GitHub 或 Netlify。仓库中 netlify.toml 已内置完整的 Netlify 配置：

[build] command = "hugo --gc --minify -b $URL" publish = "public" [build.environment] HUGO_VERSION = "0.119.0" HUGO_ENABLEGITINFO = "true" [context.production.environment] HUGO_ENV = "production" [context.deploy-preview] command = "hugo --gc --minify --buildFuture -b $DEPLOY_PRIME_URL"

它声明了构建命令、发布目录、Hugo 版本（0.119.0）以及生产 / 预览分支的差异化构建参数。本地预览同样简单：在starters-bootstrap/portfolio目录下执行hugo server，浏览器打开本地地址即可实时查看；正式构建用hugo --gc --minify生成静态站点到public/目录。若迁移到其他平台，把构建命令与产物目录对应迁移即可——模板本身不绑定任何特定服务商。

小结

从这份模板可以看到 HugoBlox 作品集方案的完整形态：颜色主题、字体与网格布局均由 YAML/TOML 配置驱动，作品内容以带 front matter 的 Markdown 组织，页面区块通过 widget 拼装，最后交给 Hugo 构建、Netlify 一键发布。基于 starters-bootstrap/portfolio 这套现成骨架，替换作者信息、填入作品条目、调整主题色板，你就能快速得到一个风格统一、可筛选、支持深浅色切换的个人作品集网站。

• 静态站点
• 前端
• 开发工具