Sh00t. 是怎样建成的

Mar 7, 2024

这些天闲来无事（其实是有活不干），又见群友聊起开个小红书做摄影账号，便想着把把网页做起来存图。起初打算用 Gridea，但发现限制图片大小，于是便还是自建。感谢佛哥提供了个人网站和解决方案，作为参考，最后选择了 Hugo + GitHub + Vercel 的方案，搭建了 Sh00t. 。

安装 Hugo

macOS

建议使用 Homebrew 安装，只需在终端中运行下述命令即可。

brew install hugo

Windows

以安装到 D:\Hugo\bin 并创建 examplesite 为例。

Windows 也可以使用类似的包管理方式安装，可以参考官方教程。但本文使用了预编译的二进制软件包，可以从 Hugo 的 Release 中下载最新的文件，下载后，将压缩包中的 Hugo.exe 放置到 D:\Hugo\bin ；使用 Win + X 进入 Setting - System，打开 Advanced system settings，打开 Environment Variables 并在 Path 项中添加 D:\Hugo\bin 。此时打开终端输入 Hugo version 应该可以看到 Hugo 的版本信息。

创建站点并配置 Bridget 主题

在 D:\Hugo 中启动终端中，输入下述命令来创建一个新的 Hugo 站点，并进入 examplesite 目录。

hugo new site examplesite
cd example

随后通过 git 命令为创建的站点添加主题。

git clone https://github.com/Sped0n/bridget themes/bridget

进入 D:\Hugo\examplesite\themes\bridget，将 exampleSite 中的内容复制到 D:\Hugo\examplesite。

打开 D:\Hugo\gallery\config\_default\hugo.toml，按照需要修改 baseURL、title，并将 [Module] 修改如下。

replacements = "github.com/Sped0n/bridget -> bridget"

在终端中输入下述命令即可让 Hugo 在本地运行。

hugo serve

在浏览器中打开这个网页应该可以看到与 Demo 一致的效果。

添加内容

可以按照主题文档按照如下结构添加内容，图片建议使用 0 补齐位数以确保顺序与预期一致。

.
├── content
│  ├── Erwitt
│  │  ├── 1.jpg
│  │  ├── ***
│  │  └── index.md
│  ├── Gruyaert
│  │  ├── 1.jpg
│  │  ├── ***
│  │  └── index.md
│  ├── Info
│  │  └── index.md
│  └── Webb
│     ├── 1.jpg
│     ├── ***
│     └── index.md
└── static
   ├── dot.png
   └── dot.svg

其中 index.md 格式如下。

---
type: _default
layout: single
url: /erwitt/
menu:
  main:
    weight: 3
    identifier: Erwitt
    title: Erwitt
unifiedAlt: '© Elliott Erwitt'
_build:
  publishResources: false
---

其中 type 和 layout 属性应保持不动，url 是页面的相对链接，weight 是页面在菜单栏的权重，决定其排序，identifier 应与文件夹名称保持一致，title 是其在菜单栏中的名称。需要注意，必须有一个页面的 url 属性为 /，建议将 info 或者 about 作为首页（本文使用了 about）。

修改主题

修改网页图标

推荐使用这个工具为图片生成 favicon 文件，生成后将压缩包中内容放置到 D:\Hugo\examplesite\static 中，打开 D:\Hugo\examplesite\config\_default\params.toml，将下述代码注释（添加前面的 # ）。

# svgFavicon = "/favicon.svg"
# svgFaviconFallback = "/favicon.png"

复制 D:\Hugo\examplesite\themes\bridget\layouts\partials\head 的 favicon.html 到 D:\Hugo\examplesite\layouts\partials\head，并替换为以下内容。

{{- if site.Params.favicon -}}
  {{- with site.Params.svgFavicon -}}
    <link rel="icon" type="image/svg+xml" href="{{ . }}" />
    {{- with site.Params.svgFaviconFallback -}}
      <link rel="icon" type="image/png" href="{{ . }}" />
    {{- end -}}
  {{- else -}}
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <link rel="manifest" href="/site.webmanifest">
    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="theme-color" content="#ffffff">
  {{- end -}}
{{- end -}}

修改首页标题

复制 D:\Hugo\examplesite\themes\bridget\layouts\partials\head 的 meta.html 到 D:\Hugo\examplesite\layouts\partials\head，并替换为以下内容。将 <title>{{ $page_title }}</title> 以前的内容替换为下述。

{{/* Title */}}
{{- $page_title := "" -}}
{{- with partial "function/currentMenuItem.html" . -}}
{{if eq .Title "About"}}
  {{ $page_title = printf "%s" site.Title}}
{{else}}
  {{ $page_title = printf "%s" site.Title | printf "%s%s" " | " | printf "%s%s" .Title | printf "%s" }}
{{- end -}}
{{- end -}}

其中 About 应替换为需要作为首页的页面的标题。

添加 OG Image

打开 D:\Hugo\examplesite\layouts\partials\head 并在 {{/* Opengraph */}} 后添加下述代码，其中 OGImage.png 应提前制作并放置在 D:\Hugo\examplesite\static 中。

<metaproperty="og:image" content="/OGImage.png" />

修改文章样式

本文中将 About 页面作为主页，但默认的文章样式可以说是丑陋至极，故稍加加工。将 D:\Hugo\examplesite\themes\bridget\assets\scss\_partial 中的 _article.scss 复制到 D:\Hugo\examplesite\assets\scss\_partial，并修改内容如下。

article {
  padding: var(--space-standard);
  text-align: center;
  max-width: 25em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  p {
    margin-bottom: 1em;
  }

  u {
    text-decoration: underline;
  }

  > h1 {
    font-size: 1.6em;
  }

  > h2 {
    font-size: 1.5em;
  }

  > h3 {
    font-size: 1.375em;
  }
  
  > h4 {
    font-size: 1.25em;
  }
  
  > h5 {
    font-size: 1.125em;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: bold;
    margin: 1.2rem 0;
  }
}
  
@media (max-width: $tablet), (hover: none) {
  article {
    margin-top: var(--nav-height);
  }
}

上传到 GitHub 并发布到 Vercel

使用 GitHub Desktop，选择 File - New repository，输入名称并选择 D:\Hugo\examplesite\public 目录，点击 Create，随后 Publish the repository。打开 Vercel ，登录 GitHub 账号，选择 Add new Project，导入刚刚上传到 GitHub 的 Repo 即可。

设置自定义域名

在 Vercel - Setting - Domains 中添加自己的域名并根据提示配置 DNS 即可。