↓Skip to main content
Personal Website with Hugo and Blowfish 🚀
  1. Projects/

Personal Website with Hugo and Blowfish 🚀

·464 words·3 mins· loading · loading · ·
Web Development Upskill Personal
Junnielle Violanda
Author
Junnielle Violanda
Hello! Welcome to my Personal Webiste!🍔
Table of Contents

Creating My Personal Website with Hugo and Blowfish Theme 🌐🚀
#

As a digital wanderer, I embarked on a quest to build my personal website—a virtual home for my thoughts, projects, and musings. In this blog post, I’ll guide you through my journey of crafting this site using Hugo and the elegant Blowfish theme.

1. Setting Sail with Hugo ⛵
#

What is Hugo?
#

Hugo is a static site generator written in Go. It’s fast, flexible, and perfect for creating blogs, portfolios, or any content-driven websites.

Installation and Setup
#

  1. Install Hugo by following the official installation guide.
  2. Create a new Hugo project: hugo new site my-website.
  3. Navigate to your project folder: cd my-website.

2. Choosing the Blowfish Theme 🐠
#

Why Blowfish?
#

The Blowfish theme caught my eye with its minimalist design, responsive layout, and focus on content. Plus, it’s built with Tailwind CSS, making customization a breeze.

Installation
#

  1. Download the latest release of the theme source code from GitHub.
  2. Extract the archive, rename the folder to blowfish, and move it to the themes/ directory inside your Hugo project’s root folder.
  3. Overwrite the existing directory to replace all the theme files.

3. Configuration and Customization ⚙️
#

Theme Configuration
#

  • Edit config.toml in your project root folder.
  • Customize site metadata, social links, and other settings according to your preferences.

Color Schemes and Dark Mode
#

  • Blowfish supports multiple color schemes.
  • Enable dark mode (forced on/off or auto-switching with user toggle).

4. Crafting Content ✍️
#

Creating Pages and Posts
#

  1. Create a new content page: hugo new posts/my-first-post.md.
  2. Edit the Markdown file with your content.

Custom Shortcodes
#

  • Blowfish includes several shortcodes like Gallery, Timeline, GitHub cards, and Carousels.
  • Use them to enhance your content.

5. Deployment and Launch 🚀
#

Local Testing
#

  1. Run your Hugo server: hugo server -D.
  2. Preview your site at http://localhost:1313.

Deploy to GitHub Pages
#

  1. Push your project to a GitHub repository.
  2. Set up GitHub Pages to deploy your site.

6. Conclusion 🌟
#

And there you have it—a personal website powered by Hugo and adorned with the Blowfish theme. Whether you’re a blogger, developer, or artist, Hugo and Blowfish provide a canvas for your digital expression. So go forth, create, and let your website sail across the digital seas! 🌊🔗

P.S. If you want to explore more about Hugo and the Blowfish theme, check out the official documentation and GitHub repository. 🐠🌐.

Source: Conversation with Bing, 4/12/2024 (1) nunocoracao/blowfish: Personal Website & Blog Theme for Hugo - GitHub. https://github.com/nunocoracao/blowfish/. (2) Building your own website with Hugo and GitHub Pages. https://www.tomasbeuzen.com/post/making-a-website-with-hugo/. (3) Installation · Blowfish. https://goofish-shop.github.io/hugo-blowfish/docs/installation/. (4) Configuration · Blowfish. https://blowfish.page/docs/configuration/. (5) Blowfish | Hugo Themes. https://themes.gohugo.io/themes/blowfish/. (6) Getting Started · Blowfish. https://blowfish.page/docs/getting-started/. (7) How To Make A Hugo Blowfish Website - YouTube. https://www.youtube.com/watch?v=-05mOdHmQVc.