preface

It’s always cool to jump to the big shots’ personal blogs while checking technical articles. I want to build my own. Well, that’s where this blog came in.

Basic concept

In my opinion, before learning to use a technology, we should have a brief understanding of its basic concept, and do not do it at the beginning. So let’s take a look at Hexo and GitHub Pages and see how they set up personal blogs.

What is Hexo

Hexo’s website defines it as a fast, simple and powerful blogging framework. My personal understanding is that it can combine the content we write through Markdown with the theme template to generate the corresponding Html static page.

The official Hexo documentation is very detailed and I strongly recommend that you read it carefully.

What is GitHub Pages

GitHub is a code hosting platform. What is GitHub Pages? GitHub provides a static site hosting service that allows you to customize a page and display it as a project home page.

Pages fall into two categories: project Pages and individual/organizational Pages. Functionally it’s basically the same, but there are some subtle differences. Project pages are, as the name suggests, tied to a project and stored in the project repository, while individual/organizational pages are not tied to a specific project and the site files are in a dedicated repository dedicated to GitHub page files, so we’ll use individual pages here.

GitHub Help Pages

Hexo and Pages, one generating static files and the other displaying static files, work beautifully together

Now you can start setting up your environment.

Begin to build

With GitHub and Hexo, Git is essential. Hexo is based on Node.js, so you need to install Node.js, and then use node.js’s NPM tool to install Hexo.

1. Install Git

  • Windown download and install directly.

2. Installation node. Js

Install node.js directly from the official website by downloading the corresponding version of the installation package, Windows installation when the Add to PATH option must be checked (default check), this is to Add to the environment variable meaning. After the installation is complete, enter node -v on the CLI. If the version information is displayed, the installation is successful.

3. Install Hexo

After completing the above two steps, you are ready to install Hexo!

Create a folder (name it hexo or blog) to store your hexo files, blog resources, etc. Right-click the folder to open the Git command line (or CMD, Git bash is recommended) and type the following command to complete the installation. The process takes different time according to the network condition. If the network is poor, wait patiently.

npm install hexo-cli -g
hexo init
npm install
Copy the code

With the above commands executed successfully, the hexo installation is complete. Perform hexo G and Hexo S to generate a preview of your blog. After executing, type http://localhost:4000/ in your browser to preview, and you’ll see a Hello World! Now that the environment configuration is complete, let’s create the GitHub repository.

4. Create the GitHub repository

The name of the Git repository used to store individual organization pages is required:

So be sure to name your repository when creating it, like mine:

After the repository is created, you need to configure the repository address in the hexo configuration file _config.yml (the outermost directory). It is recommended to use SSH for the repository link.

Note: there is a space between value and colon in _config.yml

5. Install the hexo-deployer-git automatic deployment tool

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

Direct command line installation can be. Relatively simple, but high network requirements, poor network this step will be slow.

6. Post to GitHub

With the above plug-ins installed, you are ready to deploy to GitHub. Enter the following command (edit before publish), the process may be slow.

hexo d -g
Copy the code

After publishing, you can open username. Github. IO to see if you can access it.