Having a personal website or blog is no longer just a hobby; it is a necessity for building a brand and sharing information effectively. However, many beginners feel intimidated by the complexity of traditional Content Management Systems (CMS), which are often slow and prone to security issues.
If you are looking for a lightweight, ultra-fast alternative where you have full control over your content, a Static Site Generator (SSG) is the solution. Hugo is one of the world’s fastest frameworks, allowing you to build a website in just seconds.
In this article, we present a Hugo blog creation tutorial using the Blowfish theme, which is modern and highly flexible. This guide is designed step-by-step so that even beginners can have a professional blog ready to go in no time.
Preparation and Prerequisites #
Before diving into the technical steps, ensure you have the following tools installed on your device:
- Git: Used to manage code versions and install the theme as a submodule.
- Go: The underlying programming language for Hugo, required for modules to run smoothly (minimum version 1.12).
- Hugo: The main engine for building your blog (the extended version is recommended).
- Text Editor: An application like VS Code to edit configurations and write content.
- Terminal/Command Line: To run Hugo and Git commands.
Step-by-Step: Creating a Hugo Blog with Blowfish #
Here is the process for building your website from scratch until it is ready to run locally.
1. Installing Hugo on Your Device #
The first step is to ensure Hugo is installed on your operating system. For macOS or Linux users, the easiest way is using Homebrew.
brew install hugoTechnical Reasoning: Using a package manager like Homebrew simplifies version management and allows for automatic Hugo updates in the future without having to download binaries manually.
2. Creating a New Hugo Site #
Once installed, create your blog project folder structure using Hugo’s built-in generator command.
hugo new site my-blog
cd my-blogTechnical Reasoning: The hugo new site command automatically creates the scaffolding or directory structure—such as content, layouts, and themes folders—needed for Hugo to recognize the project.
3. Installing the Blowfish Theme as a Submodule #
Now, we will add the Blowfish theme. The most recommended method is using a Git submodule.
git init
git submodule add -b main https://github.com/nunocoracao/blowfish.git themes/blowfishTechnical Reasoning: Using submodules allows you to lock the theme version to a specific repository. It also makes the update process easier later on without mixing the theme code with your main content code.
4. Configuring Theme Files #
Blowfish requires specific configuration files for all its features to work. Delete the default hugo.toml file in the root folder, then copy the configuration folder from the theme.
# Delete the default configuration file
rm hugo.toml
# Copy the configuration files from Blowfish to your project's config folder
mkdir -p config/_default
cp themes/blowfish/config/_default/* config/_default/Technical Reasoning: Blowfish uses a folder-based configuration system (config/_default/) to separate settings for menus, languages, and other parameters. This keeps site management more organized than using a single large file.
graph TD
A[Start] --> B[Install Hugo & Git]
B --> C[hugo new site]
C --> D[Git Submodule Add Blowfish]
D --> E[Copy Config Files]
E --> F[hugo server]
F --> G[Done]
5. Running the Local Server #
To see the temporary results, run Hugo’s built-in development server.
hugo serverOpen your browser and go to http://localhost:1313. If successful, you will see the Blowfish site structure, even if it is still empty.
6. Writing Your First Article #
Create new content using the hugo new command in the terminal.
hugo new posts/my-first-post.mdEdit the file in your text editor and make sure to change the status from draft: true to draft: false so the article appears on the homepage.
Why Choose Hugo and Blowfish? #
Hugo stands out because of its incredible speed compared to other SSGs like Jekyll or Gatsby. Hugo can process thousands of pages in seconds, meaning you don’t have to wait long for the build process or to see real-time changes while writing. Additionally, because Hugo is delivered as a single binary, you don’t have to worry about library dependencies or third-party packages that often cause system conflicts.
From a security standpoint, the website generated by Hugo is a collection of pure static HTML files. The absence of a database or server-side processing means there are no vulnerabilities for common attacks like SQL injection or CMS exploits. This makes your blog much more secure and very cost-effective to host, as static files can be placed on free services like Firebase or GitHub Pages.
On the other hand, choosing the Blowfish theme gives you design flexibility without having to write CSS code from scratch. Blowfish supports modern color schemes (like Neon mode), various homepage layouts, and strong built-in SEO features. With Blowfish, you get a professional-looking, responsive, and feature-rich website with minimal configuration effort.
Conclusion and Next Steps #
In this Hugo blog creation tutorial, we have learned how to install Hugo, add the Blowfish theme via Git submodule, perform basic configuration, and publish your first article. By using Hugo, you now have a website that is incredibly fast, secure, and easy to manage.
Potential Troubleshooting: #
- Error: Page Not Found: Ensure you have added
theme = "blowfish"to the main configuration file if you are not using the folder-based config system. - Article Not Appearing: Check the Front Matter of your article’s Markdown file. Make sure the
draftparameter is set tofalse. - Images Not Showing: Blowfish looks for feature images with filenames starting with
feature*inside the same article folder (Page Bundles).
Interested in trying more advanced features like comment systems or analytics? Feel free to explore the official Blowfish documentation or ask your questions in the comments section below. Good luck building your dream blog!
