Introduction Link to heading
Hello, and welcome to my first blog post! I’m so excited to share with you my journey of creating this website using Hugo, a fast and flexible static site generator. I always wanted to write blogs as I have a passion for writing. I never knew that setting up a blog page would be this easy. Static Site Generators (SSGs) have made it easier for many people including newbies as well as professionals in their day-to-day life. In this post, I’ll tell you why I chose Hugo, how I set it up, and what I learned along the way.
Why Hugo? Link to heading
I’ve always wanted to have my own website, but I was intimidated by the complexity and cost of building and hosting one. There are many SSGs available like zola, ssg5 and hugo. I chose to go with hugo for now but I wiuld like to try others as well.
I discovered Hugo a while back, but it took me some time to actually start using it. Here is my first attempt at it. Hugo is a static site generator that lets you create beautiful websites from plain text files. The content is written in Markdown, a simple and easy-to-learn markup language, and Hugo converts it into HTML pages that you can upload to any web server.
Hugo has many advantages over other static site generators. It’s very fast, generating thousands of pages in seconds. It’s very flexible, allowing you to customise every aspect of your site with themes and templates. It’s very powerful, supporting features like taxonomies, menus, pagination, shortcodes, and more. And it’s very easy to use, with a simple and intuitive command-line interface.
Setup Link to heading
Setting up Hugo was surprisingly easy. I followed the official documentation on the Hugo website, which was very clear and helpful. Here are the steps I took:
- I downloaded and installed Hugo on my computer using
winget
. - I created a new site using the
hugo new site
command. This created a folder with some basic files and folders for my site. - I am using the
coder
theme for my website. I used thegit add submodule
command to add it into thethemes
folder. - I configured my site using the
config.toml
file in the root folder of my site. This file contained some global settings for my site, such as the title, language, base URL, etc. I also customized some theme-specific settings, such as the color scheme, fonts, layout, etc. - I created some content for my site using the
hugo new
command. This created some Markdown files in thecontent
folder of my site, with some predefined frontmatter such as the title, date, categories, tags, etc. - I built my site using the
hugo
command. This generated apublic
folder with all the HTML files and assets for my site. - I deployed my site using the
hugo deploy
command. This uploaded thepublic
folder to a web server of my choice. I used Cloudflare Pages, a free and easy-to-use hosting service that integrates well with Hugo.
That’s it! My website was live and ready to be visited by anyone.
Learnings Link to heading
Creating this website with Hugo was a fun and rewarding experience. I learned a lot about web development, Markdown, HTML, CSS, and more. Here are some of the things I learned:
- How to structure and organize my content using folders and files
- How to format and style my content using Markdown syntax
- How to add images, videos, links, tables, lists, etc. to my content using Markdown or HTML
- How to use shortcodes to insert dynamic content or functionality into my content
- How to use taxonomies to categorize and tag my content
- How to use menus to create navigation for my site
- How to use partials and templates to reuse common elements across my site
- How to use live reloading to preview changes in real time
Having set up my site now I can’t wait to post more blogs. See you there.