How to create professional websites quickly with Hugo

I've been experimenting with Hugo, the world's fastest static site generator. My goal is to use Hugo to quickly convert my Markdown notes into websites, allowing me to share my favorite course notes from Columbia University with the world. In the meantime, while I refine my approach, I'm currently using Hugo as a personal portfolio.

If you're interested in creating your own portfolio in minutes with Hugo, stick around!

If you're comfortable with GitHub and reading documentation, check out this repo for this project!


Installing Hugo

  1. Follow Hugo's Quick Start guide to install Hugo. (Make sure you install Hugo >= 0.112.4)

I use homebrew for installing CLI tools on macOS:

brew install hugo
  1. Create a new Hugo site
hugo new site MyFreshWebsite --format yaml

(Replace MyFreshWebsite with your desired website name.)

This creates a folder for your webpage.


Installing the Theme

  1. Follow Install/Updating PaperMod guide to install the theme.

I used Method 2 for installation.

  1. Edit your hugo.yml to fit your preferences. You can refer to the demo config and Hugo PaperMod example for reference.

Make sure you've initialized a Git repository in your project folder, as this will make it easier to deploy on GitHub Pages or other hosting platforms.


Configuration

Check out paperMod documentation to explore all the features available for your site.

I created a GitHub repo to give a ready-to-deploy template for your personal portfolio. If you find it valuable, consider giving it a star!

GitHub - mkforde/hugo-portfolio-demo: A demo template for creating a portfolio website using Hugo
A demo template for creating a portfolio website using Hugo - mkforde/hugo-portfolio-demo

There is a hugo.yml template that mimics my personal portfolio. If you want your website to look like this, simply copy it to your site folder and customize it as needed.


Deployment

Deploying your website to internet is super easy.

  1. While customizing your site, run:
hugo server

This allows you to preview your site on your computer.

  1. Once it's ready to go, generate your static files by running:
hugo
  1. If you're unsure how to host a static website, GitHub Pages is a great option. It integrates directly with GitHub, and you can even use a custom domain in the future.
Host on GitHub Pages
Host your site on GitHub Pages with continuous deployment using project, user, or organization pages.

Not a fan of this theme?

No problem! Check out the dozens of other themes avilable.


I hope you found this guide helpful! If you use it to build your portfolio, let me know—I’d love to see it!