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 Dribbble Codepen Twitch Email RSS → Configure newsletter
5. Newsletter
The theme supports a subscription to a Revue newsletter.
Add your revue /add_subscriber URL to Params.newsletter.path in your config.toml. Once done, the newsletter widget will start showing up in website’s sidebar, allowing your visitors to subscribe to your newsletter.
How to find your Revue URL to use Login to your Revue account and go to to Account Settings, then the Integrations tab. Scroll to the bottom, and click on Learn more in Signup forms section.
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, usualy 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.