Hexo- Building a personal blog with zero foundation (detailed explanation)

Hexo builds a personal blog with zero foundation

Hexo is an open source framework based on node.js to quickly generate static blogs. It supports Markdown and most Octopress
plug-ins. It can be deployed to Github pages, Giteee, Heroku, etc. with one command. It has a powerful APl that can be expanded infinitely and has
hundreds of Themes and plugins.

To put it simply, it is a set of your own personal blog website application that can be built without you writing code (zero-based Xiaobai can also).

You can write articles, take notes, write diaries, and code on it. (A world that is yours! A personal world accessible to others)

In addition, Hero also provides a large number of theme templates for users to download. Your blog site will be able to change the theme style from time to time, pleasing to the eye, it is perfect!

1. Environmental preparation

1. Install Node.js

Go directly to the official website to download and install https://nodejs.org/en/download/

• Node.js (Node.js version not lower than 10.13, recommended to use Node.js 12.0 and above)
• Node comes with npm

2. Install Git

• Windows: Download and install git .
• Mac: Use Homebrew , MacPorts or download the installer .
• Linux (Ubuntu, Debian):sudo apt-get install git-core
• Linux (Fedora, Red Hat, CentOS)：sudo yum install git-core

If npm download is slow, you can also download Taobao download source cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

2. Start to install Hexo

1. Install hexo

npm install -g hexo-cli
或者
cnpm install -g hexo-cli

After the installation is complete, enter hexo -v to view the version

2. Initialize hexo and create a new folder for storing blogs

hexo init myblog

3. Enter the folder and install npm

cd myblog
npm install

You can see that our hexo site has been installed, and then you can start it directly

4. Start the service site

hexo g 
hexo server

Visit http://localhost:4000/ So far the hero is set up. can be accessed locally

3. Site visit on Gitee

You can build a website on github or gitee, and gitee domestic access is faster

1. New warehouse

The format must be: username+.gitee.io Only in this way, it will be recognized when it is deployed to the Gitee page in the future, that is, xxxx.gitee.io, where xxx is the username you registered with Gitee.

2. Upload the hexo blog site to gitee

Here you need to install a hexo upload plugin deploy-git

npm install hexo-deployer-git --save

3. Modify the hexo configuration file to specify the warehouse path

Files can be opened directly in the folder or edited directly through vim

Find Deployment plus (note the space)

deploy:
  type: git
  repo: 你的仓库路径
  branch: master

4. Push the hexo site file

Then you can push the blog site to gitee

推送命令
hexo d

extension:

Among them, the things you generated before are hexo cleancleared , or you can not add them.
hexo generateAs the name suggests, generate static articles, you can use hexo gabbreviations
hexo deployto deploy articles, you can use hexo dabbreviations

You will be asked to enter the user name and password of gitee during the push (if you don’t want to enter it every time, you can configure ssh, I won’t do a demonstration here)

Then you can see the files pushed up on gitee

5. Configure the Pages service

At present, our site is still inaccessible and Gitee Pages needs to be turned on (gitee needs to be turned on, github does not)

After the review is approved, we can access it.

After gitee uploads a new file, it needs to be manually updated for the updated page to take effect

One more thing : If you feel that the access path is too long, we can buy a domain name, bind the path to the domain name, and then access it through the domain name.

4. Site visit on GitHub

There are restrictions when building a site on gitee, so you can also use github to build a site.

The steps are the same as gitee.

1. Create a new guthub warehouse

The repository name is limited to yours: username+.github.io

2. Install the hexo upload plugin

npm install hexo-deployer-git --save

3. Modify the hexo configuration file to specify the warehouse path

Files can be opened directly in the folder or edited directly through vim

vim _config.yml #找到Deploymentdeploy:  type: git  repo: 你的github仓库路径  branch: master

4. Push the site to github

推送命令hexo d

You need to enter your github username and password during the push process. However, starting from August 14, 2021, GitHub will officially strengthen security access. It cannot be accessed through the original account password git, and the password needs to be accessed with an official token or ssh public and private keys. Otherwise, the following picture will appear: Authentication failed (username and password are wrong)

Official words:

In recent years, GitHub customers have benefited from many security enhancements to GitHub.com, such as two-factor authentication, login alerts, verified devices, protection from leaked passwords, and WebAuthn support. These features make it more difficult for attackers to take a password that is reused on multiple websites and use it to try to access your GitHub account. Despite these improvements, for historical reasons customers who have not enabled two-factor authentication will still be able to continue authenticating to Git and API operations using only their GitHub username and password.

Starting August 13, 2021, we will no longer accept account passwords when authenticating Git operations, and will require the use of token-based authentication, such as personal access tokens (for developers) or OAuth or GitHub App Install Token (for integrators) All authenticated Git operations on GitHub.com. You can also continue to use SSH keys wherever you like

The solution is to get the token, log in to github and set setting->Developer Settings->Prosonal access tokens to create a new token. Then you can use this token as a password to enter.

After the user name and token are entered, the upload is successful.

5. Try to access

Enter your warehouse name to access successfully.

https://lindaifeng.github.io/

5. Change the theme

The blog style is too rigid, if you want to change it to your own style, no problem, we can change the theme of the blog to achieve the style we want.

Go to GitHub to search for the hexo theme or the theme that comes with hero https://hexo.io/themes/.

1. Find someone you like.

Follow the steps above in the respective theme documentation.

General steps:

1、下载解压2、放到主题包themes文件夹下面3、在hero配置文件_config.yml中修改为喜欢主题的名字4、hero server启动即可访问

6. Update warehouse

After local debugging. You can update it to github

//清理hexo clean//构建静态文件hexo g//上传至仓库hexo d

access:

Seven, write articles

Open git in the site folder, enter the following command to create an article, where 我的第一篇博客is the title of the article. hexo will create a markdown file under the source folder. This is the article you will write.

Markdown is a markup . Through a simple markup syntax , it can make ordinary text content have a certain format

Based on the simplicity of Markdown syntax, it has become the most popular language for writing blogs in the world

$ hexo new "我的第一篇博客"

Use the software typora to open and write articles directly

You can view it immediately after uploading the update to github.

//清理hexo clean//构建静态文件hexo g//上传至仓库(上传报错多位网络原因，多上传几次即可)hexo d

draft box

Many times we need to write a draft first and not publish it temporarily. The draft page can meet our requirements, and draft files cannot be seen on our website.

//新建草稿文件hexo new draft b//预览草稿文件hexo server --draft//发布草稿hexo publish b

8. Create a new page

Sometimes we are not satisfied with some pages of theme freedom and hope to add some pages by ourselves.

We can create a new page, and the new page will create a new page file in the source of hexo and generate an md file. This is the blog page you want to edit.

hexo new page "resouces"

Then open the configuration file of the theme , and add the following in _config.ymlthe menu properties (note that it is not the configuration file of Hexo)menu

Link the page path to the page

菜单自定义名称：/生成的页面名称

When we click on the resource, we will jump to our custom blog page (this page is different because I changed the theme)

So far, the installation, website building, blogging, updating, and new menu of Hexo are all introduced.