使用Hugo和Clarity设计的静态网站

Hugo静态网站生成器是一个神奇的工具，可以用普通的HTML/CSS和JavaScript构建静态网页。Hugo是用Go编程语言编写的，具有快速的编译时间和灵活的模板化API。静态网站生成器非常适用于内容不经常更新或需要尽可能新鲜的网站。静态网站生成器通常从可以部署到静态CDN的markdown内容生成纯HTML。这些工具对文档或博客类型的网站很有效。

这篇文章将介绍如何用Clarity Design System来设置Hugo。Clarity设计系统是一套强大的UI组件和设计指南，可以在任何技术栈中构建企业就绪的UI。

开始使用Hugo

首先，要开始使用，请克隆我在这里创建的Hugo + Clarity Starter的启动版本。

git clone git@github.com:coryrylan/clarity-hugo.git

创建后，在你选择的编辑器中打开该目录。首先，我们需要安装Hugo。

brew install hugo

安装后，如果还没有安装NodeJS，我们需要安装。虽然Hugo是用Go写的，但这个项目确实使用NodeJS来运行一些小的构建过程。所以要安装我们的项目文件夹，请运行以下程序：

npm install

现在我们已经安装了Hugo和Node，我们可以通过运行来启动我们的项目：

npm start

如果一切按预期进行，你应该看到一个像这样的启动演示页面：

Demo of Hugo and Clarity static site

现在我们已经运行了项目，让我们来看看设置Clarity需要什么。

设置JavaScript

由于Clarity是一套UI网络组件，它的资产只是普通的CSS和JavaScript。这使得它在许多不同的构建环境中非常灵活。此外，默认情况下，Hugo有一个构建过程管道（Hugo Pipes），这使得它很容易根据需要开始导入第三方代码。

在layouts/_defaults/baseof.html 文件中，我们有我们的网站最上面的根模板。在这个模板中，我们有我们的CSS和JavaScript导入代码，这些代码将被加载到我们网站的每个页面。在模板的底部，靠近body 标签，我们有以下内容。

{- $options := dict "targetPath" "js/bundle.js" -}
{- $jsBundle := resources.Get "index.js" | js.Build $options | resources.Minify | fingerprint -}
<script src="{ $jsBundle.RelPermalink }" integrity="{ $jsBundle.Data.Integrity }" defer></script>

这个语法是Hugo管道，它允许我们将JavaScript导入到我们的网站。当我们为生产构建时，Hugo的管道将构建并粉碎我们的JavaScript。在引擎盖下，Hugo通过ESBuild处理这些JavaScript，确保代码是 "树状 "的，或从我们的最终捆绑中删除任何未使用的JavaScript。

现在，如果我们看一下我们的assets/inde.js 文件，我们可以看一下导入Clarity组件的代码。

在index.js 文件中，你会看到从Clarity设计系统中导入的组件。当导入一个组件时，我们通过register 导入，这将导入Web组件并将其注册到DOM中。这种导入确保只有你使用的组件会被加载到你的网页上。

import '@cds/core/button/register.js';

与组件类似，图标也是单独导入的，所以只有你的网页需要的图标被加载，而不是库中提供的近500个图标。

import { ClarityIcons } from '@cds/core/icon/icon.service.js';
import { infoStandardIcon } from '@cds/core/icon/shapes/info-standard.js';  
import { searchIcon } from '@cds/core/icon/shapes/search.js';
import { cogIcon } from '@cds/core/icon/shapes/cog.js';
import { codeIcon } from '@cds/core/icon/shapes/code.js';

ClarityIcons.addIcons(infoStandardIcon, searchIcon, cogIcon, codeIcon);

现在，我们正在加载所需的组件和图标，让我们跳到CSS上。

设置CSS

Clarity提供了独立于Web组件的布局、排版和主题工具。这些全局样式使得在系统中创建复杂的页面布局和自定义主题变得容易。

与JavaScript类似，Hugo Pipes可以负责加载和优化我们的CSS。在我们的baseof.html 文件的顶部，我们可以看到我们的全局assets/index.css 文件被加载到页面上。

{ $options := dict "config" "postcss.config.js" "noMap" true }
{ $style := resources.Get "index.css" | resources.PostCSS $options | resources.Minify }
<style>{ $style.Content | safeCSS }</style>

为了处理和优化CSS，Hugo在内部使用PostCSS。这意味着我们可以利用PostCSS插件来进一步优化我们的CSS。

在项目根部的postcss.config.js 文件中，我们正在加载一个名为PurgeCSS的插件。这个插件允许我们对我们的CSS进行树形摇动。例如，Clarity全局样式工具提供了许多选项，而压缩后的CSS总量只有~8kb。然而，使用PurgeCSS，我们可以进一步减少这个包。

const purgecss = require('@fullhuman/postcss-purgecss')
const atImport = require("postcss-import")
const pfm = require('postcss-font-magician');

module.exports = {
  plugins: [
    atImport(),
    pfm(), // copy @cds/city fonts to dist
    purgecss({ // css treeshaking
      content: ['./**/*.html'],
      defaultExtractor: content => content.match(/[\w-\/:@]+(?<!:)/g) || [],
      safelist: {
        standard: [/:host$/, /:slotted$/],
        greedy: [/cds-layout/]
      }
    })
  ]
}

PurgeCSS的工作原理是处理捆绑中的CSS选择器，并将这些选择器与HTML模板的列表进行比较。然后，PurgeCSS可以确定哪些CSS将在运行时被使用，并删除该捆绑中任何未使用的CSS。
这个过程类似于JavaScript树形摇动，将使我们的网站更小，加载速度更快。

像Clarity这样的Web组件设计系统使团队能够为工作选择合适的工具，无论是像Hugo这样的静态网站生成器还是像Vue或Angular这样的单页应用框架。Web组件和Hugo开箱即用，为团队提供了可靠性和对其网络栈的控制。

使用Hugo和Clarity设计的静态网站（附代码）

使用Hugo和Clarity设计的静态网站

开始使用Hugo

设置JavaScript

设置CSS