Bare HTML With Custom Style

In addition to extending/overwriting the default page layout template and CSS, as in the previous example, you can completely abandon the 'default' CSS of the site, and create a totaly independent one, that starts from a blank canvas. This requires the additional step of adding the layout of a page to 'barehtml' in the post's front matter, then you inherit nothing but the header metadata. All the content of your post is dropped directly into then page's body element. This means you can:

  1. Go wild!
  2. Not worry about overlapping styles coming from another stylesheet that might interfere, or worry about accidentally re-using classes or IDs that might already exist, or might later change without warning
  3. Create a completely different HTML structure if you need it
  4. But still have the page integrated in all lists, overviews and taxonomies that the site has

This you can achieve by adding into the front-matter for a HTML content file, the following (shown in TOML format here):

layout = 'barehtml'
[params]
  stylesheets = ['style.css']

This mean everything you write in your .html content file is dumped straight, and unceramoniously, into a body element, using only the style sheet(s) listed.

The style sheet lives in your pagebundle and is referenced relative to your page, so in most cases only the name is neccessary

It does mean that you have to add all other elements to a page, like the navigation and footer, if you want them to appear.

You can also create such a post using the archetype 'own-style-post', as follows:

hugo new -k own-style-post posts/my-new-post
Back Home