Set up a new hexo blog

Posted on In

setting up a new hexo blog and deploy to github pages.

Quick start

  • Install Hexo-cli npm install hexo-cli -g
  • Get help - hexo help
  • create a blog hexo init blog
  • run npm install to install dependencies
  • create a new post hexo new post "Post Title"
    • create a draft hexo new draft "Post Title"
    • turn a draft into post hexo publish "Post Title"
  • run a local server hexo server
    • to preview draft hexo server --draft
    • add -o option to immediately open the server url in your default web browser.
  • Remove generated files and cache hexo clean
  • generate static files hexo generate
  • deploy blog hexo deploy -g

Hexo Documentation

Config URL

After installing Hexo there are many configurations you can set to customize your blog. You can customize the config in _config.yml file.

The default permalink is :year/:month/:day/:title/. It is dependent on the date and title. A better way is to change
the permalink to use title only

1
2
permalink: :title/
# permalink: :year/:month/:day/:title/

Config Language

language can be set in _config.yml. Default is english

1
language: en

Github Pages Deployment

see one-command Deployment documentation https://hexo.io/docs/one-command-deployment

install hexo git deployer plugin

1
npm install hexo-deployer-git --save

sample config

1
2
3
4
deploy:
  type: git
  repo: https://github.com/user/user.github.io
  branch: master

Generate read more

To create summary for a post. add <!-- more -->

You can also enable automatically Excerpt, but it is not recommended.

Insert Image

You can use the image path. path is relative to _posts directory. There are a couple of ways to do

1
2
<img src="/image/path/image.jpg"  />
<img src="/image/path/image.jpg" width="500px" />

you can create a directory with the same name as the post name without the extension, then insert the image into that directory. That way you don’t need to include the image path

1
2
<img src="image.jpg"  />
<img src="image.jpg" width="500px" />

Commenting with Disqus

First you need to sign up in Disqus and create a site for the blog. Then enable Disqus in themes/next/_config.yml. You can get the site’s short name from Disqus.

1
2
3
4
5
disqus:
  enable: true
  shortname: your-short-name-here
  count: true
  lazyload: false

If you want to disable comment in a post/page. add comments: false to the front-matter

Next Theme

Next Theme Homepage

Install Next theme

The easiest way to install Next theme is to clone the theme into themes directory

1
git clone https://github.com/theme-next/hexo-theme-next.git

then change the theme in _config.next.yml

1
theme: hexo-theme-next

select schemes

select the scheme you like

1
2
3
4
5
# Schemes
# scheme: Muse
scheme: Mist
# scheme: Pisces
# scheme: Gemini

Add Tags Page

add tags page to the blog

1
hexo new page "tags"

Edit source/tags/index.md page

1
2
3
4
5
6
---
title: All tags
date: 2014-12-22 12:39:04
type: "tags"
comments: false
---

Then uncomment tags menu

1
2
menu:
  tags: /tags/ || tags

Add Categories Page

add categories page to the blog. This is similar to adding tags page.

1
hexo new page "categories"

Edit source/categories/index.md page

1
2
3
4
5
6
---
title: All categories
date: 2014-12-22 12:39:04
type: "categories"
comments: false
---

then uncomment categories menu

1
2
menu:
    categories: /categories/ || th

see https://theme-next.js.org/docs/third-party-services/search-services

  1. install hexo-generator-searchdb plugin. This plugin is used to generate the site’s search data.

    1
    npm install hexo-generator-searchdb --save

  2. configure _config.yml. Add the following: 

    1
    2
    3
    4
    5
    search:
      path: search.xml
      field: post
      content: true
      format: html

  3. Enable local search in _config.next.yml\

    1
    2
    local_search:
      enable: true

Enable copy code button

You can enable the button to copy code block in themes/_config.yml. 

1
2
3
4
5
# Add copy button on codeblock
copy_button:
  enable: true
  # Available values: default | flat | mac
  style: flat

Reference