Build a Static Site with Hugo and Deploy with Netlify

I'll be highlighting how to build a quick site with Hugo and deploy to netlify in a jiffy. But we have to understand what Hugo and Netlify are before we start building.

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

Netlify is a unified platform that automates your code to create high-performant, easily maintainable sites, and web apps.

Step 1: Install Hugo

To be able to use Hugo we will need to install it by running this command for Mac or Ubuntu users.

brew install Hugo

sudo apt-get install Hugo

Step 2: Create a new Hugo site

hugo new site -siteName

Step 3: Pick a theme

One of my best features of Hugo is you get to pick from a diverse list of themes available here hugo themes, Go ahead and pick a theme I'll be using hugo-hikari-theme. Make sure you go through the instructions for using the theme.

Copy the theme.toml into your config.toml file.

Step 4: Running the theme

hugo server

You should get a build process and a message like so:

Server is available at http://localhost:1818/

Feel free to modify the theme to your personal preference.

Step 5: Deploy to Netlify

This is pretty much the easiest step to finally get our site running live we simply need to create an account with netlify, connect your GitHub profile to netlify.

After that step create a new site from the Netlify dashboard and connect your remote repository on GitHub.

Create a deploy command with this setting and deploy.

Viola, you have successfully built and deployed your site with Hugo and Netlify with these quick steps. This post is originally posted to my blog