这是桑榆的笔记

笔记本

桑榆的积累

我的第四版网页:

​ (有一点我觉得很正确,如果你是什么也不会的小白^因为我也是小白^,那么看我这个,也可以写出自己喜欢的blog,==而且要学会借助人工智能==!Chat gpt(至少现在)挺好用的,可以帮你很快上手,而且你即使有很好的功底,你也可以用它节约你写这个的过程,毕竟花时间在开发上,比花时间在搭建这个写代码上更有意义,现在的博客都是扒代码,取其精华)前前后后已经搭建了三次了,挺可惜的,但虽然不断搭建花费了我很多时间,但我却也愈发熟悉了,我打算记录一下我的建站过程和感受,以防在某一个时刻我忘记了当初的细节而再次建站浪费时间。

第一章:创建blog

1.安装Git

​ Git(分布式版本控制系统)(==不要纠结叫什么,在处理hexo里面也就是用来管理你的hexo博客文章,上传到GitHub的工具。==)

​ 因为我用的Windows,所以Windows:到git官网上下载,Download git,下载后会有一个==Git Bash==的命令工具,以后就用这个工具来使用git!!

1
git --version   //这里就开始使用git bash了

​ 如果没找到,点击最下方的 显示更多选项,切记是==git bash==(不是git GUI),然后就会看到这个命令行,就可以开始输入代码了。(接下来就不会用cmd了)

​ 复制粘贴(合理偷懒)git –version 注意:这个里面CTRL+v不能用CTRL+c可以复制但也会终止当前命令,别不小心终止了这里的复制可以右键命令行来查看。Paste这就是粘贴(后面的Shift+Ins是快捷键!)

​ Hexo是基于nodeJS编写的,所以需要安装一下nodeJs和里面的npm工具。(都直接next)

​ 可以顺手看看版本,也是确保已经安装好了 接下来(下载hexo)并看一下版本

1
2
3
4
node -v
npm -v
npm install -g hexo-cli
hexo -v

​ 然后电脑上就已经有了hexo了,接下来就是创建项目(也就是自己的博客)

1
hexo init myblog    //hexo init 自己取的博客名,这一般会在c盘里面(记得找到位置)

​ 这种情况是自己已经有了这个名字的博客了(不用担心,白色边框内就是地址)

​ 这就表示成功了,这就是我们的第一个博客!

​ 这一步是表示进入这个文件内部,因为我们以后的操作几乎都在这里面(cd 表进这个文件,注意空格)

​ 然后npm install(这个速度很慢,可以考虑用淘宝的镜像)

​ 当前项目使用npm install安装所有module依赖太慢了,但又不想安装整一个cnpm下来,这时就可以把源换成淘宝镜像,会快很多

1
npm install --registry=http://registry.npmmirror.com

​ 互联网上的东西变化很快,日日新,所以一旦遇到问题,可能是这个镜像换了,直接浏览器搜索镜像就行了或者不会用,就搜索:npm淘宝镜像(就有人教),很详细(所以就不附加网址了,以后会改变)

​ 补上一句:

​ 对于npm总是会出现一些无法使用的问题的时候就重新安装一下npm。最简单的方法是从官方安装程序重新安装 node

(都不需要删除),官网上会弹出删除选项,他帮你删除,删除后再下载(记得注意有时候没变化可能是需要看后台开管理员权限)

如果报错了可以:

1. 清理 npm 缓存:

​ npm 缓存有时会被损坏,导致安装失败。你可以尝试清理缓存:

1
npm cache clean --force

2. 更新npm(新的可能修复了)

1
npm install -g npm@latest

3.万不得已了,尝试删除 node_modules 目录和 package-lock.json 文件,重装

1
2
rm -rf node_modules package-lock.json
npm install --registry=http://registry.npmmirror.com

补充: 可以忽略这些依赖冲突,进行安装。

然后检查:

1
gitnpm config list

​ 这将显示你的 npm 配置文件内容,包括注册表、代理设置等。如果你看到异常的配置,可能需要进行修改。

​ 这里介绍一下AI的食用:这一大段我不想看怎么快速知道什么意思(复制,粘贴,AI)

我们的第一个博客网页就搭建好了,当然,这远远不够,我们要美化和部署,加域名绑定服务器才算一个精美的blog,还可以创主副页

第二章:部署到GitHub上

创建GitHub账号

点击左上角到Home页面

​ 就会有这个,直接创建即可,因为我不是第一次创建,所以有一点不一样

​ 如果你是第一次搭建,我建议创建一个和你用户名相同的仓库,只有这样,将来要部署到GitHub page的时候,才会被识别,也就是xxxx.github.io,其中xxx就是你注册GitHub的用户名(主要是避免一些麻烦,新手能简单点就好)

​ 然后就是将hexo部署到GitHub的这个仓库了

生成SSH添加到GitHub

(看到这个git就是在git bash里面,记得要在你的博客所处的文件夹下执行)

1
2
git config --global user.name "yourname"
git config --global user.email "youremail" //内部写自己的名字和邮箱

​ 这里的yourname输入你的GitHub用户名,youremail输入你GitHub的邮箱。这样GitHub才能知道你是不是对应它的账户。

​ 可以用以下两条,检查一下你有没有输对

1
2
git config user.name
git config user.email

​ 然后创建SSH,一路回车,(中间有一个问题,如果已经创建过一个ssh了会问你)

1
ssh-keygen -t rsa -C "youremail"

​ ssh,简单来讲,就是一个秘钥,其中,id_rsa是你这台电脑的私人秘钥,不能给别人看的,id_rsa.pub是公共秘钥,可以随便给别人看。把这个公钥放在GitHub上,这样当你链接GitHub自己的账户时,它就会根据公钥匹配你的私钥,当能够相互匹配时,才能够顺利的通过git上传你的文件到GitHub上。

​ 而后在GitHub的setting中,找到SSH keys的设置选项,点击New SSH key把你的id_rsa.pub里面的信息复制进去。

如果你想用指令打开也行

通过命令窗口:

​ a. 打开你的 git bash 窗口

​ b. 进入 .ssh 目录:*cd ~/.ssh*

​ c. 找到 id_rsa.pub 文件:*ls*

​ d. 查看公钥:*cat id_rsa.pub*

输入这个

1
ssh -T git@github.com

​ 出现这个就代表成功了,==不用管后面那个but那个是一直都有==

​ 打开站点配置文件 _config.yml,翻到最后,修改为

​ YourgithubName就是你的GitHub账户

​ 切记我们是用的ssh,所以我们复制ssh下的,不然后面会出问题(这是在_config.yml里最下面写的)

​ 这个时候需要先安装deploy-git ,也就是部署的命令,这样你才能用命令部署到GitHub。

1
2
3
4
npm install hexo-deployer-git --save
hexo clean
hexo generate
hexo deploy

​ 其中 hexo clean清除了你之前生成的东西,也可以不加。(我习惯加了)

​ hexo generate 顾名思义,生成静态文章,可以用 hexo g缩写(埋个点,后面安装一些插件的时候可能会使hexo g不可使用了,准确的来讲是为了方便,所以采取不用hexo g的这种方式)

​ hexo deploy 部署文章,可以用hexo d缩写

​ 注意deploy时可能要你输入username和password。

得到下图就说明部署成功了,过一会儿就可以在http://yourname.github.io 这个网站看到你的博客了!!

​ 很有可能你会遇到这个

​ 我没找到解决方法

​ 但是这并不影响后面的操作,因为设置个人域名后又可以打开

​ 注册一个阿里云账户,在阿里云上买一个域名,我买的是 sangyufeiwan.com,各个后缀的价格不太一样,比如最广泛的.com就比较贵,看个人喜好咯

​ 你需要先去进行实名认证,然后在域名控制台中,看到你购买的域名。

​ 这是GitHub的服务器地址记得添加

​ 这是你的博客网页的记得添加

​ 登录GitHub,进入之前创建的仓库,点击settings,设置Custom domain,输入你的域名sangyufeiwan.com

​ 大致上就这样

​ 然后在你的博客文件source中创建一个名为CNAME文件,不要后缀。写上你的域名。

​ 昨天访问了游戏人生 | 铭心石刻这个大佬的博客,对于他的这个动态图很心动,于是想自己实现一个,如果能循环播放一个视频,那么效果应该还是很不错的。

​ 本来想将本地视频导入到网上,但试了一下,好像并没有成功,视频并未显示,而且也做不到,循环播放。

​ 所以我就想和本地图片传网上一样,我将mp4文件转成gif,但又出现了一个问题,就是视频转gif后,他占用内存很大,所以传不上去,但思来想去我也不知道怎么办了,所以我就去按照这个想法弄了一下。虽然很麻烦,但是至少也还是成功了,记录一下,以后有好方法了再更改。

​ 效果是这样子的(因为我参考了游戏人生 | 铭心石刻的博客教程,我也采取的这样的长条横栏,所以以下是针对我的博客页面设计的两张合适的图片)

蜘蛛侠下落

开小车车

大致上追求免费你可能需要这些:

==过程好复杂的嘞==[^咋这么多软件要用啊]

​ 其实一个软件可以实现好几个操作,但是我怕忘了(感觉都挺好用),所以每个都只干一件事,方便我记软件。以后可以选择着用。

1. [Adobe Express](https://new.express.adobe.com/tools/convert-to-gif?referrer=https%3A%2F%2Fwww.bing.com%2F&url=%2Fcn%2Fexpress%2Ffeature%2Fvideo%2Fconvert%2Fvideo-to-gif&placement=ax-columns-1&locale=zh-CN&contentRegion=cn&ecid=91875909407633769592947036031743569670&%24web_only=true&_branch_match_id=1433410478227127019&_branch_referrer=H4sIAAAAAAAAAzVPy2rDMBD8mugmPyLbqgKilJCQUw%2B59VRkeW2LyFohyXHaQ7%2B9CqWwDLPLDjMzp%2BTjoSzVgD1Er8LNY0x0g75Q3hfWuFsJJf84XcF%2BXdpL%2FxpghBAgyPkp3bG33f6cZ9u2ojduKjQueSUaXQKXrjAZdFI7AtoMUtQvvBWVaCreMcY70Yq9aHjFuorVvGFtJzpeEW%2BVhiXLpXpQjXZdXKQ1saiVBfk90%2BM7WYOV2Ui7DPDwAWLMbASV1gCZ3c0A%2BHxAd4eQ%2Fi80IZ3MSH7%2BeuTEn33ALeZCp2GCX8YlYr8QAQAA)^免费^:将视频转成gif的软件
2.  [GIF 压缩器](https://imageresizer.com/zh/%E5%8E%8B%E7%BC%A9gif)^免费^:压缩gif大小
3.  [imagestool](https://imagestool.com/zh_CN/gif-crop)^免费^:根据你的需求裁剪gif图片大小
4.  [Postimages ](https://postimages.org/)^免费^还挺好用(反正我的picgo天天报错)
5.  Picgo^免费^建议搭配Typora[^不是免费的]一起(图床有关的知识建议查阅这篇文章)
6.  [123APPS](https://online-video-cutter.com/cn/)^免费^裁视频,当然你也可以先裁

实际操作:

  1. 通过Adobe Express将MP4等视频文件转成gif
  2. 然后使用 GIF 压缩器压缩gif大小
  3. 有需要再用imagestool裁剪自己想要的尺寸,但是裁剪后内存会变大(原理可以看下面的叙述)
  4. 再次使用 GIF 压缩器压缩gif大小,记得注意内存(因为Postimages 最多只能传34MB的图片,Picgo我不知道能传多少)
  5. 最后把处理好的文件(小于34)文件放到Postimages 处理就好了(这一步还可以用Picgo+Typora(89来着我记得)实现)
  6. 然后就可以复制链接使用了

为什么视频转gif内存会变大

视频转成 GIF 后内存变大的原因,主要可以归结为以下几点:


🧠 1. GIF 格式压缩效率低

GIF 使用的是 无损压缩,主要是 LZW(Lempel–Ziv–Welch)算法,压缩率远低于视频常用的压缩格式(如 H.264、H.265)。

  • 视频文件(如 MP4)使用有损压缩,能极大压缩体积。
  • GIF 文件保留每一帧的完整像素信息,空间占用大。

🎞️ 2. 帧率 & 分辨率未降低

如果你在转换时没有降低:

  • 帧率(比如 30fps 转成 10fps)
  • 分辨率(比如 1920x1080 降到 480x270)

那么 GIF 会包含大量帧,而且每帧都是一张完整的图像,占用巨大空间。


🎨 3. GIF 颜色限制

GIF 只支持 最多 256 色,这意味着:

  • 颜色要被量化,无法表示视频中复杂的色彩变化。
  • 若颜色变化大,GIF 体积反而可能更大(因为无法用简化颜色表达差异,反而要增加更多图像信息)。

📦 4. 无音频,但体积仍大

虽然 GIF 不包含音频(视频里通常也有音频部分),但由于帧数和无损压缩的原因,体积通常不会比视频小


🛠️ 解决方法(查阅了Chat gpt,给出的方法)

如果你想减小 GIF 文件的体积,可以尝试:

  • 降低分辨率(例如 1080p → 480p)
  • 降低帧率(例如 30fps → 10fps)
  • 缩短时长(剪辑你需要的部分)
  • 使用工具如 FFmpegezgif.comGifski,可以设置优化参数
  • 或者考虑导出成 WebP 动图,体积更小、支持更多颜色,还可以透明

​ MP4是一种数字多媒体容器格式,用于存储视频和音频文件,以及字幕和静态图像。它是互联网上广泛使用的一种视频格式,也是数码相机、移动设备和其他便携式媒体播放器的格式。MP4文件使用有损和无损压缩的组合,以一种有效的方式存储视频和音频数据。视频数据通常使用H.264或H.265编解码器存储,它以高压缩效率和良好的视频质量著称。音频数据通常使用AAC编解码器存储,它以较低的比特率提供良好的音频质量。

​ MP4格式是分享高质量视频的最好选择。然而,在保留视频质量和保持低文件大小方面,MP4算法并不尽如人意。如果你的视频要放在网站上,这可能会对你的页面加载速度产生负面影响。为了避免这个问题,在将你的视频放在网站上之前,将MP4转换为WebP!这将保持文件大小较小,页面加载时间快,视频质量基本相同。

​ 但是我试了一下webp没法自动播放啊,我再研究研究。(最主要确实我那个方法操作起来费时间)

有什么需要用到外挂标签的地方可以查阅这个大佬写的

安知鱼主题标签 Tag Plugins | 安知鱼

#:表示一级标题(最大的标题,几个#就是几级,最多六级)

这是一级标题

“-” + “空格”:可以生成无序列表

  • 无序列表
  1. 有序列表

*文字*:斜体

**文字**:加粗

~~文字~~:删除

==文字==:==高亮==(typora要自己手动打开偏好设置)

---:表示分隔线 (分隔一整行)

<u>文字</u>:下划线


超链接: [放网站标题](放链接)

图片(多一个!:![名字](链接)

>:表示引用

哝这里

- [ ]:这是任务块

  • 完成勾选
1
2
3
4
5
6
7
//代码块
#include<iostream>
using namespace std;
int main()
{
cout<<"Hello world!"<<endl;
}//实现就是 ```+对应语言

数学公式用==LaTeX== :$$公式$$
$$
{2{x^T}(t)x(t - \tau ) = {x^T}(t){Q^{ - \frac{1}{2}}}x(t - \tau ) \le \frac{1}{\alpha }{x^T}(t)Px(t) + \alpha {x^T}(t - \tau )x(t - \tau )}
$$
表格:用| |分隔

|:—|:—:|—:|:分别是左对齐,居中对齐,右对齐(当然typora有智能的对齐)

|-|-|-|:表分割

任务 睡觉 吃饭

[^ ]:脚注^文字

一般在最后是脚注内容用[^ ]:解释

名字引用链接

` 行内代码`:cout<<"Hello world!"

:表情名: ::smile:(参考emoji)

~ 下标~:H2O

​ ^上标^ :x^2^

补上一句

==还支持HTML语法==!!!!!(以后慢慢补充)

==锚点==

\:转义符,让其回归符号

换行(两个空格加回车!其实直接下箭头就行)