Personal blog construction-based on Hexo-Next-Github

Preparation

The blog is built based on Hexo and uses the theme Next. To ensure a smooth process, some preparations need to be made first, including the dependencies and accounts that need to be used. The construction environment is Windows.

Dependencies

Node.js

Node.js is an open source, cross-platform JavaScript runtime environment, based on Google’s V8 engine; we cannot do without Node and NPM (Node Package Manager) in the following operations. For installation, please see: Node.js official website , NPM will be installed together with Node.js. After installation, type the following command in the cmd window to verify

node -v

npm -v

If the version number appears, the installation is successful.

Git

Git is a distributed open source version control system (VCS), which can be understood as a warehouse, manages project code, and can manage local warehouses and remote warehouses. We mainly use it to push blogs to Github remote warehouses to update personal blog websites. Git official website, the installation of Git is relatively complicated, I recommend an article that explains it in detail: Git detailed installation tutorial.

Related account registration

Github

Speaking of Github, I believe everyone is familiar with it. It is the world’s largest gay dating website and provides a series of free services. Go to Github official website to register an account.

Alibaba Cloud

It is mainly used to customize domain names. If there is no need, you can ignore it. Alibaba Cloud official website, just use Alipay account to register and log in.

LeanCloud

It is used to store comment data. You can ignore it if there is no need. It can also be temporarily placed on the LeanCloud official website and will be registered when the comment system is introduced later.

Blog setup

Local build

Hexo is a blog framework based on Node, which can help us quickly generate static sites. You need to install it first to use it. Enter the following command

npm install hexo-cli -g # g means global, global installation

If it cannot be downloaded for a long time, you can switch the npm source to Taobao mirror.

npm config set registry https://registry.npmmirror.com

npm config get registry # Verify whether it is successful

After installation, you can initialize the blog prototype through the hexo init blog storage directory command

hexo init blog

cd ./blog # Enter the directory

The initialized file directory is roughly as follows

|-- blog
    |-- .gitignore # git ignore files
    |-- package-lock.json
    |-- package.json #Project information and configuration
    |-- _config.landscape.yml # landscape theme configuration
    |-- _config.yml # Site configuration
    |-- .github
    | |-- dependabot.yml
    |-- scaffolds # Template directory
    | |-- draft.md # Draft template
    | |-- page.md # Page template
    | |-- post.md # Post template
    |-- source # Resource directory
    | |-- _posts # Article directory
    | |-- hello-world.md # Initialize the built-in articles
    |-- themes # All theme storage directories
        |-- .gitkeep

Type the commands in turn

hexo new title #Create an article named title in the _posts directory

hexo g # g means generate, generate static files

hexo s # s means server, start a local server, the default is http://localhost:4000

Visit http://localhost:4000 to see the prototype of the website

[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-TRiirVKI-1692548038304) (http://qkc148.bvimg.com/18470/0e2a1a239bc219de.png ‘initialization’) ]

The default theme is landscape. We will change it to Next and uninstall landscape first.

npm un hexo-theme-landscape

install

git clone https://github.com/next-theme/hexo-theme-next themes/next

Note that git is configured with ssh to use the following command

git clone [email protected]:next-theme/hexo-theme-next.git themes/next

At this time, there will be an additional next directory under the themes directory, and then modify the root directory site configuration _config.yml file

#_config.yml

#theme: landscape
theme: next

You can see that the theme has changed

[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-NmQ17BnQ-1692548038306)(http://qkc148.bvimg.com/18470/9a468b2b731affad.png ‘next topic’ )]

Link Github Pages

Create a new Github warehouse, the warehouse name should be Github username.github.io, copy the warehouse link (if ssh is configured, the ssh link should be copied), and modify the site configuration

#_config.yml

 deploy:
   type: git
   repo: the link copied in the previous step
   branch: master

Install the git deploy plugin

npm install hexo-deployer-git --save

type the following command

hexo clean # clear cache

hexo g

hexo d # d means deploy, deploy to Github

Then visit Github username.github.io

Custom domain name

First of all, you need to have a domain name. I use Alibaba Cloud, so the demonstration is also based on the operation of the official website of Alibaba Cloud. First, log in to Alibaba Cloud, find the domain name resolution, click Add Settings, and add the following

[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-g12Lff5t-1692548038308) (http://qkc148.bvimg.com/18470/46026a0a9acbe2ad.png ‘Resolve DNS’ )]

The first record value needs to be replaced with Github username.github.io, and the second record value can be obtained by entering the following command in the cmd window

ping username.github.io

The third recorded value is Github’s official IP, which may be replaced. You can check it in Github’s official documentation.

[External link picture transfer failed, the source site may have an anti-theft link mechanism, it is recommended to save the picture and upload it directly (img-wIZ3tnk4-1692548038309) (http://qkc148.bvimg.com/18470/fb8d6ba8afa651bf.png ‘Github official document ‘)]

After setting up the parsing, go to the warehouse and set it to your own domain name: Settings -> Pages

[External link picture transfer failed, the source site may have an anti-theft link mechanism, it is recommended to save the picture and upload it directly (img-SBMfY0HW-1692548038311)(http://qkc148.bvimg.com/18470/8b4afa23cced642e.png ‘Set domain name’ )]

Create a new CNAME file in the source directory, enter your own domain name (do not include www), save it, and enter the following command again

hexo clean

hexo g

hexo d

If it is troublesome to execute every time, you can create a new run.bat file in the root directory of the project and write hexo clean & amp; & amp; hexo g & amp; & amp; hexo d, just save it. If you need to publish in the future, double-click this file to execute the command automatically. If you want to run it locally, you can replace d with s.

Hexo configuration

Website title, keywords, etc.

Site configuration, modify the root directory _config.yml.

#_config.yml

#Site
title: yuanyxh - Learning and Precipitation # Site Title
subtitle: Apply what you learn #Second-level title of the site
description: Read thousands of books and travel thousands of miles # Site description
keywords: blog, web, front-end, JavaScript, React, Vue, Node, Java, C/C++, Frida, Xposed # Site keywords
author: yuanyxh # author
language: zh-CN # language
timezone: Asia/Shanghai # time zone

It is recommended to fill in the above content carefully as it will affect SEO.

Add dark mode

Next supports dark mode by default, but cannot be switched manually. Use drakmode.js to manually add support and theme configuration.

# _config.next.yml

vendors:
  # cdn reference plug-in
  darkmode_js: https://cdn.jsdelivr.net/npm/[email protected]/lib/darkmode-js.min.js

darkmode_js:
  enable: true # Enable plug-in

Add content in /themes/next/layout/_scripts/vendors.njk

# vendors.njk

{# Customize darkmode.js - Declaration #}
{%- if theme.darkmode_js.enable %}
  <script src="{<!-- -->{ theme.vendors.darkmode_js }}"></script>
{%- endif %}

{# Customize darkmode.js - Invokation #}
{%- if theme.darkmode_js.enable %}
<script>
var options = {
  bottom: '64px', // default: '32px'
  right: 'unset', // default: '32px'
  left: '32px', // default: 'unset'
  time: '0.5s', // default: '0.3s'
  mixColor: 'transparent', // default: '#fff'
  backgroundColor: 'transparent', // default: '#fff'
  buttonColorDark: '#100f2c', // default: '#100f2c'
  buttonColorLight: '#fff', // default: '#fff'
  saveInCookies: true, // default: true,
  label: '', // default: ''
  autoMatchOsTheme: true // default: true
}
const darkmode = new Darkmode(options);
darkmode. showWidget();
</script>
{%- endif %}

At this point, you can manually switch the mode, but the style part still needs to be changed. When switching to the dark mode, drakmode.js will add darkmode-- in the body element activated class, we create a new themes/next/source/css/_custom/drakmode.styl style file and write the following content

# drakmode.styl

.darkmode --activated {
  --body-bg-color: $body-bg-color-dark;
  --content-bg-color: $content-bg-color-dark;
  --card-bg-color: $card-bg-color-dark;
  --text-color: $text-color-dark;
  --blockquote-color: $blockquote-color-dark;
  --link-color: $link-color-dark;
  --link-hover-color: $link-hover-color-dark;
  --brand-color: $brand-color-dark;
  --brand-hover-color: $brand-hover-color-dark;
  --table-row-odd-bg-color: $table-row-odd-bg-color-dark;
  --table-row-hover-bg-color: $table-row-hover-bg-color-dark;
  --menu-item-bg-color: $menu-item-bg-color-dark;

  --btn-default-bg: $btn-default-bg-dark;
  --btn-default-color: $btn-default-color-dark;
  --btn-default-border-color: $btn-default-border-color-dark;
  --btn-default-hover-bg: $btn-default-hover-bg-dark;
  --btn-default-hover-color: $btn-default-hover-color-dark;
  --btn-default-hover-border-color: $btn-default-hover-border-color-dark;

  --highlight-background: $highlight-background-dark;
  --highlight-foreground: $highlight-foreground-dark;
  --highlight-gutter-background: $highlight-gutter-background-dark;
  --highlight-gutter-foreground: $highlight-gutter-foreground-dark;

  img {
    opacity: .75;
     &:hover {
      opacity: .9;
    }
  }

  code {
   color: #69dbdc;
   background: transparent;
 }
}

Then add a reference in themes/next/source/css/main.styl

# main.styl

@import '_custom/darkmode.styl';

Replace Markdown rendering engine

Hexo’s default rendering engine lacks many features. To replace it, first uninstall the default rendering engine.

npm un hexo-renderer-marked --save

Install the hexo-renderer-markdown-it plugin

npm i hexo-renderer-markdown-it --save

Site configuration additions

#_config.yml

markdown:
  preset: "default"
  render:
    html:true
    xhtmlOut: false
    langPrefix: "language-"
    breaks: true
    linkify: true
    typographer: true
    quotes: """''"
  enable_rules:
  disable_rules:
  plugins:
    - markdown-it-abbr
    - markdown-it-cjk-breaks
    - markdown-it-deflist
    - markdown-it-emoji
    - markdown-it-footnote
    -markdown-it-ins
    -markdown-it-mark
    -markdown-it-sub
    -markdown-it-sup
    - markdown-it-checkbox
    - markdown-it-imsize
    -markdown-it-expandable
    - name: markdown-it-container
      options: success
    - name: markdown-it-container
      options: tips
    - name: markdown-it-container
      options: warning
    - name: markdown-it-container
      options: danger
  anchors:
    level: 2
    collisionSuffix: ""
    permalink: false
    permalinkClass: "header-anchor"
    permalinkSide: "left"
    permalinkSymbol: "?"
    case: 0
    separator: "-"

Install the following plugins

npm i markdown-it-checkbox

npm i markdown-it-imsize

npm i markdown-it-expandable

Next Configuration

Next provided by default only provides some functions, we can modify the default configuration to expand, create a new _config.next.yml theme configuration file in the project root directory, the configuration in this file takes precedence over the next theme _config.yml.

Replace layout

The default layout used by next is Muse. Here I use Mist. # represents comments. Copy and paste the contents into _config.next.yml.

#_config.next.yml

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

Menu item

Modifications can be added as needed, and no comments on the displayed menu items are required.

#_config.next.yml

menu:
  home: / || fa fa-home # Home page
  tags: /tags/ || fa fa-tags # tags
  categories: /categories/ || fa fa-th # Categories
  archives: /archives/ || fa fa-archive # Archive
  schedule: /schedule/ || fa fa-calendar # schedule
  sitemap: /sitemap.xml || fa fa-sitemap # Sitemap
  about: /about/ || fa fa-user # About
  commonweal: /404/ || fa fa-heartbeat # 404

# Enable / Disable menu icons / item badges.
menu_settings:
  icons: true # Whether to display icons
  badges: false # Whether to display the number of articles in the upper right corner

At this point, when we click the menu item, we will find that all menu items except the home page and archive will lose pages, because we have not created the corresponding page, use hexo new page page name

hexo new page tags # Create a tag page

hexo new page categories # Create a category page

hexo new page about # Create about page

At this time, source will have several more folders corresponding to it.

Now that there are tags and categories, how do we tag and classify articles? Taking category as an example, we find index.md under source/categories/ and modify it The content is

# source/categories/index.md

---
type: categories
title: article classification
date: 2022-10-19 13:30:10
---

You can see that a type field has been added to indicate that this Markdown file is used for classification, so that when our articles want to be classified, we can do this

# source/_posts/Personal blog construction - based on Hexo + Next + Github.md

---
title: Personal blog building - based on Hexo + Next + Github
categories:
  - Site construction # Specify the category
date: 2022-10-21 09:21:00
description: Build your first blog based on the Hexo framework, with the Next theme, and with the Github Pages free service, so that others can also access your blog! # add article description
---

Add local search

Install the search plugin

npm install hexo-generator-search

Add content to site configuration file

#_config.yml

search:
  path: search.xml # Search path, search.xml is the search file generated by the plug-in by default
  field: post # Search type
  content: true # Whether to enable searching for article content
  template: ./search.xml

Enable local search for topics and add content

# _config.next.yml

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

Modify website icon

There is no need to add the following configuration. In the theme/next/source/images directory, copy the icon you want to use and rename it to favicon-16x16-next.png and favicon-32x32-next.png

favicon:
  small: /images/favicon-16x16-next.png
  medium: /images/favicon-32x32-next.png
  apple_touch_icon: /images/apple-touch-icon-next.png
  safari_pinned_tab: /images/logo.svg
  #android_manifest: /manifest.json

Add copyright

# _config.next.yml

creative_commons:
  license: by-nc-sa #Protocol used
  # Available values: big | small
  size: small # size
  sidebar: false # Whether the sidebar is displayed
  post: true # Whether the article is displayed
  language: zh-CN # language

After configuration, it is as follows

[External link image transfer failed. The source site may have an anti-leeching mechanism. It is recommended to save the image and upload it directly (img-WLhV9vKI-1692548038313)(http://qkc148.bvimg.com/18470/e82c64e56b76f575.png ‘Set domain name’ )]

Configure sidebar

# _config.next.yml

sidebar:
  position: right # Sidebar position
  display: hide # The sidebar is hidden by default
  padding: 18
  offset: 12

avatar:
  url: /images/Only_Me_Edit.png # Avatar path
  rounded: true # Whether to display round avatars
  rotated: false # Whether the mouse is rotated when moved into it

site_state: true # Whether to display logs, categories, etc.

# Set social links, which can be added and deleted
social:
  GitHub: https://github.com/yuanyxh || fab fa-github
  QQ: http://wpa.qq.com/msgrd?v=3 & amp;uin=725441272 & amp;site=qq & amp;menu=yes || fa-brands fa-qq
  Nuggets: https://juejin.cn/user/2881148117060749 || fa-solid fa-layer-group
  #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
  #StackOverflow: https://stackoverflow.com/yourname || fab fa-stack-overflow
  #YouTube: https://youtube.com/yourname || fab fa-youtube
  #instagram: https://instagram.com/yourname || fab fa-instagram
  #Skype: skype:yourname?call|chat || fab fa-skype

social_icons:
  enable: true # Whether to enable the icon corresponding to the social link
  icons_only: false # Whether to display only icons
  transition: false

Display article word count and reading time

Install the hexo-symbols-count-time plugin

npm install hexo-symbols-count-time

Site configuration

# _config.yml

symbols_count_time:
  symbols: true # Enable word count
  time: true # Enable reading time estimation
  total_symbols: true #Total number of characters
  total_time: true # Total time
  exclude_codeblock: false # Whether to include code blocks
  awl: 4
  wpm: 275
  suffix: "mins."

Theme configuration

# _config.next.yml

symbols_count_time:
  separated_meta: true
  item_text_total: false

Add timeliness tips to articles

Create a new /scripts/injector.js file in the root directory and write the following content

//Inject article expiration prompts
hexo.extend.injector.register('body_end', `<script src="/js/outdate.js"></script>`,'post')

Create a new /source/js/outdate.js file and write the content

(function() {<!-- -->
  // Different dates display different styles, 200 days is a yellow prompt, 400 days is a red prompt, you can define it yourself.
  let warningDay = 200;
  let errorDay = 400;
  // Make sure you can get the time of the article and the details page of the article
  let times = document. getElementsByTagName('time');
  if (times.length === 0) {<!-- --> return; }
  let posts = document. getElementsByClassName('post-body');
  if (posts.length === 0) {<!-- --> return; }

  // Get the current system time
  let pubTime = new Date(times[0].dateTime); /* article publishing timestamp */
  let now = Date.now() /* current timestamp */
  let interval = parseInt(now - pubTime)
  let days = parseInt(interval / 86400000)
  /* The publishing time exceeds the specified time (milliseconds) */
  //note warning and note danger are the custom template syntax of Next theme. If you use other themes, please change the style yourself to achieve the best display effect.
  if (interval > warningDay*3600*24*1000 & amp; & amp; interval < errorDay*3600*24*1000){<!-- -->
    posts[0].innerHTML = '<div class="note warning">' +
      '<h5>Article timeliness tips</h5><p>This is an article published ' + days + ' days ago, some information may have changed, please pay attention to screening.</p>' +
      '</div>' + posts[0].innerHTML;
    }else if(interval >= errorDay*3600*24*1000){<!-- -->
      posts[0].innerHTML = '<div class="note danger">' +
        '<h5>Article timeliness tips</h5><p>This is an article published ' + days + ' days ago, some information may have changed, please pay attention to screening.</p>' +
        '</div>' + posts[0].innerHTML;
    }
  })();

If the article is more than 200 days old, an outdated prompt will be displayed.

Add copy function to code block

Theme configuration added

# _config.next.yml

codeblock:
  copy_button:
    enable: true
    # Available values: default | flat | mac
    style: mac

Add comment system

Hexo blog advanced: add Waline comment system to Next theme
Waline official documentation

::: warning

Note
According to the official description of LeanCloud, the current international version no longer supports domestic access. For details, the shared domain name of the LeanCloud international version no longer provides services to mainland China.
:::

This means that domestic networks cannot obtain and publish comment data. This site may replace the comment system in the future. If you need other comment systems, please see the Next Document – Comment System

Website SEO optimization

SEO, that is, search engine optimization. The SEO optimization here mainly focuses on the size of the project and accelerating the loading time of the first screen of the site. In fact, it also depends on whether the site content is high-quality, the number of effective user visits, etc.

Compressed code

Install plugin

npm install hexo-neat --save

Site configuration added

# _config.yml

# Turn on compression
neat_enable: true
neat_html:
  enable: true
  exclude:
neat_css:
  enable: true
  exclude:
    - '**/*.min.css'
neat_js:
  enable: true
  mangle: true
  output:
  compress:
  exclude:
    - '**/*.min.js'
    - '**/index.js'

site included

How to get my site indexed by search engines
Next SEO

Website performance test

A good website must have good performance. If users have to wait for a long time to access your website, or the website page is stuck, user satisfaction will be reduced and a large number of users will be lost. Here we recommend a performance testing website specifically for Test website performance and generate statistical reports

PageSpeed Insights

Reference article

Detailed tutorial on building a personal website with GitHub + Hexo
Use of hexo blog site sitemap
Hexo Next theme advanced settings
Hexo Next 8.x theme adds toggleable dark mode
The optimization of the GitHub blog built by Hexo
Hexo chooses a more advanced Markdown renderer
Hexo-NexT loading performance optimization
Hexo blog advanced: Add article expiration/timeliness reminder for Hexo blog content of Next theme
Hexo + Next + Pages Personal Blog – SEO Optimization
Hexo Blog Advancement: Add Waline Comment System to Next Theme

9: Add article expiration – timeliness reminder/ to the -Next-theme’s -Hexo-blog content
9: https://www.linjiexin.com/post/blog-seo/
10: https://theme-next.js.org/docs/theme-settings/seo.html
11: https://qianfanguojin.top/2022/01/20/Hexo blog advancement: add-Waline-comment system for-Next-theme/
PageSpeed Insights: https://pagespeed.web.dev/?utm_source=psi & amp;utm_medium=redirect
Waline: https://waline.js.org/guide/get-started.html
LeanCloud CN: https://forum.leancloud.cn/t/2022-8/25408
Next Comments: https://theme-next.js.org/docs/third-party-services/comments