Programming

Reviving the Blog: Part 2 - Setting up Hexo

Pouring Concrete Foundation

To relaunch the blog, I chose Hexo as the framework to use to statically generate the new site. In this article, I’ll detail the steps to get everything set up and ready to publish new posts.

Install Node.js

Hexo is written in Javascript and uses Node.js to run. That means the first order of business is to get Node.js installed.

If you do a fair amount of Node.js development, you will quickly find that you often need different versions of Node.js installed for different projects. There are a number of projects available to manage multiple installs (nvm, nodist for Windows, n, etc.), but I tend to favor nodenv.

Nodenv works by installing the different versions of Node in your home directory under the .nodenv directory. Switching between them involves running a command that sets an environment variable (NODENV_VERSION) or creates a .node-version file in your project directory (preferred).

I’m using WSL2 on a Windows machine using brew, so the install is pretty straightforward:

1
2
3
4
5
6
7
8
9
# Install nodenv
brew install nodenv
# Setup your shell environment for future sessions (updates .bashrc or similar)
nodenv init
# Setup the current shell
eval "$(nodenv init -)"
# Install a version of Node.js to use as the default/global install
nodenv install 18.9.0
nodenv global 18.9.0

This sets up your environment so that the version of node automatically switches, depending on which directory you’re currently in. If there’s a .node-version file, it uses the version specified there. Otherwise, it uses the version we set with the nodenv global command.

Now that I have Node installed, it’s time to install Hexo and get it set up.

Install Hexo

Getting Hexo installed is a bit of a chicken-and-egg problem. To set up a new Hexo project I need Hexo installed but to install Hexo, I need a Node project.

I like to keep my Node.js installs as clean as possible, meaning that I don’t generally install NPM packages globally. Rather, I prefer to let each project manage it’s own dependencies. That way the dependencies of one project don’t interfere with another and I’m assured that the final build I make will work when I go to deploy to a production environment.

To bootstrap Hexo, we’ll install it globally, set up the Hexo project and then remove the global installation. We can then rely on the project specific version of Hexo for future development.

1
2
3
4
5
6
7
8
9
10
# Install Hexo
npm install --global hexo
# Create a new Hexo project
hexo init myblog
# Remove the global Hexo installation
npm uninstall hexo
# Install Hexo project dependencies
cd myblog
# Pin a version of Node.js to use for this project
nodenv local 18.9.0

At this point, we have a working blog! The project initialization creates the project skeleton and populates it with a sample blog post. This sample blog post, source/_posts/hello-world.md, provides helpful documentation about how to get started with Hexo–how to start the server, generate the static site, manage posts, and more.

You can view the output of your work thus far by starting Hexo in development (server) mode:

1
2
3
4
$ hexo server
INFO  Validating config
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop.

Following the instructions above, you can now view your locally running blog by visiting the url http://localhost:4000.

Source Code Control

As mentioned in part 1, my backup strategy will be based on source control. Now is a great time to set this up. It’s good to get in the habit of making regular commits each time something new is added and working with the blog. If I really mess something up, I can always roll back to the last good commit and try again.

GitHub is pretty much the standard these days. It’s what I’ll be using for this project, but you could just as easily use GitLab or your own, self-hosted repository. I prefer to use one of the cloud-based providers, as it gets a copy of my website off my laptop and out of my home, should something happen to either one.

Following the instructions from GitHub, the basic sequence is as follows:

  1. Initialize your local directory as a git repository
    1
    git init -b main
  2. Commit the initial state of the directory as your first commit
    1
    2
    git add .
    git commit -m "Hexo setup complete"
  3. Set up a repository on GitHub.com. I chose to make mine private, but feel free to choose the permissions you’re comfortable with.
  4. Connect your GitHub.com repository to your local directory:
    1
    2
    3
    4
    5
    6
    # REMOTE_URL is copied from the GitHub.com page for your repository
    git remote add origin <REMOTE_URL>
    # Verify the remote is working
    git remote -v
    # Push your local commits to GitHub.com
    git push origin main

Ready for Import

Now that Hexo is setup, I’m ready to import the 50+ blog posts from my old website. Stay tuned for part 3 of this series for how I accomplished that!

Getting a new blog up and running may seem like a daunting task. By breaking down the process into small pieces, and tackling each piece on a consistent basis, the new blog will be up and running in no time!