Hugo - Bulma - SASS Layout

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.

Source Code

You can download the source code of this article here.

• tutor-hugo-03.tar

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:

• Bulma SASS Introduction

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

• themes/tutor-03/layouts/_default/list.html

  gitlab.com/…/layouts/_default/list.html

{{ 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.

• http://localhost:1313/letters/

Default: Single, as I am

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

• themes/tutor-03/layouts/_default/single.html

  gitlab.com/…/layouts/_default/single.html

{{ 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.

• http://localhost:1313/letters/winter/

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.

• themes/tutor-03/layouts/post/single.html

  gitlab.com/…/layouts/post/single.html

{{ 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.

• http://localhost:1313/posts/

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.

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.

Consider continue reading [ Hugo Bulma - Section List ].

Thank you for reading.