Create blog via Hexo & Butterfly theme

Initialization

  • Install Hexo 

    1
    npm install hexo-cli -g

  • Create Hexo project

    1
    hexo init my-blog

  • Install plugins

    1
    2
    cd my-blog
    npm install

Select Hexo themes

Write blog articles

  • Open my-blog in VSCode

  • Create new article

    1
    hexo new my-test-article

    You will find the my-test-article.md in the /my-blog/source/_posts folder.
    You can create subfolder in the _posts.

  • Write article using Markdown
    Each article must start with a title session.

    1
    2
    3
    4
    5
    6
    7
    8
    ---
    title: xxxxx
    date: 2023-01-27 15:26:36
    tags:
    categories: ...  //Optional
    description: ... //Optional
    ---
    ...

Start server in local

  • Use default port 4000
    1
    hexo server
  • Use a specific port, e.g. 4500
    1
    hexo server -p 4500

Others

  • Install plugin for blog file encryption

    1
    npm install –save hexo-blog-encrypt

    Add the password to the blog file’s title session

    1
    2
    3
    4
    5
    6
    ---
    title: xxxxx
    ...
    password: test12345
    ...
    ---

  • Install plugin for hide blog file
    https://github.com/prinsss/hexo-hide-posts

    1
    npm install hexo-hide-posts --save

    Add filter: hidden to _config.yml
    Add the hidden to the blog file’s title session

    1
    2
    3
    4
    5
    6
    ---
    title: xxxxx
    ...
    hidden: true
    ...
    ---

  • Install search function 

    1
    npm install hexo-generator-search --save

    Enable the local_search in the butterfly _config.yml

    1
    2
    3
    4
    local_search:
      enable: true
      preload: false
      CDN:

  • Generate sitemap 

    1
    npm install hexo-generator-sitemap --save

  • Add Disqus
    Create Disqus account & add the domain name
    Setup the _config.yml in the /my-blog/themes/butterfly/

    1
    2
    disqus:
      shortname: xxxxx-xxx-xxx

Deploy blog to my github

  • Install Hexo deployer

    1
    npm install hexo-deployer-git --save

    Edit _config.yml in /my-blog folder

    1
    2
    3
    4
    5
    6
    7
    url: https://XXXX.github.io/
    deploy:
      type: git
      repo: git@github.com:XXXX/XXXX.github.io.git 
      branch: master 
      message:

  • Deploy

    1
    2
    3
    hexo clean
    hexo generate
    hexo deploy

Set domain name

  • Buy domain name from GoDaddy
  • Set domain DNS in GoDaddy

    Mapping github IP address below in GoDaddy to your domain
    185.199.108.153
    185.199.109.153
    185.199.110.153
    185.199.111.153

  • Set domain in Github

Reference: Github instructions

Add to Google Search Console

Google Search Console Usage

  • Set URL prefix in Google Search Console
  • Download the google html file and save it to /my-blog/source/

    Note: need add a title session below to the html

    1
    2
    3
    4
    5
    ---
    layout: false
    ---

    google-site-verification: googlexxxxxxxxxx.html
  • Complete the verify
  • Setup sitemap
  • Waiting

Use Google Analytics to analyze web traffic

  • Add google analytics “MEASUREMENT ID” to /butterfly/_config.yml
  • Add google analytics script section to the /butterfly/layout/includes/head/analytics.pug