Meta! How to create this blog (for free ;)

Why Hexo?

It’s a static site generator. It’s fast, free, and simple. AND you post in markdown, which is just neat.

Creating your hexo blog 101

It’s fun & free (except for domain name, if you’re not a uni student).
First let’s setup hexo. Install npm if you haven’t.

1
2
3
4
5
6
7
npm install hexo-cli -g
hexo init
npm i # npm install
hexo s # hexo server

git clone https://github.com/iissnan/hexo-theme-next themes/next
cd themes/next/

Now go to localhost:4000, your blog should be using the default hexo theme.
We downloaded the NexT theme but have not ‘installed it’, so:

open config.yml to change theme

1
<!-- replace default "landscape" w/ "next" -->
themes: next

Now your blog should be in the next theme. hexo s to check


Create a new post/ page:

1
2
3
4
hexo new post 'blog post title' #or hexo 'post title'
hexo new page 'page title'
hexo g # generate files to /public
hexo s # start server if not already started in another terminal window

Edit it under source/_posts, check hexo’s docs for more options


Setting up domain and hosting

You must already have bought a domain, meaning the website name ‘leonmak.me’, in my case. If you have a .edu email, I recommend github education pack.

Github.io pages

Go to github.com & create organisation and within it a repo with same name (for eg using ‘leonblogs’ as the org name and repo name I will get “leonblogs/leonblogs.github.io”)
add the remote then push to the repo, in repo settings you can see link to leonblogs.github.io

Add custom domain

Create a new file in the root folder named ‘CNAME’ with just leonmak.me in it. in Domain provider (eg:Namecheap.com) Add A records: 192.30.252.153, 192.30.252.154 and CNAME: leonmak.me.

Now in settings it should link to leonmak.me

Updating with “hexo-deploy” plugin

run npm install hexo-deployer-git --save in _config.yml:

1
# Deployment
## Docs: http://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: https://github.com/leonblogs/leonblogs.github.io

Add CNAME plugin for custom domain

npm install hexo-generator-cname --save

Add hexo-generator-cname to plugins in _config.yml, and set url

1
url: http://leonmak.me
<!-- ... other options -->
plugins:
- hexo-generator-cname

After editing _posts/abc.md files, do a hexo generate, to build the files, then hexo deploy.
Done!

Other plugins:

  • hexo emojis
  • Need to install hexo-util
  • Follow the instructions on the page, it’s similar to hexo-deploy