hexo + github pages 打造你自己的博客

发表于2020-09-07更新于2023-01-10字数统计2.4k阅读时长19分阅读次数

前言

一周前手贱，spark.write.mode("overwrite").save("xxx") 覆盖了家目录，导致大部分代码和博客源文件被删除，mac 的个性化配置基本上也都没了，欲哭无泪，生活还要继续。一切从头再来吧，本文记录重新搭建博客的过程，踩坑甚多（主要是 next 7.x 相比以前的版本更改了很多配置项）。本文主要参考了 小丁的博客。

tips: 强烈建议大家一定要备份，备份，备份！

hexo

hexo 安装

创建 github pages 和创建普通的 github 仓库没太大区别（记住仓库名称是 username.github.io 就行了），这里就不在赘述了。以下的安装基于 mac，其实都差不多，现在的操作系统都提供了良好的包管理工具用于简化软件的安装。

  • 安装 node 和 npm
    1
    brew install node
    如果你想安装其他版本的 node，可以使用 brew search node ，找到对应的版本包然后安装。
  • 安装 hexo 
    1
    npm install -g hexo-cli
  • hexo init
    hexo 初始化并自动创建博客目录，根据提示，初始化完成后，进入到博客目录，执行 npm install
    1
    hexo init Flyraty.github.io
  • 常用命令
    1
    2
    3
    4
    5
    hexo d -g 生成并部署
    hexo s 本地部署
    hexo g 生成站点
    hexo clean
    hexo new 新建文章

基础配置

一下是一些基础配置，主题选择，页面布局等，我们只需要记住两个配置文件就行了。

  • 站点配置文件 _config.yml
  • 主题配置文件 themes/主题名/_config.yml，我这里就是 themes/next/_config.yml
next 安装

下载解压放入 themes 目录或者 git clone。

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

推荐 git 的方式，可以持续跟进更新 next。也可以用 git submoudle 维护。

1
2
3
git stash
git pull
git stash pop
启用 next

编辑站点配置文件，修改 theme 选项。

1
theme: next
更换 Schema

next 主题同样有好几种模板，这里选用的是 Gemini，因为文章间的界限比较清晰。

1
2
3
4
5
# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini
新建标签，分类，关于页面

会在 source 目录下生成对应的文件夹。这几个页面也是 markdown 文件，你可以自由编辑，比如关于页面。

1
2
3
hexo new page tag
hexo new page categories
hexo new page about
设置站点语言

修改站点配置文件，如果你发现配置不管用的话，可以查看下 themes/next/languages 目录，看下是否存在 zh-Hans.yml 或者 zh-CN.yml。如果只存在 zh-CN.yml，重命名成 zh-Hans.yml 即可。

1
language: zh-Hans
设置侧边栏菜单

修改主题配置文件，想显示哪个菜单，把对应的注释去掉就行。

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
sidebar:
  # Sidebar Position.
  position: left
  #position: right
头像

修改主题配置文件，可以选择是否圆框，是否鼠标点击头像旋转。

1
2
3
4
5
6
7
8
# Sidebar Avatar
avatar:
  # Replace the default image and set the url here.
  url: https://avatars2.githubusercontent.com/u/24888835?s=400&u=20f46b828b9ee5d5a93dfce95ec7c01d07cff6cf&v=4
  # If true, the avatar will be dispalyed in circle.
  rounded: true
  # If true, the avatar will be rotated with the cursor.
  rotated: true
站点描述

修改站点配置文件，主要是站点名称，描述，关键字，作者这些

1
2
3
4
5
6
7
8
9
# Site
title: TimeMachine Notes
subtitle: '愿一直遇到有趣的人和事'
descriptin: '于离别之朝束起约定之花'
keywords: 大数据,bigdata,Mac,Linux,生活,life
author: 时光机
language: zh-Hans
timezone: Asia/shanghai

开启阅读数，字数统计

修改主题配置文件

1
2
3
4
5
6
7
8
# Post wordcount display settings
# Dependencies: https://github.com/theme-next/hexo-symbols-count-time
symbols_count_time:
  separated_meta: true
  item_text_post: true
  item_text_total: false
  awl: 4
  wpm: 275
不蒜子统计

添加站点统计，比如 uv，pv 这些，可以选择百度统计，谷歌统计，不蒜字等。可以参考官方文档。这里选用了不蒜子
修改主题配置文件

1
2
3
4
5
6
7
8
busuanzi_count:
  enable: true
  total_visitors: true
  total_visitors_icon: fa fa-user
  total_views: true
  total_views_icon: fa fa-eye
  post_views: true
  post_views_icon: fa fa-eye
添加搜索栏

安装搜索插件

1
2
npm install hexo-generator-searchdb --save

修改站点配置文件，添加 search 配置

1
2
3
4
5
6
# search
search:
  path: search.xml
  field: post
  format: html
  limit: 10000
RSS 订阅

安装插件

1
2
npm install hexo-generator-feed --save

修改站点配置文件，添加以下内容

1
2
3
4
5
6
7
8
9
# RSS
# feed
# Dependencies: https://github.com/hexojs/hexo-generator-feed
feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:

修改主题配置文件

1
2
3
4
5
follow_me:
  #Twitter: https://twitter.com/username || fab fa-twitter
  #Telegram: https://t.me/channel_name || fab fa-telegram
  #WeChat: /images/wechat_channel.jpg || fab fa-weixin
  RSS: /atom.xml || fa fa-rss
相关文章

安装插件

1
npm install hexo-related-popular-posts --save

修改主题配置文件

1
2
3
4
5
6
7
8
9
10
related_posts:
  enable: true
  title: 相关文章推荐# Custom header, leave empty to use the default one
  display_in_home: false
  params:
    maxCount: 5
    #PPMixingRate: 0.0
    #isDate: false
    #isImage: false
    isExcerpt: fals
社交地址

修改主题配置文件，用自带的图标其实就可以了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
social:
  GitHub: https://github.com/Flyraty || fab fa-github
  Zhihu: https://www.zhihu.com/people/zhang-hai-liang-83-28 || fab fa-zhihu
  E-Mail: 139hailiangabc@gmail.com || 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
  icons_only: false
  transition: false
自动生成摘要

自动生成摘要在 next7 中被去除掉了。不想显示全文的话，有两种方式控制，建议第一种方式

  • <!--more-->，会显示之前的内容，之后的内容不会显示
  • 文章 meta 中添加 description字段
    不要在设置啥 auto_encrypt 了。。。
添加 Disqus 评论系统

访问 disqus.com，选择 i want to install disqus on my site。然后跟着提示一步步走，只需要记住自己的 shortname 即可。
修改主题配置文件

1
2
3
4
5
6
 Disqus
disqus:
  enable: true
  shortname: flyraty
  count: true
  #post_meta_order: 0
部署到 git

安装插件

1
npm install hexo-deployer-git --save

修改站点配置文件，部署站点，如果你以前没有使用过 git 的话，最好配置下 SSH

1
2
3
4
5
deploy:
  - type: git
    repo: git@github.com:Flyraty/Flyraty.github.io.git
    branch: master

直接 hexo d -g 并不会把你的博客源文件，比如文章 markdown push 到仓库，只是生成 public 下的静态 html push 到了站点进行渲染。此处建议新开一分支 hexo ，push 站点源文件到 hexo 分之上用于备份，可以把 hexo 分支设置为默认分支。

美化

代码框风格，并添加复制按钮

修改主题配置文件，设置 theme 和 style

1
2
3
4
5
6
7
8
9
10
11
12
codeblock:
  # Code Highlight theme
  # Available values: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
  # See: https://github.com/chriskempson/tomorrow-theme
  highlight_theme: night
  # Add copy button on codeblock
  copy_button:
    enable: true
    # Show text copy result.
    show_result: true
    # Available values: default | flat | mac
    style: mac
动态背景图片

新建 source/_date/styles.styl，添加如下代码，如果想要设置动态背景效果，只需要将 background:url替换成一个动态背景接口就行了。
设置了背景图片，可能会导致文字看不到，所以需要设置透明度。
tips: 推荐图片网址 https://wallhaven.cc/

styles.styl> 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// 设置背景图片
body {
    background:url(/images/girl.jpg);
    background-repeat: no-repeat;
    background-attachment:fixed; //不重复
    background-size: cover;      //填充
    background-position:50% 50%;
}

//博客内容透明化
//文章内容的透明度设置
.content-wrap {
  opacity: 0.9;
}

//侧边框的透明度设置
.sidebar {
  opacity: 0.9;
}
//菜单栏的透明度设置
.header-inner {
  background: rgba(255,255,255,0.9);
}
//搜索框（local-search）的透明度设置
.popup {
  opacity: 0.9;
}

修改主题配置文件，打开自定义 styles.styl 设置

1
2
custom_file_path:
	style: source/_data/styles.sty
页面动画效果

hexo 内置了一些页面动态效果。如果想打开的话，只需要在主题配置文件里搜索打开即可。

  • canvas_nest
  • canvas_ribbon
  • three_waves

比如 canvas_nest

1
2
3
4
5
6
7
8
9
# Canvas-nest
# Dependencies: https://github.com/theme-next/theme-next-canvas-nest
canvas_nest:
  enable: false
  onmobile: true # display on mobile or not
  color: "0,0,255" # RGB values, use ',' to separate
  opacity: 0.5 # the opacity of line: 0~1
  zIndex: -1 # z-index property of the background
  count: 99 # the number of lines
页面顶部加载阅读进度条

修改主题配置文件

1
2
3
4
5
6
7
# Reading progress bar
reading_progress:
  enable: true
  # Available values: top | bottom
  position: top
  color: "#37c6c0"
  height: 3px
文章阅读进度条

安装插件

1
npm install hexo-cake-moon-menu --save

修改主题配置文件，添加如下内容

1
2
3
4
5
6
7
8
9
10
11
moon_menu:
  back2top:
    enable: true
    icon: fa fa-chevron-up
    func: back2top
    order: -1
  back2bottom:
    enable: true
    icon: fa fa-chevron-down
    func: back2bottom
    order: -2

next 自带了文章阅读进度条（pace 配置），但是不如这个插件好看。

鼠标点击烟花效果

参考 小丁的博客

修改页面布局为圆角

新建 source/_data/variables.styl

1
2
3
// 圆角设置
$border-radius-inner     = 20px 20px 20px 20px;
$border-radius           = 20px;

修改主题配置文件，打开自定义 variables.styl 的设置

1
2
custom_file_path:
	variable: source/_data/variables.sty
添加粒子时钟

参考 小丁的博客

去掉底部·强力驱动·

修改主题配置文件

1
2
footer:
	power: false
关于页面显示 github commit chart

参考 小丁的博客

优化加速

启用 FastClick

修改主题配置文件

1
fastclick: true

修改主题配置文件，quickclick 用于资源文件的预加载

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
quicklink:
  enable: true

  # Home page and archive page can be controlled through home and archive options below.
  # This configuration item is independent of `enable`.
  home: true
  archive: true

  # Default (true) will initialize quicklink after the load event fires.
  delay: true
  # Custom a time in milliseconds by which the browser must execute prefetching.
  timeout: 3000
  # Default (true) will enable fetch() or falls back to XHR.
  priority: true

  # For more flexibility you can add some patterns (RegExp, Function, or Array) to ignores.
  # See: https://github.com/GoogleChromeLabs/quicklink#custom-ignore-patterns
  ignores:

SEO

主要就是生成站点地图并提交百度和谷歌收录，生成永久链接，参考 https://flyraty.github.io/posts/cfd1b897/

参考

小丁的博客

使用搜索：谷歌必应百度