bridget/docs.md

Contents

• Prequisites
• Installation
  • Hugo Modules (Recommended)
  • Git Repository (For Customizations)
• Content Management
  • index.md
    • Front Matter
    • Markdown Content
  • Favicon
• Configuration
  • hugo.toml
  • markup.toml
  • outputs.toml
  • params.toml
  • sitemap.toml
• Usage
• Customizations
  • Change Font
  • Add a Custom Analytic Script

---

Prequisites

Contents

• Hugo (extended), minimum required version can be seen in the theme.toml

  ❯ hugo version
  hugo v0.152.2+extended+withdeploy darwin/arm64 BuildDate=unknown VendorInfo=nixpkgs
  

• Dart Sass (or install it with npm install -g sass-embedded)

  ❯ sass --embedded --version
  {
    "protocolVersion": "2.4.0",
    "compilerVersion": "1.70.0",
    "implementationVersion": "1.70.0",
    "implementationName": "dart-sass",
    "id": 0
  }
  

• pnpm and Node.js, please note that these two are only needed for customizations or development.

  ❯ pnpm --version && node --version
  10.20.0
  v22.20.0
  

Installation

Contents

Hugo Modules (Recommended)

Contents

Important

Checkout https://gohugo.io/hugo-modules/use-modules/#prerequisite before using Hugo Modules.

First turn your site into a Hugo module (in case you haven't done it yet):

hugo mod init github.com/me/my-new-site
# or whatever you like, it doesn’t need to be a valid GitHub repo link.
hugo mod init blablabla

Then import the theme as a dependency adding the following line to the module section of your site's configuration file.

# config/_default/hugo.toml
[module]
[[module.imports]]
path = "github.com/Sped0n/bridget/v2"

If you want to upgrade the theme, just run:

hugo mod get -u

Git Repository (For Customizations)

Contents

First clone the repository into your themes directory:

# latest version (main branch, might be unstable)
git clone https://github.com/Sped0n/bridget themes/bridget

# and you can checkout to a specific stable version, see https://github.com/Sped0n/bridget/releases
cd themes/bridget
git checkout v1.0.0

If you are already using Git for your site, you can add the theme as a submodule by running the following command in the root directory of your Hugo site:

git submodule add https://github.com/Sped0n/bridget themes/bridget

Content Management

Contents

The content is where the pictures/text is stored, while the static refers to the website icons.

.
├── 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

Contents

Front Matter

Contents

Inside each index.md file, there is a front matter like this:

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

• url is the href link to this page, in this case, you can visit this page with blabla.com/erwitt;
• main is the entry to menu;
  • weight determines the position of this link in the navigation bar, with the first one being 1, the second one being 2, and so on;
  • identifier should be the same as the name of the upper-level directory;
  • title refers to the text that appears on the navigation bar;
• unifiedAlt is optional, If you left it empty, the alt attribute of the image will default to its file name; if it is set, the alt attributes of all images will be unified to the value you have set;

Markdown Content

Contents

• If this is a showcase page:
  • No need to write anything in index.md.
  • Place the images in the same directory as index.md.
• If this is an information page:
  • You can write anything in index.md, and it will be rendered as HTML.
  • However, please note that the CSS for the information page only provides simple styling for text. If you have any requirements beyond text and the browser rendering does not meet your expectations, please modify _article.scss.

Favicon

Contents

As for the website icon, place the files under static directory and then go to config part for further reading.

Configuration

Contents

You can simply copy exampleSite/config to the root directory, with some minor modifications and you should be good to go.

.
└── config
   └── _default
      ├── hugo.toml
      ├── markup.toml
      ├── outputs.toml
      ├── params.toml
      └── sitemap.toml

hugo.toml

Contents

First, what you need to modify is the baseURL and title:

# timeout
timeout = "1200s"
# your website url
baseURL = 'https://bridget-demo.sped0n.com' # <-- MODIFY ME
# website title
title = 'Bridget' # <-- MODIFY ME
# don't touch this
disableKinds = ["section", "taxonomy", "term", "home"]
# robots.txt
enableRobotsTXT = true

Depend on which installation method you choose, you need to modify the module section:

• If you use Hugo Modules:

  [module]
  [[module.imports]]
  path = "github.com/Sped0n/bridget/v2"
  

• If you use Git Repository:

  [module]
  # This is the relative path to hugo theme directory([official doc](https://gohugo.io/hugo-modules/configuration/#module-configuration-top-level))**.
  replacements = "github.com/Sped0n/bridget/v2 -> ../.."
  [[module.imports]]
  path = "github.com/Sped0n/bridget/v2"
  

markup.toml

Contents

Just copy it.

outputs.toml

Contents

Just copy it.

Contents

params.toml

Contents

Detailed description in the comments.

sitemap.toml

Contents

https://gohugo.io/templates/sitemap-template/#configuration

Usage

Contents

• Ensure sass --embedded --version return a valid result.
• Run hugo command.

For further reading, you can refer to the scripts field of package.json.

Customizations

Contents

Important

Please make sure you have installation with Git.

If you want to try some changes on the exampleSite, below are some commands you might need:

• pnpm install to install dependencies.
• pnpm run dev to start a dev server (http://localhost:1313).
• pnpm run build to update artifacts.

Change Font

Contents

These are the places you need to focus on:

• assets/scss/_core/_font.scss (@font-face)
• assets/scss/_core/_typography.scss (body.font-family)
• layouts/partials/head/link.html (preload)
• static/lib/fonts/GeistVF.woff2 (font file itself)

Add a Custom Analytic Script

Contents

Go to layouts/_default/baseof.html:

<!doctype html>
<html lang="{{- site.LanguageCode -}}">
  <head>
    /* ---------- INSERT HERE ---------- */
  </head>
  <body lang="{{- site.LanguageCode -}}">
    <div class="analytics">/* ---------- OR HERE ---------- */</div>
  </body>
</html>