搭建个人博客

博客名称为AuroraEve’s blog\AuroraEve’s Blog

本文参考BV1qD4y1z783超详细的个人博客搭建教程（无需服务器）- 从原理到实践手把手带你搭建属于自己的个人博客_哔哩哔哩_bilibili的教程网页如下个人博客搭建教程 | 爱扑bug的熊 (cuijiacai.com)

重新整理一下我搭建博客的过程，

牛刀小试

我于2022-07-24 15:15:17正式注册了我的第一个域名AuroraEve.com

2022年7月26日观看B站up主康文昌康文昌的个人空间-康文昌个人主页-哔哩哔哩视频 (bilibili.com)的视频静态网站部署，上线你的个人网站【修复版】_哔哩哔哩_bilibili完成了服务器的搭建，和前端的入门

2022年8月28日正式做出第一个能用的html文件，效果是这样的。

image-20240329204316375

2022年8月21日17：50分做出来一个能看的东西

image-20240329204653617

2022年10月28日23：16分做出

最后一个版本时1.5.2版本（其实是1.4.1哈哈咕咕了，后面的号码分别是年月日：22，09，14我觉得还可以在后面加个时分秒小数位。

image-20240329205039009

做出来了日志等功能，还有几个分页、诗句、简介…这些都是可以用的，右边的图片是音乐播放器，可以播放音乐。

当时还做了一个可以切换分页的功能，我怎么这么有创意

image-20240329205906662

还做到了2022‎年‎10‎月‎23‎日，‏‎1:08:50

现在可没有当年的活力了。纯手搓。

接下来就咕咕了，一直拖到2024年3月27日，1年多的时间没有动过。

初步完成

2024年3月27日开始项目直至2024年3月29日16：13分终于完成了butterfly主题的博客。

时间轴如下：

  1. 于2024年3月28日0：11正式完成了hexo博客框架以及Github项目文件托管的功能
  2. 于2024年3月28日10：09完成Netlify建站
  3. 于2024年3月28日10：43分正式完成个人博客搭建，过程还挺顺利的
  4. 接下来就开始烦人的主题了，这也让我正式接触到了GitHub的工作流
    于2024年3月28日，晚经过一天的试错，成功放弃了这个主题（livemylife），将其永久放到试错包里面，失败是成功之母。
  5. 于2024年3月29日16：13分终于在chatgpt的帮助下完成了butterfly主题的博客
    也让我基本熟悉了GitHub的工作流程。

回顾一下我这几天的建站流程，总结一个建站经验。

全部代码如下：

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
node -v # 查看node版本信息
npm -v # 查看npm版本信息

hexo init "E:\Documents\Project\AuroraEve's blog\Butterfly"
cd "E:\Documents\Project\AuroraEve's blog\Butterfly"
npm install

hexo new post "test" # 会在 source/_posts/ 目录下生成文件 ‘test.md’，打开编辑
hexo generate        # 生成静态HTML文件到 /public 文件夹中
hexo server          # 本地运行server服务预览，打开 http://localhost:4000 即可预览你的博客

添加"netlify": "npm run clean && npm run build"

npm install hexo-renderer-pug hexo-renderer-stylus --save
更改theme: butterfly

git init
git submodule add https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
git add .
git commit -m "my blog first commit"
git remote add origin "https://github.com/AuroraEve-GitHub/Butterfly.git"
git branch -M main
git push -u origin main

//不知道有没有用git add .gitmodules themes/butterfly
git commit -m "Add hexo-theme-butterfly submodule"
git push

//最重要的一点就是要用git bash，并且上面的报错提示：无论是黄字还是红字都得好好看，最好对着chatgpt查清楚每一条报错的意思，不然前面的报错会影响到后面的部分。

后续更新

让我们来重新回顾一下更新博客的几条代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Git Bash Here
git clone https://github.com/AuroraEve-GitHub/Butterfly.git
修改除了.git之外的文件
cd Butterfly
git add .
git commit -m ""
git push -u origin main


\\或者
cd "E:\Documents\Project\AuroraEve's blog\Butterfly"
git pull
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
hexo g
hexo s

2024年3月30日

发现运行clone之后的文件夹里面没有Butterfly的文件，是个空文件夹，而且没有public的文件。

这样子的话在网络上查看是正常的。但是本地无法查看

安装npm install之后可以正常查看和使用在本地

可以同步成功，很顺利，更新的流程已经明了。

1
2
3
4
5
git pull
修改除了.git之外的文件
git add .
git commit -m ""
git push -u origin main

仅仅四行代码

接下来参考

jerryc127/hexo-theme-butterfly: 🦋 A Hexo Theme: Butterfly (github.com)

Butterfly - A Simple and Card UI Design theme for Hexo

进行博客的书写

一些笔记

1
2
3
// 2024年3月30日
重要代码
hexo new page tags

在修改网站配置文件时我发现还是得修改主题配置文件

需要改变butterfly里面的内容，所以用子模块不太行。

我现在尝试把子模块放到总项目中

成功了，感谢chatgpt

于2024年3月30日完成了网站基本的美化设置

写了几个标签页，写了两篇博客

但是目前尚未解决图片不能显示的问题。

2024年4月1日

参考https://www.bilibili.com/video/BV1JP411P7gc/?spm_id_from=333.788&vd_source=851eb39e369398dfd488218128ad07b6教程完成了博客的全面美化

搜索功能：https://github.com/wzpan/hexo-generator-search

Live 2D

字体图片资源：https://github.com/fomalhaut1998/PicGoDemo

安知鱼

23.butterfly配置twikoo评论系统_哔哩哔哩_bilibili

环境配置

安装nodejs参考【2024最新版】最新node.js安装及环境变量+vue安装，手把手教学，非常简单，包教包会！！！_哔哩哔哩_bilibili

1
2
3
4
5
6
7
8
9
10
AuroraEve@Administrator MINGW64 /e/Documents/Project/AuroraEve's blog/hexo (main)
$ git push -u origin main
To https://github.com/AuroraEve-GitHub/AuroraEve-s-blog.git
 ! [rejected]        main -> main (fetch first)
error: failed to push some refs to 'https://github.com/AuroraEve-GitHub/AuroraEve-s-blog.git'
hint: Updates were rejected because the remote contains work that you do
hint: not have locally. This is usually caused by another repository pushing
hint: to the same ref. You may want to first integrate the remote changes
hint: (e.g., 'git pull ...') before pushing again.
hint: See the 'Note about fast-forwards' in 'git push --help' for details.

百度自带的AI帮我解决了这个问题。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

! [rejected] main -> main (fetch first) error: failed to push some refs to '
报错信息 "! [rejected] main -> main (fetch first) error: failed to push some refs to" 表示你尝试推送到远程仓库时，由于本地和远程仓库的历史提交记录不一致，导致推送被拒绝。

解决方法：

执行 git fetch 来获取远程仓库的最新内容。

执行 git pull 来合并远程仓库的更改到你的本地分支。

解决可能出现的合并冲突。

合并之后，再次执行 git push 尝试推送到远程仓库。

如果你确信你的更改是最新的且远程仓库上的更改不需要，你可以使用 git push --force 来强制推送你的更改，但这种做法应谨慎使用，因为它会覆盖远程仓库的历史记录。

于2024年3月28日0：11正式完成了hexo博客框架以及Github项目文件托管的功能

于2024年3月28日10：09完成Netlify建站

于2024年3月28日10：43分正式完成个人博客搭建，过程还挺顺利的

下面收藏几条我喜欢的主页：

1
2
3
4
5
6
https://www.imalun.com/		https://github.com/MaLuns/hexo-theme-async
https://v-vincen.life/		https://github.com/V-Vincen/hexo-theme-livemylife
http://miccall.tech/		https://github.com/miccall/hexo-theme-Mic_Theme
https://github.com/blinkfox/hexo-theme-matery
https://github.com/honjun/hexo-theme-sakura
BV1fE411i7HS

主题选用第二个hexo-theme-livemylife/README_CN.md at master · V-Vincen/hexo-theme-livemylife (github.com)

常用命令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
hexo clean
hexo generate # or hexo g
hexo server   # or hexo s

hexo new post "test" # 会在 source/_posts/ 目录下生成文件 ‘test.md’，打开编辑
hexo generate        # 生成静态HTML文件到 /public 文件夹中
hexo server          # 本地运行server服务预览，打开 http://localhost:4000 即可预览你的博客

hexo init "E:\Documents\Project\AuroraEve's blog\hexo"
cd "E:\Documents\Project\AuroraEve's blog\hexo"
git init
git add .
git commit -m "my blog first commit"
git remote add origin "远端github仓库地址"
git branch -M main
git push -u origin main



https://github.com/V-Vincen/hexo-theme-livemylife/blob/master/README_CN.md

出现报错

1
Cannot GET /

我重新部署了我的博客，将源文件删除了

1
2
3
4
5
6
7
8
9
10
11
12
node -v # 查看node版本信息
npm -v # 查看npm版本信息
hexo init "E:\Documents\Project\AuroraEve's blog\hexo"

cd "E:\Documents\Project\AuroraEve's blog\hexo"
npm install

rm -rf scaffolds source themes _config.landscape.yml _config.yml package.json yarn.lock #just keep node_modules
git clone https://github.com/V-Vincen/hexo-theme-livemylife.git
mv hexo-theme-livemylife/* ./
rm -rf hexo-theme-livemylife

采用这个方式会缺少文件

新方法

1
2
3
4
5
6
7
8
9
10
node -v # 查看node版本信息
npm -v # 查看npm版本信息
hexo init "E:\Documents\Project\AuroraEve's blog\hexo"

cd "E:\Documents\Project\AuroraEve's blog\hexo"
npm install

hexo new post "test" # 会在 source/_posts/ 目录下生成文件 ‘test.md’，打开编辑
hexo generate        # 生成静态HTML文件到 /public 文件夹中
hexo server          # 本地运行server服务预览，打开 http://localhost:4000 即可预览你的博客

未克隆之前

image-20240328185024929

image-20240328190337916

又遇到报错

1
2
3
4
5
6
7
8
9
10
11
12
13
14
AuroraEve@Administrator MINGW64 /e/Documents/Project/AuroraEve's blog/hexo
$ git clone https://github.com/V-Vincen/hexo-theme-livemylife.git
Cloning into 'hexo-theme-livemylife'...
fatal: unable to access 'https://github.com/V-Vincen/hexo-theme-livemylife.git/': Failed to connect to github.com port 443 after 21073 ms: Timed out

AuroraEve@Administrator MINGW64 /e/Documents/Project/AuroraEve's blog/hexo
$ ping https://github.com/V-Vincen/hexo-theme-livemylife.git
Ping request could not find host https://github.com/V-Vincen/hexo-theme-livemylife.git. Please check the name and try again.

AuroraEve@Administrator MINGW64 /e/Documents/Project/AuroraEve's blog/hexo
$ git clone https://github.com/V-Vincen/hexo-theme-livemylife.git
Cloning into 'hexo-theme-livemylife'...
fatal: unable to access 'https://github.com/V-Vincen/hexo-theme-livemylife.git/': HTTP/2 stream 1 was not closed cleanly before end of the underlying stream

[clone报错fatal: unable to access ‘https://github.com/...‘: Failed to connect to github.com port-CSDN博客](https://blog.csdn.net/weixin_46191137/article/details/133739981?ops_request_misc=&request_id=&biz_id=102&utm_term=fatal: unable to access ‘https&utm_medium=distribute.pc_search_result.none-task-blog-2allsobaiduweb~default-0-133739981.142^v100^pc_search_result_base5&spm=1018.2226.3001.4187)

经过一天的试错，成功放弃了这个主题，将其永久放到试错包里面，失败是成功之母。

失败的原因：V-Vincen/hexo-theme-livemylife: A succinct hexo theme… (github.com)这是一个非常古老的主题，不适应当前的hexo包，已经4-5年没有更新。

让我们来重新梳理一下建站的流程。

先贴一下网址

个人博客搭建教程 | 爱扑bug的熊 (cuijiacai.com)

1
2
3
4
5
6
https://www.imalun.com/		https://github.com/MaLuns/hexo-theme-async
~~https://v-vincen.life/		https://github.com/V-Vincen/hexo-theme-livemylife~~
~~http://miccall.tech/		https://github.com/miccall/hexo-theme-Mic_Theme~~
https://github.com/blinkfox/hexo-theme-matery
~~https://github.com/honjun/hexo-theme-sakura~~
BV1fE411i7HS
1
2
3
4
Ayer:		https://github.com/Shen-Yu/hexo-theme-ayer				https://shen-yu.gitee.io/
Matery:		https://github.com/blinkfox/hexo-theme-matery
Async:		https://github.com/MaLuns/hexo-theme-async	 			https://www.imalun.com/
Butterfly:	https://github.com/jerryc127/hexo-theme-butterfly		https://butterfly.js.org/

下面开始Butterfly的建站

AuroraEve’s Butterfly

本文基于Butterfly主题，链接如下：

jerryc127/hexo-theme-butterfly: 🦋 A Hexo Theme: Butterfly (github.com)

Butterfly - A Simple and Card UI Design theme for Hexo

感谢开源的环境让我学到这么多东西。

下面开始

hexo博客框架

1
2
3
4
5
6
7
8
9
10
11
12
node -v # 查看node版本信息
npm -v # 查看npm版本信息
hexo init "E:\Documents\Project\AuroraEve's blog\hexo"

cd "E:\Documents\Project\AuroraEve's blog\hexo"
npm install

hexo new post "test" # 会在 source/_posts/ 目录下生成文件 ‘test.md’，打开编辑
hexo generate        # 生成静态HTML文件到 /public 文件夹中
hexo server          # 本地运行server服务预览，打开 http://localhost:4000 即可预览你的博客


添加建站脚本

为了后续netlify建站方便，我们可以在package.json里面添加一个命令：

1
2
3
4
5
6
7
8
9
10
11
12
JSON
{
    // ......
    "scripts": {
        "build": "hexo generate",
        "clean": "hexo clean",
        "deploy": "hexo deploy",
        "server": "hexo server",
        "netlify": "npm run clean && npm run build" // 这一行为新加
    },
    // ......
}

Github项目文件托管

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
cd "E:\Documents\Project\AuroraEve's blog\hexo"
git init
git add .
git commit -m "my blog first commit"
git remote add origin "https://github.com/AuroraEve-GitHub/AuroraEve-s-blog.git"
git branch -M main
git push -u origin main

//更新项目
cd "E:\Documents\Project\AuroraEve's blog\hexo"
git init
git add .
git commit -m "my blog first commit"
git remote add origin "https://github.com/AuroraEve-GitHub/AuroraEve-s-blog.git"
git branch -M main
git push --force -u origin main

//更新最新版
git add .
git commit -m "my blog first commit"
git push

Netlify建站

Deploy log

Initializing

遇到报错

1
2
3
4
5
6
7
8
9
10
11
12
13
10:22:13 PM: Failed during stage "preparing repo": Error checking out submodules: fatal: No url found for submodule path "themes/butterfly" in .gitmodules
: exit status 128: fatal: No url found for submodule path "themes/butterfly" in .gitmodules
: exit status 128
10:22:12 PM: build-image version: fcb0c1b3ada6d25c1cb58e8bc514f5f23cc14f15 (focal)
10:22:12 PM: buildbot version: c832339c7e6d9fd31dd1b952874313ecd87c4644
10:22:12 PM: Building without cache
10:22:12 PM: Starting to prepare the repo for build
10:22:12 PM: No cached dependencies found. Cloning fresh repo
10:22:12 PM: git clone --filter=blob:none https://github.com/AuroraEve-GitHub/AuroraEve-s-blog
10:22:13 PM: Preparing Git Reference refs/heads/main
10:22:13 PM: Error checking out submodules: fatal: No url found for submodule path "themes/butterfly" in .gitmodules
: exit status 128
10:22:13 PM: Failing build: Failed to prepare repo
1
2
3
4
5
6
rm -rf .git
git init
git remote add origin YOUR_URL
git add .
git commit -m 'restart history'
git push origin master

ClouldFlare加速

再换一个

Matery:

https://github.com/blinkfox/hexo-theme-matery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
node -v # 查看node版本信息
npm -v # 查看npm版本信息
hexo init "E:\Documents\Project\AuroraEve's blog\mattery"

cd "E:\Documents\Project\AuroraEve's blog\mattery"

npm install

git clone https://github.com/blinkfox/hexo-theme-matery.git

theme: hexo-theme-matery

hexo generate        # 生成静态HTML文件到 /public 文件夹中
hexo server          # 本地运行server服务预览，打开 http://localhost:4000 即可预览你的博客

git init
git add .
git commit -m "my blog first commit"
git remote add origin "https://github.com/AuroraEve-GitHub/Mattery.git"
git branch -M main
git push -u origin main

重建AuroraEve’s Butterfly

本文基于Butterfly主题，链接如下：

jerryc127/hexo-theme-butterfly: 🦋 A Hexo Theme: Butterfly (github.com)

Butterfly - A Simple and Card UI Design theme for Hexo

感谢开源的环境让我学到这么多东西。

下面开始

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
node -v # 查看node版本信息
npm -v # 查看npm版本信息
hexo init "E:\Documents\Project\AuroraEve's blog\hexo"

cd "E:\Documents\Project\AuroraEve's blog\hexo"
npm install

hexo new post "test" # 会在 source/_posts/ 目录下生成文件 ‘test.md’，打开编辑
hexo generate        # 生成静态HTML文件到 /public 文件夹中
hexo server          # 本地运行server服务预览，打开 http://localhost:4000 即可预览你的博客

git config --global user.name "AuroraEve-GitHub"
git config --global user.email "auroraevemail@gmail.com"

npm install hexo-deployer-git --save
ssh-keygen -t rsa -C "auroraevemail@gmail.com"
cat ~/.ssh/id_rsa.pub
ssh -T git@github.com

花费了2天时间，改了无数bug，放弃了无数主题。

好文

搭建个人博客网站 - 幕布 (mubu.com)

初步在GitHub实现主题建站

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
node -v # 查看node版本信息
npm -v # 查看npm版本信息
hexo init "E:\Documents\Project\AuroraEve's blog\Butterfly"

cd "E:\Documents\Project\AuroraEve's blog\Butterfly"
npm install

hexo new post "test" # 会在 source/_posts/ 目录下生成文件 ‘test.md’，打开编辑
hexo generate        # 生成静态HTML文件到 /public 文件夹中
hexo server          # 本地运行server服务预览，打开 http://localhost:4000 即可预览你的博客

"netlify": "npm run clean && npm run build"

git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
npm install hexo-renderer-pug hexo-renderer-stylus --save
theme: butterfly

git init
git add .
git commit -m "my blog first commit"
git remote add origin "https://github.com/AuroraEve-GitHub/Butterfly.git"
git branch -M main
git push -u origin main


遇到报错

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$ git add .
warning: LF will be replaced by CRLF in package.json.
The file will have its original line endings in your working directory
warning: adding embedded git repository: themes/butterfly
hint: You've added another git repository inside your current repository.
hint: Clones of the outer repository will not contain the contents of
hint: the embedded repository and will not know how to obtain it.
hint: If you meant to add a submodule, use:
hint:
hint:   git submodule add <url> themes/butterfly
hint:
hint: If you added this path by mistake, you can remove it from the
hint: index with:
hint:
hint:   git rm --cached themes/butterfly
hint:
hint: See "git help submodule" for more information.

采用

git rm –cached themes/butterfly

git rm -f –cached themes/butterfly

遇到报错

1
2
3
4
$ git push -u origin main
error: src refspec main does not match any
error: failed to push some refs to 'https://github.com/AuroraEve-GitHub/Butterfly.git'

解决方法

1
2
3
git checkout -b main
git commit -m "Initial commit"
git push -u origin main

这样的话并没有把butterfly主题上传，所以显示空白

上传主题时需要

1
2
3
4
git submodule add https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
git add .gitmodules themes/butterfly
git commit -m "Add hexo-theme-butterfly submodule"
git push

于2024年3月29日16：13分终于在chatgpt的帮助下完成了butterfly主题的博客

部署到服务器

chattr -i + 文件路径