preface

There are already many blogs on the market, such as CSDN, Nuggets, Blog Garden, Jane Book and so on. We can publish directly on it, and the interaction is more human, and it can also be retrieved by the search engines. But it’s always someone else’s platform, which is often limited, so we want to have our own blog. After trying to build different types of blogs and a lot of work, I finally decided to adopt Hexo + GitHub Pages. Today, let’s build our own blog together. Because it is using Hexo + GitHub Pages, so are free, just need to have a certain hands-on ability!

Hexo profile

Hexo is a fast, clean, and efficient framework for static blogging. Hexo uses Markdown (or another rendering engine) to parse articles and, in seconds, generate static web pages with beautiful themes. All you need to do is write your blog content using Markdown syntax, then upload the generated page to GitHub with a simple command, and then everyone can visit your page. Convenient already oneself, also gave oneself a platform that shows oneself achievement, is not kill two birds with one stone.

Set up steps

Before you can install Hexo, you need to make sure you have Git and Node.js installed on your computer, so let’s take a look at how to prepare the environment first.

Git

The installation

  1. Window: Download and install
  2. MacOS: Download and install
  3. Linux (Debian, Ubuntu):sudo apt-get install git-core
  4. Linux (Fedora, RedHat, CentOS):sudo yum install git-core

Set up the

Once installed, bind Git to your GitHub account, right-click to open Git Bash, and set the configuration information:

Git config --global user. Name "github "git config --global user. Email "github "git config --global user.

For example, my configuration is:

git config --global user.name "cunyu1943"
git config --global user.email "[email protected]"

Then generate SSH key file, enter the following command and directly enter three times. Generally, no password is required.

# ssh-keygen-t rsa-c # ssh-keygen-t rsa-c # ssh-keygen-t rsa-c # ssh-keygen-t rsa-c # ssh-keygen-t

My command to generate the secret key is:

ssh-keygen -t rsa -C "[email protected]"

Two files, id_rsa and id_rsa.pub, are generated when the above command is executed. The former is private to us, while the latter is open to the public. Next, locate the id_rsa.pub key in the generated.ssh folder and copy the contents;

Then open the GitHub-Settings-Keys page, create a new SSH key, fill in the Title and key, Title can be any content, and key content is the content of id_rsa.pub that we just copied. Finally, click Add SSH Key.

Node. Js installed

The installation

Go to the official website to download the latest stable version of Node.js. 64-bit is generally recommended (you should be using the current computer is basically 64-bit). If you still don’t know how to install Node.js, please refer to my other blog: Installing Node.js on Windows (multi-graphic version).

validation

After the installation is completed, to check whether the installation is successful, you can open the command prompt (WIN + R), type CMD to open the console, enter the following command, if the corresponding version number appears, the installation is successful;

node -v
npm -v

Set up the

Because the download package is from a foreign server, so the speed is slow, so we recommend using Ali’s domestic mirror for setting;

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

Hexo installation

Looking for a place on your hard drive, used to store your blog file, such as I was in D: personalFiles/lot/blog, this folder you can set according to his be fond of. Then from the command desk into the current folder, the next is the installation process;

  1. First, install Hexo
npm i hexo-cli -g

  1. Create a new folder for your blogs, like mineblog, then go to the folder and use the following command to initialize and install the prerequisite components;
hexo init .
npm install

  1. After initialization, the directory structure is as follows;
. ├ ─ ─ _config. Yml # site configuration information ├ ─ ─ package. The json # application information ├ ─ ─ scaffolds # template folder ├ ─ ─ source # store user resources | ├ ─ ─ _drafts | └ ─ ─ _posts sigma ─ themes # folder
  1. Then type the following command and open it in your browserhttp://localhost:4000;
# create a static page, hexo g # open the local server, hexo s

Then you will see the following interface, but mine has been modified, so it will be different from yours.

GitHub personal repository

Once you’ve done this, you’ll be able to preview your blog locally, but if you want to publish it online, you’ll need to use GitHub Pages. Here’s how to use Hexo + GitHub Pages to push your blog online. Convenient for everyone to visit anywhere!

First you have to have a GitHub account. If you don’t have one, go out
Turn rightSign up for an account.

After you have the account, create a new repository, and make sure that your repository is public, you want to make it private, who can access it? At the same time, the warehouse name must be:

The user name. Making. IO

The user name. Making. IO

The user name. Making. IO

This user name is recommended to be not too complicated, but it should be personal, because the https:// username.github. IO is the domain name that allows subsequent access to your blog. For example, my username is cunyu1943, so my repository is cunyu43. github. IO:

Deployment to making

Once you’ve done this, you should be able to preview the site locally, then push the site to GitHub Pages, where we can be accessed by others.

Just set the site configuration file _config.yml in the root directory of our previous blog to your personal repository name:

After completing the above steps, we can use the following commands to push our local content to the remote GitHub repository and then access it in the browser:

https:// username.github

For example, my blog, Village Yuyao’s blog;

hexo clean
hexo g
hexo d

Gitee Personal Warehouse

First of all, you need a Gitee account. If you don’t have one, go out and turn right to register for an account.

Then build a new warehouse, there are also a few points to note:

  1. Make sure your warehouse ispublic;
  2. The repository name is your username, which is slightly different from GitHub. It doesn’t need to be.gitee.io.

For example, my user name is cunyu1943, so my warehouse name is cunyu1943.

Deployed to Gitee

After completing the above steps, you should be able to preview the site locally and then push the site to Gitee Pages so that we can be accessed by others. It should be noted that unlike Gitee Pages, which will be automatically updated, Gitee Pages require you to update them after each push. If you want to update them automatically, you need to open a Gitee membership.

Then you will need to set the site configuration file _config.yml in the root directory of our blog just now to be your personal repository name:

After finishing the above steps, we can use the following commands to push our local content to the remote Gitee repository. After manually updating Gitee Pages, we can access it in the browser:

https:// username.gitee.io

How to write a new blog and send it to a remote location

After the above steps, your blog should be built and accessible via https:// username.github. IO. What if we’re going to post a new blog post? Here’s how to do it in detail.

  1. First enter the blog folder, then right-click into the console, with the following command to create a new article;
Hexo n "blog title name"

  1. Then, inblog/source/_postsYou should have a Markdown file created with the title name of the article.

  1. Then open the file and write whatever you want.

  1. Then use the following command in the console to push it to the remote GitHub repository. After a while, you can see the new article you just pushed!
hexo g
hexo d

How to bind custom domain names

Github. IO is a little inconvenient. If you need your own domain name, how should you set it up? So before this, you need to have a good domain name has been put on record, if not, please go to Ali cloud, Tencent cloud and other manufacturers to buy their own domain name, and then through the platform for the record, and then add two analytical records, to my Tencent cloud as an example:

Click Settings->Pages in the GitHub blog project, then add your domain name in Custom Domain, and finally Save. At this time, there should be one more CNAME file in the root directory of your blog. Then you can access your blog through your own domain name.

If not, you can manually create a CNAME file (without suffix) in your local blog /source directory, and then fill in your domain name and save it. Finally, do the following commands to upload the Settings to GitHub

hexo g
hexo d

For example, my domain name is cunyu1943.site, and after setting it up, we can access my blog at https://cunyu1943.site.

beautify

After the above setting, we have only got a simple blog. If you want your blog to be as cool as mine, you will need to use the theme. The theme I used is hexo-theme-matery, which is based on material design and responsive design. In addition, there are also very detailed documents on how to set it. If you don’t understand the problem, you can submit an issue in time, and the author will reply in time.

If you don’t want to be too fidgeting, you can also take the source code of my blog and change the personal configuration to hexo-theme-matery-personal after you have completed the above steps

You can just download it, unpack node_modules.zip, and change some of the configuration (i.e. your GitHub, profile, etc.), The main thing is to change the _config.yml and _config.hexo-theme-matery.yml in the root directory, and then you can blog directly. That is, of course, if you set up the environment and everything.

PS: I have hidden some key information in the configuration file, such as Gitalk, Gitment, Valine, BaiduAnalytics, etc. You need to register and get your own information by yourself. Please remember to modify it, otherwise it may fail.

conclusion

So far, our blog is completed, is it very simple, go and try it!

For unclear places in the article, welcome to leave a message, I will see the first time to reply to you!