Using WSL and Nodejs to Build and Manage Hexo

Using WSL and Nodejs to Build and Manage Hexo

Sterling Hammer
Guides
Page content

I had initially intended to publish this as part of my Azure DevOps entry, but it felt like it needed its own dedicated article. For my Hexo workflow I decided I wanted to use the Windows Subsystem for Linux from here on referred to as WSL. This works best for me because I am primarily a Windows user and I also have a fair bit of experience with Linux.

Getting Started

The first thing you’ll need to do is get Hexo configured locally so that you can generate the static content for later deployment, and also run your local server to test your content. The basics on how to configure Hexo are available on their website, I’ll cover how to do it on WSL specifically.

The first thing you need to do if you have not already is get WSL installed and running. Step by step instructions on this are available over on Microsoft Docs. The instructions below are specifically for the Ubuntu distro.

The below instructions assume a fresh install of the Ubuntu distro from the Windows store.

Getting npm and Node.js installed

You’ll need git for a variety of reasons, so let’s just get it installed first along with all of the prerequisites.

Install Git

sudo apt-get install git-core

Install NVM & Node.js

This is using Node Version Manager by creationix on GitHub. There are many ways to install Node.js, I went with the Hexo documentation.

Download and run installation script:

wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.34.0/install.sh | bash

Load NVM if it isn’t already loaded:

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

FInally, install node.js

nvm install stable

Install npm

In this step we’ll install the node package manager. npm is a package manager for node that will then allow you to install Hexo, plugins, and anything else you’d like to do with node.

sudo apt install npm

Install Hexo

At this point we are ready to install the Hexo cli which will allow you to finally build out a hexo environment.

npm install -g hexo-cli

Initialize a new blog

With WSL you can actually navigate to the Windows file system which means you can utilize tools like Visual Studio Code to edit your articles, templates and configuration files. For purposes of this article lets say we want to get Hexo running in c:\hexo

Note: You can actually customize the mount point noted below. For example you could change it to /c/hexo instead of /mnt/c/hexo by modifying wsl.conf. You can also use these steps if you find that your Windows drives are not mounted inside WSL.

[automount]
root = /
options = "metadata"

Full documentation on settings available in wsl.conf is available here.

Now initialize a new site in that location:

hexo init /mnt/c/hexo
cd /mnt/c/hexo
npm install

You will then have the following folder structure:

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

That’s it! Now you are ready to configure your blog and start authoring content. Documentation for editing your site configuration can be found here.

Finishing Up

Now that you have the basics in place you can commit the directory to GitHub or Azure Devops and begin authoring posts and even installing custom themes if you want. Below are a few links to get you started:

  • Writing Content - This explains how to write new posts and pages as well as create drafts.
  • Miscellaneous Commands - This contains documentation on how to generate a static site, or launch a local server to test your newly created content.

I hope this article was helpful! You are now well on your way to publishing a Hexo blog in the wild. In my next article I will cover how to automatically deploy Hexo using an Azure Pipeline.