前言

这一次的博客，简洁实用为主，记录笔记为主，畅所记录，完全从零搭建。我删除了曾经的所有内容，所有旧项目归档保存不再发布，从零打造新博客


准备工作

博客搭建全程使用Git进行版本控制

下载安装Git、Node.js

1
2
3
新建文件夹作为博客根目录
npm config set registry https://registry.npmmirror.com // 更换npm源为阿里云镜像源
npm config get registry // 确认源



安装Hexo及基础插件

进入博客根目录

1
2
3
4
5
6
7
8
9
10
11
npm install hexo-cli -g // 安装Hexo指令集
hexo init // 初始化Hexo

git config --global user.email "" // 设置Git邮箱
git config --global user.name "" // 设置Git用户名

git init // 初始化Git仓库
git branch -m main // 更改branch名为main

npm install hexo-deployer-git // 安装git部署插件
npm install // 确保所有插件正常安装



连接GitHub

进入博客根目录

1
2
3
4
5
6
ssh-keygen -t rsa -C "邮箱" // 创建公钥
less ~/.ssh/id_rsa.pub // 查看公钥

"GitHub——头像——Settings——SSH and GPG keys——添加SSH key"

ssh -T git@github.com // 测试公钥

修改Hexo配置文件

1
2
3
4
deploy:
  type: 'git'
  repo:
    github: git@github.com:Onektas/Onektas.github.io.git,main



安装Butterfly主题

按喜好配置

1
https://butterfly.js.org/posts/21cfbf15/

推荐的插件

1
2
3
hexo-abbrlink
hexo-filter-nofollow
hexo-generator-sitemap



网站美化

博客根目录\themes\butterfly\source\css，创建”custom.css”

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
/* 滚动条美化 */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background-color: rgba(73, 177, 245, 0.2);
    border-radius: 1em;
}

::-webkit-scrollbar-thumb {
    background-color: #49b1f5;
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent);
    border-radius: 1em;
}

::-webkit-scrollbar-corner {
    background-color: transparent;
}

::-moz-selection {
    color: #fff;
    background-color: #49b1f5;
}


/* 鼠标指针美化 */

body {
    cursor: url(https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/img/default.cur), default;
}

a,
img {
    cursor: url(https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/img/pointer.cur), default;
}


/* 弹窗description */

#recent-posts>.recent-post-item>.recent-post-info:hover .content {
    position: fixed;
    width: inherit;
    max-width: 780px;
    margin: auto;
    left: 0;
    right: 0;
    top: 3%;
    border-radius: 10px;
    text-align: center;
    z-index: 100;
    content: attr(data-title);
    font-size: 18px;
    color: #fff;
    padding: 10px;
    background-color: rgba(73, 177, 245, 0.8);
    display: block;
    margin-bottom: .7rem;
}

#recent-posts>.recent-post-item>.recent-post-info>.content {
    display: none;
}


/* 一图流附属样式 */

#page-header:not(.not-top-img):before {
    background-color: #00000000;
}

#footer:before {
    background-color: #00000000;
}


/* 文章标题居中 */

#page-header #post-info {
    text-align: center;
}

修改Butterfly配置文件

1
2
3
inject:
  head:
    - <link rel="stylesheet" href="/css/custom.css">



纯CSS实现一图流

修改Butterfly配置文件

1
2
default_top_img: '#00000000'
footer_bg: true

修改custom.css，并且文章Front-matter需添加top_img: '#00000000'

1
2
3
4
5
6
7
8
9
/* 一图流附属样式 */

#page-header:not(.not-top-img):before {
    background-color: #00000000;
}

#footer:before {
    background-color: #00000000;
}



GitHub Action

博客根目录\.github\workflows，创建”任意名字.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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
name: 自动部署

on:
  push:
    branches:
      - main

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
      - name: 检出分支
        uses: actions/checkout@v4.1.4

      - name: 安装Nodejs
        uses: actions/setup-node@v4.0.2
        with:
          node-version: "20.12.2"

      - name: 安装Hexo
        run: |
          export TZ='Asia/Shanghai'
          npm install hexo-cli -g

      - name: 安装依赖
        run: npm install

      - name: 构建打包
        run: |
          hexo clean
          hexo generate

      - name: 推送到部署仓库
        run: |
          git config --global user.name "Onektas"
          git config --global user.email "xxx@qq.com"
          git clone https://github.com/Onektas/Onektas.github.io.git .deploy_git
          hexo deploy

创建token，”GitHub——头像——Settings——Developer settings——Personal access tokens”名字任意，时间无限，权限勾选repo


修改Hexo配置文件

1
2
3
4
deploy:
  type: 'git'
  repo:
    github: https://Onektas:{{token}}@github.com/Onektas/Onektas.github.io.git,main // 花括号去掉



Vercel加速

注册Vercel，加速项目，更换域名，记得更改GitHub的项目页面右侧About的链接；博客根目录\source，创建”CNAME”

1
onektas.top

博客根目录\source，创建”robots.txt”

1
2
3
4
User-agent: *
Disallow:

Sitemap: https://onektas.top/sitemap.xml



图床

https://github.com/Onektas/ImageHost ，使用Vercel加速，胜在图片链接可控


博客恢复

安装Git、Node.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 视情况可省略步骤

新建文件夹作为博客根目录
npm config set registry https://registry.npmmirror.com // 更换npm源为阿里云镜像源
npm config get registry // 确认源

npm install hexo-cli -g // 安装Hexo指令集

git config --global user.email "" // 设置Git邮箱
git config --global user.name "" // 设置Git用户名

ssh-keygen -t rsa -C "邮箱" // 创建公钥
less ~/.ssh/id_rsa.pub // 查看公钥
"GitHub——头像——Settings——SSH and GPG keys——添加SSH key"
ssh -T git@github.com // 测试公钥

git clone https://github.com/Onektas/BlogSource // 拉取博客源码

npm install // 安装插件