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 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. Digital Garden is evergreen 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 was the obvious choice as I already use which uses for research and was excited to learn a new framework from scratch. Hugo Obsidian markdown This is not an extensive tutorial that gives you 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 . step-by-step instructions 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 , I use a theme called ‘ ‘. You can download other themes from the . Download the theme package from the corresponding website, in this case from Github. my digital garden Hugo Bear Blog Hugo theme library 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 , 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 . Atom 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 , 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. Filezilla If you don’t have hosting of your own, you can use or . For me, building this 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. Gitpages Netlify Digital Garden If you’re trying to build a Digital Garden and need assistance, so that I can assist you in setting up one. contact me

How I built my Digital Garden using Hugo

Too Long; Didn't Read

Company Mentioned

@rishikesh

RELATED STORIES