Build and deploy a static business website in 15 minutes

You need to build a simple static website? The best tool I’ve seen so far is Hugo, a static website builder written in Go.

Start building the page

  1. Install Hugo, create a project directory and run the following in your terminal:

2. Change to the directory and initialize a git repo:

3. Install a theme (hugo-fresh business theme)

4. Run your website locally and browse it at http://localhost:1313

Now you can see your website looking like this:

To adjust the content you can manage everything in your config.yaml file in the root of your project. When you start to make changes to this file and save it, your changes are going to be refreshed immediately in the browser. Please note that you still need to have hugo server running in the background.

Create a sub page

To create a sub page you need to create a directory in your project root called content and create a file there e.g. products.md. You can add your markdown there and reach the file by browsing http://localhost:1313/products/. Be sure you restart the hugo server command to get your sub page tracked by the auto-refresh tool when you do some changes in this file. As example you can put the following markup there:

First you set the title of the page and you can decide to keep the footer at the bottom of the page or not. After this there is a headline with some sample text:

Deploy the website

To serve the page to the public, we need a hoster. I decided to go with zeit.co. They provide a free plan to host pages and are ready for a hugo based deployment pipeline. What else:

  • Free SSL
  • Almost zero config
  • Push to your Github repo and trigger a deployment
  • Serverless functions with a free invocation plan

So first you need to sign up at zeit.co and then create a project. Select free new project from template, choose hugo, choose a project name and click deploy:

Now everything is ready to deploy your page.

The final step is to install the now node package:

Also create a package.json in your projects root:

Now you can just run the following with your project name:

You get back a url that you can browse and your page is live! Have fun with your static page that is easy to maintain and gets served pretty fast.

Software Architect

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store