It’s a pleasure to search for this article in a number of tutorials on how to build a personal blog using Hexo. In order not to disappoint you, I will try my best to make this article comprehensive and operable. Read on to see how Hexo and GitHub Pages connect and work, and how to build a complete personal blog. First of all, this article will first describe the individual blog module. It then explains exactly what Hexo does, what role Hexo plays in individual blogs, and what role GitHub Pages play in individual blogs. With this in mind, building a blog is a very easy task, so I will guide you step by step to build a personal blog with a manual description. Follow these instructions to set up your personal blog in no time. After reading this article, you will have a good understanding of the complete process of building a blog.

This blog was set up during graduate school, in large part as a bonus for job hunting. Of course, the original intention of building this blog was to share what I had learned, but there was never a strong driving force for me to do so. After working for nearly two years, I gradually feel that I need to accumulate some skills and summarize and share what I have learned. And as a program ape, daily reading other people’s blog, see some very good blog often will be very envious. When the sigh can only look at its analogy, the heart also has the impulse to see the sage, thinking that they also want to make an excellent blog, because through the operation of blog in the process will have the following benefits:

1. Test your Learning: The most effective way to test your learning is to share what you’ve learned with another person. If he understands it, then you’ve got it. At the same time, during your presentation, you will summarize the knowledge points you have learned to achieve a higher perspective of understanding. Weaknesses can also be found in the process of telling others. When someone asks you a question, it is also a time to test you. If you can’t answer it well, it also means that you don’t understand a certain knowledge point deeply enough. You need to strengthen your understanding and mastery of this knowledge point.

2. To force oneself to input continuously: to ensure that one’s knowledge reserve is continuously exported on the premise of continuously entering more and more new knowledge;

3. Personal branding: In an era when traffic is king, personal branding can bring too many benefits. Build personal brand through personal blog, integrate into the corresponding circle, constantly communicate, constantly improve.

This article is about the process of building a blog and making sure you understand what each step does. For the sake of consistency, some details that can be easily obtained through search engines are not covered in this article. Of course, links will be attached in case you can’t find the relevant information. Again, I’m an iOS developer and don’t know much about the front end, so this article won’t cover JS. With that said, let’s take a look at the modules that make up the next complete blog and how they all work together.

How blogs work: The structure and composition of blog modules

Many tutorials skip this step and go straight to telling you what Hexo is, how to install NPM, how to install Hexo, how to install comment plugin, how to install word count plugin… Follow these tutorials to create a Hexo based personal blog. I built this blog by following these tutorials. However, it is still unknown what Hexo actually does and what Hexo is considered to be black technology. Every time I set up a blog, I was so confused that I couldn’t figure out what to do before I started it again. So I decided to figure out what Hexo was, and it’s always fun to understand how something works. Fortunately, I read ** A Guide Of Making Your Personal Blog series articles **, after reading it, I suddenly feel enlightened, feeling that all the principles Of technology are in fact similar, so I want to share.

Let’s start with a question: is a personal blog a Web site?

The answer is: yes.

From your browser, enter www.num0.top in the address bar to open this blog. Data is transmitted, interacted with and processed over the Internet to bring the content of this blog to your screen. How is this different from a Web site? If you say that a blog is not a website, is it an App or a desktop application? Web sites can be divided into static and dynamic. Static means that users cannot interact with Web pages, while dynamic sites allow users to interact with Web sites. A personal blog with Hexo+GitHub Pages is essentially a static website with dynamic interaction.

Once you’ve figured out that the blog you’re building with Hexo+GitHub Pages is essentially a Web site, you’ve basically solved 80 percent of the problem. The great 80/20 rule achieves 80% of its goals with only 20% of the content. The remaining 80% of the content is going to talk about what Hexo and GitHub Pages really do in the architecture of the blog how the blog works.

Web workflow

You already know that the personal blog set up by Hexo+GitHub Pages is essentially a Web site. Use your knowledge to imagine: how does a static website work?

Sketching a schematic of how the Web works (omits a lot, real Web requests are much more complex), comparing how the Web works and processes, and analyzing how the blog works. When the client (PC, mobile, iPad, etc.) enters the URL http://www.num0.top in the address bar of the browser and presses enter, the client processes the request first. The client goes to the Internet to ask for the resources you need according to the URL address, and presents the file content on the current browser after obtaining the corresponding resource file.

• DNS query: The client first needs to know the specific location on the Internet where the resources are stored. Because the Internet is basically based on TCP/IP protocol for communication, the TCP/IP protocol stack uses IP addresses for network addressing (arp/ RARP protocol for physical addressing), so the client needs to know which server the resource exists under, so it needs the IP address to find the server. The essence is to know what IP address num0.top refers to behind the domain name, and then address according to the IP address, find the server and obtain the required resources through the WWW service. This is the DNS query process, here omitted DNS query process details, interested students can go to the computer network textbook to understand the specific process. The IP address of num0. Top is 185.199.108.153.
• Resource request: After establishing a connection with the server through the TCP three-way handshake, the client constructs an HTTP request packet using HTTP/HTTPS and sends it to the server at 185.199.108.153, telling the server that it needs to obtain the index.html resource through the WWW service.
• ** Server processing request: ** Server’s gateway receives the request, discovers that it is a WWW service request, and forwards the request to the Web server for processing. Services such as Apache, Nginx, and IIS that are enabled on the Web server respond to this request. These services find that they are requesting the index.html resource file, and they turn to the daemon to assemble the HTML resource. Background program will read data from database and other places according to various program logic, and assemble the required index.html resource file back to the Web server, and finally through the Web server to return the resource to the client.
• Browser parsing HTML: The client sends the HTML resource file to the browser for parsing. The browser needs to parse not only HTML files, but also CSS and JS files, and load media resources such as images and videos. The browser presents the resource to the user through a series of processes.

The simplest Web request flow looks like this. It covers a wide range of computer networks, servers, and Web front and back ends: IP routing/addressing, URL protocols, DNS resolution, TCP three-way handshake, servers, etc. Again, without going into the details, you can read ** What happens after the MESSAGE Machine enters the URL ** to understand the whole process in more depth.

Github Pages for servers

Building a blog is like building a Web site. You need a server first. Use the server to set up the blog service and host the blog resources so that other people can come and ask about it. Server is divided into virtual host, virtual exclusive server VPS, dedicated server, the difference between these three types Of server in ** “A Guide Of Making Your Personal Blog-Part2” ** has A detailed explanation. There are several options for the server in general:

• Use virtual machine host services of Ali Cloud and Tencent Cloud to build personal blogs with such cloud services;

• Purchase a virtual dedicated server VPS with better functions and performance;

• Set up a personal server.

  

  PS: I saw a small Web server built with nanopi NeO2 in a video of Zhihui Jun, a well-known technology UP at website B, and I was very impressed. How small is it? It looks like the one above. I specially cut some pictures so that you can compare the size with the next gamepad.

GitHub Pages is used to store code and version control. What are the GitHub Pages, the world’s largest gay dating site? Can GitHub Pages function as a server?

Git is a version control tool, and GitHub is a repository site that supports Git. GitLab is also a repository site. This article ** “An Intro to Git and GitHub for Beginners PartI(Tutorial)” ** describes Git and GitHub differences.

GitHub Pages is a free static web hosting service provided by GitHub Inc. GitHub Pages is not strictly a server, but a service that provides server-like functionality. When we store HTML and other resource files in a GitHub repository, the GitHub Pages service processes the files and displays them as a website. So you can replace the functionality provided by GitHub Pages with that of the Web server. We only need to save the written HTML and other resource files to GitHub designated location, then we can realize the similar function of Web server, can respond to the request, and send the corresponding resource files to the client.

Hexo blogging framework for Web frameworks

Knowing what the GitHub Pages service does for the server, you can simply place your blog resources on the server and make them accessible to other users. Blog resource files refer to HTML, CSS, JS and other resource files, as well as media files such as images and videos. You can use Java, Python and other back-end languages to write Web programs that dynamically generate HTML files and embed media resources in them. You can even write HTML files directly in HYPERtext Markup language, but these methods are obviously expensive and time-consuming to learn. It is possible to quickly build a blogging system using Web frameworks such as Dijango, Flask, and Spring, but these require a basic knowledge of the relevant programming language and Web programming. For students who are not very good at writing HTML files and CSS files, if there is a tool that can quickly generate HTML files from the text written in the text editor, it will greatly improve the efficiency.

That’s what Hexo does. Hexo is a fast, concise and efficient blogging framework that generates HTML resource files from mD-formatted files we edit using Markdown. Upload these files to GitHub Pages, and in theory others will be able to access our blog. In addition, the **Markdown grammar learning curve is very friendly and very easy and quick to get started. ** By deepening your mastery of Markdown syntax through constant use, you can elegantly write a well-written blog post. For the basic syntax of Markdown, do your own Google search.

So, Hexo acts as a blog framework for generating resource files. I’m sure you’ve heard of Jeklyll, Hugo and other frameworks. Similar to Hexo, it is a Website generation framework. These frameworks can be used to quickly build the required Website. Jekyll is a framework for turning plain text into a static blog site. Support for Markdow (Textile), Liquid and HTML&CSS to build static, publishable websites, and Octopress is often re-developed from Jekyll. Hugo is a static website generator implemented by the Go language. Each of these tools supports GithubPages as a container for resource files. The purpose of these frameworks is to convert Markdown blog posts into HTML resource files.

Apply for personalized Domain name

At this point, blogs are theoretically accessible via IP addresses or GitHubPages repository addresses. But imagine that instead of typing in a string of numeric IP addresses, we visit websites with a list of domain names that have special meaning. At this point, you will want to have a unique, simple and meaningful domain name of your own. Visitors will remember your blog more easily than using an IP address and GitHubPages repository address. Applying for a personalized domain name of your own and binding it to our GithubPages repository address is also an important step in setting up a blog. This blog domain name is a long time ago in Ali cloud purchase, need renewal every year, and through Tencent for the record. It seems that most of the domestic domain name needs to put on record now. Choose Tencent cloud record, the whole record process is very simple, just through wechat public number to submit personal real-name authentication information, originally wanted to use Ali cloud record, but because of account migration and other reasons has not been successful record. Later, the use of Tencent cloud after the domain name record found that the operation is really very convenient, and customer service staff will be quite enthusiastic to record the process of guidance, recommend a wave.

You can also purchase A domain name from A foreign domain name service, such as ** A Guide Of Making Your Personal Blog-Part2 ** from GoDaddy, which is also very convenient. If you want to purchase a domain name from a foreign DNS provider, you can refer to this article.

The summary of this chapter

Why Hexo+GithubPages

The answer to this question is simply “lazy”. Yes, sometimes laziness is the number one productive force. Isn’t it? Think of most of the things programmers do: build wheels, reuse, write automated tools.

Actually, for me, the biggest reason is that I am not very familiar with the front-end knowledge. Using a Web framework to build your own server, it takes at least 1-2 weeks to learn a lot of knowledge and practice. The purpose of this blog is to make it easy to share technical tips. The setup process cannot and should not take too long. Compared with other blogging sites such as Nuggets and Jianshu, it is better to rely on others to update themselves, so Hexo+GithubPages is the final choice. Hexo+GithubPages is perfect for all of my current needs, and if it doesn’t meet my needs later, I can upgrade my blog further.

It is also a question of technology selection. After a new requirement comes, a technical solution should be quickly selected according to the limited development time and development cost to efficiently fulfill the business requirement. If the effect of this demand online is better, the number of users slowly improve, until then to consider how to improve the performance of the demand, do secondary optimization revision development. It is impossible to start your personal blog with millions of concurrent requests, and the time is not proportional to the revenue. This is also a good habit of thinking formed since the work, first of all, need analysis, what needs to achieve what goals, what needs to do at the present stage, is the technical plan familiar, there will be any potential risk points. Finally, do it fast!

To be more specific, Hexo framework is selected instead of Jeklyll**, Hugo and other frameworks, because I have used it before and have a certain understanding of its basic use, so I can get started quickly. I don’t understand it, but it’s not hard to know it psychologically. Hexo has a complete tutorial documentation and a good community atmosphere, so you can quickly solve problems by consulting the documentation and asking the community for help. At the functional level, Hexo provides functions that meet my renewal requirements: display, categorization, comments, statistics, etc. Late migration is also convenient, so use Hexo without hesitation. I use GitHubPages mainly for security reasons. Currently, I cannot guarantee the security of my server, while GitHubPages is built on GitHub. Therefore, security and corresponding operation and maintenance work can be temporarily ignored. In conclusion, Hexo+GitHubPages was chosen to build my personal blog. From the content of the next chapter, there will be an introduction to the construction process of the operation manual.

Build a personal blog using Hexo+GitHubPages

GitHubPages set

Git installation and configuration

The first step to setting up a Hexo+GithubPages blog is to create a repository on GitHub. To do this, you need to have Git installed on your computer. Git installation tutorials can be found on Google for any Mac, Linux, or Windows system.

Before you start git for the first time, you need to do a few things:

• Set Git user information

    $Git config -- global user.name "your_name"
    $Git config -- global user.email your_email
  Copy the code

• Generate the SSH Key public Key

  SSH: If yes, go to the directory and check whether the id_rsa and id_rsa.pub files correspond to the public key and private key respectively. If yes, skip this step.

  $SSH -keygen -t rsa -c "your_github_email"
  Copy the code

  Where **-t type: specifies the type of key you want to generate **, -c commit: provides a new comment. Then press enter until you create a rectangular pattern. Note down the generated string of characters. This is the public key that needs to be configured for GitHub later.

Configure the public key on GitHub

To create GitHubPages, you need to create a GitHub account. This step will be skipped. If you have a GitHub account, just log in.

After logging on to Github, if you are a first-time user, you need to configure SSH and follow these steps:

​

• Setp1: Click on the picture

• Setp2: select Settings

• Setp3: Select SSH and GPG keys from the sidebar

• Setp4: Click the New SSH Key button in the upper right corner

The Titlt field is filled with the name of the SSH public key you want to enter. I put “MacHome,” which is the SSH public key of my Mac at home. The input box for Key needs to fill in the public Key string generated on the machine just now:

If the command line window is closed, enter cat ~/.ssh/id_rsa.pub to view the public key you just generated

Key Indicates the SSH public Key obtained from the copy. Click Add SSH Key, which requires you to enter your password again to confirm. The following interface is displayed after the success:

Create the GitHub Pages repository

After git and GitHub are configured, you need to create GitHub Pages service on GitHub.

Select the “+” button at the top of the GitHub homepage and click the New Respository option. The following page appears:

It is important to note that in the Repository name input box you need to enter your Github username. That’s how you make sure you build GithubPages and not some other repository. Another thing to remember is that ** check the Initialize This Repository with a README option. ** When you type https://your_github_name.github.io into your browser, you will see a rudimentary screen, indicating that you have successfully started the GithubPages service. All you need to do is install Hexo and use Hexo to generate the Blog site.

Install Hexo and initialize the blog

Installing Hexo is very simple. It takes just a few lines of command to install and create the Hexo framework, provided node.js is already installed. Hexo is a fast, concise, and efficient blogging framework. Hexo uses Markdown(or other rendering engines) to parse articles, and the superfast generation speed of Node.js allows hundreds of pages to be rendered instantaneously in seconds. The official version of Node.js is at least 8.10, and Node.js 10.0 or later is recommended.

Installation Node. Js

To install Node.js, refer to ** official website guide **. After the installation is complete, run the following command on the terminal to check whether the installation is successful and the version of Node.js:

$The node - version
Copy the code

Install Hexo

Installing Hexo is also very simple. Using NPM to install Hexo requires only one command:

$ npm install -g hexo-cli
Copy the code

Initialize create blog

• Create a site root directory

  To create a blog with the default theme, first create a blog folder with the same name as your GitHubPages (your_githubname.github. This folder will later be collectively referred to as the site root.

• Initialize the site root directory

  Using the following command to initialize the folder, Hexo will create the required files in the specified site root directory. Then go to this folder and install the library files that NPM depends on.

  $ mkdir <folder>  Create a site root directory
  $ hexo init <folder>  Initialize the site root directory with Hexo
  $ cd <folder>  Enter the root directory of the site
  $ npm install  Install the files that NPM depends on
  Copy the code

The directory structure after creation is shown as follows:

Without worrying about what each directory does, the blog is now created. Just type the following command on the command line (also ignore the meaning of these two commands, which will be explained later) to preview the generated blog locally.

$ hexo generate # Generate blog
$ hexo server # local preview
Copy the code

Open your browser and type http://localhost:4000 in the address bar to see what the blog looks like.

At this point, you can see that a default theme blog has been generated and can be accessed locally. However, there are still some gaps in the planned blog, as follows:

• The theme and style of your blog is not the ideal theme, you need to choose the right theme;

• The blog is currently only locally accessible and is not yet accessible to others, so you need to deploy it on GitHubPages;

• Access blogs through personalized domain names

Hexo generates the site directory structure

Before completing any of the unfinished goals above, go back to the directory structure that was not explained in the previous section. After understanding the meaning and function of each folder in the directory structure, we can better transform it to achieve the above goals.

Let’s look at the directory structure again. The command line prints:

If you are careful, you may have noticed that there is an additional folder public/ and a file db.json in the file directory. Hexo generate and Hexo Server were performed to generate the public/ folder and db.json files. In fact, it was after executing the hexo generate command that the Markdown and HTML files in the Souce folder were parsed to the public folder and the db.json file was generated. Here’s a look at the directory structure generated with Hexo.

config.yml

_config.yml is a configuration file for the entire blog, and each configuration parameter can be described in detail ** in the Hexo documentation.

Blogs are currently only viewed locally and GitHubPages are not yet deployed. The most straightforward way to publish a blog to GitHubPages is to use Git to associate the local blog folder with GitHub’s remote repository and push the local files to the corresponding repository. Hexo provides an easier way to deploy static files to the repository using command-line commands by simply configuring them in _config.yml.

Open the _config.yml blog configuration file in the root site folder and set the following parameters under the Deployment configuration:

deploy:
    type: git
    repo:[email protected]:yourname/yourname.github.io.git
    branch:master
Copy the code

Install the following plug-ins:

$NPM install hexo deployer - git - save
Copy the code

Execute the following command to publish a local blog to a remote repository:

$ hexo deploy
Copy the code

Enter the address of GitHubPages in your browser: your_githubnam.github. IO, and you’ll see that the blog you created locally is already available on the Internet. However, at this time, we still use the URL of GitHub plus the warehouse name to visit the blog. When we enter our own personalized domain name to visit the blog, we still find a 404 error. Because the domain name resolution configuration has not been done at this time, the next chapter will explain how to configure the personalized domain name.

package.json

Package. json is the application information. Open this file and see the following:

{
  "name": "hexo-site"."version": "0.0.0"."private": true."scripts": {
    "build": "hexo generate"."clean": "hexo clean"."deploy": "hexo deploy"."server": "hexo server"
  },
  "hexo": {
    "version": "4.2.0"
  },
  "dependencies": {
    "hexo": "^ 4.0.0"."hexo-generator-archive": "^ 1.0.0"."hexo-generator-category": "^ 1.0.0"."hexo-generator-index": "^ 1.0.0"."hexo-generator-tag": "^ 1.0.0"."hexo-renderer-ejs": "^ 1.0.0"."hexo-renderer-stylus": "^ 1.1.0." "."hexo-renderer-marked": "^ 2.0.0." "."hexo-server": "^ 1.0.0"}}Copy the code

A JSON file to get the version information of hexo, all installed dependencies. In addition, several commands that were executed just now were found in the scripts field. In fact, several commands that were executed before actually executed the corresponding scripts. Here are some of the most important commands in Hexo and their acronyms. Remember these commands to get the most out of Hexo.

hexo clean  = hexo c # Clear local cache, i.e. clear public/ folder and db.json files.

hexo generate = hexo g # Parse the Markdown and HTML files in the souce folder into the public folder and generate the db.json file

hexo server = hexo s Enable local debug mode

hexo deploy = hexo d Deploy local resources to GithubPages

Copy the code

scaffolds

Scaffolds is the scaffolds template folder. When creating new articles, Hexo creates files based on the different templates in scaffolds. What does that mean? The command used when creating a new article with Hexo is:

hexo new [layout] <title>	
Copy the code

The optional [layout] parameter is generally ignored, and the default is POST. You can also specify the default layout by using the default_layout parameter in _config.yml.

Continuing to open this folder, you will find three.md files:

This is actually Hexo’s three default layouts: POST, Page, and Draft. When Hexo is used to create files of the three template types, the created files are saved to different paths. The rest of our custom layouts are saved in the source/_posts folder, just like posts.

It can be seen that the corresponding saving path relationship is as follows:

layout	The path
post	source/_post
page	source/
draft	source/_draft
The custom	source/_post

Please refer to ** official website document ** for detailed knowledge about template and article publishing.

source

The source resource folder is where user resources are stored. With the exception of the POST folder, files/folders that begin with an _ (underscore) or hidden files are ignored for generate. Markdown and HTML folders will be parsed to the public folder, and files in other file formats will be copied directly.

themes

Themes is the theme folder. Hexo will generate static pages based on the theme set. As mentioned earlier, ** the theme of the initial site generated using Hexo init may not be what you expected. Hexo offers a wide variety of themes to choose from, so go to the theme page ** and pick a theme you like, and we’ll explain how to change the theme in the next chapter.

Hexo theme configuration

It is easy to create or change a Hexo theme, just add a folder named theme in the Themes folder and change the theme name to the theme field in the _config.yml blog configuration file at the root of the site.

The directory structure for a topic is the same, but looks like this:

Theme folder structure

• _config.yml: theme configuration file

  It is important to note that this is different from the _config.yml file in the site directory. It is easy to confuse the two configuration files with Hexo at first. Yml in the site directory is the global blog configuration file, and _config.yml in the theme folder is the theme configuration file, which only applies to the current theme. If the fields in the topic configuration file duplicate the global configuration file, the configuration in the global configuration file under the root site directory is preferred.

• Languages: Language folder

• Layout: indicates the layout folder

  The template files used to host themes determine how the content of the site will be presented. Hexo has a built-in Swig template engine, or plug-ins can be installed for EJS, Haml, or Jade support. The extension of the Hexo template file determines the engine template to be used, for example:

  Ejs - Use ejS layout. Swig - Use swig Script: Script folder that Hexo loads JavaScript files in at startup.Copy the code

• Source: Resource folder

  Assets other than templates, such as CSS, JavaScript files, and so on, should be placed in this folder.

Changing the Default Theme

Once you have selected a favorite theme, you can change the default theme. Normally these theme files will be stored on GitHub. First you need to change the theme under the theme field in the root configuration file _config.yml to your chosen theme. Open the GitHub page corresponding to the theme, and Readme is strongly recommended first. Once you have found the clone address, save the blog theme in the Themes folder using git Clone. For example, take the next theme as an example:

$ cd your-hexo-site
$ git clone https://github.com/iissnan/hexo-theme-next themes/next
Copy the code

Execute the Hexo command:

hexo clean
hexo generate
hexo server
Copy the code

After opening the blog locally, I found that the theme of the blog has been changed to next theme.

Choose topics for attention

Here’s what I looked at when choosing a blog theme.

• The first is the topic of recent maintenance: if you haven’t maintained it for a long time, some plug-ins may no longer be usable or rely on versions of the Node framework that don’t support it, which can increase maintenance costs if you’re not proficient in the front end. So on the basis of beautiful as far as possible to choose the use of users, has been updated in the mainstream theme;

• Is the theme already integrated with the required plug-ins: ** Again, if you are new, try not to do extra development yourself. It is best if the theme provides not only the required plug-ins, but also multiple types of plug-ins for each function.

Finally, I chose archer based on the above considerations. Firstly, the style of this theme is what I like, and secondly, the plug-in integration is very comprehensive, and I only need to do simple configuration to use it. Give **fi3ework** a thumbs up!

Configuration of the domain name

At this point, the blog cannot be accessed through a custom domain because it has not been configured.

Domain name resolution

Before configuring a domain name, resolve the domain name in the domain name resolution function provided by the domain name service provider. The configuration is as follows:

• Host record: Used to set the domain prefix and tell the DNS server to associate the ** [domain prefix + domain name] link with the address in the record value. IO indicates that I have associated www.num0.top with lenhoon.github. IO. Different prefixes have different meanings. In this case, @ indicates the resolved domain name num0. Top, that is, no prefix ** is entered.

• Record type: indicates the type of the record value. A records the IP address of the server in the record value. The CNAME record fills in the corresponding domain name in the record.

An IP address is filled in record A in the figure above. Instead of buying a server, I used GitHubPages, so this IP address corresponds to the IP address provided by GitHubPages. See ** Mamaging a Custom Domain for Your Github Pages Site **. GitHub Pages shows the IP address of A record as follows:

185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153
Copy the code

There is also a host record set to WWW and record type CNAME. The reason for adding this entry is that GitHub recommends using A combination of A record and CNAME in DNS.

GitHubPages binds the domain name

On GitHub, do the following: Open our blog repository and click the Setting button

Enter your domain name in the Custom Domain of this TAB:

Wait a moment, enter the domain name in your browser, and you can open your personal blog. At this point, the binding of the personalized domain name has been completed.

At this point you’ll notice that other tutorials are all about configuring a file called CNAME. Yes, if you do not configure the file at this time, you will need to go to Github to set the Custom Domain parameter every time you execute hexo deploy, otherwise you will not be able to open the blog by domain name every time. The main reason is that the Custom Domain configured here is cleared after each release.

If you don’t want to log on to GitHub every time to configure this domain name, all you need to do is create a new CNAME file under the source folder in the site directory and simply write our domain name into this file. When Hexo encounters an unusable file in the source folder, for example, it copies the CNAME file to the public folder as it is, eliminating the need to modify the Custom Domain each time.

Configure Sitemap to allow search engines to retrieve blogs

You build your blog, and then you write a few posts, and you wait for others to comment. A few days go by and no one reads your blog. Why is that?

Think about how you read other people’s blogs. Do you need to search for them through a search engine? If you go to a search engine to search your blog, you will find that your blog is basically not searched. Why?

Configure the sitemap file

First of all, we need to understand that search engines use sitemap to crawl available web pages, so we need to configure the site sitemAP to allow search crawlers to collect blog site information.

Hexo has a sitemap tool that automatically generates sitemaps. Type the following command in the root directory of your blog to generate sitemap:

NPM install hexo-generator-sitemap -save NPM install hexo-generator- bidu-sitemap -saveCopy the code

We want this blog to be searchable by both Google and Baidu users, so we need two different Sitemaps. Then you need to do the following in the blog’s site configuration file _cpNfig.yml:

# sitemap
sitemap:
  path: sitemap.xml
baidusitemap:
  path: baidusitemap.xml
Copy the code

XML file and baidusitemap. XML file in the public folder, which is used to search the sitemap that Google and baidu engine crawler crawl.

Site validation

A blog’s sitemap is meant to tell search engines what to crawl, but how do search engines know that you are the owner of the site?

For example 🌰 :

You shout at the entrance of a supermarket: all come, today the whole court 50% off, buy one get one free, how do people passing by know what you say calculate? Who knows if you work in this supermarket? This is when you need to verify your identity: you can show everyone that you are the person in charge of the store by showing your work id. That’s when people believe you, and the supermarket sells out…

At a time when your next to the supermarket also has a supermarket, this supermarket is the main competitors in your supermarket, at this time, you run to the other people’s supermarket the door shout, “come, today to the clearance, all goods shall be 1 fold”, passing customers don’t believe there is such a good thing, so run to come over to see your papers, found that you are over there next to the supermarket, And then you got your ass kicked…

So search engines are like people on the street. You need to prove to search engines that the resources marked as accessible in Sitemap belong to you, so you need to verify your ownership of the site.

This only takes Google as an example, Baidu’s verification method we can explore by ourselves.

Start by logging in to your Google account and setting the validation string for Google site Management Tools.

Select the url prefix and type the address of your blog in the url:

Use the recommended authentication method, download the HTML file to verify. But how do you put this HTML file into your blog?

After executing hexo generate, the Markdown and HTML files in the Souce folder will be parsed to the public folder. When using Hexo deploy, the files in the public folder will be copied to Github Pages. So just add the HTML to a public file and execute hexo deploy. Note that you don’t have to execute hexo generate at this time. Wait about 1 minute. Click Verify and the following dialog box will appear, indicating that the verification is successful.

At this time also need to upload sitemap sitemap to the search engine, the next time let the search engine crawler to visit when you can use this sitemap to climb the corresponding link. The next time you have a customer in your supermarket, tell him where to pick up a discount brochure. When you log in to the Google Site Management Tool page, you will find the following page:

On the toolbar on the right, select the sitemap and enter the location of sitemap in the dialog box that is displayed. When public/ is the root directory of the site, enter the location of sitemap under public/.

Wait a while and you’ll be able to Google your blog. And how to set the site map through Baidu is similar, you can try it yourself.

conclusion

So far, this article has gone through the complete process of setting up a personal blog using Hexo+GithubPages and covered some of the basic principles. Hopefully this is not only a how-to guide to building a blog from the tutorial, but also a how-to guide to thoroughly understand Hexo.

On some other good network blog tutorial talked a lot in the plugin Settings, actually a lot of plug-ins are based on the theme, the author has in some themes to help you integrate all kinds of plug-in, each type of plug-in type is very rich also, believe there is always a suitable for you, you have to do is according to the guidelines in the README, do some simple configuration. If you are not proficient in the front end, before choosing a theme, you need to consider whether the theme already integrates the plug-ins you need. But if you can integrate it yourself, there is no problem.

This is my first post since I started blogging again, and it took nearly two weeks to write, type, and revise. It was really not as easy as I imagined. At this time, I admire some excellent bloggers more and share their knowledge freely. As a coder, I know the pressure of working overtime. Recently, I did not work overtime because of the epidemic, so I had 1-2 hours every night to rebuild this blog and finish this article. It’s hard to imagine any other blogger producing high-quality posts efficiently and quickly, except this one. Although the output of a blog post is time-consuming, I will stick to it. I will also learn more about time management to better manage my time and learn from other bloggers on how to be productive. Ok, give this article a thumbs up if you find it useful! If there is wrong place, please correct!