7. Metatags
Planted December 18, 2021
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.
Customize specific page’s tags
Open the markdown file of the page for which you need to customize the tags and set the following properties
// custom-page.md
title = 'Custom Page'
description = "My Custom page in the Digital Garden"
images = ['/custom-page.png']
These values will be used for open graph tags and twitter cards.
If you like this theme, support by sharing it with friends on Twitter － 
Random 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.
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.
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.
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.
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