Pages Hexo blog summary

Reference: https://blog.csdn.net/yaorongke/article/details/119089190
Hexo Fluid Homepage: https://hexo.fluid-dev.com/docs/
Hexo Fluid Configuration: https://hexo.fluid-dev .com/docs/guide/#%E5%B1%95%E7%A4%BA-pv-%E4%B8%8E-uv-%E7%BB%9F%E8%AE%A1

What is Hexo Fluid?

Hexo Fluid is a high performance static site generator. It quickly builds elegant, customizable static websites using a simple, extensible syntax. It provides a clean and fast development process that allows you to quickly build scalable sites.

1. Create a GitHub account

Just register on the official website

2. Install Git

Official website download

3. Install NodeJs

Enter nodejs official website to download

4. Create a project repository

Create a project locally, create a project directory at random, and add the index.html file to the directory

After the creation is complete, submit the code

git init
git add .
git commit -m "first commit"
git remote add origin [远程地址]
git push -u origin master

Note: The name of the project library in GitHub must be the same as the user name,
and the suffix is ​​username.github.io format,
because when the github page is parsed, it is the warehouse name of this username.github.io,
which is very important.

Click on the address to enter the test page

5. Create a Hexo blog site

What is Hexo?

Hexo is a NodeJS-based static blog website generator. It is
very convenient to use Hexo to generate a personalized blog website with some necessary configurations without development.

Official website address: https://hexo.io/zh-cn/docs/

Hexo project installation steps

1.安装脚手架
npm install -g hexo-cli
查看版本
hexo -v
2.创建项目，并初始化
hexo init hexo-blog
cd hexo-blog
3.安装依赖
npm install
4.本地启动
hexo serve

6. Change the theme

There are two ways to install (not considering Next)

Reference: Fluid theme installation

Download the latest release version and extract it to the themes directory

Rename the extracted folder to fluid

Modify _config.yml in the Hexo blog directory

theme: fluid     // 指定主题
language: zh-CN  // 指定语言，会影响主题显示的语言，按需修改

In the project directory, create an "About Page"

hexo new page about

After the creation is successful, edit /source/about/index.md under the blog directory and add the layout attribute

title: about
layout: about
这里写关于页面的正文，支持 Markdown, HTML

local start

hexo g -d  // 编译静态文件代码
hexo s     // 重启服务

7. Create articles

Modify _config.yml
to open this configuration to generate a resource directory with the same name when generating articles
to store image files

post_asset_folder: true

Execute the following command to create a new article named my article

hexo new post 我的文章

8. Introduce pictures

方式一：
{
    
    % asset_img test.png 图片引用方法一 %}

方式二：
![图片引用方法二](test.png)

Note: To embed images using Markdown, you need to enable:

_config.yml
post_asset_folder: true
marked:
  prependRoot: true
  postAsset: true

Then:

编译
hexo g -d

启动服务
hexo s   

to take effect.

9. Personalized page display

The title and other positions of the page display the default text, which can be changed to display some personalized information.

browser tab page name

_config.yml
title: 我的博客    // 浏览器tab页名称

blog title

The blog_title field in _config.yml under the theme directory themes\fluid

blog_title:"标题测试"

Text in the middle of the homepage

The text field in _config.yml under the theme directory themes\fluid.

text: "说明测试文字"

10. Add reading statistics

Apply for a LeanCloud account and create an application

Enter the home page to register an account

Real-name authentication, after completion, use various services

to verify the email address

Create an application, select the development version

to enter the application 设置->应用凭证, find AppID, AppKeyandserver_url

into the file themes/fluid/_config.ymlconfiguration AppID, AppKeyandserver_url

web_analytics:  # 网页访问统计
  enable: false # 默认为false，启用网页统计改为true即可
  ……
  leancloud:  # LeanCloud 计数统计，可用于 PV UV 展示，如果 web_analytics.enable 没有开启，PV UV 展示只会查询，不会增加
    app_id: xxxxxxx
    app_key: xxxxxxx
    server_url: xxxxxxx

Set pageview count

# Number of visits
views:
  enable: true
  # 统计数据来源
  # Data Source
  # Options: busuanzi | leancloud
  source: "leancloud"
  format: "{} 次"

Set PV and UV statistics

footer:
  statistics:
    enable: false
    source: "busuanzi"  # 可选 leancloud | busuanzi  根据自己需求选择
    pv_format: "总访问量 {} 次"  # 显示的文本，{}是数字的占位符（必须包含)，下同
    uv_format: "总访客数 {} 人"

11. Add comment function

themes\fluidOpen _config.ymlthe file under the theme directory and modify the following configuration

# 评论插件
# Comment plugin
comments:
  enable: false
  # 指定的插件，需要同时设置对应插件的必要参数
  # The specified plugin needs to set the necessary parameters at the same time
  # Options: utterances | disqus | gitalk | valine | waline | changyan | livere | remark42 | twikoo | cusdis | giscus
  type: disqus

Enable comment plugin

# Valine
# 基于 LeanCloud
valine:
  appId: xxxxxxxxx
  appKey: xxxxxxxxx
  path: window.location.pathname
  placeholder: 请输入……

Redeploy, check the page effect, and enable the comment function

12. Publish to GitHub Pages

Install hexo-deployer-git

npm install hexo-deployer-git --save

Modify _config.yml in the root directory to configure GitHub related information

deploy:
  type: git
  repo: https://github.com/xxxxxxx/xxxxxxx.github.io.git
  branch: main
  token: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

The tokens are personal access tokens of GitHub, and the acquisition method is as shown in the figure below

package, deploy

hexo g -d

Enter the Git Page, set the page display branch,

enter the page, load the page, and that's it.

13. Summary of special operations of Hexo

Hexo settings are saved and the page is automatically refreshed

I often debug the Hexo theme locally. If there is a tool that can monitor file changes and automatically refresh the page, it will definitely improve a lot of efficiency. Browsersync is such a browser synchronization testing tool.

Reference: https://helloblack2017.github.io/2018/04/16/hexo-browsersync/

Install Browsersync

Browsersync has a lot of dependent packages. It is recommended to add sudo on Mac and Linux to avoid errors due to insufficient permissions during installation.

npm install -g browser-sync

Execute the following command after the installation is complete, if the corresponding version is displayed, the installation is successful

browser-sync --version

Install the Hexo side plugin

To apply Browsersync to Hexo, you also need to install a small plug-in hexo-browsersync. Enter the Hexo root directory on the command line and execute the following command

npm install hexo-browsersync --save

After installation, execute hexo s as usual to start the local server. When related files are modified or saved, the associated browser page will refresh itself

insufficient

1. After the change, the entire page will be reloaded and cannot be partially refreshed;
2. When using Hexo's own server, it cannot be debugged on the mobile terminal;
3. Occasionally, an error will be reported, and it needs to be saved several times;

14. Hexo Fluid configuration

guide

site configuration

_config.yml in the Hexo blog directory

theme configuration

theme/fluid/_config.ymlor_config.fluid.yml

sourceThe directories mentioned in this guide all refer to the folders under the blog directory , and it is not recommended to modify the directories in the theme sourcesource

Every time regardless hexo gof or hexo s, it is best to hexo cleanclear

The page result is hexo ssubject to . Most of the abnormalities after deployment are caused by online caching. After confirming that there is no error, wait for a certain time and then it will be normal.

global

override configuration

Why do you want to configure 'override configuration' in the first place?

The reason is very simple. It is to achieve the function of "custom" project without affecting the logic of the original framework. After all, the framework is not written by ourselves, and many places are not understood. With "override configuration", even if there is a problem with the configuration Affects the project itself.

Creation method:

Create _config.fluid.ymla file and _config.ymlcopy all or part of the configuration of the theme

If you modify any theme configuration in the future, you only need to modify the configuration _config.fluid.ymlof

Notice:

If you want to check whether the override configuration has taken effect, you can hexo g --debugview

If you want to overwrite some configurations to empty, be careful not to delete the primary key, otherwise it cannot be overwritten, for example:

about:
  icons:  # 不要把 icon 注释掉，否则无法覆盖配置
    # - { class: 'iconfont icon-github-fill', link: 'https://github.com' }
    # - { class: 'iconfont icon-wechat-fill', qrcode: '/img/favicon.png' }