First, Hugo.. and how to install it ? 🧐

#

Hugo is one of the most popular open-source static site generators. With its amazing speed and flexibility, Hugo makes building websites fun again.

This one was from Hugo’s website, and I completely agree with this sentence. Seriously, Hugo is amazing !

I never learned to do JavaScript or used Angular or another Framework , and I was a bit afraid to learn because the learning curve is intense I think.

Hugo is really a good alternative in my opinion because if you already did some md. files, it’s really easy and all the design, front part is highly simplified.

Everything you need on Linux is :

• Git
• Go
• Dart Sass

Once i’ts done, all you need left to do is to install Hugo (on Arch Linux based, or similars):

sudo pacman -S hugo

Once the installation is done, you have succesfully installed Hugo ! 🎉

If you wan’t to check how it’s done, you can check the GitHub repository :

Deploy our first website ! 🚀

#

First we need to create the directory structure

hugo new site quickstart

Once it’s done, go into the quickstart directory and initialize a git repository in order to clone a theme

git init

Here is the funniest part, you need to choose for a theme, or you can do it from scratch. All the themes are available here.

There are more than 200 themes available, divided in multiple categories such as :

• Blogs
• Portfolio
• Documentations-oriented themes

Along with those categories comes themes that can be modified to fit every categories such as : Blowfish !

This is personnaly what i have choosen for building my website.

What is Blowfish? 🐡

#

As I mentioned earlier, Blowfish is a Hugo theme (but not only!) created by nunocoracao. It’s based on Coco, which was also developed by the same person.

Blowfish is built with Tailwind CSS, a framework that allows you to rapidly build modern websites.

Here is the Blowfish repository:

Advantages of Blowfish

#

• Multi-language support: You can personalize your website to be viewed in thirty languages! 🇨🇳 🇩🇪 🇫🇷 (You can even add more than one language at the same time).
• Design features: A lot of design elements are already implemented, such as automatic image resizing, RTL language support, and more.
• Highly customizable: The interface can be easily customized through configuration files.
• Extensive documentation: You can find plenty of resources on Reddit, GitHub, and other places to help you get started.

How to Install Blowfish?

#

If you’ve decided to use Blowfish, I’ll walk you through the installation process from scratch. There are multiple ways to install it, but since we’ve already installed Hugo, we can follow the official documentation.

Installation without CLI

#

• Using Git submodule (Recommended): This is the easiest and most maintainable installation method.

  1. Navigate to the directory of your Hugo website (which I’ll refer to as quickstart), where we initialized our git repository, and add Blowfish as a submodule:

     git submodule add -b main https://github.com/nunocoracao/blowfish.git themes/blowfish
     

Installation with Hugo Directly

#

If you prefer not to use Git to manage your themes, here’s an alternative method.

1. Go to the directory of your website (quickstart):

   cd quickstart
   

2. Initialize the modules for your website:

   hugo mod init my-project # for local use
   hugo mod init github.com/<username>/<repo-name> # if you created a Git repository
   

3. Create a new configuration file in your repository, then inside it, create a new file named module.toml:

   mkdir config/_default/
   touch module.toml
   

4. Open the module.toml file and add these lines to link Blowfish with Hugo:

   nvim module.toml # or nano module.toml
   
   [[imports]]
   disable = false
   path = "github.com/nunocoracao/blowfish/v2"
   

5. Run the Hugo server to update your files and download the modules automatically:

   hugo server
   

What is the hugo server command?

#

The hugo server command is extremely useful because it launches a local server on your machine, allowing you to preview your website. It will also automatically refresh whenever you make changes. After running this command, you can view your website at the address displayed in the terminal:

Web Server is available at //localhost:1313/ (bind address 127.0.0.1)

For me and by default it’s localhost:1313. You should see the same for you if you didn’t started to modify the config files.

What’s next ? 🚀

#

Now that we have succesfully installed Blowfish. You can check my next article to configure your website !