Setting Up Hexo
Sungwa Yu
Published 01-16-2021 Modified 01-21-2021 899 Words 5 Mins

Requirement

  • GIt
  • Node.js

For more: https://hexo.io/docs/

Setup

New directory

mkdir <your_blog_name>

Init hexo

hexo init <your_blog_name>

Configuration

In _config.yml

My personal setting

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
title: Sungwa's Blog
...
author: Sungwa Yu
...
timezone: 'PST'
...
url: https://sungwayu.github.io/
...
new_post_name: :year-:month-:day-:title.md
...
render_drafts: true        # Enable draft feature
...
post_asset_folder: true
...
relative_link: false
...
highlight:
	...
  auto_detect: true
	...
date_format: MM-DD-YYYY
...
theme: keep
...
deploy:
  type: git
  repo: https://github.com/SungwaYu/SungwaYu.github.io.git
  branch: master
...
search:
  path: search.json
  field: post
  content: true
  format: striptags

Install Theme

The theme I am using: https://xpoet.cn/

Intall

1
2
$ cd <hexo-site>
$ git clone --depth=1 https://github.com/XPoet/hexo-theme-keep themes/keep

Enable the theme

Edit _config.yml

theme: keep

Theme Configuration

https://keep.xpoet.cn/2020/11/Keep-%E4%B8%BB%E9%A2%98%E9%85%8D%E7%BD%AE%E6%8C%87%E5%8D%97/

Edit themes/keep/_config.yml

  • Added my own avatar and favicon at /images/<filename>

  • Added my own background_img at /images/<filename>

  • Menu: Create manually. I added Categories and About.

Ex. In hexo-site, run hexo new page about, there will be an about directory created in source directory. Then configure the theme _config.yml‘s menu: about. Write content to /source/about/index.md.

  • Install hero-generator-searchdb to enable search feature. Use command npm install hexo-generator-searchdb in the site’s main directory.

  • Enable word count feature, run command npm i hexo-wordcount --save

My theme configuration

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
base_info:
  title: Sungwa's Blog
  author: Sungwa Yu
  url: https://sungwayu.github.io/
style:
  # Theme primary color
  primary_color: '#0066CC'
  # Avatar (You can use local image or image external link)
  avatar: /images/avatar.png
  # Favicon (You can use local image or image external link)
  favicon: /images/logo.png
  # Article image align position, value: left | center
  article_img_align: left
  # Left side width
  left_side_width: 260px
  # Content area max width
  content_max_width: 920px
  # Mouse hover
  hover:
    shadow: true   # shadow effect when the mouse hover
    scale: false    # scale effect when the mouse hover
  # First screen
  first_screen:
    enable: true
    background_img: /images/bg.svg
    description: Welcome to My Blog
  # Scroll style settings
  scroll:
    progress_bar:
      enable: true
    percent:
      enable: true
social_contact:
  enable: true
  links:
    github: https://github.com/SungwaYu         # your GitHub URL
    weixin:          # your WeChat QR-Code URL
    qq:              # your QQ QR-Code URL
    weibo:           # your WeiBo URL
    zhihu:           # your ZhiHu URL
    twitter:         # your twitter URL
    facebook:        # your facebook URL
    email: yusungwa@gmail.com          # your email
menu:
  Home: /
  Archives: /archives
  Categories: /categories
  # Tags: /tags
  # Links: /links
  About: /about
  # Changelog: /changelog
  # ......
home_article:
  category:
    enable: true     # show category in home page article block
    limit: 3          # max number of categories shown in home page article block
  tag:
    enable: true     # show tags in home page article block
    limit: 5          # max number of tags shown in home page article block
code_copy:
  enable: true
  style: mac        # values: default | mac
toc:
  enable: true
  # Automatically add list number to toc.
  number: true
  # If true, all level of TOC in a post will be displayed, rather than the activated part of it.
  expand_all: true
copyright_info:
  enable: false
post_wordcount:
  enable: true
  wordcount: true  # word count, one article
  min2read: true   # time to read, one article
website_count:
  # busuanzi
  # See: http://ibruce.info/2015/04/04/busuanzi/
  busuanzi_count:
    enable: true
    site_uv: false
    site_pv: false
    page_pv: true
local_search:
  enable: true
  trigger: auto
comment:
  # Valine
  # See: https://github.com/xCss/Valine
  valine:
    enable: false
    appid:                # your leancloud application appid
    appkey:               # your leancloud application appkey
    placeholder:          # your placeholder
  # Gitalk
  # See: https://github.com/gitalk/gitalk
  gitalk:
    enable: false
    github_id:             # GitHub repo owner
    repository:            # Repository name to store issues
    client_id:             # GitHub Application Client ID
    client_secret:         # GitHub Application Client Secret
  # Twikoo
  # See: https://github.com/imaegoo/twikoo
  twikoo:
    enable: false
    env_id:                # Tencent Cloud environment id
    region:                # environment region. If select Guangzhou, fill in "ap-guangzhou".
rss:
  enable: false
lazyload:
  enable: false
cdn:
  enable: false
pjax:
  enable: false
footer:
  since: 2020
# Keep version (Please don't modify)
version: 3.3.0

Publish

  • New post: hexo new <title>
  • New draft: hexo new draft <title>. When the draft ready, run hexo publish <title> to publish.
  • Ex. hexo new "Hello World".
  • Delete post/draft: Simply go to _post or draft folder and delete the .md file (and the the its asset folder).
  • If has the asset folder, the image path is just (name.png), don’t need anything at the beginning.

Deploy to GitHub Pages

Install Plug-in

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

Configure Git

1
2
$ git config --global user.name "Your_user_name"
$ git config --global user.email "Your_email@example.com"

_config.yml File

1
2
3
4
5
deploy:
  type: git 
  repo: <repository url> 
  branch: master 
  message: # If empty, default publish time

Local Testing

1
hexo server

Deploy

1
$ hexo clean && hexo d -g

Layout

Edit Layout

Add front-matter to layout

Edit /scaffolds/post.md to

1
2
3
4
5
title: {{ title }}
date: {{ date }}
updated: {{ date }}
categories:
tags:

Edit /scaffolds/draft.md to

1
2
3
title: {{ title }}
categories:
tags:

When publish from draft to post, it will automatically add date and updated front-matter.

Usage

Example:

In articles.

1
2
3
4
5
6
7
categories:
- Sports
- Baseball
tags:
- Injury
- Fight
- Shocking
1
2
3
4
5
categories:
- [Sports, Baseball]
- [MLB, American League, Boston Red Sox]
- [MLB, American League, New York Yankees]
- Rivalries

Domain

  • Put the domain to repository setting.

  • Use Github template from the domain provider (setup on the domain provider).