Use Hexo, GitHub Page, Typora to write articles

Note

This article was automatically translated using Google

I have previously shared an article How to write articles with Typora

Also shared an article Recommend a set of high-value family buckets based on content publishing

Recently, due to the server requesting the public security filing, the access speed of overseas servers is too slow. Cloudflare’s IP is now almost blocked. I was forced to plan to use Hexo+Github Page to build a set of blogs. After two days, it feels good to use, and it may be possible in the future. Become a content platform that I use for a long time.

Hexo installation

Preparation

1. Install the latest version of node

Generally programmers will install it, if not, install it yourself, and remember to add a domestic mirror source

npm config set registry https://registry.npm.taobao.org

2. Install Git

General programmers will also install it, but recently due to well-known reasons, it is necessary to hang an agent

git config --global http.proxy'socks5://127.0.0.1:7890'
git config --global https.proxy'socks5://127.0.0.1:7890'

3. Register GitHub account

General programmers will also have them. Open Github official website, create a new warehouse, enter your own project name, and be sure to add the suffix .github.io afterwards, and also check the README initialization on. *The name must be exactly the same as your github name. For example, if your github name is abc, then the warehouse name must be abc.github.io Just leave the Description empty, remember to select public

4. Create GitHub Pages

After the project is built, click on Settings, scroll down until there is a GitHub Pages at the end, click on Choose a theme to select a theme. After waiting for the page to be automatically generated by the system, go back to GitHub Pages and you can modify the custom domain name. Here we don’t do any operation, because we need to generate a CNAME file and we will create it in Hexo later, which is relatively simple.

5. Change DNS resolution

Add a CNAME record in the place of DNS resolution, point the domain name you want to your warehouse name (this is the reason why the project name is added with .github.io)

Install Hexo

1. Installation Procedure

Create a new folder in a suitable place to place my blog files. For example, because I have two computers, I use iCloud to synchronize with each other, so I put it in /Users/xxx/Documents/blog Inside the directory

After the directory is created, use the terminal to open the directory, and enter npm i hexo-cli -g to install Hexo in the directory

After installation, enter hexo -v to verify whether the installation is successful.

Then we must initialize our website, enter the hexo init initialization folder, and then enter npm install to install the necessary components

This way the local website configuration is also set up, enter hexo g to generate a static web page, then enter hexo s to open the local server, and then open the browser to open http://localhost:4000/, you can see our Blog, press ctrl+c to close the local server and prepare to upload

The configuration of github should not be repeated. The only reminder is that now **you need to hang up the agent, you need to hang up the agent, you need to hang up the agent, **Don’t hold the psychology of fluke, otherwise you will want to die when you synchronize the blog

2. Modify hexo configuration

If you are not familiar with the situation, just remember to modify one place, and you will see the others. It should be noted here that you need to change the encoding of the file _config.yml to UTF-8 to Avoid garbled Chinese titles

deploy:
  type: git
  repository: https://github.com/wellmoonloft/wellmoonloft.github.io.git
  branch: main

Pay attention to what you write in brach, and the source set in Github Pages should correspond to it. Set main to select main, and set master to select master. This doesn’t matter.

3. Modify the article template

Before starting to create a new article, it is best to change the article template, the location is in the scaffolds folder under the directory you choose, just change post.md, so that when you create a new article, it will automatically add one you want You don’t have to write each one manually

---
title: {{ title }}
date: {{ date }}
tags:
categories: default
---

4. Create a new article and article migration

First, install an extension npm i hexo-deployer-git in the blog root directory.

Then enter hexo new post "new article title" to create a new article.

Then open the directory of /Users/xxx/Documents/blog/source/_posts, you can find that there is an additional new article title.md file below, which is your article file, you can directly open it with Typora for article writing, You can also directly copy all your previous articles to this directory. But it should be noted that if you do not create a new article through the command, you need to manually add a header to each article, and you cannot directly enter it. You need to use the source code mode to copy, or open it with Sublime Text or Xcode to copy

Non-source code mode

Source code mode

5. Upload and synchronize blogs

After writing the markdown file, enter hexo g in the blog directory to generate a static webpage, then enter hexo s to preview the effect locally, and finally enter hexo d to upload to github, then open your github.io homepage. Can see the effect

6. Bind domain name

After waiting for so long, DNS resolution should have taken effect. At this time, when you visit this domain name, you will find that you have reached the github page, but an error is reported because there is no link relationship. Now in the local blog /source directory, mine is /Users/xxx/Documents/blog/source, create a new CNAME file, and note that there is no suffix. Then write your domain name in it and save it. Finally, run hexo g and hexo d to upload to github, refresh a few times, you can see your blog page