This is a simple, minimal example of a website built with Hugo.
This may be interesting to you if you're content to write your own HTML, CSS/SASS, and Javascript but want to make use of Hugo's templating features so you can do things like maintain consistent headers and footers, automatically generate nav bars, etc.
It's intended both as a basic demonstration of Hugo's templating features, and as a skeleton directory you can copy to start new sites.
layouts/_default/baseof.html: This is the base template. We use this to define the layout for all pages. It does a few things:- We build the skeleton of the HTML page (doctype,
<html>tags, etc) - We build a common header (with an
<h1>tag) - We build a menu bar
- We build a common footer
- We build the skeleton of the HTML page (doctype,
layouts/index.htmlandlayouts/_default/single.html: These pages inherit from the base template above. They define the style for the root page ("/") and all other pages, respectively. (Both are necessary for Hugo to render these page types.) They are both identical, and both stubs.content/*.html: Various sample pages. These use HTML as the content format because of their.htmlextension. Each contains amenukey if it should appear in the nav bar.static/main.css: A CSS file as an example of a static file.
Here are the common Hugo features we're not using:
- We don't use a theme -- just the
layoutsdirectory. - We don't make (significant) use of any Markdown formatting
- We don't define any list pages (which contain lists of all pages of a certain type).
We could avoid the use of a base template and just duplicate logic
layouts/index.html and layouts/_default/single.html -- that would simplify
things, but at the expense of duplicating things more.
- Install Hugo
- Run
hugo server(orhugo server --bind 0.0.0.0if you want to expose the development server to other hosts)
This example is very, very minimal -- Hugo has many other features that help us organize templates, or separate content from display logic:
- Partial templates can be used to extract common functionality (the menu bar is a prime candidate for this).
- Shortcodes, particularly how to create your own shortcode templates.
- Hugo pipelines, which are particularly useful for asset minification.
- Front matter, the top
section of each page in
content, can help separate page structure from rendering a bit more.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent