ssg  

Preface

Goal: What Hexo can do in this article series

Making theme consist of these steps:

  • Preparing general layout

  • Making necessary custom pages

  • Adding stylesheet for content

  • Optional feature, such as pagination

Table of Content

Here, I present a Hexo Tutorial, step by step, for beginners.

  • Preface: Table of Content

  • 1: Layout

  • 2: Custom Pages

  • 3: Content

  • 4: Pagination

  • Conclusion


1: Layout

Minimal Theme

In my early attempt with static site, it is always trying to understand how the theme works. The easiest thing to do this is to make a minimal theme, and modified later. Our minimal theme only need two artefacts. It is layout.ejs and index.ejs

Hexo: Minimal Theme

Of course you need better than these two. From header, footer, to nice looks stylesheet.

Hexo: Pure HTML Theme

article: Hexo - Minimal

Layout Template

Your typical layout would contain header and footer This is an example of typical layout in a theme.

  • themes/tutor-01/layout/layout.ejs
<html>
<%- partial('site/head') %>
<body>
  <%- partial('site/header') %>
  <div id="content">
    <%- body %>
  </div>
  <%- partial('site/footer') %>
</body>
</html>

Hexo: ViM Layout

And your typical content would be, a markdown file (or html file) with frontmatter on top.

  • source/index.html
---
title: Welcome to Heartbeat
---

  <p>Every journey begins with a single step.</p>

With very humble result as:

Hexo: Landing Page on Browser

article: Hexo - Layout

Adding Assets

You can add any necessary assets such as: images, css frameworks, and javascript frameworks.

Hexo Bulma: Tree

And see the result in action:

Hexo Bulma: Layout Homepage

article: Hexo - Bulma - CSS - Part One

CSS Frameworks

Using CSS framework such as Bulma or Bootstrap, can make your life easier. Here is an example of Bulma top navigation in Hexo:

Hexo Bulma: Layout Navigation Bar

article: Hexo - Bulma - CSS - Part Two

Using SASS

SASS is a must have skill for theme maker. Every CSS frameworks built on CSS preprocessor. Long code tends to get messy. You need to get organized.

Hexo Bulma SASS: Tree Sass

Now you can have a nicer looks in browser:

Hexo Bulma: Layout Homepage

With your own colourshceme, to match your company logo, or your personal portfolio.

article: Hexo - Bulma - SASS - Part One

More Layout

Or further, you can utilize stylesheet, to control your responsive space, such as padding and margin. Then custom component, such as box effect that control: border, shadow, rounded.

Hexo Bulma: Post with sidebar Layout

article: Hexo - Bulma - SASS - Part Two

Now we are done with Hexo’s layout.


2: Custom Pages

Hexo has this four special page sections:

  • Index

  • Archive

  • Category

  • Tag

Default Pages

The URL looks like these below:

For example, this is a tag page:

Hexo: Browser Section Tag

article: Hexo - EJS - Section List - Part One

Custom Layouts Pages

However you still have to make your own page for summary:

Or even landing Page

Styling Layout

Instead of plain looks, you can style custom layout.

Hexo: Browser Section Tag

With any looks, as creative as you can.

Hexo: Blog Index Refactored

article: Hexo - EJS - Section List - Part Two

Simple Summary Page

Your attempt to make summary page should be just a simple loop.

Hexo: Custom Page: Simple Tag List

And then you can make a nice looks, from that simple loop above, using bulma’s button class.

Hexo: Refactoring Terms: Button of Tags

article: Hexo - EJS - Custom Page - Part One

Complex Summary Page

You can go further by showing tree of pages in this summary page.

Hexo: Refactoring Terms: Categories

article: Hexo - EJS - Custom Page - Part Two

Custom Output

Without adding any plugin, Hexo cannot generate custom output. But we can render any content to .html, or .js, as shown in local json file below:

  • file:///home/username/…/archives_local.json

Hexo Bulma: Archives JSON File

This is useful when you need to generate data.

article: Hexo - EJS - Custom Output

Widget

Hexo is not just about page and post, you can put anything in your layout as creative as you are. For example is this archive tree below:

Hexo: Widget Archives Grouped

article: Hexo - EJS - Widget

Data

You can also utilize data to generate content, such as backlink, internal link, or other stuff.

# Helper for related links
# Archives by Date

...

- id: 15010108
  title: "Dead Poet Society"
  url: 2015/01/01/quotes/dead-poets-society/

- id: 15100308
  title: "Every Day"
  url: 2015/10/03/quotes/every-day/

...

Hexo: Data Archives

Now consider link the data from this content below:

---
title     : Susan Wong - I Wish You Love
date      : 2015/05/15 07:35:05
tags      : [pop, 70s]
category  : [lyric]

related_link_ids: 
  - 15051515  # The Way We Were
---

I wish you bluebirds in the spring  
To give your heart a song to sing

<!-- more --> 

I wish you health  
And more than wealth  
I wish you love

Hexo: Content with Data

With that article, now we can see one or more links in a widget:

Hexo: Widget Related Posts

article: Hexo - EJS - Data


3: Content

After you are done with basic layout and cutom pages, now you can work in detail with content.

Layout: EJS Post

Your typical post.ejs should contain header, and optionally footer (such as license) and navigation. Or even more, services such as google adsense and disqus comment.

  • themes/tutor-04/layout/post.ejs
  <main role="main" 
        class="column is-two-thirds has-background-white
               blog-column box-deco">
    <div class="blog-post">
      <%- partial('post/header') %>

      <article>
        <%- page.content %>
      </article>
      
      <br/>
      <%- partial('post/navigation') %>
    </div><!-- /.blog-post -->
    
    <%- partial('post/footer') %>
  </main>

  <aside class="sidebar column is-one-thirds is-paddingless">
    <%- partial('widget/related-posts') %>
    ...
  </aside>

Hexo Content: ViM Post Layout

A complete post can be seen in preview below:

Hexo Content: All Artefacts

article: Hexo - Content - Blog Post

Markdown

Be aware of markdown configuration, as it takes tweak to make it follow standard practice.

  • _config.yml
# Markdown
marked:
  gfm: true
  breaks: false

Your typical markdown is shown as below:

---
layout    : page
...
---

# Header 1

My content

[My Link][my-image]

-- -- --

## Header 1.1

My sub content

![My Image][mylink]

-- -- --

## Header 1.2

My other sub content

[//]: <> ( -- -- -- links below -- -- -- )

[my-image]:    http://some.site/an-image.jpg
[my-link]:     http://some.site/an-article.html

There is also hexo admin to help you work with markdown.

Just be aware for Bulma user, that you need to make an adjustment, to make heading works in Hexo.

Hexo Markdown: Fix Bulma Heading Class Size

article: Hexo - Content - Markdown

Layout: Raw HTML

You can also add raw html layout instead of EJS. This is useful when you want to add service, or just plain html such as TOC in figure below:

Hexo Raw HTML: Table of Content

article: Hexo - Content - Raw HTML

Syntax Highlighting

Syntax highlighting in Hexo is using figure tag. Sometimes you need to fix the stylesheet. It is an easy task. Then later you can add color and stuff to make it looks nicer. After all it depends on your creativity.

Hexo Syntax Highlighting: Reset Class in Figure Element

article: Hexo - Content - Syntax Highlighting

Meta SEO

Content is not just for human, but also for machine that read this page. Especially search engine and social media. Opengraph is a must nowadays. Your article should have preview as shown in telegram chat below.

Hexo Meta: Telegram Desktop Opengraph

article: Hexo - Meta - SEO


4: Pagination

Sometimes you need a special feature that require algorithm. Yes, this pagination is common, but a complex task to do. Luckily I have made a step by step guidance, on how to achieve it with Hexo.

Numbering

Using EJS and Bulma stylesheet, a common pagination could be achieved.

Hexo Pagination: Combined Animation

article: Hexo - Pagination - Indicator

Responsive

Using EJS custom stylesheet, a responsive pagination also could be achieved.

Hexo Pagination: Responsive Animation

article: Hexo - Pagination - Responsive

Handling URL

There are sections, that we can put pagination inside it. We need to handle these URL correctly with EJS function.

Pagination can be placed in many places.

Hexo: Browser Section Tag

article: Hexo - Pagination - Handling URL


Conclusion

I think that is all.

This media can also be read in a nice web presentation. Consider continue reading [ Hexo - Presentation Slide ].

What do you think ?