Keep simple, keep hungry

Hexo With NexT on Github Page

Posted on Edited on In Valine:

Hexo is flexible blog system and Next comes with bundle of extensions to make it easier to use hexo blog.

Component Version
hexo 4.2
hexo-theme-next 7.7

Hexo Init

$ hexo init # Initial the project
$ npm install # download the independencies
$ tree ./ -L 1 # Just review the file tree
$ hexo g # Generate the html
$ hexo s # Start the server
$ code _config.yml

1
2
3
4
deploy:
    type: git
    repo:  # your github repo
    branch: master

Custom Domain Name

add a new file “CNAME” under the folder /public/
add your domain name as the content

1
$ echo "domain name" > ./public/CNAME

Custom Theme

$ git clone https://github.com/theme-next/hexo-theme-next.git themes/theme_next
change the content in the _config.yml

1
theme: theme_next

$ hexo clean # clean public/

Link to the homepage : https://theme-next.org

Google Adsense

  • Add a file source/_data/header.swig.
  • past the from google adsense on it
  • uncomment the line in themes/theme_next/_config.yml
    1
    2
    3
    4
    5
    6
    # Define custom file paths.
    # Create your custom files in site directory `source/_data` and uncomment needed files below.
    custom_file_path:
        #head: source/_data/head.swig
        header: source/_data/header.swig
        #sidebar: source/_data/sidebar.swig

more detail in google-analytics-and-adsense-in-hexo

Comment System

Disqus

Disqus can allow the anonymous, but it can not use in China.

Add Comments Section to Your Hexo Blog

DisqusJS can help us to go through the whole world
https://theme-next.org/docs/third-party-services/comments

Valine

This is good enough to approach it.

https://juejin.im/post/5d790e706fb9a06af8250665

delete the comment on valine

登录Leancloud>选择你创建的应用>存储>选择ClassComment

Hexo Editor - Typora

Typora is a what you see is what you get system.

Here is my another tutorial
https://leonvision.online/technology/wysiwyg-markdown-editor-typora/

or use evernote for China to edit the markdown

Global Avatar

Add the url into the Avatar section in the _config
Refer to the link as below:
https://en.gravatar.com/emails/

Search

Enable the local serach in the _config.yml of theme-next

local_search:
  enable: true

Google Analysis

Enable in {theme/to/next}/_config.yml

google_analytics:
  tracking_id: UA-number
  localhost_ignored: false

and also using the google tag manager to integrate the google analysis is better choice.

RSS Feed

Installation

1
npm install hexo-generator-feed --save

Configuration
In {ROOT}/themes/theme_next/_config.yml

1
2
social:
  RSS: /atom.xml || rss

​

Categories & Tags

Only posts support the use of categories and tags. Categories apply to posts in order, resulting in a hierarchy of classifications and sub-classifications. Tags are all defined on the same hierarchical level so the order in which they appear is not important.

Example

1
2
3
4
5
6
7
categories:
- Sports
- Baseball
tags:
- Injury
- Fight
- Shocking

The classification records in the front-matter of the the source of markdown file
https://raw.githubusercontent.com/qzi/qzi.github.io/hexo/source/_posts/technology/hexo-go.md

Front-matter is a block of YAML or JSON at the beginning of the file that is used to configure settings for your writings. Front-matter is terminated by three dashes when written in YAML or three semicolons when written in JSON.
https://hexo.io/docs/front-matter.html

Configuration

Configuration in the [hexo_project]/[themes]/[next]/_config.yml

1
2
3
4
5
6
7
# External url should start with http:// or https://
menu:
  home: / || home
  about: /about/ || user
  tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive

Enhance Image Reference

Installation
$ npm i –save hexo-asset-link

Markdown Syntax

1
2
![Rest Client](./my-favorite-extensions-for-visual-studio-code/rest-client.jpg)
![Rest Client](my-favorite-extensions-for-visual-studio-code/rest-client.jpg)

Reference
Image to Hexo
https://liolok.github.io/zh-CN/How-to-Add-Image-to-Hexo-Blog-Post/

Post Excerpt

Manually add more excerpt in the front-matter of the markdown file 

1
2
3
4
5
---
title: 中文等宽字体（Monospace Chinese Font Family）
date: 2019-12-26 00:52:18
excerpt: ' 中文等宽字体，一个中文字符等宽两个英文字符，Mac下很多字体（ Menlo, Monaco, Courier New, Source Code Pro ）没有严格遵循或者说达不到这个标准, 它们不包括CJK的字库，有的时候用一些 markdown table formatter 会导致不整齐，其实并不是排列不整齐，而是字体的宽度不同 '
---

Configuration

Configuration in the [hexo_project]/[themes]/[next]/_config.yml

1
2
3
4
5
6
# Automatically excerpt description in homepage as preamble text.
excerpt_description: true

# Read more button
# If true, the read more button will be displayed in excerpt section.
read_more_btn: true

Refer to https://hexo.io/docs/tag-plugins#Post-Excerpt

Mermaid Surpport for Diagram

Hexo Next already supported the mermaid nested.
https://github.com/theme-next/theme-next.org/blob/source/source/docs/tag-plugins/mermaid.md

Next use its own tag system to convert the diagram. so we need to fixed it aligning the common markdown practice.

npm install hexo-filter-mermaid-diagrams save

This filter will convert the indicator '''mermaid to <pre class="mermaid">, and then mermaid.js will filter the elememet and redender them.

Embed Video

Just copy the code of the html in YouTube and add YouTube video in Hexo-markdown

1
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/E46_veB0DPU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Force to Refresh the Browser

Presss Shift + Command + R to force to refresh the browser(Chrome) to test the result in Mac

Presss Option + Command + R to force to refresh the browser(Safari) to test the result in Mac

Reference:

Hexo backup
https://blog.itswincer.com/posts/7efd2818/

Add google adsense
https://juejin.im/post/5c95d230e51d45124e35cef6

Third party for theme next
https://theme-next.iissnan.com/third-party-services.html

Wirit the post
https://hexo.io/zh-cn/docs/writing.html

Front-matter
https://hexo.io/docs/front-matter.html

asset folder
https://hexo.io/docs/asset-folders