0%

Decorating my blog with Hexo - theme, features, tips

Posted on Edited on Disqus:

Change hexo blog theme - NexT

Change to hexo blog theme NexT which has neat look and supports a lot cool features.
Download the theme

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

Edit blog configuration file _config.yml, change to theme from the default langscape to next

1
theme: next

Edit theme configuration file themes/next/_config.yml, change list scheme from default Muse to Pisces, see more about NexT theme scheme

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

I prefer the scheme Pisces because it has menu and links and other stuff showing on left side of the blog content.

Add blog owner avatar

I’d like my avatar showing up in my blog, and I have avatar uploaded to my github account.
Locate the avatar image link of my github account, mine is https://avatars0.githubusercontent.com/u/34552097

Edit blog configuration file _config.yml, add a line in # Site section

1
avatar: https://avatars0.githubusercontent.com/u/34552097

Create categories page, tags page, and about page

create categories page

1
2
$ hexo new page "categories"
INFO  Created: ~/vmnet8.github.io/source/categories/index.md

Edit source/categories/index.md, set page type to “categories”, change title to “Categories”

1
2
3
title: Categories
date: 2017-12-17 22:39:34
type: categories

create tags page

1
2
$ hexo new page "tags"
INFO  Created: ~/vmnet8.github.io/source/tags/index.md

Edit source/tags/index.md, set type to “tags”, change title to “Tags”

create about page

1
2
$ hexo new page "about"
INFO  Created: ~/vmnet8.github.io/source/about/index.md

Edit source/about/index.md, change title to “About me”, and add description of about myself.

1
2
3
4
5
---
title: About Me
date: 2017-12-18 11:41:02
---
My name is Anna X.

Edit theme configuration file themes/next/_config.yml, enable categories, tags, and about menu.

1
2
3
4
5
6
menu:
  home: / || home
  about: /about/ || user
  tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive

Edit the post source/_post/1st-blog.md, add categories and tags

1
2
3
4
5
6
7
title: 1st blog
date: 2017-12-17 21:36:48
tags:
    - blog
    - hexo
categories:
    - life

Edit theme configuration file, themes/next/_config.yml, enable social links, change icons_only from false to true.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
social:
  GitHub: https://github.com/vmnet8 || github
  E-Mail: mailto:vmnet8@gmail.com || envelope
  #Google: https://plus.google.com/yourname || google
  #Twitter: https://twitter.com/username || twitter
  #FB Page: https://www.facebook.com/yourname || facebook
  #VK Group: https://vk.com/yourname || vk
  #StackOverflow: https://stackoverflow.com/yourname || stack-overflow
  #YouTube: https://youtube.com/yourname || youtube
  #Instagram: https://instagram.com/yourname || instagram
  #Skype: skype:yourname?call|chat || skype
  Linkedin: https://www.linkedin.com/in/anna_x/ || linkedin

social_icons:
  enable: true
  icons_only: true
  transition: false

Add RSS

Install hexo-generator-feed plugin

1
$ npm install hexo-generator-feed --save

Edit blog configuration file _config.yml

1
2
3
4
5
6
7
type: atom
path: atom.xml
limit: 20
hub:
content:
content_limit: 140
content_limit_delim: ' '

Adding image to blog post

I’d like the image for a blog post to be in a blog post specific folder, so I enabled the “post_asset_folder”
Edit blog configuration file _config.yml

1
post_asset_folder: true

When I do “hexo new ‘My 1st blog’”, a blog specific asset folder named “My-1st-blog” will be created under source/_post along with the post markdown file My-1st-blog.md .

Copy the image file ‘penguins.png’ to source/_post/My-1st-blog
Edit source_post/My-1st-blog.md, reference the image in the markdown file like this

1
2
This is my first blog post.
{% asset_img example.png This is an example image %}

Enable post comment with disqus

Sign up https://disqus.com/, you can sign up with twitter, facebook, or google account. On next step, choose “I want to install Disqus on my site”, mark the shortname of the site. My shortname is annax

NexT theme already supports disqus, edit theme configuration theme/next/_config.yml

1
2
3
4
disqus:
  enable: true
  shortname: annax
  count: true

Then each blog post, and about page, and tags page will have adding comment embeded below the content.
If you want to disable comment for specific page or post, add “comments: false” to post/page front-matter
For me, I disable comment for tags page.

Page and site view count

Enable busuanzi_count in theme next configuration file, edit theme/next/_config.yml

1
2
3
busuanzi_count:
  # count values only if the other configs are false
  enable: true

Then the blog home page will have site view count at the bottom and each post page will have post view count at the bottom.

Install hexo-generator-searchdb plugin

1
$ npm install hexo-generator-searchdb --save

Edit blog configuration file _config.yml, add

1
2
3
4
5
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

Edit theme configuration file theme/next/_config.yml

1
2
local_search:
  enable: true

Then the blog menu will have a “search” button

Tips

If the blog is too long and you don’t want the whole blog content show in the blog home page, add a line to blog post markdown file where you want to insert a “Read more” button.

1
<!--more-->