This is the 5th day of my participation in the wenwen Challenge

Preface: Why as a programmer wrote technology blog, on the one hand is to get into the habit of taking notes summing-up, on the one hand, also can make some useful knowledge sharing, improve writing ability, there are many good blog platform can be used, such as in Denver publishing blog posts, but how to don’t need the domain name space and blog program, low-cost have their own blog site?

I later found out that a lot of big personal blogs are using Hexo. After a while, I found it simple and practical. Markdown wrote Git and published it, and static web pages are fast and stable, which is enough for blogging programs. You can also integrate vue, Angular, etc.

1. Preparation

  • Download of necessary environment and tools:
  1. The NPM package management tool will also be installed after node. js is installed.
  2. Git is a tool for submitting code. If xcode is installed on a MAC, this step is ignored.
  3. You need a Github account and use its Pages feature to have a static web space, free of charge. Domestic Coding can also do the same thing. Here, I choose Github as an example. The principle is the same.
  • Apply for your own domain name (optional)

2. Install the HEXO blog program

  • Open terminal on MAC. If CD is too much trouble, you can open Finder and click on finder next to the Apple icon in the upper left corner -> Services -> Services Preferences -> select New Terminal window located in the folder location. Then you can right-click the directory folder and choose Services ->… Location of the terminal window.

  • Windows right-click in a blank area of any directory on your disk and select Open GitBash here (using CMD is also acceptable, not recommended)

  • Install hexo from a terminal by executing the following command (sudo is not required on Windows)

sudo npm install -g hexo

3. Initialize the blog

  • Create a folder to hold the blog resources directory, open the terminal in this directory and execute hexo init

  • The first initialization needs to wait a bit before executing: hexo G

  • This command builds the article page, that is, generates a static page, and then executes: hexo s

At this point, the local test server is automatically started, and the browser can visit http://localhost:4000 to view the initialized blog.

ERROR Plugin load failed: hexo-server sudo NPM install hexo-server

4. Deploy your blog

After the above steps, we are ready to run the blog application, very simple. The next step is to associate it with Pages.

Log in to Github and create a repository. Click “New Repository” to create a repository for your blog. Note that the repository name must be XXX (custom prefix).github.

Go to the blog resources directory (the directory you just initialized), open the _config.yml file in the root directory, and add at the end:

deploy:
  type: git
  repository: https://github.com/xxx/xxx.github.io.git
  branch: master
Copy the code

The repository address is the github repository address created earlier

  • Then run the following command on the terminal: NPM install hexo-deployer-git –save

  • CD to blog directory: hexo d

You will find that the blog has been deployed to the GiuHub repository and is now accessible from the Internet.

5. Start a blog

  1. Install a tool to write an MD file, such as MacDown.
  2. CD to the blog directory to executehexo new "postName"Create the article.
  3. Under the blog directorysource/_postsFind the article you created, open it and write directly.
  4. Hexo Chinese documentation

6. Publish your blog

Steps for each blog:

  1. Blog locally
  2. Open terminal, CD to blog directory, and executehexo cleanClear the cache
  3. performhexo gBuilding article pages
  4. performhexo sPreview the entire site locally
  5. performhexo dPost updates to the Pages online blog

7. Blogs are bound to their own domain names

CNAME records the default domain name of your repository, create a text, write the domain name you resolve, and place it in the root directory of your repository.

  • Regenerating the page file will overwrite the CNAME file. You need to add the CNAME file directly to the source folder so that you don’t have to worry about overwriting the CNAME file in the repository every time you push it.
  • Domain’s DNS record could not be retrieved in warehouse setting. The CNAME file is incorrect. Check whether the domain name of the file is incorrectly spelled. Do not add protocol prefixes (such as HTTP).