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. If your are not at my Blog, here is My HexoBlog.

Chapter:

Part 1 - Preparation

  1. Having a Git account and repositories for blog

  2. Install nodejs and Git

  3. Install and Initialize Hexo Blog

Part 2 - Basic configuration and blog deployment

  • Basic Blog configuration
  • Deploy a blog for the first time with GitHub
  • Install blog theme - “Butterfly”
  • 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 on “Butterfly” theme

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

Having a GitHub account

Skip this step if have a GitHub account already.

  1. Go to GitHub and then “sign up”.

  2. Sign up with eMail, password and username.

  3. Create “New Repo”: Click the green “New”;

    Create Github Repo

Install nodejs and Git

Link: nodejs download

  1. File download: download .msi for Window; .pkg for macOS.

  2. Download setting: keep licking “Next” (remain all default installation)

  3. Verify download: run node -v on command prompt. Installation success when it return the version number.

    1
    2
    > node -v
    v16.14.0

Link: Git download

  1. File download: “64-bit Git for Windows Setup”

  2. Download setting: keep licking “Next” (remain all default installation)

  3. Verify download: run git version on command prompt. Installation success when it return the version number.

    1
    2
    > git version
    git version 2.35.1.windows.2

Install and Initialize Hexo blog

Please always refer to Hexo Official doc: Official Hexo doc EN and Official Hexo doc CN

Video tutorial CN:

Video tutorial EN:

  1. Create a new empty folder with any name at the appropriate path, this folder will become your blog source folder. e.g. “HexoBlog”, path D:\HexoBlog.

  2. Use of Git terminal: Open the blog source folder, right click select Git Bash to enter the terminal.

    Git at root-file

  3. Install Hexo: at blog root directory /HexoBlog 

    1
    $ npm install -g hexo-cli

  4. Initialize blog: at blog root directory /HexoBlog

    1
    $ hexo init HexoBlog

  5. Generate blog file: at blog root directory /HexoBlog

    1
    2
    3
    $ hexo g
    or
    $ hexo gerarate

  6. Deploy the HexoBlog locally: at blog root directory /HexoBlog, 

    1
    2
    3
    $ hexo s
    or
    $ hexo server

  7. Open http://localhost:4000/ with any browser to view the blog locally. (Chrome as example)

    Chrome