How I made a blog with HUGO and Digital Garden Theme

Planted March 4, 2024

Introduction:

Welcome to my latest tech adventure where I’ve embraced the art of digital gardening using Hugo and the mesmerizing Digital Garden Theme. Digital Gardens are a unique and personal way to grow your ideas, knowledge, and thoughts in a non-linear fashion, akin to nurturing plants. My aim was to create a space that encouraged learning and development both for myself and for readers like you. In this tutorial, I will share the process I went through to build my own blog with this setup, from initial setup to customization.

What You Will Need:

• A basic understanding of web technologies (HTML, CSS, Git)
• A text editor (e.g., VSCode, Sublime)
• Git installed on your machine
• A GitHub account
• Hugo static site generator
• Digital Garden Hugo Theme

Why Every Computer Scientist Should Consider Blogging

• Embarking on a blogging journey can be especially advantageous for individuals with a computer science background. Here’s why:
• Sharing: Use your blog to demystify complex concepts for others in the tech community. Your tutorials and insights can be incredibly valuable for fellow learners.
• Portfolio Building: Present your skills and projects through blog posts. This not only showcases your prowess but also reinforces your learning.
• Professional Growth: Regularly writing about technical topics enhances your ability to communicate effectively, a key skill in any tech role.
• Networking: A blog opens doors to new connections with peers and industry leaders, potentially leading to career opportunities or collaborations.
• Innovation: Blogging gives you a platform to explore and iterate on new ideas, often sparking further creativity and problem-solving. Remember, your digital garden is more than just a blog; it’s a reflection of your intellectual growth and a beacon for your professional presence online. With that inspiration in hand, let’s jump into setting up your blog with Hugo and the Digital Garden Theme.

Setting Up the Project

Step 1: Install Hugo

Hugo is a static site generator that is incredibly fast and easy to use. To install Hugo, follow the instructions on the official Hugo website. Once installed, you can verify the installation by running the command hugo version in your terminal.

if you are using a Mac, you can install Hugo using Homebrew:

brew install hugo

Step 2: Create a New Hugo Project

To create a new Hugo project, run the following command in your terminal:

hugo new site <any_name>

Replace <any_name> with the name of your project. This command will create a new Hugo project with the specified name.

this will create a new directory with the name of your project, a lot of boilerplate folders for organising your code. Navigate to the project directory and initialize a new git repository by running the following command:

git init

after this you can publish the code to any platform of your choice.

Step 3: Add the Digital Garden Theme or any theme of your choice

First Choose a theme for your blog. In this tutorial, I will be using the Digital Garden Theme. To add the Digital Garden Theme to your Hugo project, navigate to the project directory and run the following command:

git submodule add https://github.com/apvarun/digital-garden-hugo-theme.git themes/digitalgarden

navigate to the themes/digitalgarden directory and run the following command to install the theme dependencies:

cd my-blog/themes/digitalgarden
npm i -g postcss-cli

Step 4: Configure the Website to use the theme

To configure the website to use the Digital Garden Theme, open the config.toml file in the root directory of your Hugo project and add the following lines:

theme = "digitalgarden"

Step 5: Understand the structure

The Digital Garden Theme comes with a predefined structure for your blog. Here’s a brief overview of the 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.json          # Data used for rendering the list in Stack page
└── ...

Each of these folders should contain a markdown file the name _index.md which will contain the metadata for the folder.

---
title: <Page_name>
---

Change the <Page_name> with whatever the page is about.

Step 6: Add navigation

The Digital Garden Theme comes with a predefined navigation bar. To add navigation links, open the config.toml file in the root directory of your Hugo project and add the following lines:

[[menu.main]]
    name = "Home"
    url = "/"
    weight = 1

[[menu.main]]
    name = "Articles"
    url = "/articles"
    weight = 2

[[menu.main]]
    name = "Portfolio"
    url = "/portfolio"
    weight = 3

add the social links if needed

[[menu.social]]
    name = 'Twitter'
    url = 'https://twitter.com/rupam_barui'
    weight = 1
[[menu.social]]
    name = 'GitHub'
    url = 'https://github.com/Trident09'
    weight = 2
[[menu.social]]
    name = 'LinkedIn'
    url = 'https://www.linkedin.com/in/codetrident'
    weight = 3
[[menu.social]]
    name = 'Instagram'
    url = 'https://instagram.com/rup.am.I'
    weight = 4
[[menu.social]]
    name = 'Email'
    url = 'mailto:rupambarui.17@gmail.com'
    weight = 5

Step 7: Add content

Now that the basic setup is complete, you can start adding content to your blog. Create a new markdown file in the content/articles directory for each article you want to publish. The markdown file should contain the metadata at the top and the content below it.

---
title: "How I made a blog with HUGO and Digital Garden Theme"
date: 2024-03-04
images:
    - https://raw.githubusercontent.com/apvarun/digital-garden-hugo-theme/main/images/digital-garden-logo.png
---

content goes here

Step 8: Run the Hugo server

To view your blog, run the following command in your terminal:

hugo server

This will start a local server at http://localhost:1313. Open your web browser and navigate to this URL to view your blog.

Step 9: Build the site

Once you are satisfied with the changes, you can build the site by running the following command in your terminal:

hugo -t <ThemeName>

replace the <ThemeName> with the name of the theme you are using.

Hosting

Once the site is built, make another repository on GitHub.
This repo will contain the static files generated by Hugo.

Add a git submodule to the new repository, and make sure before adding the submodule the new repository has at-least one branch and at-least one file.

git submodule add -b main <URL of the new repository> public

now to push the code to the new repository, run the following commands:

git add .
git commit -m "commit message"
git push
cd public
git add .
git commit -m "commit message"
git push

now host the repository containing the static files on any platform of your choice. I have used vercel for hosting my blog.

Conclusion

And that’s it! You’ve successfully created your own blog with Hugo and the Digital Garden Theme. You can now start adding content, customizing the theme, and sharing your knowledge with the world. Happy blogging!

Another Important thing