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.
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
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.
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.
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.
- Best Hugo themes
- PoppyGo Release notes
- PoppyGo documentation
- Plans for poppygo
- Tutorials for Hugo templates