hugo-typo/wiki/setup.md
Sangeeth Sudheer 5bbe13fd43
Add breadcrumbs config to hide current page and change home text
Changes `breadcrumbs` config into an object to add customizations such as hiding current page and changing the text of
the home crumb.

By default, Typo will now show breadcrumbs. If breadcrumbs are enabled, the current default of showing the
current page crumb is preserved.

BREAKING CHANGE: `breadcrumbs` is now an object so existing `breadcrumbs = <true/false>` line in config needs to be changed.
2025-03-09 01:50:55 +05:30

3.9 KiB

title date summary description toc readTime autonumber math showTags hidePagination
Setup 2024-10-12 How to setup a Hugo's website using Typo as a theme. Getting started with Typo theme false false true false false true

Installation

Below are the ways to get started with the Typo theme.

Getting Started

First of all, create a new Hugo project as follows:

hugo new site <your site name> --config toml

Downloading the Theme

Themes are contained in the /themes directory, there are different ways to get Typo there

Submodule - Recommended

git submodule add --depth=1 https://github.com/tomfran/typo.git themes/typo
git submodule update --init --recursive

Hugo module

Installing Typo as a Hugo module requires Go to be installed in your development environment.

# Initialize your project as a Hugo module
hugo mod init <module_name>
# Install the theme
hugo mod get github.com/tomfran/typo

Then add the following to hugo.toml:

[module]
[[module.imports]]
path = "github.com/tomfran/typo"

Finally, remove the theme = 'typo' parameter from hugo.toml.

Cloning

git clone https://github.com/tomfran/typo themes/typo --depth=1

You need to keep it updated manually by pulling.

Manual download a release

Finally, you can manually download a release and unzip it into the appropriate folder.

Sample Config

Use those to get started with the theme. You can find a complete overview of the available features here.

Here you can find a repo using this theme.

Site Config

Here is a sample hugo.toml config to get started with the theme.

baseURL = 'https://example.org/'
languageCode = 'en-us'
title = 'My website'
theme = 'typo'

# Google analytics code
googleAnalytics = "G-xxxxxxxxx"

[taxonomies]
tag = 'tags'

[params]
# Meta description
description = "A Tech Blog"

# Appearance settings
theme = 'auto'
colorPalette = 'default'
hideHeader = false

# Intro on main page, content is markdown
homeIntroTitle = 'Hi!'
homeIntroContent = """
I am an Italian Software Engineer with a strong foundation in computer science and a passion for solving complex problems.
I am interested in a range of topics, including algorithms, distributed systems, databases, and information retrieval.
"""

# Collection to display on home
homeCollectionTitle = 'Posts'
homeCollection = 'posts'

# Lists parameters
paginationSize = 100
listSummaries = true
listDateFormat = '2 Jan 2006'

# Breadcrumbs (Uncomment to disable)
# [params.breadcrumbs]
# enabled = false

# Social icons
[[params.social]]
name = "linkedin"
url = "https://www.linkedin.com/in/user/"

[[params.social]]
name = "medium"
url = "https://medium.com/@user"

[[params.social]]
name = "github"
url = "https://github.com/user"

# Main menu pages
[[params.menu]]
name = "home"
url = "/"

[[params.menu]]
name = "posts"
url = "/posts"

[[params.menu]]
name = "about"
url = "/about"

# Syntax highlight on code blocks
[markup]
[markup.highlight]
style = 'algol'

# Giscus comments
[params.giscus]
enable = false
repo = "user/repo"
repoid = "repoId"
category = "General"
categoryid = "categoryId"
mapping = "pathname"
theme = "preferred_color_scheme"

Post Config

Sample post config.

---
title: "Log-Structured Merge Tree"
date: "2023-11-12"
summary: "An LSM Tree overview and Java implementation."
description: "An LSM Tree overview and Java implementation."
toc: true
readTime: true
autonumber: true
math: true
tags: ["database", "java"]
showTags: false
hideBackToTop: false
fediverse: "@username@instance.url"
---

Support

If you use the theme or found it useful you can support me by leaving a star to Typo's Github repository or opening issues and PRs with fixes or new features.