Hexojs blog basics Part 1.
This blogpost focusses on explaining the basics of hexojs. By the end of this post you’ll be able to create your very own blog using hexojs with a handful of commands.
What is HexoJs?
Hexo is a fast, simple and powerful blog framework. You write posts in Markdown (or other languages) and Hexo generates static files with a beautiful theme in seconds.
In more technical terms, Hexo can also be described as a Static Site Generator (SSG).
A static site generator is an application which takes simple Markdown formatted text files and generates static HTML, CSS, and JavaScript website files out of them. This means that using a Static Site Generator is easy even for people with little or no web development knowledge at all.
Quick Start
Installing the Hexo CLI
Install the Hexo command line interface (CLI) globally with the Node.js package manager (NPM):
1 | $ npm install -g hexo-cli |
…once installed, use the hexo init command to create a new blog project:
1 | $ hexo init my-blog |
Starting the server
In order to view your newly created site in the browser, start the local server using the hexo server command. (–open option opens the site in a new tab of your default browser).
1 | $ hexo server --open |
If you dislike having to manually refresh the browser each time, the hexo-livereload or hexo-browsersync plugins can do it automatically.
1 | npm install hexo-browsersync --save |
Creating a new draft blogpost
It’s always a good idea to create your new blog posts as drafts. This could be done by the following command.
1 | $ hexo new draft "New Blog Post" |
This creates a new markdown file under ./source/_drafts folders.
Publishing a draft post.
After editing the markdown file as required, the next step is to publish the draft into a live post. This could be done by using the publish command.
1 | $ hexo publish My-First-Blog-Post |
A few things will happen when this command is run:
1) The markdown file My-First-Blog-Post.md moves from ./source/_drafts/ to ./source/_posts.
2) The file’s “front-matter” changes to include a publish date:
Generating the static content
1 | $ hexo generate |
The hexo generate command generates the ./public folder. Within this folder you will be able to see all the static comtent required to upload in order to deploy the blog.