Hexo - Bulma - SASS Layout

   
   
 hexo  bulma  sass  
 ssg  
Article Series

This article series contain few sections.

Related Article Series

Download Tutorial Source.

Where to Discuss?

Local Group

Table of Content

Preface

This article is intended for beginner.

Goal: Apply SASS in Hexo 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.

Extract and run on CLI:

$ npm install

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: Regular Page

Consider change a bit the page

Layout: EJS Page

We scan start with the same layout as previous tutorial.

  <main role="main" 
        class="column is-two-thirds blog-column box-deco has-background-white">
    <article class="blog-post">
      <h1 class="title is-4"><%- page.title %></h1>
      <%- page.content %>
    </article>
  </main>

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

Render: Browser Page

Open in your favorite browser. You should see, non-colored homepage, by now.

Hexo Bulma: Layout Page

This design is already equipped with responsive layout.

Hexo Bulma: Layout Page Grid

6: Index List

Now comes the Hexo specific parts:

  • layouts/_default/single.html

  • layouts/_default/list.html

Layout: EJS Index

We should also change the list

<main role="main" 
      class="column is-full box-deco has-background-white">
  <section class="section">

  <h1 class="title is-4"><%= config.author %></h1>
  <h2 class="subtitle is-4"><%= config.subtitle %></h2>

  <ul>
  <% page.posts.each(function(post){ %>
    <li>
      <b><a href="<%- url_for(post.path) %>">
        <%= post.title %>
      </a></b>
      <br/>
      
      <p><%= date(post.date, config.date_format) %></p>
      <br/>
      
      <% if(post.excerpt) { %>
      <p><%- post.excerpt %></p>
      <% } %>
    </li>
  <% }) %>
  </ul>

  </section>
</main>

Render: Browser: List

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

Hexo Bulma: Layout Index

7: Custom Page Posts

Custom Page is a must have SSG Concept

Here we are again with our simple post.ejs. Hexo can create as many custom page, the default one is post. All this custom page use layout.ejs as base skeleton.

Layout: EJS Post

This post.ejs is very similar with page.ejs. The point is you can customize as creative as you want.

  <main role="main" 
        class="column is-two-thirds">
    <div class="blog-post">
      <section>
        <h1 class="title is-4"><%- page.title %></h1>
        <p  class="blog-post-meta"
            ><%= date(page.date, config.date_format) %> by <a href="#"
            ><%= config.author %></a></p>
      </section>

      <article>
        <%- page.content %>
      </article>
    </div><!-- /.blog-post -->
  </main>

  <aside class="column is-one-thirds has-background-info">
    <div class="blog-sidebar">
      <h4 class="is-size-4 is-italic">About You</h4>
      <p>Are you an angel ?</p>
    </div><!-- /.blog-sidebar -->
  </aside>

Render: Browser

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

Hexo Bulma: Post without Layout

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

Hexo Bulma: Post with sidebar Layout

What is Next ?

Consider continue reading [ Hexo Bulma - Section List ].

Thank you for reading.