Learn and Discover Open Source with Daily Genuine Experience. From Coding, Front End, Back End, Database, and Static Site Generator.
 
 
ssg  


Preface

This article is intended for beginner.

Goal: Apply SASS in Hugo theme

Custom SASS could make a lot of enhancement, compared with pure Bulma’s CSS.

Table of Content

  • Preface: Table of Content

  • 5: Page and List.

  • 6: Custom Page Posts

  • What is Next ?

Source Code

You can download the source code of this article here.

Related Article

I wrote about Bulma Navigation Bar that used in this article. Step by step article, about building Navigation Bar. You can read here:


5: Page and List.

Now comes the Hugo specific parts:

  • layouts/_default/single.html

  • layouts/_default/list.html

Default: List

We should also change the list

{{ define "main" }}
<main role="main" 
      class="column is-full box-deco has-background-white">
...
{{ end }}

Server Output: Browser: List

Open in your favorite browser. You should see, simple index with article list, by now.

Hugo Bulma: Layout List

Default: Single, as I am

This one artefact, for content page, or post page.

{{ define "main" }}
  <main role="main" 
        class="column is-two-thirds blog-column box-deco has-background-white">
    <article class="blog-post">
      <h4 class="title is-4">{{ .Title | default .Site.Title }}</h4>
      {{ .Content }}
    </article>
  </main>
{{ end }}

{{ define "aside" }}
  <aside class="column is-one-thirds box-deco has-background-white">
    <div class="blog-sidebar">
      Side menu
    </div><!-- /.blog-sidebar -->
  </aside>
{{ end }}

Server Output: Browser: Page

Open in your favorite browser. You should see, simple page content, by now.

Hugo Bulma: Layout Single

Now, already equipped with responsive layout.


6: Custom Page Posts

Custom Page is a must have SSG Concept

Here we are again with our simple single.html.

Post: Single

This is very similar with _default. The point is you can customize as creative as you want.

{{ define "main" }}
  <main role="main" 
        class="column is-two-thirds blog-column box-deco has-background-white">
    <div class="blog-post">
      <section>
        <h4 class="title is-4 blog-post-title">{{ .Title | default .Site.Title }}</h4>
        <p  class="blog-post-meta"
            >{{ .Page.Date.Format "January 02, 2006" }} by <a href="#">epsi</a></p>
      </section>

      <article>
        {{ .Content }}
      </article>
    </div><!-- /.blog-post -->
  </main>
{{ end }}

{{ define "aside" }}
  <aside class="column is-one-thirds box-deco has-background-white">
    <div class="blog-sidebar">
      <h4 class="is-size-4 is-italic">About You</h4>
      <p>Are you an angel ?</p>
    </div><!-- /.blog-sidebar -->
  </aside>
{{ end }}

Server Output: Browser

Open in your favorite browser. You should see, a post, with sidebar.

Hugo Bulma: Post without Layout

Note that, this is already using responsive grid. It has different looks on different screen. You should try to resize your browser, to get the idea.

Hugo Bulma: Post with sidebar Layout


What is Next ?

I think that’s enough for today. Correct me If I wrong. But I think human need some rest too.

Consider relax, and look at this adorable kitten in my shoes. Have a break for a while, prepare your playlist, and resume our tutorial.

adorable kitten

Consider continue reading [ Hugo Bulma - Section List ].

Thank you for reading.