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 part one of Hexo Bulma CSS.

Goal: Explain How to Use Bulma Stylesheet in Hexo

Hexo meet Bulma

Hexo... This is Bulma.
Bulma... This is Hexo.
Now Bulma have options to choose.
Hexo, Hugo, Jekyll, Zola, or Eleventy. 

Table of Content

  • Preface: Table of Content

  • 1: Preparation

  • 2: Add Bulma

  • 3: Simple Layout

  • 4: Simple Refactor

  • What is Next ?

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:


1: Preparation

Consider make an ecosystem for bulma first.

Create Theme

To avoid messed-up with previous tutorial, consider make a new theme.

# Extensions
theme: tutor-02
$ cd themes/tutor-02 

Copy CSS and JS

Copy bulma.css to themes/tutor-02/source/css.

$ tree source/css
source/css
└── bulma.css

Copy Example Assets

Or even better, use our previous tutorial, And copy example assets to themes/tutor-02/static.

$ tree themes/tutor-02/source
themes/tutor-02/source
├── css
│   ├── bulma.css
│   ├── bulma.css.map
│   ├── bulma.min.css
│   └── main.css
├── favicon.ico
├── images
│   └── logo-gear.png
└── js
    ├── bulma-burger-jquery.js
    ├── bulma-burger-vue.js
    ├── jquery-slim.min.js
    └── vue.min.js

3 directories, 10 files

Hexo Bulma: Tree

Note that, you might still need map files, while debugging using object inspector.

Source: gitlab.com/…/themes/tutor-02/source

Theme Configuration

Theme can also have its own configuration as shown below:

# Miscellaneous
favicon: /favicon.ico

We can call the config setting later using

<%- favicon_tag(theme.favicon) %>

Or better favicon tag, using image/x-icon.

<link href="<%- theme.favicon %>" rel="shortcut icon" type="image/x-icon" />

2: Add Bulma

Adding bulma is straightforward. Just add the stylesheet to site/head.html.

However, there are these artefacts, to make sure, we have the same copy.

Layout: EJS HTML Head

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <title><%= page.title || config.title%></title>

  <% if (theme.favicon){ %>
     <%- favicon_tag(theme.favicon) %>
     <link href="<%- theme.favicon %>" rel="shortcut icon" type="image/x-icon" />
  <% } %>

  <%- css('/css/bulma.css') %>
</head>

Layout: EJS Layout

I’m trying to have this file, as simple as possible.

  • layouts/layout.ejs
<!DOCTYPE html>
<html lang="en">
<%- partial('site/head') %>
<body>
  <%- body %>
</body>
</html>

Layout: EJS Page

A slight change, similar to previous tutorial.

<%- page.content %>

Render: Browser: Landing Page

Open in your favorite browser. You should see, white background, by now.

Hexo Bulma: White Minimal


3: Simple Layout

I put colors so you can get the idea, about this responsive layout clearly. I also put grid, just as an example.

Consider refactor by layout

Layout: EJS Layout

Consider using semantic HTML5 tag.

<!DOCTYPE html>
<html lang="en">
<%- partial('site/head') %>
<body>
  <!-- header -->
  <nav class="navbar is-fixed-top is-dark">
    <div class="navbar-brand">
      <a class="navbar-item">
        Home
      </a>
    </div>
  </nav>

  <!-- main -->
  <div class="columns layout-base">
    <main role="main" 
          class="column is-two-thirds has-background-primary">
      <article class="blog-post">
        <h4 class="title is-4"><%= page.title || config.title%></h4>
        <%- body %>
      </article>
    </main>

    <aside class="column is-one-thirds has-background-info">
      <div class="blog-sidebar">
        Side menu
      </div>
    </aside>
  </div>

  <!-- footer -->
  <footer class="site-footer">
    <div class="navbar is-fixed-bottom maxwidth
          is-dark has-text-centered is-vcentered">
      <div class="column">
        &copy; 2019.
      </div>
    </div>
  </footer>

</body>
</html>

Partial: HTML Head

Add necessary stylesheet. the main.css right below bulma.css. You should find the stylesheet on repository.

<head>
  ...
  
  <%- css(['/css/bulma.css', '/css/main.css']) %>
</head>

Assets: Custom Stylesheet

This is additional custom decoration stylesheet that required. Something that does not covered with Bulma CSS Framework.

.layout-base {
  padding-top: 5rem;
}

footer.site-footer {
  padding-top: 5rem;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
}

.blog-sidebar,
.blog-post {
  margin-left: 20px;
  margin-right: 20px;
}

.blog-post-meta {
  margin-bottom: 5px;
}

.blog-post p {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

Render: Browser

Open in your favorite browser. You should see, layout in colour, by now.

Hexo Bulma: Coloured Layout


4: Simple Refactor

After minimalist bootstrap above, the next step is to create the layout. We do not like long code. Thus, we are going to refactor.

  • layouts/layout.ejs

Into:

  • layouts/layout.ejs

  • layouts/page.ejs

  • layout/site/header.ejs

  • layout/site/footer.ejs

Layout: EJS Layout

<!DOCTYPE html>
<html lang="en">
<%- partial('site/head') %>
<body>
<%- partial('site/header') %>

  <div class="columns layout-base">
    <%- body %>
  </div>

<%- partial('site/footer') %>
<%- partial('site/scripts') %>
</body>
</html>

I put the header/footer, outside main block. So we do not need to repeatly writing header/footer in every main block.

Layout: EJS Page

A slight change, similar to previous tutorial.

  <main role="main" 
        class="column is-full has-background-primary">
    <article class="blog-post">
      <h1 class="title is-4"><%- page.title %></h1>
      <%- page.content %>
    </article>
  </main>

Partial: Header

<nav class="navbar is-fixed-top is-dark">
  <div class="navbar-brand">
    <a class="navbar-item">
      Home
    </a>
  </div>
</nav>
<footer class="site-footer">
  <div class="navbar is-fixed-bottom maxwidth
        is-dark has-text-centered is-vcentered">
    <div class="column">
      &copy; <%= date(new Date(), 'YYYY') %>.
    </div>
  </div>
</footer>

Partial: Javascript

It is just an empty template.

  <!-- JavaScript -->
  <!-- Placed at the end of the document so the pages load faster -->

Render: Browser

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

Hexo Bulma: Layout Homepage


What is Next ?

Consider continue reading next part of this article in [ Hexo - Bulma - CSS Layout ].

Thank you for reading.