This article is designed to offer a comprehensive understanding of Hugo, Static Site Generators (SSGs), Content Management Systems (CMSs), and the advantages of SSGs over CMSs. We’ll begin by defining these concepts before delving into specific details.

Explaining Hugo and Static Site Generators⌗

A Static Site Generator is a framework for creating static websites in a dynamic manner. In this context, “dynamic” refers to the ability to separate every structure on a web page, such as Header, Main, Article and Section, Footer, into independent sub-sections that can be reused, similar to creating layouts for dynamic websites.

Now, what sets static and dynamic websites apart?

The key difference lies in how the website responds to “data” requests. While dynamic websites can provide information to the server (such as credential information or credit card details), a static website displays only what the server already possesses, without the ability to receive any data.

Static websites often take the form of blog pages (e.g., Learn With Ghaniy) or profile pages for companies or individuals. Google’s Blogger also falls into this category. Hugo, our focus here, is just one of many SSG tools, alongside others like Jekyll, Gatsby, Hexo, VuePress, and more.

Detailed comparisons between static and dynamic websites will be discussed in the next article.

Advantages of SSG Over CMS⌗

CMS is commonly used to create dynamic websites without the need to build the website from scratch. It allows users to set up a website even without any programming knowledge. CMS is often employed for blogs, company profiles, and online shopping sites.

So, what advantages does Hugo (and SSGs in general) have over CMSs like Wordpress?

  1. SSG offers more creative freedom in appearance, especially for those with basic web programming skills.
  2. SSG requires fewer resources compared to CMS, as it doesn’t need a special server for Server Side language and its Database.
  3. SSG is considered safer than CMS since static websites don’t process client requests.
  4. Many free hosting providers support SSG, such as Netlify, Github Pages, Cloudflare Pages, Vercel, making integration easier compared to CMS.

However, SSG comes with its own set of disadvantages:

  1. Hugo (and SSGs in general) presents only static content.
  2. Initial settings are required to start using SSG.
  3. Basic knowledge of Git, Linux Terminal/Windows Command Line, and basic web programming is needed to use SSG effectively.

Now that we’ve established the fundamental differences between SSG and CMS, consider your needs before proceeding to the preparation for Hugo installation.

Installation Preparation⌗

Before you begin, ensure Git is installed on your computer by checking the version with the command git --version. If you receive an error like git: command not found, it indicates that Git is not installed.

Skip this preparation if Git is already installed by proceeding to the Snap Installation step.

Git Installation⌗

Follow these steps:

  • Update the Ubuntu repository with sudo apt update -y && sudo apt dist-upgrade -y.
  • Wait for the update to complete.
  • If done, install Git with sudo apt install git.
  • Confirm the successful installation with git --version.
  • Ensure you have an account with a Git provider (choose one: Github, Gitlab, Atlassian Bitbucket).
  • Configure your Git Username globally with git config --global user.name "yourUsername".
  • Configure your Git Email globally with git config --global user.email "[email protected]".
  • Start practicing Git by reading tutorials and documentation.

Snap Installation⌗

There are several ways to install Hugo, and one method is using the Snap Package. For Linux users, especially on Ubuntu, using the Snap Package is highly recommended for its latest updates and minimal bugs.

Ensure Snap is installed on your computer by checking the version with snap --version. If it’s installed, proceed to the Hugo Installation step. If not, you’ll need to install Snap.

Follow these steps:

  • Update the Ubuntu repository with sudo apt update -y && sudo apt dist-upgrade -y.
  • Wait for the update to complete.
  • If done, install Snap with sudo apt install snapd.
  • Test the success of the Snap installation with sudo snap install hello-world.
  • Type hello-world.
  • If the Snap command doesn’t appear, try restarting your computer.

Hugo Installation⌗

If the pre-installation requirements are met, it’s time to install Hugo.

Follow these steps:

  • Type the command snap install hugo.
  • Once finished, ensure Hugo is installed by running hugo version.
  • If an error occurs, try closing the current terminal and opening a new one, then enter the above command.
  • If it still doesn’t work, try restarting your computer. Repeat the installation steps above if errors persist.

FINISHED.

Don’t forget to read the official documentation from Hugo 😉

In the next article, we’ll discuss creating a new Hugo project, installing themes, and configuring basic Hugo settings. 🔥

Hope it helps…