How I Started My Blogging Site With Hugo

In this article i would be explaining how i started my blogging site with hugo My Developer

As a developer passionate about sharing my knowledge and love for programming with the world, I recently decided to start a blog to document my journey and help others. After researching various options, I chose Hugo because of its speed, flexibility, and simplicity. This is the story of how I set up my blog with Hugo, step by step.

1. Discovering Hugo

When I first stumbled upon Hugo, I was impressed by its ability to transform plain text written in Markdown into beautifully rendered websites. The speed of Hugo stood out—I learned it could generate my entire site in milliseconds, even if my blog eventually grew to hundreds of posts.

The flexibility of Hugo’s themes and customizable layouts meant I could create a site that perfectly reflected my personality. Most importantly, Hugo’s simplicity allowed me to focus on writing, while it handled the complexities of building a professional-looking blog.

Unlike traditional dynamic sites that require backend servers and databases, Hugo generates static HTML files. I realized this made my site faster, more secure, and easier to host on platforms like GitHub Pages or Netlify.

2. Preparing for the Journey

Before diving into building my site, I ensured I had the necessary tools:

Git: To manage my blog’s content and themes.
A Code Editor: I chose Visual Studio Code for writing and editing files.
A Hosting Platform: I planned to use Netlify for its simplicity and free tier.

Although Hugo is written in Go, I didn’t need to install Go since Hugo provides precompiled binaries for easy installation.

3. Installing Hugo

I eagerly installed Hugo by following these steps:

Download Hugo: I visited the Hugo releases page and downloaded the version compatible with my operating system.
Install Hugo: Depending on OS, use appropriate commands for installing Hugo. I have changed my machines and developer environment from windows to ubnutu and vice versa. Therefore i have used both methods.
- On Linux/macOS:
```
1sudo apt install hugo
```
- On Windows: I used Chocolatey:
```
1choco install hugo-extended
```
Verify Installation: To confirm Hugo was installed correctly, I ran:
```
1hugo version
```

4. Building the Foundation

I opened my terminal and started building my blog by creating a new Hugo site:

1hugo new site my-tech-blog

This command generated a new directory structure tailored for Hugo. I explored the folders and files inside my my-tech-blog directory, gaining insight into how Hugo organized content, layouts, and configurations.

5. Designing the Look

I wanted my blog to be visually appealing, so I explored the Hugo Themes directory. After finding a clean and minimalist theme, I added it to my project:

1git init
2git submodule add https://github.com/mumehta/hugo-theme-cleanwhite.git my-tech-blog/themes/hugo-theme-cleanwhite

I then updated my config.toml file to specify the theme:

1theme = "hugo-theme-cleanwhite"

With my theme in place, I began to see my blog take shape.

6. Writing the First Post

I was excited to craft my first blog post. I created a new post file:

1hugo new posts/welcome-to-my-blog.md

I edited the Markdown file to write my introduction:

 1---
 2title: "Welcome to My Blog"
 3date: 2016-10-31
 4description: "Introducing my new tech blog built with Hugo."
 5tags: ["introduction", "tech"]
 6
 7---
 8> “Yeah It's on. ”
 9
10
11## Hello World!

7. Previewing the Blog

I started Hugo’s built-in development server to preview my blog:

1hugo server -D

I opened my browser and visited http://localhost:1313 to view my site. The -D flag included draft posts, allowing me to tweak my content before publishing.

8. Bringing It All Together

Satisfied with my initial setup, I generated the static files for my site:

1hugo

This command created a public directory containing all the files needed for deployment.

I chose Netlify to host my blog. I followed these steps to deploy my site:

Connected my GitHub repository to Netlify.
Configured Netlify to use the build command hugo and publish directory public.
Deployed my site with a single click.

In no time, my blog was live and ready to welcome readers.

10. Adding a Personal Touch

To make my blog truly my own, I personalized it by:

Modifying the config.toml file to include my blog title, description, and social media links.
Adding custom CSS to tweak the theme’s appearance.
Writing additional posts to share my knowledge and experiences.

11. Reflecting on the Journey

My journey with Hugo was rewarding, showcasing how easy it is to build and deploy a blog using this static site generator. Hugo’s simplicity and speed empowered me to focus on what truly mattered: sharing my voice with the world.

If my story inspires you, why not start your own Hugo blog today? Embrace the process, experiment with themes, and enjoy creating a space that reflects your unique perspective!