For students with a certain technical background, diy blog site is a good choice. Choose your favorite topic, customize as needed, write articles locally with your favorite tools at any time, publish to multiple blog hosting platforms with one click, use your favorite chart bed /CDN to speed up…

The demo site (Wuchen Ji) was built based on Hexo’s Hexo-Theme-Matery theme and deployed in Tencent Cloud COS for content acceleration using CDN and static resource acceleration using PicGo + Ali Cloud OSS as graph bed. If you don’t want to pay, you can host it in Github’s Pages service and use the jsDelivr CDN to speed it up.

Install hexo

Hexo is a fast, concise, and efficient blogging framework. Hexo uses Markdown (or other rendering engines) to parse articles and generate static web pages with beautiful themes in seconds.

The premise

Installing Hexo is fairly simple, just install the following applications first:

  • Node.js (The node.js version must be at least 8.10, and Node.js 10.0 or later is recommended)
  • Git

The installation

Once all the required applications are installed, you can install Hexo using NPM.

npm install -g hexo-cli
Copy the code

Once installed, Hexo can be executed in two ways:

  1. npx hexo
  2. Put Hexo in the directory where it is locatednode_modulesAdd to an environment variable to use:hexo
echo 'PATH="$PATH:./node_modules/.bin"' >> ~/.profile
Copy the code

upgrade

Later need to upgrade, enter the blog directory, first check the update:

$NPM outdated Package Current Wanted Latest Location hexo 3.9.0 3.9.0 4.2.0 hexo-site hexo-deployer-git 1.0.0 1.0.0 2.1.0 hexo-site hexo-generator-archive 0.1.5 0.1.5 1.0.0 hexo-site hexo-generator-category 0.1.3 0.1.3 1.0.0 hexo-site Hexo-site hexo-generator-feed 1.2.2 1.2.2 2.2.0 hexo-site hexo-generator-index 0.2.1 0.2.1 1.0.0 hexo-site hexo-generator-tag 0.2.0 0.2.0 1.0.0 hexo-site hexo-renderer-EJs 0.3.1 0.3.1 1.0.0 hexo-site hexo-renderer-marked 0.3.2 0.3.2 2.0.0 Hexo-site hexo-renderer-stylus 0.3.3 0.3.3 1.1.0 hexo-site hexo-server 0.3.3 0.3.3 1.0.0 hexo-siteCopy the code

Modify the package.json file, update the version number based on the Latest column, and then update and check the version number:

$ npm install --save

Check the version number$hexo -v hexo: 4.2.0 hexo- CLI: 3.1.0......Copy the code

site

After installing Hexo, execute the following command and Hexo will create the required files in the specified folder.

hexo init <folder>
cd <folder>
npm install
Copy the code

Start the

At this point, you can launch your blog site locally with the hexo s command.

$ hexo s
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.
Copy the code

Next you will install the theme, configure the blog hosting platform, implement one-click publishing, and refresh the CDN cache.

Directory Structure description

After executing the Hexo deploy command, the directory structure is added. Deploy_git, public,.gitignore as follows:

Tree - L $2. ├ ─ ─ the deploy_git ├ ─ ─ node_modules ├ ─ ─ public ├ ─ ─ scaffolds │ ├ ─ ─ draft. The md │ ├ ─ ─ page. The md │ └ ─ ─ post. The md ├ ─ ─source│ ├ ─ ─ _posts │ ├ ─ ─ _drafts ├ ─ ─ themes ├ ─ ─ _config. Yml ├ ─ ─ the json ├ ─ ─ package. The json └ ─ ─ package - lock. JsonCopy the code

_config.yml

Used to configure the parameters related to the blog, automatically created at initialization. For details about parameter Settings, see the Hexo configuration document.

Node_modules and package. Json

Both are created automatically at initialization.

Node_modules is used to store installed dependency packages. Package. json is used to view the version of Hexo as well as the version of the associated dependent packages.

Hexo will be installed by default:

  • Hexo: Main program
  • Hexo-deployer-git: Implements git deployment
  • Hexo-generator-archive: archive page generator
  • Hexo-generator-category: category page generator
  • Hexo-generator-index: indicates the index generator
  • Hexo-generator-tag: tag page generator
  • Hexo-renderer-ejs: Supports EJS rendering
  • Hexo-renderer-marked: Markdown engine
  • Hexo-renderer-stylus: Supports stylus rendering
  • Hexo-server: supports local preview, default address localhost:4000

The newly installed dependency packages are also saved in the node_module folder.

scaffold

Template folder, automatically created at initialization. Contains page, POST, and Draft templates, which correspond to the page, article to be published, and draft respectively.

themes

Theme folder, automatically created at initialization. For each theme, there is a separate folder. The default theme is Landscape.

Source, public and.deploy_git

  • Source: Resource folder. Used to store images, Markdown documents (articles, drafts), various pages (categories, about pages, etc.).
  • Public: Convert the Markdown document in the source folder to index.html. Render with the theme, and that’s what we end up with.
  • .deploy_git: submit the contents of the public folder to Github and generate the same content as the public folder.

The relationship is source -> public ->.deploy_git

Execute hexo generate and update public according to source. Execute hexo deploy and update.deploy_git according to public.

Configure the topic

Download the theme

Hexo-theme – Matery is a Hexo blog theme with Material Design and responsive Design. Click here to see a sample effect. Click here to download the latest stable version of the master branch, unzip it and copy the hexo-theme-matery folder into the Themes folder of hexo.

Switch the theme

Change the theme value of _config.yml in the Hexo root directory: theme: hexo-theme-matery

_config.ymlOther modification suggestions for the file

  • Please amend_config.yml 的 urlValue for your site masterURL(such as:http://xxx.github.io).
  • Two modifications are recommended.per_pageThe paging bar value of6Multiples of, such as:12,18Etc., so that the list of articles under each screen can be better display.
  • For Chinese users, you are advised to change the passwordlanguageThe value ofzh-CN.

Create the Categories page

The Categories page is used to display all categories. If the source directory does not already contain the categories/index.md file, create a new one.

hexo new page "categories"
Copy the code

Just edit your new page file/source/categories/index, md, at least the following contents:

---
title: categories
date: 2018- 09- 30 17:"
type: "categories"
layout: "categories"
---

Copy the code

Create a new TAB Tags page

The tags page is used to display all the tags. If the tags/index.md file is not already in the source directory, you need to create a new one.

hexo new page "tags"
Copy the code

To edit the newly created page file /source/tags/index.md, you need at least the following:

---
title: tags
date: 2018- 09- 30 18: now
type: "tags"
layout: "tags"
---

Copy the code

Create a new About page

The About page is used to display information about me and my blog. If the about/index.md file is not already in the source directory, you need to create a new one.

hexo new page "about"
Copy the code

To edit the new page file /source/about/index.md, you need at least the following:

---
title: about
date: 2018- 09- 30 17:"
type: "about"
layout: "about"
---

Copy the code

New friendship link friends page (optional)

If you don’t already have friends/index.md in the source directory, you need to create a new one.

hexo new page "friends"
Copy the code

To edit the new page file /source/friends/index.md, you need at least:

---
title: friends
date: 2018- 12- 12 21:"
type: "friends"
layout: "friends"
---

Copy the code

At the same time, create a _data directory in the source directory and a friends.json file in the _data directory as follows:

[{"avatar": "https://www.lixl.cn/medias/avatar.jpg"."name": "The Book of Enlightenment"."introduction": "Life is a practice. Goodness is like water.."url": "https://www.lixl.cn/"."title": "Go and visit"
  },
  {
    "avatar": "https://wiki.hyperledger.org/download/attachments/2392069/fabric?version=1&modificationDate=1540928132000&api=v2"."name": "Fabric"."introduction": "A Blockchain Platform for the Enterprise"."url": "https://hyperledger-fabric.readthedocs.io/en/master/"."title": "Go and learn."
  },
  {
    "avatar": "https://www.bootcdn.cn/assets/img/maoyun.svg"."name": "BootCDN"."introduction": "Stable, fast and free CDN acceleration service for open source front-end projects."."url": "https://www.bootcdn.cn/"."title": "Go and speed up."}]Copy the code

Code highlighting

The Hexo plugin (hexo-Prism-Plugin) is used to highlight the theme of Hexo code because the theme of Hexo does not look good. The installation command is as follows:

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

Then, change the value of highlight.enable to false in the _config.yml file in the root directory of Hexo, and add the prism plug-in configuration as follows:

highlight:
  enable: false

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

search

Hexo plugin hexo-generator-Search is also used in this topic to perform content search. The installation command is as follows:

npm install hexo-generator-search --save
Copy the code

In the _config.yml file in the root directory of Hexo, add the following configuration items:

search:
  path: search.xml
  field: post
Copy the code

Modify the footer

Footer information may need to be customized, and it is not easy to make into configuration information, so you may need to modify and work on it yourself. The modification is in the /layout/_partial/footer.ejs file of the theme file, including sites, themes used, and visits.

Modifying social Links

The _config.yml file supports QQ, GitHub and email by default. You can add or modify social link addresses in /layout/_partial/ social-link-. ejs file.

<a
  href="https://github.com/blinkfox"
  class="tooltipped"
  target="_blank"
  data-tooltip="Visit my GitHub"
  data-position="top"
  data-delay="50"
>
  <i class="fa fa-github"></i>
</a>
Copy the code

Social ICONS such as fa-github can be found in Font Awesome. Here are some common social ICONS for your reference:

  • Facebook: fa-facebook
  • Twitter: fa-twitter
  • Google-plus: fa-google-plus
  • Linkedin: fa-linkedin
  • Tumblr: fa-tumblr
  • Medium: fa-medium
  • Slack: fa-slack
  • Sina Weibo:fa-weibo
  • WeChat:fa-wechat
  • QQ: fa-qq

Modify the QR code picture of rewards

In the source/ Medias/Reward file of the theme file, you can replace it with your wechat and Alipay reward QR code pictures.

A key deployment

The hexo-Deployer-git plug-in enables one-click simultaneous deployment of blogs to multiple Git repositories. For example, the pages service provided by Github and Gitee can be published simultaneously. Installation:

npm install hexo-deployer-git --save
Copy the code

Modify the following contents in the _config.yml file in the root directory of Hexo:

## Docs: https://hexo.io/docs/deployment.html
deploy:
  - type: git
    repo: https://github.com/lxl80/blog.git
    branch: gh-pages
    ignore_hidden: false
  - type: git
    repo: https://gitee.com/lxl80/lxl80.git
    branch: master
    ignore_hidden: false
Copy the code

Static content can also be deployed to Tencent cloud object storage service by hexo-deployer-cos-Enhanced plug-in, and domestic lines are resolved to Tencent cloud CDN address in DNS configuration for acceleration, just like this site. After the deployment is complete, the CDN cache of the updated file is automatically refreshed.

Installation:

npm install hexo-deployer-cos-enhanced --save
Copy the code

The _config.yml configuration is as follows:

deploy:
  - type: git
    repo: https://github.com/lxl80/blog.git
    branch: gh-pages
    ignore_hidden: false
  - type: cos
    bucket: lxl80-130****
    region: ap-beijing
    secretId: AKIDh9****F8FvL
    secretKey: Z3IGiur****QZR3PgjXmlVg
    cdnConfig:
      enable: true
      cdnUrl: https://static.lixl.cn
      bucket: static-130****
      region: ap-beijing
      folder: static
      secretId: AKIDh9****F8FvL
      secretKey: Z3IGiur****QZR3PgjXmlVg
Copy the code

The hexo G-d is then used to implement one-click publishing and update the CDN cache.

Article link to static short address (recommended installation)

If the article name is in Chinese, Hexo will generate permanent links in Chinese by default, which is not conducive to SEO, and Gitment reviews do not support Chinese links. We can use hexo-Permalink-Pinyin Hexo to generate permanent links in Chinese pinyin when generating articles, or hexo-AbbrLink to generate static article links. The following hexo-abbrlink is used to generate a link address similar to/YYYY/MMDD + random number.html.

The installation command is as follows:

npm install hexo-abbrlink --save
Copy the code

In the _config.yml file at the root of Hexo, modify permalink: and add the abbrlink: configuration item at the end of the file:

permalink: :year/:month:day:abbrlink.html

abbrlink:
  alg: crc16 # crC16 | CRC32
  rep: dec Dec = decimal; hex = hex
Copy the code

CND Acceleration (recommended)

JsDelivr + Github is a free and easy CDN that is ideal for blogging sites. You can also choose object storage +CDN provided by mainstream cloud service providers to obtain faster and more stable access effects, and the cost is almost negligible.

Usage:

https://cdn.jsdelivr.net/gh/ your user name/your warehouse name @ released version number/file pathCopy the code

Such as:

https://cdn.jsdelivr.net/gh/lxl80/blog@gh-pages/medias/banner/1.jpg
Copy the code

Note: the version number is not required to distinguish between old and new resources. If the version number is not used, the latest resource will be referenced directly.

You can also use PicGo map bed upload tool with the custom domain name prefix to upload pictures, extremely easy to use. For details, see my other article: Using Typora+iPic/PicGo Graphic bed +CDN for efficient Markdown creation

Article word count plug-in (optional)

If you want to display the wordcount and length of the article, you can install hexo-wordcount.

The installation command is as follows:

npm i --save hexo-wordcount
Copy the code

Then simply activate the following configuration items in the _config.yml file under this topic:

wordCount:
  enable: false Set this value to true.
  postWordCount: true
  min2read: true
  totalCount: true
Copy the code

Add RSS subscription support (optional)

The hexo plugin for hexo-generator-feed is also used in this topic, and the installation command is as follows:

npm install hexo-generator-feed --save
Copy the code

In the _config.yml file in the root directory of Hexo, add the following configuration items:

feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:
  content_limit: 140
  content_limit_delim: ""
  order_by: -date
Copy the code

Execute hexo Clean && hexo G to regenerate the blog file and see the atom.xml file in the public folder to indicate that the installation has been successful.

Custom modification

You can modify some customization information in _config.yml of this topic, including the following parts:

  • The menu
  • My dream
  • Home page music player and video player configuration
  • Whether to display the recommended article name and button configuration
  • favicon 和 Logo
  • Personal information
  • The TOC directory
  • Article tip information
  • Append copyright information when copying article content
  • MathJax
  • Article word count, reading time
  • Click the ‘love’ effect on the page
  • My project
  • My skills
  • My photo album
  • Gitalk,Gitment,Valine 和 disqusComment on the configuration
  • No garlic statisticsAnd Google Analytics (Google Analytics)
  • A collection of default feature diagrams. When the article does not have a feature map, the topic will be based on the article titlehashcodeValue mod to select the corresponding feature map to display

If you are not satisfied with many features and theme colors in this theme, you can customize them in the theme. Many more free features and details are difficult to modify in _config.yml theme, need to modify the source code to complete. Here’s a list of things that might be useful:

Change the theme color

In the /source/ CSS /matery.css file of the theme file, search.bg-color to change the background color:

/* Overall background color, including the background color of navigation, mobile navigation, footer, TAB, etc. */
.bg-color {
  background-image: linear-gradient(to right, #4cbf30 0%, #0f9d58 100%); } @ -webkit-keyframes rainbow {
  /* Dynamically switch the background color. */
}

@keyframes rainbow {
  /* Dynamically switch the background color. */
}
Copy the code

Modify the banner and article feature images

You can change your favorite banner image directly in the /source/medias/banner folder. In the theme code, you can dynamically change one banner image per day. Only 7 banners are needed. /layout/_partial/bg-cover-content.ejs file 

$(".bg-cover").css("background-image"."url(/medias/banner/" + new Date().getDay() + ".jpg)");
Copy the code

In/source/medias/featureimages folder by default with 24 features pictures, you can increase or decrease, and need in _config. Synchronous yml be amended.

Article front-matter introduction

Front-matter options are explained in detail

Everything in the front-matter option is optional. However, you are advised to at least enter the values of title and date.

Configuration options The default value describe
title MarkdownFile title of The article title
date Date and time when the file was created The release time should be globally unique
author The root_config.ymlIn theauthor The authors
img featureImagesA value in Article feature map
top true Is the article at the top, and the value istrue, will be recommended as the home page article
cover false Whether to add to the cover of the home page rotation
coverImg There is no This article rotates the image path to be displayed on the cover on the home page. If not, the featured image of the article is used by default
password There is no Article read password, the value must be usedSHA256The encrypted password is used to prevent others from discovering it.
toc true Whether to enable TOC? You can disable TOC for a specific article.
mathjax false Whether to enable mathematical formula support
summary There is no Article card summary of text displayed, if there is no value program will automatically intercept part of the content of the article as a summary
categories There is no Article classification, suggest an article a classification
tags There is no Article tags, an article can have multiple tags

Note:

  1. ifimgIf the property is left blank, the feature map will be based on the title of the articlehashcode, and then select the corresponding feature pictures in the theme, so as to achieve the feature map of all articlesHave distinguishing feature each.
  2. dateTry to ensure that each article is unique, as in this topicGitalk 和 GitmentidentifyidIs through thedateIs used as a unique identifier.
  3. If you want to set the password authentication function for articles, not only should you set the password value with SHA256 encryption in front-matter, but also need to set the password value in the topic_config.ymlThe configuration is activated in. Some SHA256 encrypted addresses are available online:Open source China online tool,chahuo,Webmaster tools.

The following is an example of front-matter for this article.

The simplest example

---
title: Build and optimize blog based on Hexo's Hexo-Theme-matery theme
date: 2019- 10- 03 14: 25:00
---

Copy the code

With the sample

---
title: Build and optimize blog based on Hexo's Hexo-Theme-matery theme
date: 2019- 10- 03 14: 25:00
author: Realization of dust
img: /source/images/xxx.jpg
top: true
cover: true
coverImg: /images/1.jpg
password: 8d969eef6ecad3c29a3a629280e686cf0c3f5d5a86aff3ca12020c923adc6c92
toc: false
mathjax: false
summary: This is your custom article summary content, if this property has a value, the article card summary will display this text, otherwise the application will automatically intercept part of the article as the summary
categories: tool
tags:
  - blog
  - hexo
---

Copy the code

SEO optimization

Search Engine Optimization, also known as SEO, namely Search Engine Optimization, it is a kind of ranking by analyzing the rules of Search engines, to understand how various Search engines Search, how to crawl Internet pages, how to determine the Search results of specific keywords ranking technology. Google works fine, but Baidu doesn’t (GitHub doesn’t allow Baidu’s Spider to crawl on GitHub).

Install the sitemap plugin to generate sitemap files:

npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save  # Baidu only
Copy the code

After installation, execute hexo cl&&hexo g -d directly to generate sitemap. XML and baidusItemap. XML files in the root directory of the site.

Baidu optimization

Log in to Baidu search resource platform, and click Add website in user Center > Site Management page after successful login, and operate as prompted.

Tip: Since Baidu spider cannot crawl GitHub content, it is recommended to select CNAME authentication in the third step of verifying the website.

After the above steps, Baidu has known the existence of our website, but Baidu does not know what content there is on our website, so we want to push our content to Baidu. Click site Support -> Data Import -> Link Submit menu to submit site map:

The themes/hexo-theme-matery/_config.yml file has the following configuration:

# Baidu search resource platform to submit links
baiduPush: true
Copy the code

The JS code of automatic push is deployed in the source code of each page of the site. When the page is browsed every time, the link will be automatically pushed to Baidu.

Google optimization

Log in to the Google Search Console, click Add Resources, enter your domain name, and follow the instructions.

Prompt: DNS authentication is required. Enter the DNS domain name resolution setting page and add TXT records as prompted, as shown in the following figure:

After successful verification, you need to submit a site map. Submit according to the picture below and wait for inclusion.

Note: The URL in the hexo configuration file must be entered with the correct domain name, from which the plugin generates the site map.

Common commands

instruction

Hexo Server # launches the local server for preview themes. Hexo monitors file changes and updates them automatically. In addition to modifying the site profile, it can take effect by refreshing the web page without restarting the server.

Hexo Server -s # starts in static mode

Hexo server -p 5000 # Change access port (default port 4000, ‘CTRL + C’ to close server)

Hexo server -i IP address # User-defined IP address

Hexo clean # Clean the cache. This command is normally ignored on web pages and will delete the public folder in the root directory of the site

$hexo g # generate static web pages ($hexo g generates a public folder in the root directory of the site, Hexo will compile.md files under “/blog/source/” into.html files under “/blog/public/ “)

Hexo d # Automatically generates static files for websites and deplores local data to specified repositories (such as Github)

Hexo init folder name # Initialize XX folder name

NPM update hexo -g#

NPM install hexo -g #

Node-v # Check the node.js version number

NPM -v # Check the NPM version number

Git –version #

Hexo -v # Check the hexo version number

Abbreviated instructions

Hexo n “my first article” is equivalent to hexo new “my first article” or hexo new post “my first article”

Hexo p equals hexo publish

Hexo G is equivalent to hexo generate

Hexo S is equivalent to Hexo Server

Hexo D is equivalent to hexo deploy

Hexo G-d equals hexo generate –deploy

Note: Hexo clean is not short, git –version is not short

Q&A

1. Byhexo g -dThe deployment timesError: Spawn failedError:

Git reset –hard commitCode: Git reset –hard commitCode: Git reset –hard commitCode

  • Check the latest local submission record to obtain the update time and identification of the last submission record, such as280a7fdd46fcfd7d34e652aec15523dcd247fac8
cd .deploy_git
cat .git/logs/HEAD
Copy the code
  • Get the latest submission record of the branch associated with the Github Pages service, and get the update time and identification. The address is generally:https://github.com/ user name/repository name /commits/ branch name, such ashttps://github.com/lxl80/blog/commits/gh-pages
  • If the latest submission time/id is inconsistent, run the following command to resolve the problem:
git reset --hard f085038efdf79546c09641d37b2a2429c1ae8e60 #github's latest submission logo
Copy the code

With reference to

  • Hexo official documentation
  • Flicker of fox
  • hexo-theme-matery
  • Various optimizations of Hexo progression