Build a Static Site with Hugo and Deploy with Netlify

lauragift21

Gift Egwuenu

Posted on March 29, 2018

Build a Static Site with Hugo and Deploy with Netlify

Hugo

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
Enter fullscreen mode Exit fullscreen mode
sudo apt-get install Hugo
Enter fullscreen mode Exit fullscreen mode

Step 2: Create a new Hugo site

hugo new site -siteName
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

Server is available at http://localhost:1818/
Enter fullscreen mode Exit fullscreen mode

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.

alt text

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.

Screenshot

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

💖 💪 🙅 🚩
lauragift21
Gift Egwuenu

Posted on March 29, 2018

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related