Personal Hexo Blog Tutorial // Part 1 Setting Up Hexo

This is to be the first of a series of tutorials on how to setup a Hexo blog site. The tutorials will teach you:

To begin this tutorial I am going to show how to get Hexo setup on a Mac, as that is what I have used to develop on so far. One of the first things that you will need to do is to install Node.js and XCode if you have not already done so on your Mac, if you are developing you may have already done so. If you already have Node.js and XCode installed then skip ahead to the install Hexo section. To install XCode please go to the App Store and do so, the link will take you to its page.

This download may take some time but it is necessary for us to then get Homebrew, a package manager for Mac, installed. Homebrew allows for easier managment of packages and programs on your Mac. More info on Homebrew can be found on their site. To install homebrew they have provided a helpful ruby script for us that is listed below, just open up a terminal session enter the following:

1
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Once homebrew has been installed then we can install Node. To install node with homebrew we issue the following command in the terminal:

1
brew install node

Simple as that we will now have Node installed. To ensure that it is installed and to get you a bit more familiar with Node enter the following commands:

1
2
node -v
npm -v

These command will output the version of Node that you currently have installed and the version of NPM that is installed. NPM is a package manager for Node, it takes care of handling the different javascript libraries/packages that you will be using with Node such as Hexo.

Now that Node is installed and you have access to NPM, Hexo can be installed and your first blog can be created by using the following commands.

1
2
3
4
npm install hexo-cli -g
hexo init blog
cd blog
hexo server

Running hexo server starts up your blog on your local machine allowing you to see what your blog posts and site will look like. This will not be available for the public to see but will allow you to test on your local network before you deploy to a hosting platform. We will go over how to upload and host your site from s3 in a future tutorial.

Now that you have created your blog it’s time to add your first post. To do so you will need to issue the following command in the terminal:

1
hexo new post <post_title>

Where there is <post_title> put the name of your blog post title. This will create a new post for you and can be found at \blog\folder\source\_posts\<post_title>.md. This file is written in a flavor of markdown language. A markdown language is a language that allows you to define the structure and appearance of your text through a specific syntax. The use of Markdown for writing blog posts allows for the text that you write to then be converted into HTML which will then be ready to be served by your site. For you first blog post open the <post_title.md> file and write the following:

1
2
3
4
5
6
7
8
9
10
---
title: First Blog Post
date: 2017-10-01 22:03:26
tags:
- projects
- blog
- hexo
---

My First Hexo Post

Now save this file and run the command hexo server and go to localhost:4000 in your browser. On the front page of your blog you will now be able to preview your first blog post.

You did it and have now created your first Hexo blog and blog post. Check back for the followup tutorials where I will show you how to have your site hosted on s3 so that the world can see it and then later have it deployed automatically after you write a new post. Best of luck making.

– Allen