This is the 20th day of my participation in the Gwen Challenge

1, the preface

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

  • All static files, fast access;
  • Free and convenient, do not spend a penny can build a free personal blog, do not need the server does not need the background;
  • If you don’t look closely, you won’t be able to tell that your site is based on Github.
  • Data is absolutely secure, based on github version management, you can restore to any historical version;
  • Blog content can be easily packaged, transferred, and distributed to other platforms;
1.1 Preparations

Before you start anything, you must prepare the following:

  • 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)

2. Create a Github blog

2.1 Creating a Warehouse

Create a new one calledYour username.github. IOFor example, if your Github username is Test, create a new repositorytest.github.ioThe repository (must be your username, other names are invalid), your future site access address istest.github.ioIs 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:

  • Registered email must be verified, otherwise it will not succeed;
  • Github. IO where username is your username.
  • 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.

2.2 Binding domain Names

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 have to register a domain name, there are a lot of domestic options such as Ali Cloud, Tencent cloud, Huawei cloud and so on. Because Tencent sent me a domain name is useless, today to test it.

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 and create a new file called CNAME (no suffix) with your domain name.

When you bind to a new domain name, your old username.github. IO does not expire and will automatically redirect to your new domain name.

3. Configure the 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.

Install git on your computer. After installing git, right click to create 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

SSH \id_rsa.pub (be careful not to find the wrong file). Notepad opens and copies the contents of the file. SSH and GPG keys -> New SSH key:

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

3.1 Test Is Successful
$ ssh -T [email protected] 
Copy the code

If you see this message, SSH is successfully configured!

At this point you also need to configure:

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

4. Use Hexo to blog

4.1 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

4.2 the principle

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.

4.3 Precautions

A few notes before installation:

  • 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.
  • 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;
  • Hexo has two kinds of _config.yml files, one is the global _config.yml file in the root directory, and one is the theme file.
4.4 installation
$ npm install -g hexo
Copy the code
4.5 the initialization

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 init
Copy 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 relevant HTML files in the public folder that will be submitted to Github in the future.

Hexo s enables the local preview service. Open a 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:

4.6 Modifying a Theme

Since the default theme is ugly, let’s do nothing else, first to replace a better theme. You can go to the theme official website to download.

$ cd /f/Workspaces/hexo/
$ git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia
Copy the code

The downloaded themes are in the thems folder.

Change theme: landscape in _config.yml to theme: yilia, and then re-execute hexo g to regenerate.

If something goes wrong, you can perform Hexo Clean to clean up public’s content before regenerating and republishing it.

4.7 Before Uploading

Be sure to download all of your old code before uploading it to Github (although Github has version management, it’s always good to back it up), because submitting code from Hexo will delete all of your old code.

4.8 Uploading to Github

If you have everything configured, Posting and uploading is easy, just a hexo D, but the key is to configure everything.

First, the SSH key must be configured.

Second, configure the part about deploy in _config.yml:

Correct way to write:

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

Incorrect writing:

deploy:
  type: github
  repository: https://github.com/stronglxp/stronglxp.github.io.git
  branch: master
Copy the code

Hexo2.x (hexo2.x); hexo2.x (hexo2.x);

Deployer not found: github 或者 Deployer not found: git
Copy the code

The reason is that you also need to install a plug-in:

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

Other commands are uncertain. You must use git bash to deploy this command, otherwise it will prompt Permission denied (publickey).

Open your git bash and type hexo d to commit all code that has changed.

4.9 Retain files such as CNAME and readme. md

After submitting the file to the source folder, all files will be copied to the public directory (except for the md file) :

Since Hexo converts all MD files to HTML by default, including readme.md, you need to manually copy the readme.md to the public directory and delete the readme.html after each build and before uploading.

4.10 Frequently Using the hexo command

Common command

Hexo new "postName" # new article hexo new page "pageName" # new page hexo generate # static page to public directory hexo server # enable preview access port (default port 4000) 'CTRL + C' to close the server) hexo deploy # Deploy to GitHub hexo help # View the version of hexoCopy the code

Abbreviations:

hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy
Copy the code

Combined commands:

Hexo S-G # generated and previewed locally Hexo D-G # generated and uploadedCopy the code
4.11 _config. Yml

Here are some global configurations, and the meaning of each parameter is relatively straightforward, so I won’t go into details.

One important thing to note is that the colon must be followed by a space, otherwise it may cause problems.

4.12 write a blog

Locate our hexo root directory and execute the following command:

hexo new 'my-first-blog'
Copy the code

Hexo will help us generate the relevant MD file under _posts:

We just need to open this file to start writing a blog. The default output is as follows:

Of course, you can also directly create your own MD file, the advantage of using this command is to help us automatically generate the time.

The general complete format is as follows:

-- Category: default category # category: category: default category # category tags: category: default category: category: default category: category: default category: category: default category: default category: [tag1,tag2,tag3] [tag1,tag2,tag3] [tag1,tag2,tag3] [tag2,tag3Copy the code

So what’s the difference between hexo new page ‘postName’ and hexo new ‘postName’?

hexo new page "my-second-blog"
Copy the code

Generate as follows:

When finally deployed, hexo\public\my-second-blog\index.html is generated, but it does not appear as an article in the blog directory.

4.12.1 How do I Keep the Blog List From Displaying all contents

By default, the generated blog post directory displays the entire content of the post. How do YOU set the length of the post summary?

The answer is to add it in the right place, for example:

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. You can bind your domain name as you like. If you don't look carefully, you can't tell that your website is based on Github. <! --more--> 4. Data is absolutely safe, based on github version management, you can restore to any historical version; 5. Blog content can be easily packaged, transferred, and distributed to other platforms; 6., etc.Copy the code
hexo g
hexo s
hexo d
Copy the code

Access after deployment, the effect is as follows