Why should I build my own hexo blog and blog

Cause

First throw out your own blog http://shiqi-lu.tech

I wanted to build my own blog a long time ago, but I have never had time (crossed out, just lazy). The reason why I suddenly decided to do a wave this time is completely because my deskmate is really a super god, undergraduate from Peking University, PhD from Duke University, and also has her own blog and introduction page. Looking at her introduction page really He is super strong, super strong, and not only strong in learning, but also in various fields of interest. I can’t help but sigh, Daniel’s life is really super strong, really can be described as the strongest chicken blood, in comparison, it seems that I have lived for so many years in vain, without leaving any record worth keeping.

So, inspired by this (mainly stimulus), I also want to start building my own blog and personal homepage, but at the same time, I think I’d better publish and maintain 3 platforms at the same time, one is CSDN, one is the official account, and the other is this Blog. After all, after the article is written, it takes almost no time to publish more.

Why choose github and hexo

The main reason for choosing github is that you can use git version management. By the way, you can make it look better in the heat map of github. It is also free to host on github. There is no need to maintain another cloud host, and you don't want to be an operation and maintenance. To save a host of money, I only need to pay to buy a domain name. The .tech domain name of Wanwang has been bought for 10 years for 199 yuan, which is the only expense in the entire blog construction.

I chose hexo because it can support markdown writing, and can be matched with my existing tool suite, and can be seamlessly migrated. Hexo's ecology and themes are relatively complete.

Process and pit

Apply for a domain name

Directly on the million net purchase your own domain name, you can finish first stood after the real-name authentication, detailed steps specific reference to know almost .

Install node and hexo, and deploy to github

With specific reference to know almost , I was mounted on a macOS, there is no need to engage in complex environmental variables.

Stepping on the pit: I originally thought that after the git warehouse was built, I pulled the warehouse and initialized hexo in it, but I looked at it later, it was to operate in an empty folder, and the subsequent files published to github were compiled by hexo file.

DNS

After deployment can ensure access to domain name resolution by github.io can do, with specific reference to know almost

Pick a theme

Originally, I wanted to directly pick a more appropriate one from the official theme link , and set a few standards for myself:

1. The whole must be concise, the kind with a large number of pictures decorated, and the background fancy is not considered (the reason is that choosing pictures to expose your own garbage aesthetics, and it takes too much effort to choose pictures for each blog)
2. Must be able to support the analysis of formulas, code block highlighting, etc.
3. Preference the overall layout to be concise, prefer the sidebar on the right, and prefer the article to have a sidebar
4. The theme must be maintained and updated by the developer for a long time
5. Can have a comment system

I was dazzled by the above, and none of them were inappropriate. After watching for a long time, I suddenly felt that my choice of ideas was wrong. Can I choose from the most primitive unscreened theme stations?

I changed my mind and searched for the recommended hexo theme directly. Then I saw that the next theme almost completely met my requirements. Then I found that the next theme has gone through several iterations of major versions, and even the github warehouse has been changed several times, directly on the latest 8.0 version, pull down

Various adjustment and optimization of the next theme

In the next theme, there are quite a few places where you can make independent adjustments, and in version 8.0, many places have different adjustment methods from previous versions. I try to write what I use. All the operations done are basically to change the _config.yml under themes/next, a very small part is to change the _config.yml under hexo, and occasionally use npm to install a package

Set home page information

title: 每天净瞎搞
subtitle: '关注：AI/CS/数学/自我提升等'
description: '既然选择了远方，便只顾风雨兼程'
author: Shiqi Lu
language: zh-CN
timezone: 'Asia/Shanghai'
url: http://shiqi-lu.tech

choice of style

I tried all four styles and I liked Gemini more in the end

# Schemes
# scheme: Muse
# scheme: Mist
# scheme: Pisces
scheme: Gemini

Support dark mode

This is an unexpected surprise, it will automatically adapt according to the system settings

# Dark Mode
darkmode: true

Set site construction time

footer:
  # Specify the date when the site was setup. If not defined, current year will be used.
  since: 2020

Set the information of the website footnote (icon, record, etc.)

footer:
  # Icon between year and copyright info.
  icon:
    # Icon name in Font Awesome. See: https://fontawesome.com/icons
    name: fa fa-heart
    # If you want to animate the icon, set it to true.
    animated: true
    # Change the color of icon, using Hex Code.
    color: "#808080"

Website icon

First go to the Internet to find a suitable icon, and then update the corresponding file, free icon material website: Easyicon

favicon:
  small: /images/7-16.png
  medium: /images/7-32.png
  apple_touch_icon: /images/7-128.png
  safari_pinned_tab: /images/7-128.png

Tab page and category page

Refer to next document

Sidebar

I like to put it on the right, mainly because the visual focus is mainly on the left

sidebar:
  # Sidebar Position.
  # position: left
  position: right

Open the update time, reading time and other information under the article title

# Post meta display settings
post_meta:
  item_text: true
  created_at: true
  updated_at:
    enable: true
    another_day: true
  categories: true

# Post wordcount display settings
# Dependencies: https://github.com/next-theme/hexo-word-counter
symbols_count_time:
  separated_meta: true
  item_text_total: true

Summary settings for the blog homepage

This should match the description field in the article, or add a line of comment to the article, refer to the official document

# Automatically excerpt description in homepage as preamble text.
excerpt_description: true

# Read more button
# If true, the read more button will be displayed in excerpt section.
read_more_btn: true

Avatar settings

Place a local picture or image bed link in the url

# Sidebar Avatar
avatar:
  # Replace the default image and set the url here.
  url: /images/7-128.png
  # If true, the avatar will be dispalyed in circle.
  rounded: false
  # If true, the avatar will be rotated with the cursor.
  rotated: false

Code block highlighting style selection

Use the highlight style of highlight.js

highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace: '    '
  wrap: true
  hljs: false
prismjs:
  enable: false
  preprocess: true
  line_number: true
  tab_replace: ''

codeblock:
  # Code Highlight theme
  # All available themes: https://theme-next.js.org/highlight/
  theme:
    light: default
    dark: tomorrow-night-bright
  prism:
    light: prism
    dark: prism-dark
  # Add copy button on codeblock
  copy_button:
    enable: true
    # Available values: default | flat | mac
    style: flat

Social account settings

social:
  GitHub: https://github.com/shiqi-lu || fab fa-github
  E-Mail: mailto:[email protected] || fa fa-envelope
  #Weibo: https://weibo.com/yourname || fab fa-weibo
  #Google: https://plus.google.com/yourname || fab fa-google
  #Twitter: https://twitter.com/yourname || fab fa-twitter
  #FB Page: https://www.facebook.com/yourname || fab fa-facebook
  
social_icons:
  enable: true
  icons_only: false
  transition: true

Support local search

Refer to the official documentation
to install the package first:$ npm install hexo-generator-searchdb

# Local Search
search:
  path: search.xml
  field: post
  content: true
  format: html

# Local search
# Dependencies: https://github.com/next-theme/hexo-generator-searchdb
local_search:
  enable: true
  # If auto, trigger search by changing input.
  # If manual, trigger search by pressing enter key or search button.
  trigger: auto
  # Show top n results per article, show all results by setting to -1
  top_n_per_article: 1
  # Unescape html strings to the readable one.
  unescape: false
  # Preload the search data when the page loads.
  preload: false

Comment system

The comment system has selected the valine , please refer to the next document , where the avatar needs to be registered with Gravatar, refer to the avatar configuration , the email reminder here seems to be problematic, and the official method cannot be used. Let’s talk about this later. I don’t want to send me an email with a comment. If there is something urgent, just send me email.

Unfinished part

This part will be done depending on the time and mood in the future, and record part of each part.

• SEO
• Personal profile
• README
• The access speed is relatively slow, consider using a hosting service other than github
• Consider using CI
• Consider CDN acceleration
• Consider converting http to https
• Record
• Replace Tubed with your own domain name
• Tips on WeChat or Alipay
• Improve and link to LinkedIn
• ipad chrome small icon adaptation

Known issues

• There is no font awesome icon displayed when safari on ipad is displayed

Reference

• Automatic blog construction and deployment system based on Hexo
• Build a personal blog from scratch (super detailed)
• Official Hexo Document
• Next8.0 Github
• Next8.0 documentation