“This is the fifth day of my participation in the First Challenge 2022. For details: First Challenge 2022.”

Hi, I’m Smooth, a sophomore front-end enthusiast who aims to become a senior front-end development engineer

This article teaches you from start to finish how to build your own personal blog using Hexo and configure your favorite topics

This article will show you how to build your own personal blog using Hexo from start to finish

preface

Now there are many blogs on the market, such as CSDN, Blog Garden, Jianshu and other platforms, which can be directly published on the platform. If the user interaction is good, the articles written can also be searched by Baidu. Disadvantages are less freedom, will be subject to various restrictions of the platform and disgusting advertising.

And their own domain name and server, the cost of building a blog is too high, not only to say that these purchase costs, only to take the effort to build such a website, but also the regular maintenance of it, for most of us, it is no such energy and time.

The third option is to host our blog directly on github Page. It’s safe to write without the need for regular maintenance, and hexo is a fast and concise blogging framework that makes building a blog really easy.

Hexo profile

Hexo is a fast, concise, and efficient blogging framework. Hexo uses Markdown (or other rendering engines) to parse articles and generate static web pages with beautiful themes in seconds.

You can visit Hexo’s official website for more details, because the creator of Hexo is Taiwanese and friendly to Chinese, you can choose Chinese for viewing.

Hexo is a Static blog framework based on Node.js. It is easy to install and use, and can easily generate static web pages hosted on GitHub and Coding. Hexo is the preferred framework for building blogs.

Hexo Build Tutorial

This tutorial is divided into 8 parts to help you build your own personal blog

  1. Install Git
  2. Installation Node. Js
  3. Install Hexo
  4. GitHub creates a personal repository
  5. Deploy Hexo to GitHub
  6. Setting a Personal Domain name
  7. Fluid
  8. Published articles

Install Git

  • Windows: Go to the git official website to download and install git. After downloading, you will find a command line tool for git Bash. Use this tool to use Git.
  • Mac: MacPorts or installation program.
  • Linux (Ubuntu, Debian) :sudo apt-get install git-core
  • Linux (Fedora, Red Hat, CentOS) :sudo yum install git-core

Install NodeJs

Hexo is written based on nodeJS, so you need to install nodeJS and the NPM tool in it.

Windows: official installation, just select the LTS version.

Linux:

sudo apt-get install nodejs
sudo apt-get install npm
Copy the code

After the installation is complete, open the CLI and enter the following lines to check whether the installation is successful

node -v
npm -v
Copy the code

By the way, after installing Git on Windows, you can use git bash directly to type the command line without using CMD.

Install Hexo

Once git is installed, select where you want to install Hexo (such as creating a new folder)

Once inside the folder, you can right-click Git Bash here to open a command line window and type:

$ npm install -g hexo-cli
Copy the code

Type hexo -v to see the version

The environment is now ready to use Hexo to build a personal blog

Initialize Hexo

$hexo init $CD $NPM installCopy the code

Will generate a lot of folders, do not understand it does not matter, know how to configure it.

  • Node_modules: depend on the package
  • Public: stores the generated page
  • Scaffolds: Some templates for generating articles
  • Source: For storing your articles
  • Themes: the theme
  • _config.yml: Configuration file for the blog

Then enter the following command to start the local view, the meaning of the command will be explained later

$ hexo clean
$ hexo g
$ hexo s
Copy the code

These three commands are very important and will be covered below when Hexo is deployed to Github

Next, type localhost:4000 into your browser to see the generated blog page

CTRL + C to turn off the service

Create the Github repository

  1. First, you need to have a GitHub account. Sign up for one.

  2. After registering, you see a New Repository on GitHub.com. Create a New repository.

  3. Github. IO will be identified when it is deployed to github page in the future. XXX is the user name that you registered for Github. My Github username is zjc2782171149, so my name is zjc2782171149.github

Generate SSH to add to github repository

This step is necessary because of the rapid deployment of the repository code via SSH. If you have previously done SSH binding for your Github repository on your computer, skip this step

Go back to your Git bash and type the following

git config --global user.name "yourname"
git config --global user.email "youremail"
Copy the code

Where yourname is your GitHub username, youremail is your GitHub email address. That way GitHub will know if you’re on its account.

Use the following two to check if you have typed correctly

git config user.name
git config user.email
Copy the code

Then create SSH, press Enter

ssh-keygen -t rsa -C "youremail"
Copy the code

At this point it will tell you that the.ssh folder has been generated. Find this folder on your computer.

SSH is a secret key, in which id_rsa is the private key of your computer, which cannot be seen by others, and id_rsa.pub is the public key which can be seen by others. Put this public key on GitHub, so that when you link to GitHub’s own account, it will match your private key against the public key, and when it matches, you will be able to upload your files to GitHub through Git.

Then go to github’s Setting for SSH Keys and click On New SSH Key to copy your id_rsa.pub information into it.

After that, type the following command in gitbash to see if SSH has been bound successfully

ssh -T [email protected]
Copy the code




Deploy Hexo to Github

In this step, we can associate Hexo with Github by deploying the hexo-generated articles to Github. Open the site configuration file _config.yml, go to the end, and make the following changes: Change zjc2782171149 to your Github account username

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

After modifying the _config.yml configuration file and saving it, go back to gitbash

To do this, you need to install deploy-git, or the deploy command, so that you can deploy to GitHub using the command.

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

And then deploy it

hexo clean
hexo generate
hexo deploy
Copy the code

Hexo Clean cleans up the stuff you created before.

Hexo generate generates static articles, which can be abbreviated as Hexo G

Hexo deploy deploy articles, which can be abbreviated as hexo D

Note that you may be asked to enter username and password to deploy, but SSH is not used.

The image below shows that the deployment is successful and will be available in a few momentshttp://your username. Github. IOThis website saw your blog!!



Personal Domain Name Configuration

Your current address is yourname.github. IO. If that’s not too strong, you’ll need to set up your own domain name. However, I need to pay for the domain name. Since I am using Aliyun, I use this as an example.

Register an Ali cloud account, buy a domain name on Ali cloud, I buy is Zhangjiancong. Top, the price of each suffix is not quite the same, such as the most extensive.com is more expensive, see personal preference.

You need to go to the real name authentication, and then in the domain console, you see the domain name you bought.

Go to the domain name resolution page and click Resolution Settings





Click Add Record

  • Host record: I want to in my domain name zhangjiancong. Top on the basis of the configuration into a sub-domain name blog, so the host record column write a blog, if you want to directly your domain name as a resolution, do not fill in

  • Record value: Change to your own username

  • The rest is just like me

Top to zjc2782171149.github. IO

Github. IO to blog.zhangjiancong. Top

Set the resolution of githubPage

Log in to GitHub, go to the repository you created, click Settings, set Custom Domain, and enter the domain name you just createdIf you areThe host recordsLeave it blank, just write your domain name here, i.ezhangjiancong.top

Click Save and a green success sign appears as shown above

Next, you create a file called CNAME in your blog file source folder and write your domain name without a suffix

Change the master branch

Since the domain name default shows the default branch of your Github repository, the default branch of the repository is main, but

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

Set to deploy to the Master branch, so change the default branch of the repository to master

Click the Edit button and change tomasterAfter branching, save

The last

In gitbash, type

hexo clean
hexo g
hexo d
Copy the code

After a while, open your browser again, type in your own domain name, and you will see the website built.

Change the topic

Here I use the Fluid theme as an example

Go to the theme’s Github repository and download the latest zip

After downloading, unzip the package into your blog projectthemesFolder, and the decompressed folder is renamedfluid

Then open the _config.yml file in the root directory, drag it down to the bottom to find the theme property and change it to fluid

In the meantime, find the file at the toplanguageProperty tozh-CNCan be

Then, type the following three commands to redeploy, and after a while you’ll see the theme change

hexo clean
hexo g
hexo d
Copy the code




Published articles

Publish new articles

hexo new newpapername
Copy the code

Then open the markdown file in source/ _POST to start editing. When you’re done, then

hexo clean
hexo g
hexo d
Copy the code

You can see the update by domain name.

Each time you update an article or configuration file, enter the above three commands to redeploy, without missing a command. Of course, you can also enter the simplified version of the command, as follows

$ hexo clean
$ hexo g --d
Copy the code

If you feel that you need to input the above command every time you redeploy, you can study the GitHub page automatic deployment function in your spare time, this article will not expand

That’s all for this article

The last

Finally, my name is Smooth, and I will write as many front-end tutorials as I can in 2022. I look forward to your attention

My personal blog has been in full sync recently. Welcome to: Smooth’s personal blog

The latest publication plan isWebpackAnd performance optimization knowledge body

At the same time, you can also scan the code to pay attention to my public number: Smooth front-end growth record, public number synchronous update