This article documents and explains how my HexoBlog was deployed to Github Pages step by step, from zero to present, welcome for you to reference. Here is My HexoBlog.

Part 1 - Preparation

  • Having a Git account
  • Install nodejs and Git
  • Install and Initialize Hexo Blog

Part 2 - Basic configuration and blog deployment

  1. Basic Blog configuration

  2. Deploy a blog for the first time with GitPage

  3. Install blog theme - “Butterfly”

  4. Develop a own picture hosting (PicGo + GitHub)

Part 3 - Blog maintain and GitHub version control

  • Use of Hexo command
  • Deploy a blog with theme
  • Push source file to GitHub

Part 4 - Advanced configuration based on “Butterfly” theme

  • Config blog attributer and Customize blog style with “Butterfly”

Basic blog configuration - _config.yml

Please always refer to Hexo official Doc - EN Hexo - Configuration and CN Hexo - Configuration.

  1. Open .../YourBlogSource/_config.yml with any text/code editor (sublime text, Atom and any IDE & code editor).

  2. #Site: define basic state of the HexoBlog. Every attribute have not fix format.

    Hexo Offical doc - “Site” Configuration

    Hexo 官方文檔 - “網站” 配置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    # Site
    title: Becoze's Blog
    subtitle: 
    description: About me <br> Name - Becoze, Nick or Liyuan Liang. <br> Language - English, Mandarin, Cantonese. <br> <i class='fas fa-map-marker-alt'></i> NSW, Sydney
    keywords: ---Stay inquisitive---
    author: Becoze
    language: en
    timezone: ''
    email: liyuanliang20@outlook.com

    User of fas icon<i class='fas fa-map-marker-alt'></i>, please refer to HexoBlog Development Log (Part 4) - Advanced configuration based on “Butterfly” theme

  3. #URL: define global url to the blog after we deploy.

    Hexo Offical doc - “URL” Configuration

    Hexo 官方文檔 - “網址” 配置

    • url: must following the format https://<GitHub-Username>.github.io. Note: not repo url.
    1
    2
    # URL
    url: https://becoze.github.io

  4. #Deployment: define deploy method. Re-request of blog GitPage-deployment.

    1. type: git , fixed
    2. repo: https://github.com/becoze/becoze.github.io.git, must use your url of the repo.
    3. branch: main, main or any branch
    1
    2
    3
    4
    5
    # Deployment
    deploy: 
      type: git
      repo: https://github.com/becoze/becoze.github.io.git
      branch: main

Deploy a blog for the first time with GitPage

Hexo Offical doc - “One-command deployment” GitHub Pages

Hexo 官方文檔 - “一鍵部屬” 在 GitHub Pages 上部署 Hexo

  1. Install Hexo Blog deployer: npm install hexo-deployer-git --save at blog root directory /HexoBlog

  2. Deployment: run following using Git Bash at blog root directory /HexoBlog 

    1
    2
    3
    $ hexo clean 
    $ hexo g
    $ hexo deploy

  3. Possible error (optional)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    Please tell me who you are.

    Run
    git config --global user.email “you@example.com”
    git config --global user.name “Your Name”

    to set your account’s default identity.
    Omit --global to set the identity only in this repository.

    fatal: unable to auto-detect email address (got ...)
    error: src refspec HEAD does not match any.
    error: failed to push some refs to(your ...github.io)

    ​ solution:

    • run git config --global user.email "<you@example.com>", your GitHub email address
    • run git config --global user.name "<username>", your GitHub username

Install and apply blog theme - “Butterfly”

Developed own Image hosting - “PicGo + GitHub”

Tutorial Bilibili 使用picgo+github搭建免费个人图床

  1. To store able to image. Create a new Public repo together a README.md file in GitHub with any name .

  2. Obtain token: GitHub setting –> Developer setting –> Personal access tokens –> Generate new token

    • Note: any (e.g. “blogPictureHosting”)
    • Expiration: any (recommend 60 days)
    • Select Scopes:
      • repo: select all, MUST
      • all other: remain deselect

  3. Make sure to copy your personal access token before “Finish”. You won’t be able to see it again!

  4. Download PicGo exe. file from GitHub at PicGo Release

    ​ PicGo-Setup-2.3.0-x64.exe for Windows

    ​ PicGo-Setup-2.3.0-x64.dmg for Mac iOS

  5. Image hosting setting 图床设置 (Host setting) –> GitHub图床 (GitHub Host setting)

    • Repo name (设定仓库名): The name of repo just created in step 1 

      1
      username/repo-name

    • Branch name (设定分支名): The branch name where to store pictures. (main by default)

      1
      main

    • Token setting (设定Token): the token from step 2

    • Repo path (指定储存路径): the path/folder where to store pictures.

      1
      img/

    • Customize domain name (设定自定义域名): Remain empty. It can speed up static resource loading if needed.

​ 6. Start up load image !!!