Blog实战搭建

2024.01.08 突然想简易搭建一个个人博客，存放自己之前的学习笔记，同时方便自己对之前开发的项目进行梳理。

博客搭建使用的是Hexo框架，主要是好看。

官方安装地址：https://hexo.io/zh-cn/docs/，如果不是很理解，直接看我友链（Fomalhaut）的环境部署文章：https://www.fomal.cc/posts/e593433d.html。

使用git生成ssh公钥，本地 .ssh/id_rsa.pub 文件下复制，在GitHub进行生成SSH key。

1
ssh-keygen -t rsa -C "你的邮箱"

接着进行测试

1
ssh -T git@github.com

这是我个人的GitHub相关代码仓库地址：xxx。

一、Vercel部署

Vercel是一个云计算平台，主要用于托管、构建和部署静态网站和单页面应用程序。

使用GitHub账户关联登录后，创建新项目，将GitHub仓库中存储静态博客的代码import进来。

将项目进行部署（deploy）后，跳转到控制面板。

接着将自己的域名添加解析记录，我个人购买的是阿里云的域名，在域名控制台/域名解析/解析设置里面，添加对应的解析记录（包括主机记录、记录类型、记录值）。

image-20240111150541195

接着就可以直接输入域名看到自己的个人博客初始界面了，这是不想买服务器的人的福音。

注意：在自己博客代码的_config.yml文件中需将url改成自己的新域名。

二、主题安装及设置

  • 安装butterfly主题：
1
npm i hexo-theme-butterfly

安装成功后可在blog-demo/node_modules文件夹下找到hexo-theme-butterfly文件夹。

  • 相关设置：

    • _config.yml文件中修改主题

      1
      theme: butterfly

    • 安装两个渲染器，是生成基础页面所需的依赖包

      1
      npm install hexo-renderer-pug hexo-renderer-stylus --save

    • 由于个人博客搭建完毕后，不会进行页面二次大改，因此需要减少主题升级后可能带来的问题

      找到blog-demo/node_modules/hexo-theme-butterfly中的 _config.yml文件，复制到根目录blog-demo下，

      这里重命名为_config.butterfly.yml。

  • 基础用法

    • Front-matter

      属性 含义
      title 页面标题
      date 创建日期
      type 标签、分类、友情链接需要配置
      comments 是否显示评论模块
      updated 更新日期
      description 描述

    • 标签页面

      1
      hexo new page tags

      在\source\tags\index.md下，添加type: “tags”。

    • 友情链接

      1
      hexo new page link

      在\source\link\index.md下，添加type: “link”

    • \source的_data创建一个link.yml文件（如果沒有 _data 文件夹，请自行创建），并写入相关信息，下面是我的参考信息：

      1

    • class_name: 1.技术支持
      class_desc: 本网站的搭建由以下开源作者提供技术支持
      link_list:
      - name: Hexo
      link: https://hexo.io/zh-cn/
      avatar: https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg
      descr: 快速、简单且强大的网志框架
      siteshot: https://source.fomal.cc/siteshot/hexo.io.jpg 

      1

    • 全局搜索

      1
      npm install hexo-generator-search --save

      _config.yml站点配置文件中进行对应修改。

      1
      2
      3
      4
      search:
          path: search.xml
          field: post
          content: true

  • 主题设置

    所有设置均在_config.butterfly.yml主题配置文件中进行选择配置

    • menu

      1
      2
      3
      4
      5
      6
      7
      8
      9
      首页: / || fas fa-home
        归档: /archives/ || fas fa-archive
        标签: /tags/ || fas fa-tags
        分类: /categories/ || fas fa-folder-open
        列表||fas fa-list:
          音乐: /music/ || fas fa-music
          视频: /movies/ || fas fa-video
        友链: /link/ || fas fa-link
        关于: /about/ || fas fa-heart

      并在source文件下创建对应的文件夹。

    • 其他设置

      属性 设置
      social 个人社交账号展示。
      error_404 报错页面
      local search 本地搜索
      favicon 网站图标
      avatar 头像
      cover 文章封面
      post_meta 文章相关属性
      toc 目录
      noticeOutdate 文章过期提醒
      canvas_nest true
      beautify 自定义大标题前面的图标
      hr_icon 分割线图标
      subtitle 副标题
      aside 侧边栏
      translate 语言转换
      darkmode 黑夜模式
      readmode 阅读模式
      aplayerInject 音乐插件
      snackbar 弹窗
      instantpage 预加载
      pangu 中英文之间加空格
      lazyload 图片懒加载
      index_img 文章主页图片

  • 上传与更新

    项目本地

    1
    hexo cl;hexo s

    部署GitHub

    1
    hexo cl;hexo g;hexo d

三、特色

3.1 live-2D看板

博客自带的看板娘，消耗资源少，因此使用。

以管理员身份安装对应依赖。

1
npm install --save hexo-helper-live2d

安装所喜欢的样式

1
npm install --save live2d-widget-model-wanko/live2d-widget-model-koharu

在站点配置文件_config.yml添加配置项：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# Live2D
## https://github.com/EYHN/hexo-helper-live2d
live2d:
  enable: true #开关插件版看板娘
  scriptFrom: local # 默认
  pluginRootPath: live2dw/ # 插件在站点上的根目录(相对路径)
  pluginJsPath: lib/ # 脚本文件相对与插件根目录路径
  pluginModelPath: assets/ # 模型文件相对与插件根目录路径
  # scriptFrom: jsdelivr # jsdelivr CDN
  # scriptFrom: unpkg # unpkg CDN
  # scriptFrom: https://npm.elemecdn.com/live2d-widget@3.x/lib/L2Dwidget.min.js # 你的自定义 url
  tagMode: false # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
  debug: false # 调试, 是否在控制台输出日志
  model:
    use: live2d-widget-model-wanko # npm-module package name
    # use: wanko # 博客根目录/live2d_models/ 下的目录名
    # use: ./wives/wanko # 相对于博客根目录的路径
    # use: https://npm.elemecdn.com/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json # 你的自定义 url
  display:
    position: left #控制看板娘位置
    width: 150 #控制看板娘大小
    height: 300 #控制看板娘大小
  mobile:
    show: false # 手机中是否展示

3.2 留言板

安装指令：

1
npm install hexo-butterfly-envelope --save

在站点配置文件_config.yml添加配置项：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# envelope_comment
# see https://akilar.top/posts/e2d3c450/
envelope_comment:
  enable: true #控制开关
  custom_pic:      
    cover: https://npm.elemecdn.com/hexo-butterfly-envelope/lib/violet.jpg #信笺头部图片
    line: https://npm.elemecdn.com/hexo-butterfly-envelope/lib/line.png #信笺底部图片
    beforeimg: https://npm.elemecdn.com/hexo-butterfly-envelope/lib/before.png # 信封前半部分
    afterimg: https://npm.elemecdn.com/hexo-butterfly-envelope/lib/after.png # 信封后半部分
  message: #信笺正文，多行文本，写法如下
    - 有什么想问的？
    - 有什么想说的？
    - 有什么想吐槽的？
    - 哪怕是有什么想吃的，都可以告诉我哦~
  bottom: 自动书记人偶竭诚为您服务！ #仅支持单行文本
  height: #1050px，信封划出的高度
  path: #【可选】comments 的路径名称。默认为 comments，生成的页面为 comments/index.html
  front_matter: #【可选】comments页面的 front_matter 配置
    title: 留言板
    comments: true

3.3 一图流

在source文件夹下新建css文件夹，创建一个css文件。

此css文件代码如下，主要是将顶部图和页脚不要的元素设置为透明。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/* 页脚与头图透明 */
#footer {
  background: transparent !important;
}
#page-header {
  background: transparent !important;
}

/* 白天模式遮罩透明 */
#footer::before {
  background: transparent !important;
}
#page-header::before {
  background: transparent !important;
}

/* 夜间模式遮罩透明 */
[data-theme="dark"] #footer::before {
  background: transparent !important;
}
[data-theme="dark"] #page-header::before {
  background: transparent !important;
}

接着在主题配置文件的inject配置项head中引入刚刚自己创建的css文件。

1
- <link rel="stylesheet" href="/css/custom.css" media="defer" onload="this.media='all'">

同时将index_img和footer_bg配置项取消头图与页脚图的加载项，避免冗余加载。

1
2
3
4
5
# The banner image of home page
index_img: 

# Footer Background
footer_bg: false

3.4 页脚徽标与计时器

安装插件：

1
npm install hexo-butterfly-footer-beautify --save

站点配置文件添加配置信息。

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
# footer_beautify
# 页脚计时器：[Native JS Timer](https://akilar.top/posts/b941af/)
# 页脚徽标：[Add Github Badge](https://akilar.top/posts/e87ad7f8/)
footer_beautify:
  enable:
    timer: true # 计时器开关
    bdage: true # 徽标开关
  priority: 5 #过滤器优先权
  enable_page: all # 应用页面
  exclude: #屏蔽页面
    # - /posts/
    # - /about/
  layout: # 挂载容器类型
    type: id
    name: footer-wrap
    index: 0
  # 计时器部分配置项（看你喜欢哪个，下载下来放到自己的source文件夹下）
  # 这是我的  
  runtime_js: /js/runtime.js
  # 徽标部分配置项
  swiperpara: 0 #若非0，则开启轮播功能，每行徽标个数
  bdageitem:
    - link: https://hexo.io/ #徽标指向网站链接
      shields: https://img.shields.io/badge/Frame-Hexo-blue?style=flat&logo=hexo #徽标API
      message: 博客框架为Hexo_v6.2.0 #徽标提示语
    - link: https://butterfly.js.org/
      shields: https://img.shields.io/badge/Theme-Butterfly-6513df?style=flat&logo=bitdefender
      message: 主题版本Butterfly_v4.3.1
    - link: https://vercel.com/
      shields: https://img.shields.io/badge/Hosted-Vercel-brightgreen?style=flat&logo=Vercel
      message: 本站采用多线部署，主线路托管于Vercel
    - link: https://dashboard.4everland.org/
    # https://img.shields.io/badge/Hosted-4EVERLAND-3FE2C1?style=flat&logo=IPFS
      shields: https://img.shields.io/badge/Hosted-4EVERLAND-22DDDD?style=flat&logo=IPFS
      message: 本站采用多线部署，备用线路托管于4EVERLAND
    - link: https://github.com/
      shields: https://img.shields.io/badge/Source-Github-d021d6?style=flat&logo=GitHub
      message: 本站项目由Github托管
    - link: http://creativecommons.org/licenses/by-nc-sa/4.0/
      shields: https://img.shields.io/badge/Copyright-BY--NC--SA%204.0-d42328?style=flat&logo=Claris
      message: 本站采用知识共享署名-非商业性使用-相同方式共享4.0国际许可协议进行许可
  swiper_css: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.css
  swiper_js: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.js
  swiperbdage_init_js: https://npm.elemecdn.com/hexo-butterfly-footer-beautify/lib/swiperbdage_init.min.js

对应的配置项说明如下。

参数 值 含义
priority 数值 过滤器优先级，数值越小，执行越早，默认为10，选填
enable.timer bool 【必选】计时器控制开关
enable.bdage bool 【必选】徽标控制开关
enable_page path 填写想要应用的页面,如根目录就填’/‘,分类页面就填 ’/categories/‘ ，默认为all
exclude path 填写想要屏蔽的页面，可以多个。仅当enable_page为’all’时生效。
layout.type id/class 挂载容器类型，填写id或class，不填则默认为id
layout.name text 【必选】挂载容器名称
layout.index 自然数 前提是layout.type为class，用来确认究竟排在第几个顺位
runtime_js url 【必选】页脚计时器脚本，可参考https://akilar.top/posts/b941af/
runtime_css url 自定义样式，预留开发者接口
swiperpara 数值 若非零，则开启轮播功能，此项表示每行最多容纳徽标个数，用来应对徽标过多显得页脚拥挤的问题
bdageitem.link url 页脚徽标指向的网站链接
bdageitem.shields url 【必选】页脚徽标对应的API，API具体写法示例参照https://akilar.top/posts/e87ad7f8/
bdageitem.message text 页脚徽标悬停时显示的信息
swiper_css url swiper的依赖
swiper_js url swiper的依赖
swiperbdage_init_js url swiper初始化方法

计时器后续需要下载自己的样式！

3.5 磁铁新版（失败）

安装插件：

1
npm i hexo-magnet --save

站点配置文件添加配置信息。

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
28
29
30
31
32
33
34
35
36
magnet:
  enable: true
  priority: 1
  enable_page: /
  type: categories
  devide: 2
  display:
    - name: 教程
      display_name: 小冰の魔改教程
      icon: 📚
    - name: 游戏评测
      display_name: 小冰の游戏评测
      icon: 🎮
    - name: 生活趣闻
      display_name: 小冰の生活趣闻
      icon: 🐱‍👓
    - name: vue
      display_name: 小冰の编程学习
      icon: 👩‍💻
    - name: 学习
      display_name: 小冰の读书笔记
      icon: 📒
    - name: 随想
      display_name: 小冰の胡思乱想
      icon: 💡
  color_setting:
    text_color: black
    text_hover_color: white
    background_color: "#f2f2f2"
    background_hover_color: "#b30070"
  layout:
    type: id
    name: recent-posts
    index: 0
  temple_html: '<div class="recent-post-item" style="width:100%;height: auto"><div id="catalog_magnet">${temple_html_item}</div></div>'
  plus_style: ""

3.6 置顶滚动栏

安装插件：

1
npm install hexo-butterfly-swiper --save

站点配置文件添加配置信息。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
swiper:
  enable: true # 开关
  priority: 5 #过滤器优先权
  enable_page: all # 应用页面
  timemode: date #date/updated
  layout: # 挂载容器类型
    type: id
    name: recent-posts
    index: 0
  default_descr: 再怎么看我也不知道怎么描述它的啦！
  swiper_css: /css/swiper.min.css #swiper css依赖
  swiper_js: /js/swiper.min.js #swiper js依赖
  custom_css: /css/swiperstyle.css # 适配主题样式补丁
  custom_js: /js/swiper_init.js # swiper初始化方法

3.7 文章双侧栏

安装插件：

1
npm i hexo-butterfly-article-double-row --save

站点配置文件添加配置信息。

1
2
butterfly_article_double_row:
  enable: true

在custom.css文件添加以下代码，解决文章数目奇数bug。

1
2
3
4
5
/* 翻页按钮居中 */
#pagination {
  width: 100%;
  margin: auto;
}

3.8 wowjs动画

安装插件：

1
npm install hexo-butterfly-wowjs --save

站点配置文件添加配置信息。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
wowjs:
  enable: true #控制动画开关。true是打开，false是关闭
  priority: 10 #过滤器优先级
  mobile: false #移动端是否启用，默认移动端禁用
  animateitem:
    - class: recent-post-item #必填项，需要添加动画的元素的class
      style: animate__zoomIn #必填项，需要添加的动画
      duration: 2s #选填项，动画持续时间，单位可以是ms也可以是s。例如3s，700ms。
      delay: 1s #选填项，动画开始的延迟时间，单位可以是ms也可以是s。例如3s，700ms。
      offset: 100 #选填项，开始动画的距离（相对浏览器底部）
      iteration: 2 #选填项，动画重复的次数
    - class: card-widget
      style: animate__zoomIn
  animate_css: https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/animate.min.css
  wow_js: https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/wow.min.js
  wow_init_js: https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/wow_init.js

3.9 GitCalendar

安装插件：

1
npm install hexo-filter-gitcalendar --save

站点配置文件添加配置信息。

1

四、图床

4.1 github+vercel

首先在GitHub上新建一个仓库，接着完成本地访问远程仓库的权限配置。

新建一个存放图片的文件夹，里面存放自己喜欢的图片。

进入Vercel控制面板新建项目，导入刚刚新建的GitHub仓库，部署。

进入项目的控制台，添加自己域名的二级域名，并在域名解析控制台添加对应的解析（也可以提前解析，二级域名的ip值和主域名一样）。

通过自定义域名+资源路径即可访问到对应的资源，例如下面的地址可以访问我的图片。

1
https://picbed.currysheep.cn/img/homepage/boating.jpg

注：更新图片，只要将图片存到对应的图片文件夹里面，然后更新GitHub仓库即可。

4.2 picgo

picgo：这是一个用于快速上传图片并获取图片 URL 链接的工具，关键是他可以与Typora配套一起使用，在粘贴图片的同时上传图片，十分方便！

在此链接https://github.com/Molunerfinn/PicGo/releases下载所需版本。