How to quickly build a personal blog using Github+Hexo

Assuming that your dao friends are all skilled git users, there will be no detailed introduction of git related knowledge here. Git has not started to check git common core commands or access Pro git (Chinese version) get more knowledge.

Create a new repository on Github and name itaccount.github.io

Here account is your Github account name.

You can also create the repository directly with the command:

echo "# Byron4j.github.io" >> README.md
git init
git add README.md
git commit -m "first commit"
git remote add origin https://github.com/Byron4j/Byron4j.github.io.git
git push -u origin master
Copy the code

Or overwrite an existing warehouse:

git remote add origin https://github.com/Byron4j/Byron4j.github.io.git
git push -u origin master
Copy the code

Installation Node. Js

Hexo is based on Node.js, so you’ll need to install Node.js as well. Node.js can be downloaded from nodejs.cn/download/…

Install Hexo

Hexo official website: hexo. IO /zh-cn/ IO /zh-cn/docs/…

Install Hexo using NPM (demo in Windows-64 environment) :

npm install -g hexo-cli
Copy the code

The installation result is as follows:

C:\Users\BYRON.Y.Y>npm install -g hexo-cli C:\Users\BYRON.Y.Y\AppData\Roaming\npm\hexo -> C:\Users\BYRON.Y.Y\AppData\Roaming\npm\node_modules\hexo-cli\bin\hexo npm WARN rollback Rolling back [email protected] failed (this is probably southern): operation not permitted, rmdir 'C:\Users\BYRON.Y.Y\AppData\Roaming\npm\node_modules\hexo-cli\node_modules\fsevents' npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules \ hexo - cli \ node_modules \ fsevents) : NPM WARN Notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {" OS ":"win32"," ARCH ":" X64 "}) + [email protected] added 225 fCN3 packages from 431 polymorphism in 60.523sCopy the code

How to use Hexo

Specify an empty directory to initialize hexo files:

Command:

Hexo init directory name (empty directory required)Copy the code

C:\Users\BYRON.Y.Y> Hexo init F:\217my_optLogs\001 System-related \ system design \007\blog INFO Cloning hexo-starter to F:\217my_optLogs\001 system design \007 blog Cloning into 'F:\217my_optLogs\001 system Design \007 blog'... remote: Enumerating objects: 68, done. remote: Total 68 (delta 0), reused 0 (delta 0), pack-reused 68 Unpacking objects: 100% (68/68), done. Submodule 'themes/landscape' (https://github.com/hexojs/hexo-theme-landscape.git) registered for path 'themes/landscape' Cloning into ': F / 217 my_optlogs related/system design / 007/001 / blog/themes/landscape'... remote: Enumerating objects: 1, done. remote: Counting objects: 100% (1/1), done. remote: Total 867 (delta 0), reused 0 (delta 0), pack-reused 866 Receiving objects: 100% (867/867) and 2.55 MiB | 1.52 MiB/s, done. Resolving deltas: 100% (459/459), done. Submodule path 'themes/landscape: checked out '73a23c51f8487cfcd7c6deec96ccc7543960d350' [32mINFO [39m Install dependencies npm WARN deprecated [email protected]: no longer maintained npm notice created a lockfile as package-lock.json. You should commit this file. npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\ Fsevents): NPM WARN Notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {" OS ":" Darwin ","arch":"any"} (current: {" OS ":" Win32 "," ARCH ":" X64 "}) added 421 packages from 500 CNOL3 and audited 4699 packages in 72.178s found 0 vulnerabilities INFO Start blogging with Hexo!Copy the code

After the creation is complete, the following directory files are generated:

C:\Users\BYRON.Y.Y>dir /B F:\217my_optLogs\001 System-specific \ system design \007\ blog.gitignore node_modules package-lock.json package.json scaffolds source themes _config.ymlCopy the code

Documentation for the Hexo project

_config.yml is the configuration information

Site configuration information, where you can configure most of the parameters. Application information. EJS, Stylus and Markdown Renderer are installed by default and you are free to remove them. More notes on this file can be found at hexo. IO /zh-cn/docs/…

Scaffolds Template document

Template folder. When you create a new article, Hexo creates a new file based on the template.

Hexo’s template refers to what is populated by default in the new Markdown 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 resources folder is where user resources are stored. Files/folders with names beginning with _ (underscore) and hidden files are ignored except for the _posts folder. Markdown and HTML files are parsed and placed in the public folder, while other files are copied over.

themes

Theme folder. Hexo generates static pages based on themes.

Browse the blog prototype

Enter the Hexo project directory and start the blog service with the following command:

hexo s
Copy the code

Visit http://localhost:4000 in the browser.

At this point, the blog has been built, and the rest of the work is to improve.

Write articles using Hexo

To create a new article, use the following command in the project directory:

hexo new [layout] <title>
Copy the code

You can specify the layout of the article in the command. The default is POST. You can specify the default layout by modifying the default_layout parameter in _config.yml.

Layout (Layout)

Hexo has three default layouts: Post, Page, and Draft, which correspond to different paths, while the other layouts you customize are stored in the source/_posts folder, just like post.

layout	The path
post	source/_posts
page	source
draft	source/_drafts

The file name

Hexo defaults to the title as the file name, but you can edit the new_post_name parameter to change the default file name, for example, to :year-:month-:day-:title.md to make it easier to manage articles by date.

After modifying the value of the configuration file new_post_name, create a new article:

F:\217my_optLogs\001 System Related \ System Design \007\blog> Hexo New Post how to use Github+ hexo to create a personal blog INFO Created: F:\217my_optLogs\001 System-related \ System Design \007\blog\source\_posts\2019-01-27- How to use Github-Hexo to quickly build a personal blog. mdCopy the code

Refresh the browser page again and you will see a new article:

The draft

Just mentioned a particular layout of Hexo: Draft, a layout that is saved to the source/_posts folder when created, can be moved to the source/_posts folder using the publish command, which works much like new, You can also specify the layout by specifying layout in the command.

hexo publish [layout] <title>
Copy the code

Drafts do not show up on the page by default; you can preview drafts on execution with the –draft parameter, or set render_drafts to true.

Let’s set the configuration parameter to render_drafts.

#render_drafts: false
render_drafts: true
Copy the code

Scaffold

When creating new articles, Hexo creates files based on the corresponding files in the SCAFFolds folder, such as:

hexo new photo "My Gallery"
Copy the code

When executing this directive, Hexo attempts to find photo.md in the SCAFFolds folder and create articles based on its contents. Here are the variables you can use in the template:

variable	describe
layout	layout
title	The title
date	Document creation date

Imported articles

You can complete the article import by importing your already written.md into the _posts directory.

The cover page Front – matter

Front-matter is the — separated area at the top of a file that is used to specify variables for individual files. Example:


---
layout: photo
title: My Gallery
date: 2019-01-27 11:52:58
tags:
---

Copy the code

Here are pre-defined parameters that you can use in the template and take advantage of:

parameter	describe	The default value
layout	layout
title	The article title
date	Set up the date	MM – dd yyyy – HH: MM: ss format
updated	Updated date
comments	Enable comments for articles	true
tags	Tags (not applicable to paging)
categories	Classification (not applicable to paging)
permalink	Overlay article url

Classification and labeling

Only articles support categories and tags, which you can set in front-matter. In other systems, categories and labels sound similar, but in Hexo there are clear differences: categories are sequential and hierarchical, i.e., Foo, Bar is not equal to Bar, Foo; Tags have no order or hierarchy.

categories:
- Diary
tags:
- PS3
- Games
Copy the code

Differences in classification methods

If you’ve had any experience with WordPress, it’s easy to misunderstand Hexo’s classification. WordPress supports multiple categories for an article, and these categories can be sibling or parent. However, Hexo does not support specifying multiple sibling categories. The following method is specified:

categories:

Diary

Life

Would make the category Life a subcategory of Diary, rather than a side-by-side category. Therefore, it is necessary to choose as accurate a category as possible for your article.

JSON Front-matter

In addition to YAML format, title pages in JSON format are also supported. Just substitute — for;; Can be

."title": "Hello World"."date": "2013/7/13 20:46:25"
;;;

Copy the code

Deploy to the server

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

hexo deploy
Copy the code

Before you can start, you must first modify the parameters in _config.yml. A proper deployment configuration should have at least the type parameter, for example:

deploy:
  type: git
Copy the code

You can use multiple deployer at the same time and Hexo executes each one sequentially:

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

deploy:
  type: git
  repo: <repository url> #https://bitbucket.org/JohnSmith/johnsmith.bitbucket.io
  branch: [branch] #published
  message: [message]
Copy the code

Install hexo deployer — git

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

For more information on deployment reference: hexo. IO /zh-cn/docs/…

Hexo theme

You can browse in hexo. IO /themes/inde… Choose and change the theme. Once downloaded, put it in the Themes folder and make configuration changes in _config.yml.

Here using the subject: blinkfox. Making. IO / 2018/09/28 /… Refer to the instructions.

Show the formed blog

Linux starts as a background service

Install the pm2

npm  install -g pm2
Copy the code

Create an hexo_run.js file under the blog root:

const { exec } = require('child_process')
exec('hexo server',(error, stdout, stderr) => {
        if(error){
                console.log('exec error: ${error}')
                return
        }
        console.log('stdout: ${stdout}');
        console.log('stderr: ${stderr}');
})
Copy the code

Run in the root directory:

pm2 start hexo_run.js
Copy the code

Start the background service.

Related references:

Blog.csdn.net/Tangcuyuha/…
Hexo. IO/useful – cn/docs /…
Blinkfox. Making. IO / 2018/09/28 /…

How to quickly build a personal blog using Github+Hexo