Recently, several students left messages in the background of the official account asking me how to set up my blog. After thinking over and over, I’d better write an article starting from 0.

Lead to

Let’s talk about the pre-preparation, may be a lot of students heard to build a blog system, directly back away. Can’t have a server, can’t have a database, don’t need a domain name record? Of course, these are all the things you need to build a blog site, and if you don’t have them, that’s fine.

First of all, Github has made a great contribution for us, directly helping us solve the server and domain name problems. Of course, it may be a little slow to access Github in China, but there is Gitee in China, which is no less good than Github.

Hexo is a less heavyweight blog framework that uses Markdown to write articles directly and then compile them into static pages. Once compiled, we just put the compiled pages on Github or Gitee. It can be accessed directly. In this way, we do not need a database and server, the content of the article, title, tag and other information does not need to be put in the database, can be directly asked in the static page.

So, the next thing you need is a Github or Gitee account, which I won’t talk about, you prepare yourself.

Environmental installation

Node.js

Hexo is compiled using Node.js, which you need to install on your own computer. The download address is directly posted here: nodejs.cn/download/. You can directly choose your own Stable version of the corresponding system to install.

For Windows, download it all the way to next, no extra choice required. If environment variables are not automatically configured after the installation, you need to configure environment variables. After the configuration, run the following command to check whether the installation is successful:

node -v
# v10.16.3
npm -v
# 6.9.0
Copy the code

The time that the blogger installs is earlier, version is older, everybody understands spirit.

Hexo

Next we install Hexo, which is a blog framework. Hexo also provides a command line tool for quickly creating projects, pages, compiling, and deploying Hexo blogs, so we need to install Hexo’s command line tool first.

npm install -g hexo-cli
Copy the code

After the installation is complete, run the following command to check whether the installation is successful:

hexo -v
Copy the code

The output from the blogger side is as follows:

Hexo - CLI: 2.0.0 OS: Windows_NT 10.0.18362 win32 x64 http_Parser: 2.8.0 node: 10.16.3 V8:6.8.275.32-node.54 UV: hexo- CLI: 2.0.0 OS: Windows_NT 10.0.18362 win32 x64 http_Parser: 2.8.0 node: 10.16.3 V8:6.8.275.32-node.54 UV: 1.28.0zlib: 1.2.11 brotli: 1.0.7ares: 1.15.0 modules: 64 nghttP2:1.39.2 napi: 4 Openssl: 1.1.1c ICU: 64.2 Unicode: 12.1 CLDR: 35.1 TZ: 2019ACopy the code

Create a project

Then it’s time for the big bang, starting a blog project.

Next, we use Hexo to create a project locally and run through the entire project locally.

To create a project in your favorite directory, use the following command:

hexo init <folder>
Copy the code

Here < Folder > is the project name, use your favorite name, I use firstblog.

hexo init firstblog
Copy the code

Wait for the progress bar to finish so that we have the Hexo initialization files in the firstBlog folder. As shown in figure:

Go to this folder and install the relevant Node dependencies:

npm install
Copy the code

Next, you can compile the file you just generated into static HTML code using the generate command.

hexo generate
Copy the code

You can see that the output contains js, CSS, font, etc., and see that they are all in the project root directory under the public folder.

We then use the server command provided by Hexo to make the blog run locally, as follows:

hexo server
Copy the code

The default service will be port 4000, directly in the browser to visit http://localhost:4000, let’s look at the result:

At this point, the entire blog shelf is ready, and we only use 3 commands.

The deployment of

Next, we will deploy this blog to Github Page to verify that it works. After success, we can do some other operations, such as changing the theme, modifying the configuration and so on.

Here we need to create a repository on Github.

GitHub Pages allows each account to create a repository named {username}.github. IO. GitHub Pages also automatically assigns the repository a GitHub. You can create naming rules by referring to the naming methods of bloggers.

Once the repository has been created, it is ready to deploy, with Hexo’s deployment command:

hexo deploy
Copy the code

A plug-in needs to be installed before deployment:

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

Then we also need to configure the local project configuration file _config.yml, which is in the same directory as the local project directory, to open and modify the bottom part of the deployment:

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: {git repo ssh address}
  branch: master
Copy the code

The modification result of the blogger is as follows:

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: [email protected]:meteor1993/meteor1993.github.io.git
  branch: master
Copy the code

Then execute the hexo deploy command and see something similar to the following indicating successful deployment:

INFO Deploying: git INFO Clearing .deploy_git folder... INFO Copying files from public folder... INFO Copying files from extend dirs... On branch master nothing to commit, working tree clean Enumerating objects: 46, done. Counting objects: 100% (46/46), done. Delta compression using up to 12 threads Compressing objects: 100% (36/36), done. Writing objects: 100% (46/46) and 507.64 KiB | 1.67 MiB/s, done. 46 (delta) 3, Total reused zero (0) delta remote: Resolving deltas. 100% (3/3), done. To github.com:meteor1993/meteor1993.github.io.git * [new branch] HEAD -> master Branch'master' set up to track remote branch 'master' from '[email protected]:meteor1993/meteor1993.github.io.git'.
Copy the code

Meteor1993.github. IO = meteor1993.github. IO = meteor1993.github.

In this case, we can go to the Github repository to see exactly what has been uploaded:

As you can see, Hexo has uploaded all the files in our public directory and uploaded the compiled static page content to GitHub’s Master branch.

Site configuration

We have only successfully deployed the initial page above, and there are still some sites in the blog that have not been configured to let the search engines know what our site does.

You also need to configure the _config.yml file in the root directory of the project. Open this file and find the configuration information related to the site.

# Site
title: Hexo
subtitle: ' '
description: ' '
keywords:
author: John Doe
language: en
timezone: ' '
Copy the code

Xiaobian here is only a demonstration of the use of the project, and no other role, just write, you can do configuration according to their own needs:

# Site
title: Geekdigging
subtitle: 'A blog dedicated to technology sharing'
description: 'Mainly in Java, Python and other fields'Author: Geek Excavator Language: zh-CNCopy the code

Xiaobian here mainly set the language into Chinese, let’s take a look at the modified blog looks like:

You can see that the time and date format has changed to Chinese. This completes the configuration of the blog site.

Modify the theme

The current default style style is not pretty, and changing it would involve theme changes. By far the most used theme for Hexo is definitely the Next theme. Of course, the small editor’s site is not the theme of Next.

Next, let’s look at how to use the Next theme in Hexo.

First we need to clone Next from Github with the following command:

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

Clone this theme directly to the Themes directory of the project.

Once the clone is complete, the source code for Next will appear under the Themes directory. We need to modify the theme configuration in the _config.yml file in the root directory so that we can use the Next theme we just cloned:

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: landscape
Copy the code

Is amended as:

theme: next
Copy the code

Restart the local service and let’s see what happens:

The topic configuration

The Next theme also provides rich configuration for customizing your own blog site.

In themes\next, go to the _config.yml file and open it.

Next also has several styles for us to choose from:

# -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
# Scheme Settings
# -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --

# Schemes
scheme: Muse
#scheme: Mist
#scheme: Pisces
#scheme: Gemini
Copy the code

These styles are also black and white, but the layout style is different. You can choose your own layout style.

More configuration of Next is not listed here, which is more true. The official document of Next theme is provided here, which is in Chinese version. Students who need to modify can refer to it by themselves. Official documentation: theme-next.iissnan.com/theme-setti… .

Add the article

Adding the article Hexo also provides us with related commands, such as adding an article named test, as follows:

hexo new test
Copy the code

We can see that a test.md Markdown document is created under the source\_posts directory. Open it and take a look inside:

---
title: test
date: 2019-11-10 12:28:52
tags:
---
Copy the code

These contents are only automatically created, we can also add other contents, you can show the students my usual article header:

"-- Author: Geek excavator Categories: --" --Copy the code

Write the body below the beginning in MarkDown format.

IO /zh-cn/docs/ hexo. IO /zh-cn/docs/…

You can also create a new.md file in the corresponding directory, which Hexo will recognize when compiling.

This article ends with sharing, and those who are interested can try it out for themselves.

digression

Small make up in order to keep your personal site access speed and stability, and deployed on the tencent cloud and use a CDN acceleration, and mapping the application domain, the difficult point is the domain name for the record and tencent cloud is the need to generate a fee, if only their own use without considering the stability and speed of access, It can be deployed in China on Gitee, which is tested much faster than Github.

reference

cuiqingcai.com/7625.html

hexo.io/zh-cn/docs/