How I built my Digital Garden using Hugo

A Digital Garden is a collection of notes, resources, ideas, quotes, or summaries shared in public. Unlike a blog post or a published essay, there is no publication date in a digital garden. Everything published in a Digital Garden is evergreen and grows over time. Nothing is finished work and the garden evolves over time. Digital Gardens are usually lightweight and focuses on text & content over fancy styling features of modern websites.

CHECK MY DIGITAL GARDEN

Features

Publication Dates are not important to Digital Gardeners. Posts are connected via references or common themes. There are no featured posts or chronological list of items. Readers can enter through any note, follow any trail, and exit as they wish.

Digital Gardens are constantly evolving over time and are never complete. There is no pressure to publish a perfect post in digital gardens as notes grow over time just like plants in a garden.

Every Garden is unique as the patterns and relationships between notes vary from person to person. Gardens are a way of learning in public, thereby opening more possibilities for collaboration.

How I built my Digital Garden using Hugo

Since today’s internet is full of blogs and websites filled with scripts and trackers, I decided to keep my Digital Garden simple. I was already pissed with the performance of WordPress on this blog and wanted something lightweight. I explored various static website frameworks and finally decided to build one using Hugo. Hugo was the obvious choice as I already use Obsidian which uses markdown for research and was excited to learn a new framework from scratch.

This is not an extensive tutorial that gives you step-by-step instructions on how to set up a website using Hugo. If you’re familiar with some web development or are curious enough, Hugo is pretty easy to learn. If you’re looking to build something quick with minimal code, look at some No-Code options compiled on Ness Labs.

Setting up Hugo

Install Hugo on your computer. [Read more]

Create a folder where you want to build your websites.

Open Terminal or Command Prompt and navigate to that folder(For eg. “C:\Users\rishi\Desktop\digital-garden”) [Read more to learn navigation in terminal]

Type the following code: “hugo new site example”. This command will create a new site called example. [Read more]

Now you need to add a theme. For my digital garden, I use a theme called ‘Hugo Bear Blog‘. You can download other themes from the Hugo theme library. Download the theme package from the corresponding website, in this case from Github.

Unzip the file and copy the folder inside the “themes/” directory in your website folder.

Navigate to “themes/hugo-bearblog/exampleSite/” and copy the config.toml file. Paste the config.toml file inside the main directory.

Open the config.toml file using a text editor and make necessary changes. Make sure that the theme name in config.toml matches with the theme folder inside the “themes/” directory.

Setting up the server

In the terminal type “hugo server”. The site will be compiled and you will get a localhost address to access the site live from the browser.

Using Atom to edit config.toml file.

Using an editor like Atom, make necessary changes in the theme to customise as per your wish. To convert the theme into my liking for the digital garden, I removed codes that were used for displaying dates and sorting lists. If you want to duplicate my website, you can access the theme from here.

To create a new post, type ” hugo new cycling”, which will create a new post called cycling.

Once you have done the necessary changes locally, press Ctrl+C to stop the server. Type ” hugo” to compile the website. This will create the static Html for your website to be hosted inside “public/” directory.

Using Filezilla to manage files on the server

Using an FTP client called Filezilla, I upload the contents of the public directory to the corresponding domain on my server. I have set it to automatically synchronise so that every time I make any change, Filezilla automatically updates my website on the cloud.

If you don’t have hosting of your own, you can use Gitpages or Netlify. For me, building this Digital Garden was a lot of fun. I would definitely recommend you to build one from scratch so that you can customise it as per your liking.

If you’re trying to build a Digital Garden and need assistance, contact me so that I can assist you in setting up one.