Learning - Hexo - Static Site Generator
Installation
Install NodeJS and git.
node -v
git versionInstall Hexo
npm install -g hexo-cli
hexo -vInit project
hexo init ga-hexoThis will create a folder called ga-hexo.
Run
cd ga-hexo
hexo serverThe 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 packageWrite 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 --draftPublish 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: postIf modify it as below,
default_layout: draftThen 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 contentCustom scaffold file
For example scaffolds/giraffee.md
title: {{ title }}
date: {{ date }}
layout: {{ layout }}Following command
hexo new griaffe fWill create following file
title: f
date: 2017-09-14 15:11:10
layout: griaffeTags & 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: trueWhen run following command, source/_posts/a.md and source/_posts/a/ are created.
hexo new aTo 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-dustRestart 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.ymlfile
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.ejsin 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.ejsin 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 fileSo 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.ejsinpartialfolder.
<h1><%= title %></h1>
<hr> <br>- In
layer.ejsfile
<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-adminAfter installed, go to _config.yml, make sure that plugin is listed in dependencies.
Generating Site
Run following command to generate website
hexo generateThe site will be created in public folder.
