24 / 03 / 07

「折腾小记」Sh00t. 是怎样建成的

这些天闲来无事(其实是有活不干),又见群友聊起开个小红书做摄影账号,便想着把把网页做起来存图。起初打算用 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,按照需要修改 baseURLtitle,并将 [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 ---

其中 typelayout 属性应保持不动,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\headfavicon.htmlD:\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\headmeta.htmlD:\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 即可。