1.Github Pages

Github Pages can be hosted for free, so host your blog on Github.

First, create a Github repository with the format yourusername.github. IO and follow the instructions to the next step.

2.Hexo builds blogs

The Anisina theme is used in this blog, so the steps to build based on the Anisina theme will be described in detail.

1. Preparation

1. Install Node. js first (download from the official website). 3. Install Hexo:

$ npm install -g hexoCopy the code

After the installation is successful, run the version command to check whether the installation is successful

& hexo versionCopy the code

4. Local static Hexo blogs

  • Create a new folder as the root of your blog files
  • Command line interface (CLI) Go to the folder and run the following command to generate a template:
$ hexo initCopy the code
  • After the template is generated, enter the following command:
$ npm installCopy the code
  • And finally it can runhexo sCommand to check whether the establishment is successful

2. Download themes

git clone https://github.com/Haojen/hexo-theme-Anisina.git themes/AnisinaCopy the code

3. Configure the blog

1. Configure the blog cover image

Set img’s Alt attribute to post-cover

2. Configure user information

Note: you must configure the information in _config.yml of the theme, not _config.yml of the blog root.

user_name: your name
user_avatar: your avatar
user_location: your location
user_description: about you introduction

// this info will show About page
user_contact: 
user_introduction:

// config you share info
weibo_username: 
zhihu_username: 
github_username:
twitter_username: 
facebook_username:  
linkedin_username:Copy the code

3. Create the About page

Create an about folder in the source folder under the root directory. Then create a new index.md file in the About folder. Add the following code to the file and save it:

title: about
date: 2017-09-11 23:12:50
layout: aboutCopy the code

Need to mention is that the author is not supported on the About page content changes, so this blog up, directly in the themes/Anisina/layout/About modifications in the ejs.

4. Create the Works page

Create the works folder in the source folder under the root directory, create a new folder like index.md, add the following contents to the file, and save:

title: My Works
date: 2017-09-11 23:16:50
layout: worksCopy the code

Then create a _data folder in the source folder, open the folder, and create a project. Json file with the following format:

{
  "Copy of Apple official website": {
    "title": "Copy of Apple official website"."subTitle": "Copy from the OFFICIAL website of apple."."img_link": "http://o7bkkhiex.bkt.clouddn.com/item-apple.jpg"."use" : ["jQuery"]."link": "http://haojen.github.io/apple-linmo/"."data":"2016.3"."direction": "Copy the March 2016 Apple US version single page."
  },
   "Anisina.": {
    "title": "Anisina"."subTitle": "Personal blog theme based on Hexo."."img_link": "http://o7bkkhiex.bkt.clouddn.com/Anisina.png"."use" : ["jQuery"."Bootstrap"."Node.js"."EJS"."Hexo"."SASS"]."link": "http://haojen.github.io/"."data": "2016.5"."direction":
        "Hexo is a Node.js blog framework written by a friend in Taiwan."}}Copy the code

5. Add a comment system

The theme supports the configuration of the _config.yml configuration file, so just add two lines of configuration code.

use_livere: trueLivere_uid: your registration UIDCopy the code

6. Add Baidu Statistics

Baidu statistics js code was added to the theme, track_id can be directly added to the configuration file:

ba_track_id: your track idCopy the code

7. Deploy the Hexo blog

  • site
hexo init yourname
cd yourname 
npm installCopy the code
  • Configure the deployment of _config.yml:
deploy:
  type: git
  repo: http://github.com/yousername/yourusername.github.io
  branch: master # the default masterCopy the code
  • Clear the cache
$ hexo cleanCopy the code
  • Generating static Web pages
$ hexo gCopy the code
  • View the effect locally. After the execution, you can passhttp://localhost:4000Viewing Local Effects
$ hexo sCopy the code
  • Deployed to git
$ hexo dCopy the code

3. Bind aliyun domain name

Before ali Cloud bought a domain name, the successful purchase of domain name to wait for real-name authentication.

1. Add the CNAME file

Create a new CNAME file without a suffix under the source folder in the root directory.

Open the CNAME file in Sublime Text and add your domain name information to it, as shown below:

Once saved, redeploy to Github Pages.

2. Add to the Github project

In the project Settings, add Custom Domain to your own domain:

3. Add resolution records to the domain name

1. Ping yourname.github. IO to get your own IP address:

2. Open the domain name resolution list and add two resolution records:

After replacement, may need to wait for a period of time to take effect, almost done.