Tag: hero

Learning – Hexo – Static Site Generator

Posted on by Bian Xi Leave a Comment on Learning – Hexo – Static Site Generator

Learning - Hexo - Static Site Generator

Installation

Install NodeJS and git.

node -v
git version

Install Hexo

npm install -g hexo-cli
hexo -v

Init project

hexo init ga-hexo

This will create a folder called ga-hexo.

Run

cd ga-hexo
hexo server

The server will be run as http://localhost:4000.

Directories

node_modules - used by NodeJS
scaffolds - content templates
source - content folder
source/_post - the posts
themes - themes used
themes/landscape - default theme
_config.yml - define default theme, etc.
.gitignore
db.json
package.json - used by NodeJS package

Write content

Create post

Posts are written in source/_post.

cd ga-hexo
hexo new <page_name>

This will create a file source/_post/<page_name>.md

Create draft

hexo new draft <page_name>

This will create a file source/_draft/<page_name>.md. To show draft in hexo server, run following command

hexo server --draft

Publish draft

hexo publish <page_name>

Create page

hexo new page <page_name>

This will create a folder with index.html file source/<page_name>/index.md. To show page in hexo server, access URL http://localhost:4000/<page_name>/

Default type of page

The default layout can be found in _config.yml file as below

default_layout: post

If modify it as below,

default_layout: draft

Then the following command will create draft

hexo new <page_name>

Front Matter

Can be YAML or JSON

title: A's Title
date: 2017-09-14 15:11:10
tags: [ Tag1, Tag2, Tag3 ]

Scaffolds

In scaffolds folder, has 3 files as template, draft.md, page.md and post.md.

For example the post.md file.

---
title: {{ title }}
date: {{ date }}
tags:
---

Default content

Custom scaffold file

For example scaffolds/giraffee.md

title: {{ title }}
date: {{ date }}
layout: {{ layout }}

Following command

hexo new griaffe f

Will create following file

title: f
date: 2017-09-14 15:11:10
layout: griaffe

Tags & Categories

Tags

tags: [ Tag1, Tag2, Tag3 ]

The page will be

http://localhost:4000/tags/Tag1/

Categories

Categories:
- [Cat1, Cat1.1]
- [Cat2]
- [Cat3]

Tag Plugins

{% codeblock lang:javascript %}
  alert("Hello world");
  var myVar = "Hello World";
{% endcodeblock %}
{% youtuble hY7m5jjJ9mM %}

Asset Folders

The asset folders are static file folders.

To use asset folders, set following line in _config.yml file.

post_asset_folder: true

When run following command, source/_posts/a.md and source/_posts/a/ are created.

hexo new a

To use asset, following statement can be used in markdown file

{% asset_img hexo.jpg Hexo Logo %}

Note: Hexo Logo is the title of image.

To link to asset, use following line

{% asset_link hexo.jpg Hexo Logo %}

To use image path, use following line

{% asset_path hexo.jpg %}

Theme

Install theme

Themes can be downloaded from https://hexo.io/themes/index.html.

Then change _config.yml file as below

theme: alpha-dust

Restart the hexo server.

Create own theme

  • Create folder themes/ga-theme

  • Create file themes/ga-theme/config.yml

  • Create folders

themes/ga-theme/languages
themes/ga-theme/layout
themes/ga-theme/scripts
themes/ga-theme/source
  • Modify _config.yml file
theme: ga-theme
  • Restart hexo server

A blank page will be displayed.

Layout

layout.ejs

Layout is in themes/ga-theme/layout.

  • Create a file called layout.ejs in layout folder.
<html>
...
<body>
  This is the layout.ejs file
  <br>
  <%- body %>
  <br>
  This is the layout.ejs file
</body>
</html>

index.ejs

  • Create another file called index.ejs in layout folder.
This is a index.ejs file.

Then the output will be as follow for all index files, such as http://localhost:4000/, http://localhost:4000/a/, http://localhost:4000/2017/09/13/a/, etc.

This is the layout.ejs file
This is a index.ejs file.
This is the layout.ejs file

So all the pages will use layout.ejs file. And the <%- body %> will be replaced by actual ejs file. In above case, it is index.ejs file.

post.ejs

Create a file called themes/ga-theme/layout/post.ejs

<h1>This is a post</h1>

This will be used for all posts.

page.ejs

Create a file called themes/ga-theme/layout/page.ejs, this will impact all pages.

<h1>This is a page</h1>

tag.ejs

<h1>This is a tag</h1>

category.ejs

Partials

  • Create a folder themes/layout/partial

  • Then create a header.ejs in partial folder.

<h1><%= title %></h1>
<hr> <br>
  • In layer.ejs file
<html>
...
<body>
  <%- partial('partial/header', {title: 'hello world'}) %>
  <br>
  <%- body %>
  <br>
  Footer
</body>
</html>

Variables

Access front matter variable inside layout. For example, in post.ejs

<h1><%- page.title %></h1>
<p><%- page.date %></p>
<hr>
<%- page.content %>

The variables can be found in https://hexo.io/docs/variables.html

Custom variable

<%- page.author %>

If statement

<% if (page.author == "Mike") { %>
  Mike is the author, he's the best
<% } else { %>
  this author sucks
<% } %>

For Loops

<% site.posts.forEach(function(post) { %>
  <li><a href="<%- post.path %>"<%- post.title %></a></li>
  <br>
<% }) %>

Helper

Helpers are small functions.

<%- trim('    This is my string   ') %>
<%- titlecase('This is my string') %>
<%- date(Date.now(), 'YYYY/M/D') %>
<%- date(Date.now(), 'h:mm:ss a') %>

Helps can be found in https://hexo.io/docs/helpers.html.

Data Files

Create folder source/_data, and data file can be JSON or YAML file. Such as myData.yml

var1: "Var1's Value"
var2: "Var2's Value"
var3: "Var3's Value"

In template, such as index.ejs

<%- site.data.myData.var1 %> <br>
<%- site.data.myData.var2 %> <br>
<% for (var value in site.data.myData) { %>
  <%- value %> <br>
<% } %>
<br>
<% for (var value in site.data.myData) { %>
  <%- site.data.myData[value] %> <br>
<% } %>

Plugins

Download from https://hexo.io/plugins/.

Normally, use npm install to install plugin. For example,

npm install hexo-admin

After installed, go to _config.yml, make sure that plugin is listed in dependencies.

Generating Site

Run following command to generate website

hexo generate

The site will be created in public folder.

References

Hexo - Static Site Generator