前言

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


准备工作

博客搭建全程使用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
12
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 master main // 更改branch名为main

npm install hexo-generator-sitemap --save // 安装sitemap生成插件(此插件可在安装主题步骤安装)
npm install hexo-deployer-git --save // 安装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
/* 滚动条美化 */

::-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;
}


Butterfly配置文件

1
2
3
inject:
  head:
    - <link rel="stylesheet" href="/css/custom.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
40
41
42
43
44
45
46
47
48
49
name: 自动部署

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
    - name: 检查分支
      uses: actions/checkout@v2
      with:
        ref: main

    - name: 安装 Node
      uses: actions/setup-node@v1
      with:
        node-version: "12.x"

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

    - name: 缓存 Hexo
      uses: actions/cache@v1
      id: cache
      with:
        path: node_modules
        key: ${{runner.OS}}-${{hashFiles('**/package-lock.json')}}

    - name: 安装依赖
      if: steps.cache.outputs.cache-hit != 'true'
      run: |
        npm install --save

    - 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.npm.taobao.org // 更换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 // 安装插件