At this day and age, building a web blog yourself almost seems like an outdated thing to do. Most people can get by with using Wordpress or Wix, which does most of the blog-building work for you and let you focus on actual writing. However, some people (me, for example) still prefer to have things done a certain way, and instead of navigating through thousands of templates and plugins we would rather build a simple static website to house our posts and thoughts. If you are one of us, you will find Hexo just the right tool for “Hexo your own blog”, which is what they like to say.
Hexo is a simple yet powerful framework for generating static websites. Static website refers to the website that has fixed content and only displays information without and server side scripting or database design. In other words, you will not be able to have readers push data (for example comments) to you unless you use some extra plugins.
To me this is perfect, since I am not expecting a lot of comments, and all I need is to have a webstie that stores my notes, which if I don’t write down somewhere I will probably forget. When I first started, I looked into Flask and Django, but quickly realized that I am spending way too much time on figuring out how to organize authentication and databases, while having very little time to actually write. Plus, Hexo has a variety of plug-ins that cater to your specific needs. For one, many Hexo themes allows using Disqus for commenting, which is one functionality that’s always nice to have.
Enough said, let’s start building a website with Hexo!
Using hexo is extremely easy, but first you will need the following:
- Install Node.js
- Install Git and create a Github account
- An easy-to-use text editor (Sublime, VScode, Atom, etc)
Once the above are installed, we can install Hexo by running
npm install -g hexo
Now you are ready to hexo your own blog!
First, start with
hexo init [your website folder name]
this will initialize a repository under
[your website folder name].
To spin up a default Hexo website, do
cd [your website folder name]
This will generate the static files (html, css, etc) for your website with hexo default options. You can now view your website on local hosting by running
you will see output similar to the following
INFO Start processing
INFO Hexo is running at http://localhost:xxxx . Press Ctrl+C to stop.
Copy the url to your broswer, and viola! Welcome to your website!
This website is created using Hexo’s default theme “landscape”, which looks like this:
Hexo offers a wide selection of themes, you can pick and choose the ones you like from here. This site uses the “Yilia-plus” theme. To install a theme, follow the instructions on the theme’s Github read me. Once installed, modify the
theme setting in
_config.yml to your theme’s name.
Take the theme
Yilias-plus for example, first go to the theme’s github repository and clone the theme to
/themes folder that’s under your website directory.
If you are in the root folder of your website directory, copy and execute the following in the terminal
_config.yml in root directory to use the new theme by changing the value of
yilia-plus shown as follows
# Hexo Configuration
Now your blog will look something like this
Now that your blog is up and running, you can use the following commands to create new posts and pages
hexo new [layout] "postName"
This will generate a new post (markdown file) to
source\_posts\post\postName.md. You can write your blog post by modifying this file. The file uses Markdown syntax, a short Markdown cheatsheet can be found here.
Once you are done with the blog post, save it and preview your post using
To get ready for deployment, do
which cleans the old static files. Then do
to generate the updated static files.
If you already have your site hosted somewhere (like github pages), simply do
and then your new blog post should be online and ready to be viewed by your readers!
The majority of this posts follows from my friend Xi’s post which follows from this Chinese post. The original post contains more details, but it does require you to be able to understand Chinese. There are other excellent resources online on how to use Hexo and what features it provides, so feel free to Google around. I will also post stuff about using Hexo whenever I have time or find some interesting features. Have fun blogging!