Hexo Static Generator

Building Site with Hexo.

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

About Me 🙋🏻‍♂️!

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]

Minimal Theme

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

Layout Template

Your typical layout would contain header and footer.

Layout Template

With very humble result as figure below

[Hexo - Layout]

Adding Assets

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

Adding Assets

And see the result in action.

[Hexo - Bulma - CSS - Part One]

CSS Frameworks

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

[Hexo - Bulma - CSS - Part Two]

Using SASS

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

[Presentation - Concept CSS]

Using SASS

Now you can have a nicer looks in browser.

[Hexo - Bulma - SASS - Part One]

More Layout

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

[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 - 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.

Styling Layout

With any looks, as creative as you can.

[Hexo - EJS - Section List - Part Two]

Simple Summary Page

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

Simple Summary Page

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

[Hexo - EJS - Custom Page - Part One]

Complex Summary Page

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

[Hexo - EJS - Custom Page - Part Two]

Custom Output

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

[Hexo - EJS - Custom Output]

Widget

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

[Hexo - EJS - Widget]

Data

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

Data

Now consider link the data from this content below.

Data

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

[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.

Layout: Blog Post

A complete post can be seen in preview below.

[Hexo - Content - Blog Post]

Markdown Configuration

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

[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 - Content - Raw HTML]

Syntax Highlighting

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

[Hexo - Content - Syntax Highlighting]

Meta SEO

Opengraph is a must nowadays.

[Hexo - Meta - SEO]

4: Feature: Pagination 🤠

• Numbering
• Responsive
• Handling URL

Numbering

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

[Hexo - Pagination - Indicator]

Responsive

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

[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 - Pagination - Handling URL]

What is Next 🤔?

Deploy!
To Github or Gitlab or Netlify.

[Netlify - Hosting]

Questions 🤔?

Don't be shy 🙋🏻‍♂️!

The End

🙇🏻

Thank You for Your Time.