5. Newsletter

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.

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.

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.

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.

6. Google Analytics

Digital garden theme utilizes the Hugo’s [internal template](internal templates) for Google analytics and so both Google analytics v3 and GA v4 (gtag) are supported. Add your UA-PROPERTY_ID or G-MEASUREMENT_ID to config.toml Google Analytics v3 (analytics.js) googleAnalytics = 'UA-PROPERTY_ID' Google Analytics v4 (gtag.js) googleAnalytics = 'G-MEASUREMENT_ID' → Configure Metatags

7. Metatags

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 // config.toml title = "Personal Digital Garden" [Params] description = "My Digital Garden on the Internet" images = ['/digital-garden-logo.png'] Setting the above values will be used as default for all pages unless its overridden in a specific page’s markdown.

Articles

1. Theme Installation

2. Structure

3. Primary Menu

4. Social Menu

5. Newsletter

6. Google Analytics

7. Metatags

5. Newsletter

Buttondown

Substack

Revue

How to find your Revue URL to use