Reasons for selecting this method and preparations to be made

Before each project begins, it is important to know the purpose of the project, the main requirements, and the core points. Before choosing the construction method, I confirmed that the construction of the blog should meet the following requirements according to my personal situation:

  1. You don’t need to have your own server, and static sites don’t matter
  2. Nice filing
  3. Facilitate article traceability
  4. Simple typography
  5. Don’t have to know or use much front-end knowledge (typography is my pain)

According to my baidu understanding, the Pages blog set up on Github/Gitee at least meets the requirements of the first point, which way to set up on Github is going to simply use the technology set up under the first to understand and then confirm. Below is gitee’s technology for building static websites:

  • Nodejs installation (download and install from Baidu official website)
  • Making/gitee account
  • Git installed

While both Gitee and Github are deployable, there are subtle differences between the two:

  • Gitee is a domestic site, the network is stable and high speed, github access is sometimes unstable
  • Github will automatically redeploy the updates to Github/Gitee when they fail, and Gitee will need to manually update them in Respository (unless you upgrade your membership).

You can add articles locally in debug style before deploying to Gitee/Github, and then deploy to Github after tuning.

Build the Hexo local environment

  1. Ensure that nodeJS is installed: node -v
  2. Install hexo: NPM install -g hexo
  3. If the directory does not exist, it is automatically created. Start blogging with hexo! The complete
  4. Enter the initial project directory and run hexo server [-p port number] (default port is 4000). Access localhost:port. If the following figure is displayed, the local infrastructure environment is set up

Personally, HEXo and next theme configuration

The core directories/files under the project directory are as follows:

  • Scaffolds: The scaffolds directory
  • Source: The source folder (content core) in which all articles, categories, tags, etc. are published
  • Source / _POST: All published articles are in this folder
  • Source/XXX: Menu XXX page, such as source/categories used to store category page, but category page MD file is content free, hexo will automatically index
  • Themes: store the themes of the current hexo project. Add the required theme directory to this folder and change the corresponding configuration of the project _config.yml to change the theme
  • Themes /{themeName}/_config.yml: themes/{themeName}/_config.yml: themes/{themeName}/_config.yml: themes configuration file
  • _config. Yml: Project configuration file, set the general configuration of the project (configuration outside the theme, such as title, page, search, author, published address, etc.) because the layout and style of landscape do not conform to my own style, I choose next, which is simple enough and clear at a glance (it is not for no reason that it is the theme most people choose). To use the next theme, just download the theme directory and store it under the themes of your project and change the theme configuration value of /_config.yml to the theme name.

Download the next theme (synchronize to gitee and download from gitee if it’s slow) : git Clone github.com/theme-next/…

Yml and /themes/next/_config.yml. The obvious configuration is shown below (c: _config.yml, TC :themes/next/_config.yml) :

Menu bar Configuration

The hexo menu bar can be created in the project directory using the hexo new Page {menuName} directive, You can also create /source/{menuName}/index.md directly and add menu:{menuName} configuration in themes\next_config.yml, such as a local configuration of a custom menu (next/_config.yml) :

menu:
  # | | is behind the icon, the query image is available at https://fontawesome.com/icons
  home: /index || home
  about: /about/ || user
  tags: /tags/ || tags
  categories: /categories/ || th
  temp: /temp/ || calendar
  archives: /archives/ || archive
Copy the code

Documents and renderings:

It is important to note when fontawesome search to the icon does not necessarily have, need according to the icon name query themes/next/source/lib/font – awesome/CSS font – awesome. Any the icon under the CSS styles, If stack-overflow is in the CSS file under the first search for the style, fontawesome will display the corresponding icon, if not, will display a rectangle. The reason why fontawesome has some ICONS but CSS has none is that the latest VERSION of FONtawesome is 4.7.0, but some of the ICONS on Fontawesome have some new versions (such as blog). So MY guess is that some ICONS found on the website are not available due to version reasons. A closer look will reveal that the CSS style Content is the same as the Unicode icon on Fontawesome:

Article creation, tagging, sorting

Article creation can be done by creating an “article. Md” file under /source/_posts, or by using the command line hexo new {article}. Articles in Hexo can be archived by adding an article header. Here is a personal article header:

-- RocketMQ and How to build a message center based on Spring Boot RocketMQ [RocketMQ, Spring Boot] ---Copy the code

Tags and categories can be completed by adding tags and categories in the header of the article without additional operations, provided that categories and tags already exist in the source directory.

Personal _config.yml configuration for major changes

The following are the main changes to the personal configuration file:

Site configuration
title: Wilson Blog
subtitle: 'An ordinary brick remover.'
description: 'An ordinary brick remover.'
keywords:
author: Wilson He
language: zh-CN
timezone: 'Asia/Shanghai'

index_generator:
  path: ' '
  Display only one article per page
  per_page: 1
  # sort articles by creation time, if there is a set of top value, then the articles will be sorted by top first
  order_by: -date
theme: next
NPM install hexo-generator-searchdb and set local_search:enable in themes' _config.yml to true
search:
  path: search.xml
  field: post
  format: html
  limit: 10000
The project address of the deployment is private repository
deploy:
  type: git
  repo: https://github.com/Wilson-He/wilson-he.github.io
# repo: https://gitee.com/Wilson-He/Wilson-He
Copy the code

To enable the search service, install the search plug-in: NPM install hexo-generator-searchdb

Personal themes/next/_config.yml major changes to the configuration

favicon:
  small: /images/favicon-16x16-next.png
  # The /images path here is themes/next/source images
  medium: /images/piano-icon.png
  apple_touch_icon: /images/apple-touch-icon-next.png
  safari_pinned_tab: /images/logo.svg
footer:
  # do not display next's original powered and version footer
  powered:
    enable: false
    version: false
# Home page info & menu display style, Pisces is the site info displayed on the left, Mist is at the top, more diy try
scheme: Pisces
menu:
  home: /index || home
  about: /about/ || user
  tags: /tags/ || tags
  categories: /categories/ || th
  temp: /temp/ || calendar
  archives: /archives/ || archive
sidebar:
  # Sidebar position Settings
  position: left
# Profile photo Settings
avatar:
  url: https://xxx.aliyuncs.com/atavar/xxx.jpg
# picture show under social ICONS and links, | | for the icon on the fontawesome name
social:
  gitee: https://gitee.com/Wilson-He || gg
  github: https://github.com/Wilson-He || github
  csdn: https://blog.csdn.net/z28126308 || creative-commons
  Email: mailto:[email protected] || envelope
[doge] [doge] [doge] [doge] [doge] [doge]
reward_settings:
  # If true, reward will be displayed in every article by default.
  enable: true
  animation: false
  #comment: Donate comment here.Reward: wechatPay: /images/wechatpay.jpg Alipay: /images/ Alipay. JPG // Header shows github banner Github_banner:enable: truePermalink: / / https://github.com/Wilson-He enable local search local_search:enable: true
Copy the code

Check out the article after configuration. The reading experience is already much better than expected.

npm install hexo-generator-index-pin-top --save
top: true

Deployment to making/gitee

The deployment process is simple: install the Hexo Git plug-in, set up a repository on Github/Gitee, and deploy it on the project directory command line.

NPM install hexo-deployer-git –save github

  1. IO. Github. ProjectName = IO. Github. ProjectName = IO.
  2. Execute at the project directory command linehexo deployGithub runs a static blog for us every time we deploy, and sends an email if it fails. Github Pages will display the following image if you have successfully configured the repository:

gitee:

  1. Create blog publishing repository (no naming required)
  2. performhexo deploy
  3. Click on the repository “Services” ->”Gitee Pages”, and the website address will be displayed after the configuration is successful. The non-member version of Gitee needs to be updated after deployment, and sometimes has styling problems. The only advantage is that it is faster than Github

Documents used in the build up process

  1. Hexo official documentation: hexo. IO /zh-cn/docs/
  2. Next Theme official documentation (very detailed) : theme-next.org/docs/gettin… All Settings for the Next theme, third-party services (reviews, search, statistics, etc.), plug-ins are well documented
  3. Fontawesome Icon website: fontawesome.com/?from=io