Hexo is a fast, concise, and efficient static blogging application that features powerful CLI tools and true one-click deployment. Hexo uses Markdown to parse articles and render clean pages in a fraction of the time. This article covers Hexo in detail from installation to deployment.

Some of the tools involved in this article require some basic operation, if you have any questions, please do your own research.

The installation

Running and deploying Hexo requires the following tools:

  • Node.js
  • Git

Installation Node. Js

Windows platform use the installation package provided by the official website to install, check whether the installation is successful in CMD:

Install Hexo – Cli

The NPM tool is usually installed by default when installing Node, so use the following command to install Hexo’s command-line tool Hexo-Cli:

$ npm install -g hexo-cli
Copy the code

Install Git

Install git-for-Windows on the Windows platform. * NIx platform uses its own package management tool to install git-for-Windows. Take Ubuntu as an example:

$ apt-get install git
Copy the code

Create a site

Open CMD anywhere and use hexo init


to create a blog, dir being the blog directory name
 

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

Wait until all dependencies are installed

configuration

Site configuration

The _config.yml in the root directory of a blog is the “site configuration file”, which includes SEO, themes, layout, plug-ins and other configuration items

# Site
title: XXX's blog
subtitle: subtitle
description: Description of the site
keywords: keywords
author: The author
language: Language (Simplified Chinese: zh-Hans)
timezone: Time zone (China: Asia/Shanghai)
Copy the code

The default style of Hexo looks something like this:

The Next theme is recommended

The theme

Install the Next theme

Open CMD in the root directory of the site and run the following command:

$ git clone https://github.com/iissnan/hexo-theme-next themes/next
Copy the code

Switch the theme

The theme-related files are cloned from Next’s Github repository into the Themes/Next directory. Just change the value of the theme field to Next in the “Site Configuration file” to switch the theme

theme: next
Copy the code

See the effect

Hexo provides built-in server functionality in the command line tools that run in the root directory of the site:

$ hexo s
Copy the code

When prompted:

INFO  Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.
Copy the code

“, you can open your browser and visit http://localhost:4000 to see the effect. The default is:

If you do not want to look good, you can modify the theme configuration file _config.yml in the Themes/Next directory to customize the theme style

layout

Next’s default layout is Muse, which looks like this:

Next also offers two other layouts:

  • Pisces
  • Mist

I’m using Pisces here, so modify the “theme” profile like this:

scheme: Pisces
Copy the code

The effect of the Pisces layout:

Write an article

Run the command in the root directory of the site:

hexo new [title]
Copy the code

[title] : [posts] : [posts] : [posts] : [posts] : [posts] : [posts] : [posts]

---
title: Hello World
date: 2013/ 7/13 20: captives
---
Copy the code

This content is officially called Front Matter in Hexo. When rendering an article, the rendering engine reads this content and displays various information about the article in the appropriate place on the page. Front Matter mainly consists of the following items:

  • Title: Article title
  • Date: creation date
  • Tags: the tag
  • Classification of categories:

It’s important to note that the categories are hierarchical, which means that Python crawlers and Python crawlers are completely different, and they’re divided into two categories, and tags don’t have that kind of hierarchy

If you don’t find it convenient to use, you can just give a category, for example:

categories:
- A diary
tags:
- Shanghai
- travel
Copy the code

The front page of the site displays recently published articles in a paginated format. By default, the full text is displayed. If you want to show only the beginning of the content, for example:

You can add
tags, so that only the content before the tags can be displayed on the home page, avoiding the bad experience of loading too much content on the home page at once

The deployment of

If a server is available, you can use the hexo g command to generate a static site, upload the site to the corresponding directory on the server via FTP or other means, and deploy it with an Nginx or Apache server. Here’s how to build a complete blog site without a server

Get a Github account first. If you don’t have a Github account, you can register at Github via email

Github. IO. The username refers to the name at the end of github.com/. For example, my github home page, my username is Jameszbl. After the new warehouse will jump to initialize the page, show a url similar to https://github.com/jameszbl/jameszbl.github.io.git, write down the url, you’ll use

In “Site Profile”, locate deploy, and if not add it manually, fill it in like this:

deploy:
    - type: git
      # remote storage address (url)
      repo: https://github.com/JamesZBL/jameszbl.github.io.git
      branch: master
Copy the code

The deployment configuration here requires the installation of a plug-in, so run the command from the site root:

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

After the plug-in is installed, run the following command:

$ hexo g && hexo d
Copy the code

After a few minutes, visit

.github. IO to see the setup

My blog

Welcome to visit: Paul Cheng’s blog