Hugo Landing Page

Hugo Landing Page

Template information

Free

A simple landing page built with Hugo and Tailwind CSS

Github Info
1 open issue
37 stars
2 watching
19 forks
FEATURES
High resolution
Well documented
Responsive
INFO
Released
Last updated
Stack

About the template

This is a simple single-page Hugo theme built with Tailwind CSS.
There's also an 11ty Version
How to use this template

Requirements:

  • Hugo (developed and tested with version 0.58.0)
  • Tailwind CSS
  • gulp

All other dependencies are either linked from a CDN or included in this repository.

Setup:

  • Fork, clone or download
  • cd into the root folder
  • run npm install
  • run npm run start
  • open a browser and go to http://localhost:1313

Basic configuration:

  • Hugo -> ./config.toml
  • Tailwind -> ./tailwind.config.js
  • Netlify -> ./netlify.toml
For better development experience, please have a look at ./tailwind.config.js and either disable purge or comment it - otherwise you'll have a very limited selection of Tailwind classes available.
Keep in mind that page.css can be re-built anytime via gulp css - no need to make changes to the generated files in ./static/css.

Please note that gulp css does not include that normalize.css file used for the 2 regular pages (imprint, privacy).

Change Content:

All page content is stored in ./content.

./content/sections/
is where each section's content can be found.

The individual tile/card elements for the "Features" screen are stored in ./content/sections/features/

Change Templates/Layout:

Page structure and templates are stored in ./layouts and can be edited there.

Best have a look at ./layouts/_default/baseof.html first to understand how it all comes together - the page itself is constructed from partials in ./layouts/partials and each section has a corresponding template file stored in the folder ./layouts/partials/sections.

index.html
in ./layouts simply arranges everything, i.e. sections can be re-ordered/removed/... there.

Change images:

Images are stored in ./static/img; everything in there can be considered a placeholder that should eventually be replaced with your actual production images.

Get notified when we add new designs.

Twice a month I share the best Tailwind templates, UI kits and components in my newsletter. 144 Tailwind hackers find it useful. I'd love you to join.