Hugo site sunwei.xyz

个人站点样例: https://sunwei.xyz #

Hugo能很方便的帮助我们构建站点，接下来我们来重放一下我的个人站点是如何构建出来的。

需求 #

将原有的纯HTML站点切换成Hugo站点。

原站点一览：

Old sunwei.xyz

功能也不复杂，让我们切换到原始版本。 通过git history可以查到提交记录如下： xyz commits

➜  xyz git:(master) git checkout ef51befc96f398dcfac1b5c04eb4dc7101633012

得到源码如下：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>sunwei.xyz</title>
</head>
<body>
<div style="width: 400px; margin: 20px auto;">
    <a href="/">中文</a> <a href="/en.html">English</a>
    <div>
        <h2>孙伟</h2>
        <p>专注企业级端到端解决方案</p>
    </div>
    <hr>

    <h5>
        <span>读书笔记</span>
    </h5>
    <ul>
        <li>
            <a href="https://ent.sunwei.xyz" target="_blank">
                企业级应用
            </a>
        </li>
        <li>
            <a href="https://buildkit.notes.sunwei.xyz/" target="_blank">
                Moby Buildkit 源码读书笔记
            </a>
        </li>
    </ul>

    <h5><span>工具</span></h5>
    <ul>
        <li>
            <a href="https://jsoneditoronline.cn/" target="_blank">
                JSON 在线编缉器
            </a>
        </li>
        <li>
            <a href="https://fsky.top" target="_blank">
                程序员创作素材 - Top Funny Sky
            </a></li>
    </ul>

    <h5><span>关于</span></h5>
    <ul>
        <li>
            <a href="https://github.com/sunwei" target="_blank">
                GitHub
            </a>
        </li>
        <li>
            <a href="mailto:me@sunwei.xyz" target="_blank">
                邮箱：me@sunwei.xyz
            </a>
        </li>
    </ul>

    <hr>
    <footer>
        <small>
            © Copyright 2020, sunwei.xyz
            <br>
            兼容 <strong>IE6</strong>
            <span>&#128526;</span>
        </small>
    </footer>
</div>

</body>
</html>

可以看到，纯HTML，为了让站点居中，使用了简单的样式，同时还支持中英双语。 兼容性更不用说，把IE6刨出来，都测不出任何BUG。

切换前结合Hugo进行分析 #

结合Hugo的使用方法，结合上述源码，我们把需要完成的工作拆分成如下任务：

  • 配置站点基本信息
  • 提取Header
  • 提取Footer
  • 配置多语言信息，提取多语言切换功能组件
  • 提取样式
  • 并将内容分别放在中，英内容文件夹下
  • 首页汇总

开始将sunwei.xyz切换成Hugo模式 #

通过以上分析，及任务的拆分，我们现在正式进入切换环节。

Hugo项目的基础结构 #

创建一个Hugo站点很方便，通过以下命令：

➜  tmp hugo new site xyz

查看目录结构：

➜  xyz tree
.
├── archetypes
│   └── default.md
├── config.toml
├── content
├── data
├── layouts
├── public
├── static
└── themes

7 directories, 2 files

可以看到默认的文件夹有7个，根据我们的需求，我们需要保留：

  • content，用来存放站点内容，如果content文件夹用来存放中文，我们还需要再创建一个content.en来存放英文
  • layouts，用来存放站点页面模板
  • static，因为有对站点用到居中样式，所以要存放样式文件
  • config.toml， 基本配置信息和多语言信息都会存放在其中

文件结构看起来如下：

➜  xyz git:(master) tree
.
├── README.md
├── config.toml
├── content
├── content.en
├── layouts
└── static

之所以移除public目录，是因为我们将会使用Github Pages + Actions来发布我们的站点，所以每次都会在构建时自动创建发布目录。

配置站点基本信息 #

我们只需要配置baseURL和title就行，打开config.toml并输入：

baseURL = 'https://sunwei.xyz/'
title = 'sunwei.xyz'

提取Header #

通过查询Hugo的layouts说明，我们发现，是支持模板互相引用的，所以我们先把这些重复使用较多的代码提取出来，方便重用。

进入到layouts，并创建分类目录partials，创建文件head.html，并将原站点header内容拷贝其中：

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" type="text/css" href="/css/style.css">
  <title>sunwei.xyz</title>
</head>

提取Footer #

同理，进入到layouts，在分类目录partials下，创建文件foot.html，并将原站点footer内容拷贝其中：

<footer>
  <small>
    Copyright (c) {{ now.Format "2006"}}, sunwei.xyz
  </small>
</footer>

这里比较有意思的是这个Copyright，从2006年开始计算，得到当前年份。 对细节感兴趣的小伙伴，可以参考 golang time

配置多语言信息，提取多语言切换功能组件 #

当点击多语言链接时需要切换到对应语言内容。 将语言切换控件切换成Hugo layouts模板前，先更新配置文件如下：

baseURL = 'https://sunwei.xyz/'
title = 'sunwei.xyz'

defaultContentLanguage = 'zh'
[languages]
[languages.zh]
  languageName = '中文'
  contentDir = 'content'
  weight = 1

[languages.en]
  languageName = 'English'
  contentDir = 'content.en'
  weight = 2

接下来还是一样，进入到layouts，在分类目录partials下，创建文件language.html，并将原站点footer内容拷贝其中：

{{ range $.Site.Home.AllTranslations }}
<a href="{{ .Permalink }}">{{ .Language.LanguageName }}</a>
{{ end }}

可以看到，这里要用到Hugo提供的函数range，以及获取语言相关的配置信息，并设置上对应链接。 是不是很方便，不用再硬编码这些链接了。

提取样式 #

因为原站点中有用到样式，让内容居中显示。 我们需要把样式，提取出来，并放在相应的位置。

这一次不再是layouts，而是static目录下。 进入目录后，创建css文件夹，并在里面创建样式文件style.css:

.content {
    width: 400px;
    margin: 20px auto;
}

并将内容分别放在中，英内容文件夹下 #

因为需要中英双语，在之前已经为中英切换组件配置了多语言相关信息。 这次需要将内容放入对应的文件夹中。

在配置项中，中文对应的文件夹是content：

defaultContentLanguage = 'zh'
[languages]
[languages.zh]
  languageName = '中文'
  contentDir = 'content'
  weight = 1

在content目录下，创建表示章节的文件_index.md：

---
title: Introduction
date: 2022-09-05T16:32:38+08:00
---

敏捷咨询、研发效能治理、云原生、源码分享

---

### 读书笔记

* [企业级应用](https://ent.sunwei.xyz)
* [Moby Buildkit 源码读书笔记](https://buildkit.notes.sunwei.xyz/)

### 工具

* [JSON 在线编缉器](https://jsoneditoronline.cn/)
* [程序员创作素材 - Top Funny Sky](https://fsky.top)

### 关于

* [GitHub](https://github.com/sunwei)
* [邮箱：me@sunwei.xyz](mailto:me@sunwei.xyz)

同理，在content.en目录下，放入英文版内容。

在Hugo中，index.md表示一个常规页面，访问路径就是对应所在目录的目录名，可以包含其它页面。 比如content/about/index.md，对应的访问链接就是baseURL/about。

而_index.md，通常是列表类型，通常有子目录，但不能包含其它页面。

不过目前官方关于index.md和_index.md的明确比较说明，还没有准备好。 所以很多时候并没有那么明确的区分。

首页汇总 #

准备好内容后，接下来要做的就是用首页对header, footer, language, content进行汇总了。

因为我们的站点是个人品牌站点，重点是向其它人介绍所专注的领域，相关的博文，工具。 目前并不需要在首页展示博客列表，对首页的定位也不是一个单纯的页面，所以我们选择用_index.md。

我们的输出格式是默认的HTML。 想要把主页渲染出来，我们同样需要layout中的模板。 先来看一下Hugo主页Layout的 查找规则：

1. layouts/index.html.html
2. layouts/home.html.html
3. layouts/list.html.html
4. layouts/index.html
5. layouts/home.html
6. layouts/list.html
7. layouts/_default/index.html.html
8. layouts/_default/home.html.html
9. layouts/_default/list.html.html
10. layouts/_default/index.html
11. layouts/_default/home.html
12. layouts/_default/list.html

没错，任意选择其中一个就行。

在这我们选择了最常见的index.html，那接下来我们就要进入layouts目录，并创建index.html文件，汇总所有提取出来的内容：

<!DOCTYPE html>
<html lang="{{ default .Site.Language.Lang .Site.LanguageCode  }}">
{{- partial "head.html" . -}}
<body>
<div class="content">
    {{- partial "language.html" . -}}

    <h1 class="title">{{ .Site.Title }}</h1>
    <p>{{ .Content }}</p>

    {{- partial "foot.html" . -}}
</div>
</body>
</html>

可以看出，模板语言很容易理解。

接下来，我们可以直接在本地查看实际效果：

hugo serve

输入地址 http://localhost:1313/，就能看到我们的站点了：

Hugo sunwei.xyz

简直一模一样。

以后想要加入 深入理解Hugo系列，更新站点的时候，直接写MD就可以了。 真的很方便。

最后的目录结构看起来是这个样子的：

➜  xyz git:(master) tree
.
├── CNAME
├── README.md
├── command.sh
├── config.toml
├── content
│   └── _index.md
├── content.en
│   └── _index.md
├── layouts
│   ├── index.html
│   ├── partials
│   │   ├── foot.html
│   │   ├── head.html
│   │   └── language.html
│   └── taxonomy
│       └── taxonomy.html
└── static
    └── css
        └── style.css

11 directories, 12 files

源码可参考Github sunwei/xyz

Calendar November 13, 2023
Edit 编辑本页