ssg  

Preface

Goal: Explain Hexo Step By Step

A Journey with Hexo

After using Jekyll for years, and Hugo for more than a year, I decided to start my third blog using Hexo. And after a while, I also decide to write this article series, so that beginner can learn more quickly.

I might write a lot, but never comes deep into conceptual thinking. This article series is still the same.

However, Let me rewrite the Hugo article, in Hexo case.

The Bulma SASS Article Series

I use Bulma for this series. The CSS part in this article series is based on that Bulma article series.

Now we have two separate article series.

  • Bulma SASS: with pure HTML and no SSG.

  • This newly Hexo Article Series.

Prerequisite

I suggest you to visit the Bulma SASS, before you dive in to this long Hexo series.

I’m using Bulma as an example in this guidance. Of course you can adapt this to any CSS framework that you like, such as Materialize or Bootstrap.


About Hexo

Hexo is an SSG (Static Site Generator) that is supported by gitlab. Or used pairly by using github with netlify. Hexo is not the only SSG (Static Site Generator).

Why Static Site Generator?

No need to go deep learning backend. So you can mock-up your theme quickly.

Why Markdown?

Most SSG is using markdown, instead of HTML. Markdown reduce the complexity of formatting. Reduce time wasted on formatting. Hence concentrate more on content.

Why Hexo?

I do not know.

My first decision to use Hexo is simple, some of my friends also use Hexo. Maybe I am just bored and in need to moved on. At least I have people to talk with.

I know, I’m cheap.

Hexo doesn’t have rich feature as Hugo does. But it is sufficient for a blog, or personal sites. In some cases, Hexo has feature that does not available in Hugo.

EJS Templating Engine

EJS gives Hexo strong point

Hexo support more than one templating engine. You can read about this templating engine, in Hexo official documentation.

I decide to use EJS for my blog.

Why EJS?

Javascript is very common

Yes, it use plain javascript. Thus, it is easier to use than Liquid in Jekyll, or Chroma in Hugo. This EJS support make Hexo sexier than Hugo or Jekyll.

Source Code

Source code used in this tutorial, is available at:

Source code for Bulma SASS, is also available at:

Demo Hexo

Unfortunately, I do not create Demo site with Bulma. All I have is this screenshot.

Hexo: Demo


The Article Series

Making a Theme

Supposed you want to make your own theme. What would you do first?

  • Step One: Start From the Layout: Although you can create the layout with pure HTML. Static site generator can make this job easier. This require Sass, for nice looks.

  • Step Two: Custom Pages: From post and page, to archive and taxonomy. This require a lot of loop, that we can achieve using EJS. And Sass for finishing touch.

  • Step Three: Content: You need to populate with content example. Adding layout such as page header, footer, and navigation. Also adding feature, such as meta SEO, and commenting system. Then a lot of Sass to handle rendered markdown content in post. For coder, you need to test syntax highlighting.

  • Additional Step: Such as making pagination.

These blog cover most of those four main topics above. There are additional stuff as well beyond making theme, such as deployment.

Disclaimer

This is would not be the best blog template that you ever have. Because I only put most common stuff, to keep the tutorial simple.

After you learn this guidance, you understand the fundamental skill. Thus, a base for you, to make your own blog site. With your imagination, you may continue, to build your own super duper Hexo site. Far better than, what I have achieved.

Content

A site need content. I do not want lorem ipsum.

None of Your Buciness

To make this step by step tutorial alive, I choose most common topic, a fictional love story.

I put some lyrics from great beautiful songs. I’m not sure exactly what these songs means. I just find it easier to use tis kind of content.

Sebuah catatan blog, masih dengan tema-tema perbucinan.

Without the content, you can still make your site anyway. You do not really need to understand the story behind the content.

Table of Content

The table content is available as header on each tutorial. There, I present a Hexo Tutorial, step by step, for beginners.


Demo Site

Presentation

Hexo Article Series

Consist of more than 30 articles.

Bulma Article Series

Consist of 10 articles.


Chapter Step by Step

Tutor 01

Generate Only Pure HTML

  • Installing Hexo

  • Setup Directory for Minimal Hexo

  • General Layout: Base, Page, Post, Index

  • Basic Content

Hexo Bulma: Tutor 01

Tutor 02

Adding stylesheet for content

  • Add Bulma CSS

  • Standard Header and Footer

  • Enhance All Layouts with Bulma CSS

Hexo Bulma: Tutor 02

Tutor 03

  • Add Custom SASS (Custom Design)

  • Nice Header and Footer

  • Custom Pages: Categories, Tags, Home (landing page)

  • Apply Two Column Responsive Layout for Most Layout

  • Additional Layout: Category, Tag, Archive

  • Template Refactor: Reusable Post List

  • EJS: Header Title

  • Languages

Hexo Bulma: Tutor 03

Tutor 04

  • More Content: Lyrics and Quotes. Need this content for demo

  • Template: Blog Item

  • Template: Post List: Simple, By Year, List Tree (By Year and Month)

  • Tags and Categories Page: Nice Tag Badge and List Tree

  • Multi Column Responsive List: Tags, Categories, and Archive

  • Widget: Friends, Archives Tree, Categories, Tags, Recent Post, Related Post

  • Custom Output: JSON

Hexo Bulma: Tutor 04

Tutor 05

Optional Feature

  • Blog Pagination: Adjacent, Indicator, Responsive.

  • More Pagination: Tags, Categories, and Archive

Hexo Bulma: Tutor 05: Indicator Pagination

Hexo Bulma: Tutor 05: Responsive Pagination

Finishing

  • Post: Header, Footer, Navigation

  • Post: Markdown Content

  • Post: Table of Content

  • Post: Responsive Images

  • Syntax Highlight: CSS Fix

  • Meta: HTML, SEO, Opengraph, Twitter

Hexo Bulma: Tutor 06

What do you think ?


Begin The Guidance

Let’s get the tutorial started. Long and short of it, this is the tale.

Consider continue reading [ Hexo Install ].

Thank you for reading.