Hexo blog reconstruction Road

Mục Lục

preface

Some time ago, because my computer hard disk was damaged, all the files were lost, and I didn’t back up the files of Hexo blog. I only copied all the markdown files to the cloud disk five months ago.

After consulting some online tutorials, I think there should be no way to save it, so I plan to redeploy this Hexo blog locally.

At the same time, write this article to record the process and provide a reference for those in need.

prepare

Although the local file is lost, the warehouse on GitHub is still there, so we skip the step of creating a new warehouse here

For the steps of configuring local files, Git and installing Hexo local programs, please refer to the previous tutorial: Hexo build personal blog: from start to give up

When you get to this step, visit http://localhost:4000 , when the Hexo default page appears successfully, you can enter the next stage.

Install theme

Execute the following instructions:

git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly # installation theme
npm install hexo-renderer-pug hexo-renderer-stylus --save   # Install dependent Libraries

Create Page

Execute the following instructions:

hexo new page tags
hexo new page categories
hexo new page link
hexo new page history
hexo new page about
hexo new page music
hexo new page Demo
hexo new page message
hexo new page talking
hexo new page Gallery
hexo new page HTML

Remember to add the type parameter to the page front matter in the md files of tags, categories and link

Install plug-ins

Execute the following instructions to install the plug-in:

npm install hexo-generator-search --save  # Local search system
npm install hexo-wordcount --save  # word count 
npm install hexo-generator-feed --save  # Generate RSS
npm install hexo-abbrlink --save  # Custom article links
npm install --save hexo-tag-aplayer  # Global music
npm install hexo-butterfly-douban --save  # Douban page
npm install --save hexo-blog-encrypt  # Add password for article
npm install hexo-deployer-git --save  # Submit to Github
npm install --save hexo-tag-bilibili  # Play station B video
npm install hexo-butterfly-envelope --save  # Message board letterhead style
npm install hexo-butterfly-wowjs --save  # Animation effect
npm i hexo-offline-popup --save  # Update tips
npm i hexo-history-calendar --save  # Sidebar history today
npm i hexo-swiper-bar --save  # Top article rotation chart
npm i hexo-butterfly-article-double-row --save  # Home page double column layout
npm i hexo-githubcalendar --save  # Github upload record

The above is my own Hexo plug-in for reference only. I will write a separate article on recommending plug-ins when I have time.

Change profile

The following configurations are for personal records only. Please do not copy them.

# _config.yml 

deploy:
  type: git
  repository: [email protected]:Amnesia-f/amnesia-f.github.io.git
  branch: main

#Feed Atom
feed:
    type:
      - atom
      - rss2
    path:
      - atom.xml
      - rss2.xml
    limit: 20

abbrlink:
  alg: crc16  # Algorithm: crc16(default) and crc32
  rep: hex    # Hex: dec(default) and hex
  drafts: false

aplayer:
  asset_inject: false
  meting: true

search:
  path: search.xml
  field: post
  format: html
  content: true
  limit: 10000

butterfly_article_double_row:
  enable: false

douban:
  user: 231261343
  builtin: false
  movie:
    title: 'film'
    quote: 'The movies I saw in those years'
    meta: true
    comments: true
    aside: true
  timeout: 10000

swiper:
  enable: true
  priority: 1
  enable_page: /
  layout:
    type: id
    name: recent-posts
    index: 0
  temple_html: '<div class="recent-post-item" style="height: auto;width: 100%"><div class="blog-slider swiper-container-fade swiper-container-horizontal" id="swiper_container">${temple_html_item}</div></div>'
  plus_style: ""

history_calendar:
  priority: 4
  enable: true
  enable_page: /
  layout:
    type: class
    name: sticky_layout
    index: 0
  temple_html: '<div class="card-widget card-history"><div class="card-content"><div class="item-headline"><i class="fas fa-clock fa-spin"></i><span>That year today</span></div><div id="history-baidu" style="height: 100px;overflow: hidden"><div class="history_swiper-container" id="history-container" style="width: 100%;height: 100%"><div class="swiper-wrapper" id="history_container_wrapper" style="height:20px"></div></div></div></div>'

# Security
encrypt: # hexo-blog-encrypt
  abstract: Something is encrypted, Please enter your password to view.
  message: Please enter the password to get the article content!

# envelope_comment
# see https://akilar.top/posts/58900a8/
envelope_comment:
  enable: true #switch
  cover: https://ae01.alicdn.com/kf/U5bb04af32be544c4b41206d9a42fcacfd.jpg # letterhead cover
  message: #Letterhead content, supporting multiple lines
    - What do you want to ask?
    - What do you want to say?
    - What do you want to make complaints about?
    - Even if you have anything to eat, you can tell me~
  bottom: Automatic Secretary dolls serve you wholeheartedly! #The end of the letter can only be a single line
  height: #Adjust the height of the letterhead. The default is 1050px
  path: #[optional] path name of comments. The default is comments, and the generated page is comments / index html
  front_matter: #[optional] front of comments page_ Matter configuration
    title: Message Board
    comments: true

wowjs:
  enable: true #Controls the animation switch. true is on and false is off
  priority: 10 #Filter priority
  mobile: false #Whether the mobile terminal is enabled or not. It is disabled by default
  animateitem:
    - class: recent-post-item #Required item. The class of the element to be animated
      style: animate__zoomIn #Required item, animation to be added
      duration: 2s #Optional item: animation duration. The unit can be ms or s. For example, 3s, 700ms.
      delay: 500ms #Optional item: the delay time of animation start. The unit can be ms or s. For example, 3s, 700ms.
      offset: 80 #Optional item, the distance to start the animation (relative to the bottom of the browser)
      iteration: 1 #Optional item, the number of times the animation is repeated
    - class: card-widget
      style: animate__zoomIn
animate_css: https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/animate.min.css
wow_js: https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/wow.min.js
wow_init_js: https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/wow_init.js

# Ice Kano Plus_in
# Hexo Github Canlendar
# Author: Ice Kano
# Modify: Lete
githubcalendar:
  enable: true
  enable_page: /
  user: Amnesia-f
  layout:
    type: id
    name: recent-posts
    index: 2
  githubcalendar_html: '<div class="recent-post-item" style="width:100%;height:auto;padding:10px;"><div id="github_loading" style="width:10%;height:100%;margin:0 auto;display: block"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 50 50" style="enable-background:new 0 0 50 50" xml:space="preserve"><path fill="#d0d0d0" d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z" transform="rotate(275.098 25 25)"><animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"></animateTransform></path></svg></div><div id="github_container"></div></div>'
  pc_minheight: 280px
  mobile_minheight: 0px
  color: "['#ebedf0', '#fdcdec', '#fc9bd9', '#fa6ac5', '#f838b2', '#f5089f', '#c4067e', '#92055e', '#540336', '#48022f', '#30021f']"
  api: https://python-github-calendar-api-eight.vercel.app/api/?Amnesia-f
  # api: https://python-gitee-calendar-api.vercel.app/api
  calendar_js: https://cdn.jsdelivr.net/gh/Zfour/[email protected]/hexo_githubcalendar.js
  plus_style: ""

# offline config passed to sw-precache.
service_worker:
  maximumFileSizeToCacheInBytes: 5242880
  staticFileGlobs:
  - public/**/*.{js,html,css,png,jpg,gif,svg,eot,ttf,woff,woff2}
  stripPrefix: public
  verbose: true
  runtimeCaching:
    - urlPattern: /*
      handler: cacheFirst
      options:
        origin: https://cdn.jsdelivr.net/gh/sviptzk/StaticFile_HEXO@latest/butterfly/css/pool.min.css
    - urlPattern: /*
      handler: cacheFirst
      options:
        origin: https://butterfly.lete114.top/css/Lete.css
    - urlPattern: /*
      handler: cacheFirst
      options:
        origin: https://cdn.jsdelivr.net/gh/sviptzk/StaticFile_HEXO@latest/butterfly/js/pool.min.js
    - urlPattern: /*
      handler: cacheFirst
      options:
        origin: https://butterfly.lete114.top/js/Lete.js