从零搭建 Blog
XiaoMa 博士生
  2022-11-03 21:17:45 2022-11-03 21:17   2023-04-14 04:13:23      1.6k 字  

本文使用的是 GitHub Page + Hexo 框架 + NexT 主题。

本地搭建

环境安装

安装完成后，Win+R 输入cmd打开，依次输入node -v、npm -v、git --version并回车，出现程序版本号即可。

本地安装 Hexo 博客程序

首先新建一个文件夹来存放 Hexo 的程序文件，如~/Blog/。打开该文件夹，右键，Git Bash Here。

安装 Hexo

1
npm install -g hexo-cli

Hexo 初始化

1
2
hexo init    # 初始化
npm install  # 安装组件

启动本地服务器预览

1
2
hexo g  # 生成页面
hexo s  # 启动预览

访问 http://localhost:4000，出现 Hexo 默认页面，本地博客安装成功。

推送到 Github

安装hexo-deployer-git插件

1
npm install hexo-deployer-git --save

运行以下命令：

1
2
hexo clean
hexo g --d

【注】有时会因为网络问题出现错误，再来一次或更换网络后再来一次即可。

Blog 装修

更换主题

在本地目录打开 Git Bash Here，输入下面命令行：

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

然后编辑站点配置文件中的 theme 为新主题名称 next。

【注】目前有三个 NexT 主题仓库，分别是不同的作者在做，注意辨别找新版。

常用命令

1
2
3
4
5
6
hexo new "name"   # 新建文章
hexo g            # 生成页面
hexo d            # 部署
hexo s            # 本地预览
hexo clean        # 清楚缓存和已生成的静态文件
hexo help         # 帮助

添加【关于】【标签】【分类】页

在主目录下 Git Bash Here 如下命令：

1
2
3
hexo new page about
hexo new page tags
hexo new page categories

！一定要小写。嫌不美观可以去 .md 文件中修改 title。

分别在~/source/xxx/index.md中的头文件下面加上↓

1
2
3
type: about
type: tags
type: categories

设置阅读全文

  • 在文章中使用<!-- more -->手动进行截断

  • 在文章的front-matter中添加description并提供文章摘录

对文章进行加密

首先安装hexo-blog-encrypt

1
npm install --save hexo-blog-encrypt

将password添加到头文件

1
2
3
4
5
title: Hello World
date: 2020-03-13 21:12:21
password: muyiio
abstract: This blog is encrypted
message: You must enter the password to read

标签图标设置

修改文章底部的 # 标签：修改模板/themes/next/layout/_macro/post.swig，搜索 rel="tag">#，将其中的 # 换成<i class="fa fa-tag"></i>

去除默认设置的标题下划线

打开并编辑~/themes/next/source/css/_schemes/Gemini/index.styl文件，找到border-bottom，改成0px即可。

添加字数统计和阅读时长

安装hexo-symbols-count-time

1
npm install hexo-symbols-count-time --save

在站点配置文件添加如下配置

1
2
3
4
5
6
symbols_count_time:
    symbols: true               # 文章字数统计
    time: true                  # 文章阅读时长
    total_symbols: true         # 站点总字数统计
    total_time: true            # 站点总阅读时长
    exclude_codeblock: false    # 排除代码字数统计

在主题配置文件添加如下配置（有的话可以直接在上面修改）

1
2
3
4
5
6
7
8
9
# Post wordcount display settings
# Dependencies: https://github.com/next-theme/hexo-symbols-count-time
symbols_count_time:
  separated_meta: true    # 是否另起一行（true 的话不和发表时间同一行）
  item_text_post: true    # 首页文章统计数量前是否显示文字描述（本文字数、阅读时长）
  item_text_total: true   # 页面底部统计量前是否显示文字描述（站点总字数、站点阅读时长）
  awl: 4                  # 平均字数长度，CN≈2
  wpm: 275                # word per minute（每分钟阅读词数）
  suffix: “mins.”

【注】如果没有显示出来，hexo clean一下。至于hexo-wordcount不知道为什么一直配置不好。

本地搜索

安装hexo-generator-searchdb --save

1
npm install hexo-generator-searchdb --save

在站点配置文件添加如下配置

1
2
3
4
5
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

在主题配置文件中，Ctrl + F找到local_search，设置为true

1
2
3
4
5
6
7
8
9
10
11
12
13
# 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

代码样式

修改样式参考：https://theme-next.js.org/highlight/

编辑站点配置文件，搜索highlight，根据上述网址提示，进行修改。

1
2
3
4
5
6
7
8
9
10
11
12
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，根据上述网址提示，进行修改。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
codeblock:
  # Code Highlight theme
  # All available themes: https://theme-next.js.org/highlight/
  theme:
    light: default
    dark: stackoverflow-dark
  prism:
    light: prism
    dark: prism-dark
  # Add copy button on codeblock
  copy_button:
    enable: true
    # Available values: default | flat | mac
    style: mac

主题配置文件

设置网站图标

在主题配置文件中，Ctrl + F找到favicon，对应后面的地址，进行图片替换即可。

设置头像

在主题配置文件中，Ctrl + F找到avatar，对应后面的地址，进行图片替换即可。

设置菜单

在主题配置文件中，Ctrl + F找到menu，将前面的#去掉即可。

1
2
3
4
5
6
7
8
9
menu:
  home: / || fa fa-home
  about: /about/ || fa fa-user
  tags: /tags/ || fa fa-tags
  categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive
  #schedule: /schedule/ || fa fa-calendar
  #sitemap: /sitemap.xml || fa fa-sitemap
  #commonweal: /404/ || fa fa-heartbeat

添加友情链接

编辑主题配置文件，添加：

1
2
3
4
5
6
7
8
9
links_settings:
  icon: fa fa-globe
  title: 友链
  # Available values: block | inline
  layout: block

links:
  #Title: https://example.com
  Program-Think: https://program-think.blogspot.com/#/

修改建站时间

编辑主题配置文件，Ctrl + F找到since，将#去掉，改年份即可。

1
2
footer:
	since: 2022

修改底部跳动的心

1
2
3
footer:
	icon:
		animated: true

设置背景动画

编辑主题配置文件，Ctrl + F找到canvas，将false修改为true。

1
2
canvas_ribbon:
	enable: true

添加背景动画

【注】这个暂时还未设置成功（2022/07/23）

访客统计

编辑主题配置文件，Ctrl + F找到busuanzi_count，将false修改为true。

配置回到顶部按钮

编辑主题配置文件，Ctrl + F找到back2top，将false修改为true，边栏和滚动百分比按需求添加。

隐藏网页底部 Hexo 强力驱动

编辑主题配置文件，Ctrl + F找到copyright，将true修改为false。

1
2
3
copyright:
# Powered by Hexo & NexT
powered: false

文章顶部显示更新时间

编辑主题配置文件，Ctrl + F找到updated_at，将false修改为true。

1
2
3
4
5
6
7
8
# Post meta display settings
post_meta:
  item_text: true
  created_at: true
  updated_at:
    enable: true
    another_day: true
  categories: true

编辑文章头文件，增加关键字updated。（NexT 可以根据文章改变时间自动更改）

1
2
3
4
5
---
layout: layout
title: 关于
date: 2017-08-18 15:41:18
updated: 2017-09-05 20:18:54   #手动添加更新时间

站点配置文件

设置作者昵称

编辑站点配置文件，设置author为自己的昵称

站点描述

编辑站点配置文件，设置description字段为站点描述。

  • 本文标题：从零搭建 Blog
  • 本文作者：XiaoMa
  • 创建时间：2022-11-03 21:17:45
  • 本文链接：2022/11/03/008-从零搭建-Blog/
  • 版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
  1. 1. 本地搭建
    1. 1.1. 环境安装
    2. 1.2. 本地安装 Hexo 博客程序
      1. 1.2.1. 安装 Hexo
      2. 1.2.2. Hexo 初始化
      3. 1.2.3. 启动本地服务器预览
  2. 2. 推送到 Github
  3. 3. Blog 装修
    1. 3.1. 更换主题
    2. 3.2. 常用命令
    3. 3.3. 添加【关于】【标签】【分类】页
    4. 3.4. 设置阅读全文
    5. 3.5. 对文章进行加密
    6. 3.6. 标签图标设置
    7. 3.7. 去除默认设置的标题下划线
    8. 3.8. 添加字数统计和阅读时长
    9. 3.9. 本地搜索
    10. 3.10. 代码样式
    11. 3.11. 主题配置文件
      1. 3.11.1. 设置网站图标
      2. 3.11.2. 设置头像
      3. 3.11.3. 设置菜单
      4. 3.11.4. 添加友情链接
      5. 3.11.5. 修改建站时间
      6. 3.11.6. 修改底部跳动的心
      7. 3.11.7. 设置背景动画
      8. 3.11.8. 添加背景动画
      9. 3.11.9. 访客统计
      10. 3.11.10. 配置回到顶部按钮
      11. 3.11.11. 隐藏网页底部 Hexo 强力驱动
      12. 3.11.12. 文章顶部显示更新时间
    12. 3.12. 站点配置文件
      1. 3.12.1. 设置作者昵称
      2. 3.12.2. 站点描述