Hexo Static Generator

Building Site with Hexo.


This media also can be read in: [Hexo - Summary] article

About Me 🙋🏻‍♂️!

my photo

Yet, another underachiever 👻.

But hey, I have my own blog 🎉.

Why Hexo 🤔?

  • Static Site Generator:
    Focus on frontend: Great theme.
  • Markdown:
    Concentrate more on content.
  • EJS Templating Engine (or else):
    Plain javascript is easier to use.

Why Hexo 🤔?

This is just an example project. Most you can do with one SSG can be done with other SSG as well.

You are free to use your SSG choice:
Jekyl, Hugo, Hexo, 11ty, Pelican, Gatsby

[Presentation - Concept SSG]

Step of Making Theme 🤔?

  • General Layout:
    Preparing site wide layout.
  • Custom Pages:
    Making necessary custom pages.
  • Content:
    Adding stylesheet for content.
  • Optional Feature:
    Such as pagination.

1: General Layout 🤠

  • Minimal Theme
  • Adding Assets
  • CSS Frameworks
  • Using SASS
  • More Layout

Minimal Theme

The easiest thing to do this is to make a minimal theme, and modified later.

Hexo: Minimal Theme

[Hexo - Minimal]

Minimal Theme

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

Hexo: Pure HTML Theme

Layout Template

Your typical layout would contain header and footer.

Hexo: ViM Layout

Layout Template

With very humble result as figure below

Hexo: Landing Page on Browser

[Hexo - Layout]

Adding Assets

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

Hexo Bulma: Tree

Adding Assets

And see the result in action.

Hexo Bulma: Layout Homepage

[Hexo - Bulma - CSS - Part One]

CSS Frameworks

Using CSS framework such as Bulma or Bootstrap, can make your life easier.

Hexo Bulma: Layout Navigation Bar

[Hexo - Bulma - CSS - Part Two]

Using SASS

Long code tends to get messy. You need to get organized.

Hexo Bulma SASS: Tree sass

[Presentation - Concept CSS]

Using SASS

Now you can have a nicer looks in browser.

Hexo Bulma: Layout Homepage

[Hexo - Bulma - SASS - Part One]

More Layout

Further, you can utilize stylesheet to control your responsive space, or custom component.

Hexo Bulma: Post with sidebar Layout

[Hexo - Bulma - SASS - Part Two]

2: Custom Pages 🤠

  • Default Pages
  • Custom Layouts Pages
  • Styling Layout
  • Simple Summary Page
  • Complex Summary Page
  • Custom Output
  • Widget
  • Data

Default Pages

Hexo has this four special page sections.

  • Index:
    http://localhost:4000/blog/
  • Archive:
    http://localhost:4000/archives/
    http://localhost:4000/archives/2015/
    http://localhost:4000/archives/2015/05/
  • Category:
    http://localhost:4000/categories/lyric/
  • Tag:
    http://localhost:4000/tags/pop/

Default Pages (example)

Hexo: Browser Section Tag

[Hexo - EJS - Section List - Part One]

Custom Layouts Pages

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

  • Category List:
    http://localhost:4000/categories.html
  • Tag List:
    http://localhost:4000/tags.html
  • Landing Page:
    http://localhost:4000/

Styling Layout

Instead of plain looks, you can style custom layout.

Hexo: Browser Section Tag

Styling Layout

With any looks, as creative as you can.

Hexo: Blog Index Refactored

[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

Simple Summary Page

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

Hexo: Refactoring Terms: Button of Tags

[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

[Hexo - EJS - Custom Page - Part Two]

Custom Output

Without adding any plugin, Hexo cannot generate custom output. But there is a trick.

Hexo Bulma: Archives JSON File

[Hexo - EJS - Custom Output]

Widget

You can also put anything in your layout as creative as you are.

Hexo: Widget Archives Grouped

[Hexo - EJS - Widget]

Data

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

Hexo: Content with Data

Data

Now consider link the data from this content below.

Hexo: Content with Data

Data

With previous article, now we can see one or more links in a widget.

Hexo: Widget Related Posts

[Hexo - EJS - Data]

3: Content 🤠

  • Layout: Blog Post
  • Markdown Configuration
  • Layout: Raw HTML
  • Syntax Highlighting
  • Meta SEO

Layout: Blog Post

Your typical post.ejs should contain header, and optionally footer (such as license) and navigation.

Hexo Content: ViM Post Layout

Layout: Blog Post

A complete post can be seen in preview below.

Hexo: Card Related Posts

[Hexo - Content - Blog Post]

Markdown Configuration

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

Hexo Markdown: Fix Bulma Heading Class Size

[Hexo - Content - Markdown]

Layout: Raw HTML

Raw html is useful when you want to add service, or just plain html such as TOC in figure below

Hexo Raw HTML: Table of Content

[Hexo - Content - Raw HTML]

Syntax Highlighting

Syntax highlighting in Hexo is using figure tag. In some cases you need to fix the stylesheet.

Hexo Syntax Highlighting: Reset Class in Figure Element

[Hexo - Content - Syntax Highlighting]

Meta SEO

Opengraph is a must nowadays.

Hexo Meta: Telegram Desktop Opengraph

[Hexo - Meta - SEO]

4: Feature: Pagination 🤠

  • Numbering
  • Responsive
  • Handling URL

Numbering

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

Hexo Pagination: Combined Animation

[Hexo - Pagination - Indicator]

Responsive

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

Hexo Pagination: Responsive Animation

[Hexo - Pagination - Responsive]

Handling URL

There are sections, that we can put pagination inside it.

  • Index:
    blog age: http://localhost:4000/blog/
  • Archive:
    root: http://localhost:4000/archives/
    year: http://localhost:4000/archives/2018/
    month: http://localhost:4000/archives/2018/09/
  • Category:
    item: http://localhost:4000/categories/lyric/
  • Tag:
    item: http://localhost:4000/tags/pop/

Handling URL

We need to handle previous URLs correctly with EJS function.

Hexo: Browser Section Tag

[Hexo - Pagination - Handling URL]

What is Next 🤔?

Deploy!
To Github or Gitlab or Netlify.

Netlify: New Site

[Netlify - Hosting]

Questions 🤔?

Don't be shy 🙋🏻‍♂️!

The End

🙇🏻

Thank You for Your Time.