instructions

In the previous article, we introduced the implementation of automated blog deployment using Hexo + Github Pages + Travis CI. We have already acquired a blog of our own, but it is still fairly primitive, and the Settings are all default data, so we need to change them to the content we want.

So in this article, we will focus on how Hexo’s configuration file is set up. Through this article, you will know what the various properties of the Hexo profile mean and give me the configuration I used so you can do whatever you want.

Site information

Let’s look at the first part, site information configuration. First, explain the meaning of each field:

parameter describe
title Site title
subtitle Website subtitle
description Site description, mainly used for SEO, tells search engines brief information about the site
keywords Keywords of the site. Use half-corner commas to separate multiple keywords.
author What’s your name
language Common languages used by websites include zh-Hans, zh-CN and EN
timezone Site time zone. The local time zone is used by default. Other time zones can also be specified, such as America/New_York, Japan, and UTC. Generally, Asia/Shanghai can be used for mainland China.

Here is my configuration for reference:

# Site
title: Frank's Cat
subtitle: 'Always young and always tearful'
description: 'Remember the past, embrace the future, dream in your heart, light in your eyes'
keywords: Life, programming, reading, music, movies
author: The wind
language: zh-CN
timezone: ' '
Copy the code

Web site information

The configuration of url information is mainly to set the website’s address and article link format.

parameter describe The default value
url The url
root Site root
permalink Permanent links to articles Format: year/month/day / : title /
permalink_defaults Default values for each part of the permalink
pretty_urls Rewrite the permalink value to beautify the URL
pretty_urls.trailing_index Whether to keep trailing index.html in permalink, remove when set to false true
pretty_urls.trailing_html Whether to keep trailing.html in permalinks, removed when set to false (not valid for trailing index.html) true

Such as:

#, for example, a page of permanent link is http://example.com/foo/bar/index.html
pretty_urls:
  trailing_index: false
# page will become a permanent link http://example.com/foo/bar/ at this time
Copy the code

You usually only need to change the URL and root, or if the blog is deployed using Github Pages, set the URL to the corresponding blog address. The important thing to note here is the value of root, which you would need to set to/project name/if you were deploying as we did in the previous article.

Here is my configuration:

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://mfrank2016.github.io/
root: /breeze-blog/
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks
Copy the code

The directory information

Directory information is used to specify the corresponding locations of various directories and does not need to be modified.

parameter describe The default value
source_dir Resources folder, this folder is used to hold the blogmdAnd other documents. source
public_dir Public folder, which is used to store the generated site static files. public
tag_dir Label folder tags
archive_dir Archive folder archives
category_dir Classified folder categories
code_dir Include codeFolder,source_dirSubdirectory under downloads/code
i18n_dir Internationalization (I18N) folder :lang
skip_render Skips rendering of specified files. Matched files will be copied to unchangedpublicDirectory. You can useglobExpression to match paths.

Such as:

skip_render: "mypage/**/*"
# will directly output 'source/mypage/index.html' and 'source/mypage/code.js' unchanged to the 'public' directory
You can also use this method to skip the rendering of the specified article file
skip_render: "_posts/test-post.md"
# This will ignore the rendering of 'test-post.md'
Copy the code

My configuration is as follows:

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:
Copy the code

The paper configuration

This section configures the various properties associated with the article.

parameter describe The default value
new_post_name The file name for the new article :title.md
default_layout The default layout post
auto_spacing Add a space between Chinese and English false
titlecase Convert the title totitle case false
external_link Open the link in a new TAB true
external_link.enable Open the link in a new TAB true
external_link.field For the entire website (site) or only for articles (post) to take effect site
external_link.exclude Domain name to exclude. The primary domain name and subdomain name are as followswwwNeed to be configured separately. []
filename_case Convert the file name to (1) lowercase or (2) uppercase 0
render_drafts According to the draft false
post_asset_folder Start theAssetfolder false
relative_link Change the link to an address relative to the root directory false
future Shows future articles true
highlight Code block Settings
highlight.enable Turn on code block highlighting true
highlight.auto_detect If no language is specified, automatic detection is enabled false
highlight.line_number According to the number of rows true
highlight.tab_replace Replace it with n Spacestabs; If the value is empty, it will not be replacedtabs ' '
highlight.wrap Wrap code blocks around true
highlight.hljs Add a class to the Highlight CSS filehljs-*The prefix false

The auto_spacing recommendation is on so that it looks better. Titlecase means to capitalize key words. If you’re confused, read the following:

Titles should be written in title case. This means only using capital letters for the principal words. Articles, conjunctions, and prepositions do not get capital letters unless they start the title. For example: The Last of the Mohicans

You are advised to enable the post_asset_folder function. In this way, when new articles are generated, a folder with the same name will be generated in the same directory. In this way, resources related to the article, such as images, can be stored in the folder for reference and management.

Here is my configuration:

new_post_name: :title.md # File name of new posts
default_layout: post
auto_spacing: true
titlecase: false # Transform title into titlecase
external_link:
  enable: true # Open external links in new tab
  field: post # Apply to the whole site
  exclude: ' '
filename_case: 0
render_drafts: false
post_asset_folder: true
relative_link: false
future: true
# highlight:
# enable: true
# line_number: true
# auto_detect: false
# tab_replace: ''
# wrap: true
# hljs: false
highlight:
  enable: false

# Code highlight
prism_plugin:
  mode: 'preprocess'    # realtime/preprocess
  theme: 'tomorrow'
  line_number: false    # default false
  custom_css:
Copy the code

Here I use another code highlighting plug-in, which is fine if the default HLJS highlighting is usually used. If you also want to use this plugin, you can check it out here. You need to install it first:

npm i -S hexo-prism-plugin
Copy the code

Category and label information

If the article uses An English name category, it is unnecessary to set this parameter. If the article uses a Chinese name category, it is better to configure some corresponding English names, otherwise the URL encoding Chinese will appear in the corresponding category link, for example:

http://localhost:4000/breeze-blog/categories/programming/life/%E6%B5%8B%E8%AF%95/
Copy the code
parameter describe The default value
default_category The default classification uncategorized
category_map Classification of alias
tag_map Label the alias

My configuration is as follows:

# Category & Tag
default_category: uncategorized
category_map:
  Programming: programming
  Life: life
  Reading: reading
  Random thoughts: thoughts
  Financial management: finance
tag_map:
  Agile development: agile-development
  Environment building: environment-building
Copy the code

Date/time format

Hexo uses moment.js to parse and display the time.

parameter describe The default value
date_format The date format YYYY-MM-DD
time_format Time format HH:mm:ss
use_date_for_updated When enabled, if Front Matter is not specifiedupdated.post.updatedWill usedateIs not the creation time of the file. This option can be useful in Git workflows true

My configuration is as follows:

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss
## Use post's date for updated date unless set in front-matter
use_date_for_updated: true
Copy the code

The paging information

parameter describe The default value
per_page Number of articles displayed per page (0 = turn off paging) 10
pagination_dir Page directory page

My configuration is as follows:

# Pagination
## Set per_page to 0 to disable pagination
per_page: 12
pagination_dir: page
Copy the code

Extended information

parameter describe
theme Current topic name. A value offalseDisable themes when
theme_config Topic configuration file. Configurations placed here overwrite those in the subject directory_config.ymlThe configuration in
deploy Setup for the deployment part
meta_generator Meta generatorThe label. A value offalseWhen Hexo does not insert the label in the header

Set theme here to open the corresponding theme. How to set theme will be explained in a later article.

Theme_config overwrites the parameters of the theme_config file, so there is no need to maintain two config files. However, I prefer to use different config files for different theme files.

Deploy is a deployment related configuration, such as git deployment. There are many other deployment positions, such as Heroku and Netlify, which require the installation of the corresponding plug-in first.

My configuration is as follows:

# Extensions
theme: hexo-theme-matery

# Deployment
deploy:
  type: 'git'
  repo: [email protected]:MFrank2016/breeze-blog
  branch: gh-pages
Copy the code

Include or exclude directories and files

In the Hexo configuration file, you can make Hexo process or ignore certain directories and folders by setting include/exclude. You can use glob expressions to match directories and files.

The include and exclude options can only be applied to the source/ folder, but the ignore option can be applied to all folders.

parameter describe
include HexoHidden files and folders (including underlined and under names) are ignored by default.Files and folders at the beginning,Hexo 的 _posts 和 _dataEtc.). Setting this field causes Hexo to process them and copy them tosourceDirectory.
exclude HexoThese files and directories are ignored
ignore Ignore files or folders

For example:

# Include/Exclude Files/Folders
include:
  - ".nojekyll"
  # include 'source/CSS / _typing. CSS'
  - "css/_typing.css"
  Include any files in 'source/_css/', but not subdirectories and files in them.
  - "_css/*"
  # contains any files in 'source/_css/' and any files in subdirectories
  - "_css/**/*"

exclude:
  # not include 'source/js/test.js'
  - "js/test.js"
  # does not include files in 'source/js/', but includes all directories and files under subdirectories
  - "js/*"
  # does not include files in 'source/js/' and any files in subdirectories
  - "js/**/*"
  # does not include all files whose names start with 'test' in the 'source/js/' directory, but includes other files and single files in subdirectories
  - "js/test*"
  # does not include any files starting with 'test' in 'source/js/' and its subdirectories
  - "js/**/test*"
  Do not exclude files from 'source/_posts/'. You should use 'skip_render' or add an underscore '_' before the filename of the file you want to ignore.
  - "_posts/hello-world.md" is useless.

ignore:
  # Ignore any folder named 'foo'.
  - "**/foo"
  # Ignore 'foo' folder in 'themes/' only.
  - "**/themes/*/foo"
  # Same as above, but applies to every subfolders of 'themes/'.
  - "**/themes/**/foo"
Copy the code

Each item in the list must be enclosed in single or double quotation marks.

Include and exclude do not apply to files under the Themes/directory. If you want to ignore some files or folders in the Themes/directory, use ignore or add an underscore _ before the file name.