Enhance Your Hexo Blog

HexoPlugins
Blogging, Hexo, StaticWebsite, Tutorials

This tutorial covers how you can enhance your Hexo blog. If you have not yet create it, you might want to check out the quick start with Hexo, otherwise let’s go through a few essential plug-ins that might leverage your blog’s usability very briefly. You can find the detailed list of plug-ins here.

Comments & Discussions

One of the most important features of a blog is perhaps the possibility to interact with your readers and that will keep them coming back. disqus is a popular commenting service that works through the Javascript snippet within your page.

What you need to do to modify your blog with a full fledged commenting service is to sign up for a disqus account, register your site and pick a unique short-name for your blog and paste it in your _config.yaml file, right below your theme name as shown here.

1
disqus_shortname: <your-disqus-shortname>

Using this plug-in, you can empower your blog reader with the ability of searching through your posts.

1
$ npm install hexo-generator-json-content --save

Right after installation, the plug-in should work properly out of the box (after running hexo generate or hexo server). however, in order to through details of configuration you might want to check its Github page or your theme’s “_config.yaml” file.

RSS Feed

You can enable your blog with an RSS feed out of your posts in hexo by installing this plug-in.

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

The plug-in can be configured in the _config.yaml with the following configuration section.

1
2
3
4
feed:
  type: atom
  path: atom.xml
  limit: 20

Markdown Support

This plug-in provides more support on the markdown such as GFM (Github Flavored Markdown) tables and line breaks.

1
$ npm install hexo-renderer-marked --save

You can customize the plug-in by pasting the following in your _config.yaml and changing the values.

1
2
3
4
5
6
7
8
marked:
  gfm: true
  pedantic: false
  sanitize: false
  tables: true
  breaks: true
  smartLists: true
  smartypants: true

Category Generator

This plug-in allows you to assign one or more tags to your post. It will group your posts and enables your readers to later on find out about all of posts that are tagged with the same category.

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

and the related options are as follows:

1
2
category_generator:
  per_page: 10

CNAME Generator

This plug-in will automatically generate a Github pages CNAME file.

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

This plug-in does not require any specific configuration. Only make sure to change your blog’s url to the real one in the _config.yaml

1
2
3
# URL
## If your site is put in a subdirectory, set URL as 'http://yoursite.com/child' and root as '/child/'
url: <real-blog-url>

Git Deployer

This plug-in will help you deploy your blog using git.

1
$ npm install hexo-deployer-git --save

You can configure the deploy plug-in like this:

1
2
3
4
deploy:
  type: git
  repo: https://github.com/<username>/<repository>
  branch: master

Deploy to Github

When you are ready to deploy your blog to the Github, run the following commands to generate your blog and deploy it to the specified branch in your Github repository as you setup before.

1
2
$ hexo generate
$ hexo deploy

Now that you have your generated blog on Github, you can configure and connect your custom domain to load your blog from Github.

Share Comments