Building a Portfolio Website: A Detailed Step-by-Step Guide Using Hugo, TailwindCSS, and Netlify

Photo by Corinne Kutz on Unsplash

This article will guide you through the step-by-step process of building and deploying a portfolio website. I am using TailwindCSS, Flowbite, and wow.js for the design and functionality of my portfolio website, which includes dark mode and wow.js animations.

Step-1: Installation & Prerequisites

1. Download & Install VSCode

Install the LiveServer extension: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

2. Install Hugo & npm (Node Package Manager)

For MacOS users

Check if Homebrew is already installed

brew --version

Install Hugo via Homebrew

brew install hugo

Check if Hugo was installed successfully

hugo version

Install node & npm

brew install node

Check if node and npm was installed successfully

node -v
npm -v

3. Create GitHub Repository