Hugo site from html theme(1/3)

This is a guide for porting an html 5 theme to a blistering fast Hugo website. This guide requires a basic knowledge of the Hugo templating structure. You might want to take the Hugo quickstart tutorial before you take this guide.

Introduction

For one of our customers we ported a commercial HTML theme to a Hugo site. Main challenge: Make every page widget-based and content manageable for the customer. We use PoppyGo as the CMS for the customer, but how can we enable the customer to add any section widget to any page?


In this guide we share our solution step-by-step.

A quick word about HTML themes

Before we start, let’s quickly analyse how HTML templates are constructed.
Many HTML themes are built-up with fairly the same stucture.

  • Navbar with menu, logo’s search and language options.
  • Homepage fully constructed of sections that ask for a widget based approach
  • Overview of list pages with sections before and after the listed content, e.g. blog or events.
  • Detailpages with sections before and after the main content. Think of a newsletter signup section.

Besides the html pages, there are css dependencies in the head and Js dependencies at the bottom of the body section.

So, basically all pages are set-up like this:

<html>
    <head>
        - Meta and open graph
        - CSS dependencies
    </head>

    <body>
        - Navbar
        - Sections with content
        - Footer
        - JS dependenies
   <body>
</html>

The html theme that we will port

The theme that we will port is a theme called Ketan Childcare . The theme has a homepage with sections, like a main banner, gallery, contact and newsletter section. Furter, it has many section and detail pages. It contains listpages for events, classes, news, gallery. And next to general content pages it has detailpages for the items in the listpage.



Ketan Childcare theme

Hugo site from html theme(1/3) guides

Now, let’s get started.

First create a hugo site as skeleton

We will use the hugo CLI for setting up our skeleton. If you haven’t installed HUGO, you need to do this first .

In the terminal type:

hugo new site mySite
cd mySite
hugo new theme myTheme

You now have this folder structure:

mySite
├── config.toml
├── content
├── data
└── static
└── themes
    └── static
    └── layouts

You will also see other directories. You can delete the other folders for now if you like, since we will not use them.

Copying theme files into your HUGO skeleton

CSS and JS files

In the folder /themes/myTheme/static you see folders css and js. Now copy the css and js files of your theme into these folders.

Images

In the theme you probably have an ‘image’ or ‘img’ folder. Copy this complete directory into the static folder that resides in the root of your site.

Html files

These are the files that we will replace with smart HUGO templates that take their content from the content folder. We will not copy them anywhere, but we will use fragments of those files create our HUGO template files.



Now we are done with copying the images, js and css files into the HUGO folders, have to come up with a masterplan for our HUGO templates.

Go to part 2