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.
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.
-
- $ cat _config.yml
- gitlab.com/…/_config.yml
# 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
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:
-
- themes/tutor-02/_config.yml
- gitlab.com/…/themes/tutor-02/_config.yml
# 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
-
- themes/tutor-02/layout/site/head.ejs
- gitlab.com/…/layout/site/head.ejs
<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.
-
- themes/tutor-02/layout/page.ejs
- gitlab.com/…/layout/page.ejs
<%- page.content %>
Render: Browser: Landing Page
Open in your favorite browser. You should see, white background, by now.
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.
-
- themes/tutor-02/layout/layout.ejs
- gitlab.com/…/layout/layout.ejs
<!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">
© 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.
-
- themes/tutor-02/layout/site/head.html
- gitlab.com/…/layout/site/head.html
<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.
-
- themes/tutor-02/css/main.css
- gitlab.com/…/css/main.css
.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.
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
-
- themes/tutor-02/layout/layout.ejs
- gitlab.com/…/layout/layout.ejs
<!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.
-
- themes/tutor-02/layout/page.ejs
- gitlab.com/…/layout/page.ejs
<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
-
- themes/tutor-02/layout/site/header.html
- gitlab.com/…/layout/site/header.html
<nav class="navbar is-fixed-top is-dark">
<div class="navbar-brand">
<a class="navbar-item">
Home
</a>
</div>
</nav>
Partial: Footer
-
- themes/tutor-02/layout/site/footer.html
- gitlab.com/…/layout/site/footer.html
<footer class="site-footer">
<div class="navbar is-fixed-bottom maxwidth
is-dark has-text-centered is-vcentered">
<div class="column">
© <%= date(new Date(), 'YYYY') %>.
</div>
</div>
</footer>
Partial: Javascript
It is just an empty template.
-
- themes/tutor-02/layout/site/scripts.html
- gitlab.com/…/layout/site/scripts.html
<!-- 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.
What is Next ?
Consider continue reading next part of this article in [ Hexo - Bulma - CSS Layout ].
Thank you for reading.