Preface
Goal: Show Minimal Homepage in Hexo
This article use tutor-01 theme. We will create it step by step.
Here, I present a Hexo Tutorial, step by step, for beginners.
Artefacts
Our minimal homepage require at least four artefacts.
-
_config.yml
-
source/index.html
-
themes/tutor-01/layout/layout.ejs
-
themes/tutor-01/layout/index.ejs
Source Code
You can download the source code of this article here.
Extract and run on CLI:
$ npm install
0: Theme Making
Consider to have a look at the big picture below:
1: Minimal Configuration
First thing first, We need a workable configuration.
The original _config.yml provided is long, and we need a shorter one so we can learn sep by step. Consider have a look at this minimalist config:
-
- _config.yml
- gitlab.com/…/_config.yml
# Hexo Configuration
# Site
title: Heartbeats for Bulma
subtitle: Who am I to keep you wait?
description: Too Long. Too Late. So Far Away. So Far Too Long.
keywords: affection, crush, dream, heartbeat, pulse
author: Mataharani
language: en
timezone: Asia/Jakarta
# Extensions
theme: tutor-01
We will also make this minimalist tutor-01 theme, right away.
2: 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.
Layout: Tree
Our minimal theme only need two artefacts.
-
themes/tutor-01/layout/layout.ejs
-
themes/tutor-01/layout/index.ejs
tree themes -I node_modules -L 3
themes
└── tutor-01
└── layout
├── index.ejs
└── layout.ejs
2 directories, 2 files
Layout: EJS Layout
This layout contains the HTML skeleton of the whole web page.
-
- themes/tutor-01/layout/layout.ejs
- gitlab.com/…/layout/layout.ejs
<html>
<head>
<meta charset="utf-8">
<title><%= page.title || config.title%></title>
</head>
<body>
<p><strong>This is header.</strong></p>
<div id="content">
<%- body %>
</div>
<p><strong>This is footer.</strong></p>
</body>
</html>
All kind of page in Hexo, is based on this skeleton.
Notice that we have our very first EJS template:
<%= page.title || config.title%></title>
and
<%- body %>
Layout: EJS Index
This layout contains the content of landing page. This is usually the index of the blog.
-
- themes/tutor-01/layout/index.ejs
- gitlab.com/…/layout/index.ejs
<h1><%= config.author %></h1>
<p><%= config.subtitle %></p>
<p><strong>This is index.</strong></p>
We will alter later, on tutor-04. Now we need to live with basic template.
3: Minimal Homepage
We are finished with minimal homepage.
CLI: Run Server
$ hexo server -p 4000 --debug
14:33:03.033 DEBUG Writing database to /home/epsi/tutor-01/db.json
14:33:03.152 DEBUG Hexo version: 3.8.0
14:33:03.153 DEBUG Working directory: ~/tutor-01/
14:33:03.818 DEBUG Config loaded: ~/tutor-01/_config.yml
14:33:03.923 DEBUG Plugin loaded: hexo-generator-archive
14:33:03.927 DEBUG Plugin loaded: hexo-generator-category
14:33:03.934 DEBUG Plugin loaded: hexo-generator-index
14:33:03.937 DEBUG Plugin loaded: hexo-generator-tag
14:33:03.953 DEBUG Plugin loaded: hexo-renderer-ejs
14:33:03.956 DEBUG Plugin loaded: hexo-renderer-stylus
14:33:03.984 DEBUG Plugin loaded: hexo-renderer-marked
14:33:04.242 DEBUG Plugin loaded: hexo-server
14:33:04.280 INFO Start processing
14:33:04.418 DEBUG Processed: index.html
14:33:04.530 DEBUG Processed: layout/index.ejs
14:33:04.537 DEBUG Processed: layout/layout.ejs
14:33:05.053 DEBUG Generator: page
14:33:05.055 DEBUG Generator: post
14:33:05.058 DEBUG Generator: archive
14:33:05.058 DEBUG Generator: category
14:33:05.059 DEBUG Generator: index
14:33:05.059 DEBUG Generator: tag
14:33:05.060 DEBUG Generator: asset
14:33:05.073 INFO Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.
Render: Browser
Now check the generated page on your favorite browser:
Render: Source
Consider have a look at HTML source for a while.
$ curl localhost:4000
<html>
<head><meta name="generator" content="Hexo 3.8.0">
<meta charset="utf-8">
<title>Welcome to Heartbeat</title>
</head>
<body>
<p><strong>This is header.</strong></p>
<div id="content">
<h1>Mataharani</h1>
<p>Who am I to keep you wait?</p>
<p><strong>This is index.</strong></p>
</div>
<p><strong>This is footer.</strong></p>
</body>
</html>
You can see how clean the output is.
What is Next ?
Consider continue reading [ Hexo Layout ]. We are going to use theme, with layouts inside each theme. Out first theme is still pure HTML with no CSS.
Thank you for reading.