Do the front end of this career also a little long, also always say that write blog write blog, some good things to share with everyone, the results always find excuses for their own, too busy what la la. Until moved to the company near, really no face to find excuses and began to do! -_ – | | | good, not bothersome Began to dry!

If the following content is incorrect, please inform me, so as not to mislead more small partners! (ˇ result ˇ)

preface

The benefits of using github Pages to create a blog include:

  1. All static files, fast access;
  2. Free and convenient, do not spend a penny can build a free personal blog, do not need the server does not need the background;
  3. If you don’t look closely, you won’t be able to tell that your site is based on Github.

  1. Data is absolutely secure, based on github version management, you can restore to any historical version;
  2. Blog content can be easily packaged, transferred, and distributed to other platforms;
  3. And so on;

The preparatory work

Before you can start anything, you must have:

  • Have a Github account, sign up for one if you don’t;
  • Have installed Node.js and NPM, and understand the relevant basic knowledge;
  • Install Git for Windows (or another Git client)

The environment used in this article:

Set up a Github blog

Create a warehouse

Github. IO repository: test.github. IO repository: test github. IO repository: test.github. Is it convenient?

Thus, each Github account can only create one repository that can be accessed directly using the domain name.

A few points to note:

  1. Registered email must be verified, otherwise it will not succeed;
  2. The warehouse name must be:username.github.io, includingusernameIs your username;
  3. The warehouse will not take effect immediately. It will take some time, maybe 10-30 minutes, or longer. Mine took half an hour to take effect.

By default, some sample pages will be generated in your repository, where all the code for your site will be stored.

Binding domain

Of course, you do not bind the domain name is certainly also possible, just use the default xxx.github. IO to access, if you want to be more personal, want to have a domain name of their own, that is ALSO OK.

First of all, you need to register a domain name, domain name registration was always recommended to Go to GoDaddy, but now I think the domestic Ali Cloud is also quite good, the price is not expensive, after all, it is a big company, rest assured!

Binding domain name can be divided into two cases: with WWW and without WWW.

Github. IO IP address, then go to the DNS Settings page of your domain name, and point A to your ping IP address. Github. IO to ensure that the WWW is accessible regardless of whether the WWW is added, as follows:

Then go to your github project root directory and create a new file named CNAME (no suffix). Fill it with your domain name.

  • If you write without the WWW, such as mygit.me, then either visit www.mygit.me or mygit.me will automatically redirect to mygit.me
  • If you fill in a WWW, such as www.mygit.me, either visit www.mygit.me or mygit.me, it will automatically jump to www.mygit.me
  • If you enter another subdomain, such as abc.mygit.me, it is ok to visit abc.mygit.me, but mygit.me does not automatically redirect to abc.mygit.me

By the way, your old username.github. IO does not expire after you bind to your new domain name, but will automatically redirect to your new domain name.

Configure SSH key

Why configure this? You must have your Github permission to submit code, but using a username and password is too insecure, so we use SSH keys to solve the local and server connection problems.

Git bash:

$CD ~/.ssh # Check SSH keys existing on this machineCopy the code

If “No such file or directory” is displayed, you are using Git for the first time.

Ssh-keygen -t rsa -c "email address"Copy the code

Open the user directory, find.ssh\id_rsa.pub, notepad open and copy the contents, open your Github home page, SSH and GPG keys -> New SSH key:

Paste what you just copied into the key, title whatever you want, save.

Test success

$SSH -t [email protected] #Copy the code

Are you sure you want to continue connecting (yes/no)? , type yes and you will see:

Hi liuxianan! You’ve successfully authenticated, but GitHub does not provide shell access.

If you see this message, SSH is successfully configured!

At this point you also need to configure:

$git config --global user.name "yaoyanweb"// $git config --global user.email "[email protected]Copy the code

I didn’t go into the details of what this configuration was.

Use Hexo to blog

Hexo profile

Hexo is a simple, fast and powerful Github Pages based blog publishing tool that supports the Markdown format and has many excellent plug-ins and themes.

Hexo. IO github: github.com/hexojs/hexo

The principle of

Because making store pages are static files, blog store not only the content, and the article list, classification, labels, pages, such as dynamic content, if every written an article to manually update the blog directory and link information, believe that who will be mad, so is the md hexo do files are placed in local, After each article is written, call the written command to generate the relevant pages in batches, and then submit the changed pages to Github.

Matters needing attention

A few notes before installation:

  1. Many commands can be executed using CMD or Git bash, but some commands have some problems. To avoid unnecessary problems, it is recommended to execute all commands using Git bash.
  2. Different versions of hexo vary greatly, and many articles on the web have configuration information based on 2.x, so be careful not to be misled;
  3. There are two kinds of hexo_config.ymlFile, one is under the root directory of the global_config.ymlOne is eachthemeUnder;

The installation

$ npm install -g hexoCopy the code

Initialize the

Create a new (optionally named) folder somewhere on your computer called Hexo, such as F: Workspaces\hexo. Since this folder will be where you store your code in the future, it’s best not to put it anywhere.

$ cd /f/Workspaces/hexo/
$ hexo initCopy the code

Hexo automatically downloads several files to this directory, including node_modules, with the following directory structure:

$hexo g # generates $hexo s # to start the serviceCopy the code

After executing the above command, Hexo will generate the relevant HTML files in the public folder that will be submitted to Github in the future:

Hexo s is a local preview service. Open your browser and visit http://localhost:4000 to see the content!

The first time we initialized it hexo had already written an article for us called Hello World. The default theme was ugly, and when opened it looked like this: