Hexo

Hexo is a fast, concise, and efficient blogging framework. Hexo uses Markdown (or another rendering engine) to parse the article and, in seconds, generates a static web page with a beautiful theme.

First, you need to install Git and Node

Installation Node. Js

Node.js 10.0 or later is recommended

  • Mac

    1. First install node through Homebrew

      brew install node
Copy the code

    2. Install the n

      sudo node install -g n
Copy the code

    3. Install the stable version through n

      n stable
Copy the code

  • CentOS install

    1. Download the package from the official website

      Wget HTTP: / / https://nodejs.org/dist/v10.16.0/node-v10.16.0-linux-x64.tar.xzCopy the code

    2. Unpack the

      The tar xf node - v10.16.0 - Linux - x64. Tar. XzCopy the code

    3. After decompression, it is better to change the folder name to node, do not follow the version number information. Go to the Node folder

      cd node
Copy the code

      This is the operation node -v NPM -v to check whether it is available

    4. The final step is to configure the system environment variables, after which you can use the node command anywhere

      export PATH=$PATH:/xxxx/node/bin

source /etc/profile
Copy the code

Install hexo

Once git and Node have been installed, you can install Hexo

npm install -g hexo-cli
Copy the code

At this point, Hexo is installed

The next step is to set up the site, which can be set up anywhere in the hexo root folder

site

Hexo init folder CD folder NPM installCopy the code

When you’re done, the folder directory is as follows:

. ├ ─ ─ _config. Yml ├ ─ ─ package. The json ├ ─ ─ scaffolds ├ ─ ─ source | ├ ─ ─ _drafts | └ ─ ─ _posts └ ─ ─ themesCopy the code

_config.yml

You can modify this file to complete some custom Settings. More configuration details

# Hexo Configuration ## Docs: https://hexo.io/docs/configuration.html ## Source: https://github.com/hexojs/hexo/ # Site title: xxx subtitle: '' description: '' keywords: author: xxx language: zh-CN timezone: '' # Extensions ## Plugins: https://hexo.io/plugins/ ## Themes: https://hexo.io/themes/ theme: Butterfly # Deployment # # Docs: https://hexo.io/docs/deployment.html deploy: type: git repo: address branch of the project: the masterCopy the code

scaffolds

Template folder. When you create a new article, Hexo builds the file based on the scaffold.

The template for Hexo is what is populated by default in the new article file. For example, if you modify the front-matter content in scaffold/post.md, this change will be included every time a new article is created.

source

The resource folder is where user resources are stored. Except for the _posts folder, files/folders that start with names like _ (underscore) and hidden files will be ignored. Markdown and HTML files are parsed and placed in public folders, while other files are copied.

themes

Theme folder. Hexo generates static pages based on themes.

Common commands

generate

$ hexo generate
Copy the code

Generate static files.

options describe
-d.--deploy Deploy the website immediately after the file is generated
-w.--watch Monitoring file changes
-b.--bail Throw an exception if any unhandled exceptions occur during the build
-f.--force Forced re-generation of files Hexo introduces a difference mechanism ifpublicDirectory exists, sohexo gOnly changed files will be regenerated. The effect with this parameter is closehexo clean && hexo generate
-c.--concurrency Maximum number of files that can be generated simultaneously. Default value is unlimited

This command can be abbreviated as

$ hexo g
Copy the code

server

hexo server
hexo server --debug
Copy the code

Start the server. By default, the url is http://localhost:4000/.

options describe
-p.--port Reset the port
-s.--static Use only static files
-l.--log Start the diary, using the overwrite record format

deploy

hexo deploy
Copy the code

Deploy the web site.

parameter describe
-g.--generate Pre-generate static files before deployment

This command can be abbreviated as:

hexo d
Copy the code

clean

hexo clean
Copy the code

Clear cached files (db.json) and generated static files (public).

In some cases (especially after a topic change), you may need to run this command if you find that your changes to the site do not take effect anyway.

Subject to replace

After installing Hexo, we typically start selecting a theme configuration that we like. Let’s take Butterfly for example

  1. First go to the root directory of hexo

  2. Download the Butterfly

    git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly
Copy the code

  3. Modify the site configuration file _config.yml to change the subject to Butterfly

    theme: Butterfly
Copy the code

If you don’t have the renderer for pug and stylus, download and install: npm install hexo-renderer-pug hexo-renderer-stylus –save or yarn add hexo-renderer-pug hexo-renderer-stylus

It is recommended to copy the theme’s default configuration file _config.yml to source/_data/butterfly. Yml in the working directory of Hexo, and create one if the source/_data directory does not exist.

Here are two configuration files to illustrate

Yml is the configuration file for hexo, in the hexo and directory

Butterfly. Yml is the configuration file for the theme, where you can modify some of the Settings for the theme

Butterfly Configuration

Front-matter

Front-matter is a — separated area at the top of a file that specifies variables for individual files. For example:

---
title: Hello World
date: 2013/7/13 20:46:25
categories: iOS
---
Copy the code

The following are predefined parameters that you can use in the template and take advantage of.

parameter describe The default value
layout layout
title The title File name of the article
date Set up the date File creation date
updated Updated date File update date
comments Enable the comment function of the article true
tags Tags (not for pagination)
categories Sorting (not for pagination)
permalink Cover article url
keywords Keywords for Meta tags and Open Graph only (not recommended)

Deployment configuration

Hexo provides quick and easy one-click deployment, allowing you to deploy a web site to a server with a single command.

hexo deploy
Copy the code

Before starting, you must first change the parameters in _config.yml. A proper deployment configuration must at least have the type parameter, for example:

deploy:
  type: git
Copy the code

You can use multiple Deployer at the same time, and Hexo executes each deployer in order.

deploy:
- type: git
  repo:
- type: heroku
  repo:
Copy the code

git

  1. Install hexo deployer — git.
$ npm install hexo-deployer-git --save
Copy the code
  1. Modify the configuration.
deploy:
  type: git
  repo: <repository url> #https://bitbucket.org/JohnSmith/johnsmith.bitbucket.io
  branch: [branch]
  message: [message]
Copy the code
parameter describe The default
repo Repository address
branch The name of the branch gh-pages (GitHub) coding-pages (Coding.net) master (others)
message Customize the submission information
token Optional token value to authenticate with the repo. Prefix with $ to read token from environment variable
  1. Generate the site file and push it to the remote library. performhexo clean && hexo deploy
    • You will be prompted with username and password of the target repository, unless you authenticate with a token or ssh key.
    • hexo-deployer-git does not store your username and password. Use git-credential-cache to store them temporarily.
  2. Log in to Github/BitBucket/Gitlab and set the default branch to_config.ymlName of the branch in the configuration. Wait a minute, and your site will appear on your Github Pages.
How did this happen?

When HEXo Deploy is executed, hexo pushes the files and directories in the public directory to the remote repository and branch specified in _config.yml, and completely overwrites the existing content under that branch.

For users who manage site directories using Git

Since the deployment of Hexo defaults to the branch master, if you are also using Git to manage your site directory, you should be careful that your deployment branch is different from the writing branch. It’s a good practice to keep your site directory and Pages in two separate Git repositories to avoid overwriting each other. Hexo does not update your site directory when deploying files generated by your site. Therefore, you should manually submit and push your writing branch.

Also, if your Github Pages needs to customize the domain name using the CNAME file, please put the CNAME file insourceDirectory, only sohexo deployTo push the CNAME file to the deployment branch.

Build and deploy

You can use one of the following commands to have Hexo automatically deploy the web site once it is generated, but they have the same effect.

$ hexo generate --deploy
$ hexo deploy --generate
Copy the code

shorthand

The above two commands can be shortened to hexo g -d hexo d -g

Github Pages

Create a lot pages

  1. Github creates the repository xxx.github

  2. Clone warehouse to local

    git clone https://github.com/xxx/xxx.github.io
Copy the code

  3. Create index.md and commit

    cd xxx.gitbub.io
echo "hello world" > index.md

git commit -am 'init'
git push
Copy the code

  4. When you’re done, go to the browser and test, type https://xxx.github.io, and if you see a page that says Hello World, it’s a success. If not wait a moment and try again

Hexo + Github Pages

It is already mentioned in the Hexo section that you want to set the Deploy Git information

Deploy: type: git repo: < > the repository url / / just created warehouse url https://github.com/xxx/xxx.github.io branch: [branch] message: [message]Copy the code

If the configuration is correct, execute hexo g-d and you will see that hexo information is pushed to the specified repository. Note that the information is completely overwritten, so you need to set branch to keep the original information

If successful, refresh https://xxx.github.io in your browser to see the deployed Hexo.

Cloud server

In addition to deploying Hexo on Github Pages, we can also deploy it on our own servers.

1. Install Nginx

  • Install through YUM

    sudo yum -y install nginx
Copy the code

    Install nginx operations using yum

    $sudo systemctl enable nginx $sudo service nginx $sudo service nginx $sudo service nginx $sudo service nginx $sudo $sudo service nginx reload $sudo service nginx reload $sudo service nginx reload $sudo service nginx reloadCopy the code

  • The source code to install

    1. Install the dependency libraries first

      $sudo yum -y install GCC GCC -c++ # nginx $sudo yum -y install pcre pcre-devel # nginx $sudo yum -y install GCC -c++ # nginx $sudo yum -y install pcre pcre-devel # nginx $sudo yum -y install GCC -c++ # nginx $sudo yum -y install pcre pcre-devel install zlib zlib-devel $ sudo yum -y install openssl openssl-develCopy the code

    2. Download the nginx package and upload it to the server

    3. Unpack the

      The tar - ZXVF nginx - 1.11.5. Tar. GzCopy the code

    4. Configure nginx

      /configure --prefix=/usr/local/nginx --prefix=/usr/local/nginx --prefix=/usr/local/nginxCopy the code

    5. Compile the installation

      make
make install
Copy the code

    Install the operation command through the nginx source code

    Nginx -s reload // Nginx -s reload // nginx -s stop nginx -s stopCopy the code

2. Install Hexo. The installation procedure is the same as above

3. Configure the conf

Nginx: /usr/local/nginx/conf/ usr/local/nginx.

listen       80;
server_name  localhost;

#charset koi8-r;

#access_log  logs/host.access.log  main;

location / {
    root   hexoDoc/public;
    index  index.html index.htm;
}

Copy the code

Change the nginx proxy directory to the public folder in the hexo directory

4. Restart nginx

Restart Nginx, enter the server IP address in your browser, and you will see hexo configured

Domain name binding

There are two ways to deploy Hexo, which can be accessed as follows:

  • The url for github Pages is https://xxx.github.io

  • Access to the server is to use the IP address of the server directly

Imagine if we use our own domain name to access it, wouldn’t it be great? There are many ways to buy a domain name. We can buy the one we like and use it cheaply

Github Pages

If we were using Github Pages, we would need to create a CNAME file in the source folder of the hexo root directory. The contents of the file would be our domain name. Then run hexo g -d. Hexo will place the CNAME file in a public folder and upload it to Github. Github will automatically recognize the domain name in the CNAME file. In the Settings Custom Domain we can see that the domain name has been identified

Next, you need to configure domain name resolution behind the domain name. Note that the type is CNAME, followed by our xxx.github. IO

Wait a moment, we can access through the domain name

The server

If the domain name is A server, set the type to A and the value to the IP address of the server

Hexo migration

If you want to replace your computer, you should first install Node (remember to install the stable version), Git on the new computer. Then install Hexo. Once the preparation is complete, you can copy the Hexo folder from your old computer and go inside and execute NPM install. That’s ok

Big pit introduced, this problem climbed the pit to climb a day:

If you use the latest node, you will find that the local server is running properly, but the size of all files generated in public is 0, so you cannot upload git. The first thing to do is to switch Node to stable version, delete the public folder, and run the hexo Clean hexo g command again. At this time, you can see that the public folder is normal and can be successfully executed and uploaded.

Refer to the article

The resources

hexo

Butterfly theme

Gitbub Pages

CentOS Nginx installation