Using Hexo & Github to Create Your Own Blog

---

Introduction

To create a blog and have the freedom to customize it has always been a thing in the top of my to do list. Thus, after I checked out all the tools available, I chose Hexo.

I decided to use this blog as a place to write some fun stuff in computer science. This is the beginning of the series “using hexo and github to create your own blog”, and a detailed instruction for those beginners and who prefer to launch their own blog without much(actually zero) coding. I hope you find it useful.

Tools Needed

• Node.js (choose .msi)
• Github
• Git
• Hexo

Creating a Github Account

You need a Github Account to start with.
Creating a Github Account is simple with just a visit to their website.

Creating a Repository

To create a repository for your website, go to your own Github profile page.

First enter the name of your website. If you do want to use your own github account name as the address of the website, you need to type in youraccountname + .github.io
Below is mine, where alexsixdegrees is my account name, and alexsixdegrees.github.io is the name for this repository.

If you do not want to use your account name, simply type in the name of your website for example: Capstone.

You do not need to type in .github.io if the name of your website is different from your account name.

After entering your name and create the repository, click Settings at the right side.

Find Github Pages and click Choose a Theme.

Continue to Layout

Then you can select any model you want for your website. However, I suggest do not waste too much time on choosing one, since we are going to use hexo’s better-looking models…

Downloading and Installing Tools

So far we have made our first step in making our blog. Next we are going to prepare our tools to set up our blog.

Below is the list of the tools needed to be downloaded:

• Github
• Git for Windows
• Node.js for Windows

Download and Install all the tools.
Should be easy and simple.

Installing and Initializing Hexo

Open cmd. (windows + R and type in cmd)

First of all you need to decide where you should put your blog. Disk C would be fine:

cd /

Type the following to download Hexo

npm install -g hexo-cli

Afterwards type:

hexo -v

If a list of commands that shows the version of your hexo appears, it means that you are on the right track.

Type to initialize a folder name Hexo, you can use your website name as well to name this folder:

$ hexo init Hexo
$ cd Hexo
$ npm install

Be sure to type in three of them.

Setting Up the Blog

Now, if you finish the above, go to the root folder of your blog.(if you follow the exact same code, you would end up in Disk C and find a folder called Hexo, which is your root folder)

Enter the folder, find _config.yml

Open it use your notepad.

We would fill in some of the information:

title: #the title of your website
subtitle: #the subtitle
description: #description
author: #Your name
language: en

Here is the tricky part, now pay attention to the address of your site, if the address is for example: https://alexsixdegrees.github.io/ , you only need to type a backslash “/“ in the “root” type.

However, if your url looks like: https://alexsixdegrees.github.io/colloquy-capstone/ , then you need to type in the subdirectory in the “root” type as shown:

url: #the link of your own website page (the one we just create)
root: #If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'

Then go to your Github Page, Open the Repository, Click “Clone or Download”

Change the following settings, paste your URL:

deploy:
	type: git
  	repo: #your URL from "Clone or Download"
  	branch: master

Save the file.

Publish Your Post

Go to cmd, and get ready to publish your first article.

type

$ cd /
$ cd Hexo
$ hexo new "the title of the article"

Check the source file in Hexo file. There is a _post file within it. Enter it, and there is your new article.

You should see:

---
title: "the title of the article"
date: 2017-02-07 22:04:09
tags:
---

You can type anything below the — to be your content.
Save the file.

Go back to the cmd.
Type:

$ hexo server

You are able to see your own blog now on the local host.

Enjoy the moment of seeing the fresh look your blog.

Deployment

This is another tricky part.
Deployment allows to set up our local blog on the Github Page.
Open the command line:

$ hexo g -d

If it works, you would find the code in your github page become the same as the public folder in your local hexo folder.

Otherwise, try:

$ hexo generate
$ npm install hexo-deployer-git --save 
$ hexo deploy

This should work, and you would find your github page the same as the local one.

That’s ALL.

And here is your blog.

Feel free to check out the second article on how my hexo workflow is developed and the third article on how to choose a theme for hexo.

Additionally, in the future, you will use Markdown Editor to write and publish your blog. It’s an astonishingly simple language that can be mastered within minutes. You can find the tutorial here as well.

If you are not satisfied with your current hexo theme, try to search for some more themes. You can find more recommended themes here as well. For more detail, visit hexo’s official document.

Hope you find it useful.