Hexo+github+Butterfly build a personal blog

Foreword

Hexo is a static blog framework based on Node.js. It has few dependencies and is easy to install and use. It can easily generate static web pages and host them on GitHub and Heroku. It is the preferred framework for building blogs.

Overall reference tutorial: [2023 latest version] Hexo + github to build a personal blog and bind a personal domain name_hexo deploys github to bind a custom domain name

Preparation

1. Sign up for a Github account

2. Create a new warehouse, this warehouse and the warehouse where your blog files are stored

1. Install and configure Node.js

Reference tutorial: nodejs installation and environment configuration – Windows (very detailed)

The problems and solutions that may occur during the installation process are as follows:

1. Problems and solutions encountered during nodejs installation

2. nodejs error Error: EPERM: operation not permitted, mkdir

2. Install and configure git

Installation reference tutorial: Windows system Git installation tutorial

Configuration Reference Tutorial Reference Article: Github Generate SSH Key (Detailed Tutorial)

3. Configure Hexo

Create a blog file, for convenience, you can create a Blog folder in the root directory of any local disk)

Right-click the Git Bash program, enter as an administrator, and enter cd /e/Blog (enter the path according to your Blog file location)

Initialize Hexo

hexo init

Generate a local hexo page, click the link that appears to visit

 hexo s

Ctrl + C to exit
Modify the _config.yml file in the Blog directory

Note that the colon is an English colon, and there is an English space after the colon
Install the hexo-deployer-git automatic deployment release tool

npm install hexo-deployer-git --save

Generate page and upload

hexo g & amp; hexo d
# (can also be operated separately)

There will be a login page in the middle, it will be more convenient to choose the second one
Finally visit your website mounted on Github

Fourth, Butterfly theme and basic beautification

Butterfly use refer to the official documentation: Butterfly Installation Documentation (1) Quick Start | Butterfly
The following is a list of your own modification instructions

Personal information

Modify the _config.yml blue file in the blog root directory

title: Keep Thinking
subtitle: 'Rocky'
description: 'Keep thinking, put into action'
keywords: solasea
author: Rocky
language: zh-CN
timezone: 'Asia/Shanghai'

Site image

Modify the label_config.yml file under the theme configuration file. This file will appear in different places under different download modes, and it will be in the node_modules folder under npm download mode hexo-theme-butterfly subfolder, other download methods will be in the label theme folder of the root directory.

nav:
  logo: /img/mylogo.png # Set the website LOGO
  display_title: true
  fixed: false # fixed navigation bar
  
# Favicon (website icon)
favicon: /img/mylogo.png # set website icon

# Avatar (Avatar)
avatar:
  img: /img/head.jpeg # Set the website avatar
  effect: false

# The banner image of home page
# Set the top image of the home page of the website
index_img: https://rocky-box.oss-cn-beijing.aliyuncs.com/image/11.jpg

# Website Background (set the website background)
# can set it to color or image (can set the picture or color)
# The formal of image: url(http://xxxxxx.com/xxx.jpg)
# Set the website background
background: url(https://rocky-box.oss-cn-beijing.aliyuncs.com/image/11.jpg)

# Footer Background
footer_bg: false # cancel footer image display

#In order to better display the background image, you need to delete the default display of the top image and footer of the page
# Under \source\css\_layout under the theme file, delete the following content in the footer.styl and head.styl files respectively
background: $light-blue

Home tab

Also modify the config.yml blue file in the blog root directory

menu:
  Home: / || fas fa-home
  index||fas fa-chain:
    Archives: /archives/ || fas fa-archive
    Tags: /tags/ || fas fa-tags
    Category: /categories/ || fas fa-folder-open
    Item: /Done/ || fas fa-check
  Entertainment||fa fa-heartbeat:
    Photo: /GalleryGroup/ || fas fa-images
  Subtotal: /timeline/ || fas fa-paperclip
  Friend link: /link/ || fas fa-link

Among them, fa-home and fa-tags are icon names, which are icons in the Font Awesome icon library and can be used directly.

Web site effects

Modify the label _config.yml file in the blog root directory, select your favorite special effect enable and change it to true.

# Typewriter Effect (typewriter effect)
# https://github.com/disjukr/activate-power-mode
activate_power_mode:
  enable: false
  colorful: true # open particle animation (light effect)
  shake: true # open shake (jitter effect)
  mobile: false

# canvas_ribbon (static ribbon background)
# See: https://github.com/hustcc/ribbon.js
canvas_ribbon:
  enable: false
  size: 150
  alpha: 0.6
  zIndex: -1
  click_to_change: false
  mobile: false

# Fluttering Ribbon (dynamic ribbon)
canvas_fluttering_ribbon:
  enable: false
  mobile: false

# canvas_nest
# https://github.com/hustcc/canvas-nest.js
canvas_nest:
  enable: true
  color: '0,0,255' #color of lines, default: '0,0,0'; RGB values: (R,G,B).(note: use ',' to separate.)
  opacity: 0.7 # the opacity of line (0~1), default: 0.5.
  zIndex: -1 # z-index property of the background, default: -1.
  count: 99 # the number of lines, default: 99.
  mobile: false

# Mouse click effects: fireworks (mouse click effects: firework effects)
fireworks:
  enable: true
  zIndex: 9999 # -1 or 9999
  mobile: false

# Mouse click effects: Heart symbol (mouse click effects: heart)
click_heart:
  enable: false
  mobile: false

# Mouse click effects: words (mouse click effects: text)
ClickShowText:
  enable: false
  text:
    # - I
    # - LOVE
    # - YOU
  fontSize: 15px
  random: false
  mobile: false

# the subtitle on homepage (homepage subtitle)
subtitle:
  enable: true
  # Typewriter Effect (typewriter effect)
  effect: true
  # Customize typed.js (configure typed.js)
  # https://github.com/mattboldt/typed.js/#customization
  typed_option:
  # source calls third-party services
  # source: false close call
  # source: 1 Call a sentence from Yiyan.com (simplified) https://hitokoto.cn/
  # source: 2 Call Yiyiwang (Simplified) https://yijuzhan.com/
  # source: 3 Call today's poetry (simplified) https://www.jinrishici.com/
  # subtitle will display source first, and then display sub content
  source: 1
  # If typing effects are turned off, subtitle will only display the first line of text in sub
  sub: