Static blog Hexo setup – both local and server blooms

Static blog — Hexo

Static blog: a blog without a back-end database, where all posts are stored as files, is a purely front-end blog framework.

The local installation

1. Installation Node. Js

Because Hexo is generated through Node.js, you first need to download and install Node.js based on your operating system version. After performing operations as prompted, enter the node -v command in the item (Windows is CMD) box. If the Node.js version is displayed correctly, the installation is successful (I use v10.15.3).

2. Install the Hexo framework through NPM

After node.js is successfully installed, a Package Manager, called Node Package Manager (NPM), is automatically installed.

What is NPM? NPM is a package manager. Publishers publish their code to registry. Users write their required packages to package.json and download the code from registry.

-g hexo install -g hexo install -g hexo

Because the NPM code repository server is abroad, due to the Great Firewall, the download speed may not be satisfactory, then you can use Taobao NPM code repository, through NPM install CNPM: NPM install – g CNPM – registry=https://registry.npm.taobao.org after successful installation, can through the following command to see CNPM version: CNPM -v Operating through CNPM will greatly improve the download speed, but the package version is not necessarily the latest.

The local use

1. Create a directory

All articles in Hexo are stored in directories as files, so first you need to create a new directory, mine is Hexo, and operate in that directory.

2. Initialize the blog

hexo init

3. Create a new article

Hexo new “BlogName” (BlogName is the name of your post) will generate a blogname.md file in the source/_posts directory, which can be modified by Vim or other Markdown editors.

4. Generate static blog files

Every time you modify a post, you need to clean it up with Hexo Clean, then regenerate it with Hexo G, and don’t forget to restart Hexo with Hexo S.

5. Start a blog

Hexo S (s stands for server, default port number is 4000)

6. Change the theme

Download and unzip the theme you need to change into the theme/yourThemeName directory. YourThemeName is the name you give your theme. For example, I used next. Git clone https://github.com/theme-next/hexo-theme-next themes/next After decompressing, change the theme property in the _config.yaml file, which is landscape by default, to next:

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next                          # Note: "Theme:" should be followed by a space
Copy the code

After each theme change, you need to clean it up with Hexo Clean, then regenerate it with Hexo G, and don’t forget to restart Hexo with Hexo S.

7. Other _config.yaml configurations

The _config.yaml file is the global configuration file for the Hexo project, and the commonly used properties are:

# Site
# Site title
title: DragonBaby308's Blog
# site subtitle
subtitle: Fighting for BAT!
# Site Description
description: Remember how powerless you feel every time you lose so far, and "fight for a better tomorrow."
# the author
author: DragonBaby308
# Language -- Please note that the official language pack no longer supports simplified Chinese zh-Hans, but uses zh-CN instead
language: zh-CN
# Time zone -- The default is local time zone
timezone:

# URL
# site address
url: http://106.14.153.30
# site root, if website exists subdirectory, url is set to 'http://yoursite.com/child', the root is set to '/ child/'
root: /
Generate a fixed link format
permalink: :title/
permalink_defaults:

# Pagination
# number of articles per page -- turn off pagination: 0
per_page: 10

# Extensions
Topic #
theme: next

# Deployment
# Deploy configuration
deploy:
  type: git
  repo: [email protected]: / usr/DragonBaby308 / repo/blog. The git
  branch: master
Copy the code

Server Deployment

(1) Local + Github. IO white piao deployment

1. Generate the github. IO repository

Githubname.github. IO (YourGitHubName is your GitHub nickname, case sensitive!)

2. Install Hexo’s Git deployment plug-in locally

In the directory of Hexo, type NPM install –save hexo-deployer-git and a peerDependencies WARNING is reported.

3. Modify the _config.yaml file locally

In the Hexo directory, go to the _config.yaml file and make the following changes in #Deployment:

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: https://github.com/DragonBaby308/DragonBaby308.github.io.git        # your github. IO url
  branch: master                                                            # "type:", "repo:", and "branch:" should all be followed by a space
Copy the code

Deployment of 4.

When hexo d is successfully deployed, the browser can access it by typing yourGithubname.github. IO, where YourGitHubName is your Github nickname and is case-sensitive

(II) Aliyun ECS server deployment

1. The train of thought

Locally deploy Hexo, create a Markdown file with the Hexo new “” command, store it in the source/_posts directory, and modify it through the Markdown editor. After executing the Hexo g command, the Markdown file will be rendered as a static HTML file. Stored in the public/ directory, these HTML files are the blog presentation pages; Therefore, we will first create a directory on the server side to store the HTML files. My directory is /usr/dragonBaby308/hexo, and this directory will also be the website root directory in the Nginx configuration file. How do we send these files to the server? A simple way is through the git to send, so we need to set up a git repository, the server is my/usr/DragonBaby308 / repo/blog. Git. Now, our HTML file is sent to blog.git and synchronized to the hexo directory via Git’s hook function, which will be recognized by Nginx and displayed to the user.

2. Build a private Git repository on the server

Set up your own private Git repository and establish SSH trust with the local. For details, see “Set up a Private Git Repository on Ali Cloud ECCS”. When this is done, you have a private repository under the REPo directory and a Hexo directory for the Hexo application deployment directory.

3. Set up Nginx on the server

What is Nginx? Nginx (Engine X) is a high-performance HTTP and reverse proxy Web server that provides functions such as load balancing and static/static separation. Proxy server: The proxy server is an intermediary between the client and the server. The communication between the client and the server is carried out through the proxy server. [Forward proxy] : Proxy server Proxy client. The server communicates directly with the proxy server, regardless of who the client is, such as scientific Internet access. [Reverse proxy] : Proxy server Proxy server. The client does not know the specific server to access. The client can mask the details of the server and achieve load balancing. [Load balancing] : When a server cluster is used to replace the work of a single server, the access pressure is distributed to different servers to prevent excessive pressure on one server. [Static separation] : The site static resources (HTML, JavaScript, CSS, IMG and other files) and background applications are deployed separately, improve the speed of users to access static code, reduce the access to background applications.

For the moment, we will only use the echo proxy function of Nginx, and configure the root directory of the web page as Hexo application deployment directory /usr/dragonBaby308/hexo. For details, see “Installing Nginx on the ECS Server”.

4. Install the Node. js environment on the server

# yum install -y nodejs node-v # yum install -y nodejs node-v # yum install -y nodejs node-vCopy the code

5. Local Hexo deployment

The native Hexo installation was covered in more detail in the previous section. Go directly to the local Hexo directory, find the _config.yaml file, and make the following changes in #Deployment:

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git                                                       # username
  repo: [email protected]: / usr/DragonBaby308 / repo/blog. The git        # Private Git repository
  branch: master                                                  # "type:", "repo:", and "branch:" should all be followed by a space
Copy the code

Once the modifications are complete, we can deploy them using Hexo Clean and Hexo D-G.