Articles

1. Theme Installation

Create a new hugo website or open your existing hugo site.

Add the theme to your hugo site

Use as a git submodule:

git submodule add https://github.com/apvarun/digital-garden-hugo-theme.git themes/digitalgarden

Clone the repository (one-off, updating the theme may be harder later):

git clone https://github.com/apvarun/digital-garden-hugo-theme.git themes/digitalgarden

Setup

Copy package.json, package-lock.json and tailwind.config.js files from the theme/digitalgarden folder to the root folder of your the website
Run npm install to install required packages for theme
Run npm i -g postcss-cli to use PostCSS with Hugo build
Set theme = 'digitalgarden' in config.toml
Run npm run dev to start your local server

When deploying to services like Netlify or Vercel, use the following command for building your site:

2. Structure

Understand the structure of the theme’s setup to create content for your website.

Theme’s content structure

.
├── ...
├── content                 # Hosts all Markdown content
│   ├── articles            # Contains the list of markdown files for notes/posts
│   │   ├── article-1.md
│   │   ├── article-2.md
│   │   └── article-3.md
│   └── portfolio           # List of portfolio projects or case studies
│       ├── project-1.md
│       └── project-2.md
├── data                    # Test files (alternatively `spec` or `tests`)
│   └── stack.json          # Data used for rendering the list in Stack page
└── ...

Note that articles, portfolio and also stack pages require you to create _index.md inside of it. Refer the exampleSite in theme.

3. Primary Menu

The sidebar of the theme uses the main menu. Add all the items for your sidebar navigation in this menu.

// config.toml

[menu]
[[menu.main]]
  name = 'Home'
  url = '/'
  weight = 1
[[menu.main]]
  name = 'Content'
  params.header = true
  weight = 2
[[menu.main]]
  name = 'Articles'
  url = '/articles'
  weight = 3

name → Title of the menu item
url → Path to navigate
weight → Used to decide the order of menu items
params.header → Display menu item as header

If the link points to an external website, the external icon is already displayed.

4. Social Menu

The social menu can be used to configure all the social icons in the sidebar. Add links to your social media in the website config to show the icons.

[[menu.social]]
  name = 'Twitter'
  url = 'https://twitter.com'
  weight = 1

The name of the social menu needs to be unique and should be one of the supported values.

Supported values for the social menu item name:

Twitter
GitHub
LinkedIn
Instagram
Mastodon
Dribbble
Codepen
Twitch
Email
RSS

→ Configure newsletter

5. Newsletter

The theme supports a subscription to multiple newsletter providers.

Buttondown
Substack
Revue

Buttondown

[Params.newsletter.provider] = “buttondown”

Copy the action url from your buttondown admin dashboard and add it to [Params.newsletter.path] in config.toml

Substack

[Params.newsletter.provider] = “substack”

Setting up substack is the easiest. Just add your substack newsletter URL (applicable for custom domains also) to [Params.newsletter.path] in config.toml

Note that since substack doesn’t have a native API for subscription. The theme uses the api from substackapi.com which is in no way associated to Substack itself.

Metatags are used to provide additional information about the page, usually used by search engines and social media websites / apps. It allows to customize your page’s title, description, preview image and more.

Configure default tags