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.
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.
Links
Demo Site
Presentation
Hexo Article Series
Consist of more than 30 articles.
-
Hexo Step by Step Repository (this repository)
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
Tutor 02
Adding stylesheet for content
-
Add Bulma CSS
-
Standard Header and Footer
-
Enhance All Layouts with Bulma CSS
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
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
Tutor 05
Optional Feature
-
Blog Pagination: Adjacent, Indicator, Responsive.
-
More Pagination: Tags, Categories, and Archive
Finishing
-
Post: Header, Footer, Navigation
-
Post: Markdown Content
-
Post: Table of Content
-
Post: Responsive Images
-
Syntax Highlight: CSS Fix
-
Meta: HTML, SEO, Opengraph, Twitter
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.