1, the preface

Github supports the githubPage static interface to build our personal blog, configure their own.

Create a Github repository

Create the username. Github. IO repository and select GithubPage in setting

zhanghanlun.github.io

3. Configure blogs with Hexo

GithubPage supports Jelly and Hexo to build static interfaces, and this tutorial uses Hexo to build a blog.

3.1 Initializing Hexo

This section is taken from hexo’s official documentation

$ npm install hexo-cli -g
$ hexo init blog
$ cd blog
$ npm install
$ hexo server
Copy the code

3.2 Generate and run static web pages

Run the following command to generate a static web page

$ hexo generate
Copy the code

Run the following command to run a static web page locally

$ hexo deploy
Copy the code

The first time you run this command, you need to install hexo-server

$ npm install hexo-server --save
Copy the code

Once the installation is complete, enter the following command to start the server and your website will launch at http://localhost:4000

3.3 Deploying a Vm to Github

Install hexo deployment plugin hexo-deploy-git

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

Also modify the blog configuration file _config.yml

deploy:
  type: git Deploy git
  repo: [email protected]:zhanghanlun/zhanghanlun.github.io.git Remote storage address
  branch: master # branch
Copy the code

Finally, run the following command to deploy to Github

$ hexo deploy
Copy the code

4. Configure the Next theme

4.1 Adding a Next theme

In this section, refer to the official next theme documentation to add the next theme

$ cd hexo
$ git clone https://github.com/theme-next/hexo-theme-next themes/next
Copy the code

Modify the blog configuration file _config.yml and change the theme to next

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next
Copy the code

4.2 Changing the Theme language of next

The latest version of the Next theme relies on the blog’s profile, rather than the theme’s own profile language

Title: Zhang Hanlun's technical blog Subtitle:' '
description: ' 'Keywords: Author: Zhang Hanlun Language: zh-CN timezone:' '
Copy the code

4.3 Configuring Labels and Categories

Add menus by modifying the topic configuration file _config.yml

menu:
  home: / || home # home page
  about: /about/ || user # on the page
  tags: /tags/ || tags # label
  categories: /categories/ || th # classification
  archives: /archives/ || archive # file
Copy the code

Run the command

$ hexo new page categories
$ hexo new page tags
$ hexo new page about
Copy the code

4.4 Add comments and times of reading

This is done with Valine, which is a single point of leanCloud. First go to Leanclode and sign up for an account and then create a free app on the console, find appId and appKey.

valine:
  enable: true
  appid: *** # Your leancloud application appid
  appkey: ***  # Your leancloud application appkey
  notify: true # Mail notifier
  verify: false # Verification code
  placeholder: Just go go # Comment box placeholder
  avatar: mm # Gravatar style
  guest_info: nick,mail,link # Custom comment header
  pageSize: 10 # Pagination size
  language: zh-cn # Language, available values: en, zh-cn
  visitor: true # Count the number of articles read
  comment_count: true # If false, comment count will only be displayed in post page, not in home page
  recordIP: false # Whether to record the commenter IP
  serverURLs: # When the custom domain name is enabled, fill it in here (it will be detected automatically by default, no need to fill in)
  #post_meta_order: 0
Copy the code

4.5 Adding local Search

Install hexo – generator – search

$  npm install hexo-generator-search --save
Copy the code

It is then modified in the hexo configuration file _config.yml

search:
    path: search.xml
    field: post
    format: html
    limit: 10000
Copy the code

4.6 Adding the Tipping Function

Modify the theme configuration _config.yml and add the collection image to the theme/next/source/image folder

reward_settings:
  # If true, reward will be displayed in every article by default.
  enable: true
  animation: falseComment: Original technical sharing, your support will encourage me to continue to create. reward: wechatpay: /images/wechatpay.png alipay: /images/alipay.jpgCopy the code

4.7 Add Sitemap to Google and Baidu search

Install the Sitemap generation plug-in

$ npm install hexo-generator-sitemap --save
$ npm install hexo-generator-baidu-sitemap --save
Copy the code

Add hexo config _config.yml

Plugins:
- hexo-generator-baidu-sitemap
- hexo-generator-sitemap

baidusitemap:
    path: baidusitemap.xml
sitemap:
    path: sitemap.xml
Copy the code

Also change the URL configuration of Hexo to your blog domain

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://zhanghanlun.github.io
Copy the code

Then configure it in Google search site

Baidu search resource platform
Note on pit 

skip_render:
    - baidu_verify_.html
    - google.html
Copy the code

4.8 Adding a Profile Picture

Modify the Avatar option in the theme profile

# Sidebar Avatar
avatar:
  url: /images/wuliuqi.jpg
  rounded: true
  rotated: false
Copy the code

The avatar file is placed under the theme file, under the source/images file, and it looks like this

5. Custom domain name access

Create a CNAME file in the root directory and fill it with a custom domain name, such as www.zhanghanlun.com, which can also be added in github Settings, as shown below:

www.zhanghanlun.com

6. Add CDN resolution

It is suggested to use youpai Cloud’s free CDN acceleration, create an application through the following link, register youpai Cloud, and then join Youpai Cloud Alliance, Youpai Cloud alliance. Before adding CDN, their domain name must be put on record first, first put on record, first put on record, important things say three times, and then create CDN service in the console, and bind the domain name, and then in the DNS resolution resolution to clap cloud provided by the CNAME, etc., DNS can use CDN to accelerate the website.