Build your own blog site with Hexo

A few years ago, when I saw something novel, I wanted to do it by myself. When I remember that I was building it, I also spent a lot of effort on building it. In the last year, I occasionally wrote a blog on CSDN to record something. Note how GitHub and Hexo are used to build a blog of their own.

Build your own blog with Hexo + GitHub

What is thehexo

The official description is a fast, concise and efficient blogging framework. Hexo is a node.js-based static blogging framework that is easy to install and easy to use. It supports all of Markdown’s features, one-click deployment, one-command deployment to Github Pages and other platforms, and supports multiple template engines and tools.

Install and build Hexo

In order to create a personal blog site using GitHub and Hexo, you must have your own GitHub account. Git nodeJs is a very important tool for git installation. It is a very important tool for git installation. Once the environment is ready we also need to install hexo:

npm install hexo-cli -g
Copy the code

Now you can use NPM to install hexo, press window + R, enter CMD to open the terminal, execute the above command, and wait for the installation to complete

Hexo -v checks the version and also verifies that the installation is complete.

As shown in the image above, we are done installing, and then we initialize our Hexo project:

// Blog is the name of your project, you can choose any name you like
hexo init blog
Copy the code

Then go into your project and install dependencies:

CD blog // Go to the project NPM install // install dependency packagesCopy the code

When completed, your project catalog should contain:

Node_modules: dependency package
Scaffolds: Templates for generating articles
Source: Store your articles
Themes: the theme
_config.yml: Configuration file for the blog

hexo server
Copy the code

Open hexo’s service and enter http://localhost:4000/ in your browser to open your blog.

GitHub creates a personal repository

If you don’t already have a Github account, you should register for a New repository. Create a repository with the same name as your username and add.github. Github. IO, which I have created, will only be identified when deployed to Github Page in the future. Github. IO ** already exists on this account.

If you’ve created a repository with the same name as your GitHub repository, here’s how to generate the SSH key:

Click on the right mouse button in your project folder, click on Git Base Hero, open your Git Base, and type in the base:

Git config --global user.email "youremail" git config --global user.email "youremail Youremail Type in your GitHub email addressCopy the code

You can check to see if you’ve got it right

git config user.name
git config user.email
Copy the code

Configure the GitHub SSH key

To create an SSH key, press Enter without setting a password

ssh -keygen -t rsa -C "youremail"
Copy the code

Once it’s done, go to your username folder and find.ssh, which contains two files. This is the key, where ID_RSA is your computer’s private key and id_rsa.pub is the public key. What we need to do is to configure the public key to GitHub, so that when you access your GitHub account, it will be matched with your private key. When a match is reached, you can upload your project to GitHub via Git.

Enter your GitHub page, click your profile picture in the upper right corner, find the Settings menu in the drop-down menu, click to enter the Settings page, and then find the SSH and GPG Keys menu under Access in the menu category on the left of the Settings page. Then click the New SSH Key button, copy and paste your locally created public key into the key input box, type title as you like, and save. Check for success in GitBase

ssh -T [email protected]
Copy the code

Deploy Hexo to GitHub

To associate Hexo with Github, deploy the Hexo generated article to Github, open the site configuration file _config.yml, go to the end, and change the configuration: XXX is your Github account

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: https://github.com/xxx/xxx.github.io.git
  branch: master
Copy the code

To complete the deployment, you also need to install deploy-git:

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

Then we need to look at hexo’s common commands:

// Create a new website. If floder hexo is not set, the website will be created under the current folder by default
hexo init [flolder]    
// Create a new article. If layout is not set, default_layout in _config.yml is used instead. If the title contains Spaces, enclose them in quotation marks.
hexo new [layout] <title> 
// Generate static files.
hexo generate  // hexo g -d, deploy the website immediately after the file is generated
// Publish the draft
hexo publish [layout] <filename>
// Start the server. By default, the url is http://localhost:4000
hexo server  
// Deploy the site, which can be shortened to hexo d
hexo deploy 
// Clear cached files (db.json) and generated static files (public)
hexo clean
Copy the code

Hexo Generate, as the name implies, generates static articles, which can be used as hexo G or hexo D to deploy articles

You can also use hexo G-d to complete the deployment in one step.

If the following error occurs when you deploy a web site: “Software Caused connection abort fatal: “Could not read from remote repository.” SSH -t [email protected] Open CMD and run ping github.com to check whether you can connect to github.com. Configure the local hosts file in c:\ Windows \system32\drivers\etc\hosts and add the following at the end:
140.82112.4.  github.com git 
140.3116.184. github.global.ssl.fastly.net
Copy the code
Gitbase SSH -t [email protected] succeeded again.

Hexo’s basic configuration

# site (site)

parameter	describe
title	Site title
subtitle	The subtitle of the website
description	Website description
keywords	Keywords of the site. Multiple keywords are supported.
author	Author’s name
language	The language used on the site. For simplified Chinese users, different themes may need to be set to different values. Please refer to the documentation of your theme to set the values`zh-Hans`and`zh-CN`.
timezone	Site time zone. Hexo uses your computer’s time zone by default. Like, it can be used for mainland China`Asia/Shanghai`.

# address (URL)

parameter	describe	The default value
url	Url, must be`http://` 或 `https://`At the beginning
root	Site root	/
permalink	The articlePermanent linkformat	:year/:month/:day/:title/
permalink_defaults	Default values for each part of the permalink
pretty_urls	rewrite`permalink`To beautify the URL
pretty_urls.trailing_index	Whether to keep the tail in the permalink`index.html`, is set to`false`When removing	true
pretty_urls.trailing_html	Whether to keep the tail in the permalink`.html`, is set to`false`To remove (Of the tail`index.html`invalid)	true

We change the URL to our website domain name in the configuration file, and Permalink is the link format we used when we generated the article. There are many linked variables, you can click the permanent link above to go to the official documentation to find the configuration.

Catalog # Directory

# Directory
source_dir: source # resources folder, this folder is used to store content.
public_dir: public # public folder, this folder is used to store the generated site files.
tag_dir: tags			# Tag folder
archive_dir: archives # Archive folder
category_dir: categories # Category folder
code_dir: downloads/code # Include code folder, subdirectory under source_dir
i18n_dir: :lang    # Internationalization (I18N) folder
skip_render: 				# skip rendering of specified files
Copy the code

If you are new to Hexo, there is usually no need to modify the values in this section.

The article # Writing

# Writing
new_post_name: :title.md  The file name of the new article
default_layout: post     # Preset layout
titlecase: false       Convert the title to the title case
auto_spacing: false     Add a space between Chinese and English
external_link:
  enable: true # Open external links in new tab
  field: site # Apply to the whole site
  exclude: ' ' # Domain name to exclude
filename_case: 0  Convert the file name to (1) lowercase or (2) uppercase
render_drafts: false 	# show draft
post_asset_folder: false Start the Asset folder
relative_link: false Change the link to address relative to the root directory
future: true # Show future articles
highlight: For code block Settings, see highlight.js
  enable: true
  line_number: true
  auto_detect: false
  tab_replace: ' '
  wrap: true
  hljs: false
prismjs: For code block Settings, see PrismJS
  enable: false
  preprocess: true
  line_number: true
  tab_replace: ' '
Copy the code

Categories & Labels

# Category & Tag
default_category: uncategorized # default classification
category_map: 								# class alias
tag_map:										 # tag alias
Copy the code

paging

# Pagination
per_page: 10 				# Number of articles per page (0 = turn off pagination)
pagination_dir: page # paged directory
Copy the code

The theme

Typically, a Hexo theme is a separate project with a separate _config.yml configuration file.

In addition to maintaining a separate theme configuration file, you can configure themes elsewhere.

There are more than 300 themes on hexo’s website, so download your favorite theme here and modify it. Just download it from the Github link and put it in the theme folder. Then change the theme in the configuration file to the name of the theme folder and it will automatically search for your theme in the theme folder.

We can also customize our own themes, or modify the styles of themes already installed.