diff --git a/.valaxy/typed-router.d.ts b/.valaxy/typed-router.d.ts index 67972ad5..eb2223d6 100644 --- a/.valaxy/typed-router.d.ts +++ b/.valaxy/typed-router.d.ts @@ -43,6 +43,7 @@ declare module 'vue-router/auto-routes' { '/posts/Tech-Talk/Git-and-Github/Git-Tutorial': RouteRecordInfo<'/posts/Tech-Talk/Git-and-Github/Git-Tutorial', '/posts/Tech-Talk/Git-and-Github/Git-Tutorial', Record, Record>, '/posts/Tech-Talk/Git-and-Github/Github-Actions-and-Pages-Tutorials': RouteRecordInfo<'/posts/Tech-Talk/Git-and-Github/Github-Actions-and-Pages-Tutorials', '/posts/Tech-Talk/Git-and-Github/Github-Actions-and-Pages-Tutorials', Record, Record>, '/posts/Tech-Talk/Isaac-Sim/Isaac-Sim-Notes': RouteRecordInfo<'/posts/Tech-Talk/Isaac-Sim/Isaac-Sim-Notes', '/posts/Tech-Talk/Isaac-Sim/Isaac-Sim-Notes', Record, Record>, + '/posts/Tech-Talk/MISCs/ImageBed': RouteRecordInfo<'/posts/Tech-Talk/MISCs/ImageBed', '/posts/Tech-Talk/MISCs/ImageBed', Record, Record>, '/posts/Tech-Talk/MISCs/Strange-Bugs': RouteRecordInfo<'/posts/Tech-Talk/MISCs/Strange-Bugs', '/posts/Tech-Talk/MISCs/Strange-Bugs', Record, Record>, '/posts/Tech-Talk/MISCs/vpn-setting': RouteRecordInfo<'/posts/Tech-Talk/MISCs/vpn-setting', '/posts/Tech-Talk/MISCs/vpn-setting', Record, Record>, '/posts/Tech-Talk/Obsidian/Obsidian-Tutorial': RouteRecordInfo<'/posts/Tech-Talk/Obsidian/Obsidian-Tutorial', '/posts/Tech-Talk/Obsidian/Obsidian-Tutorial', Record, Record>, diff --git a/locales/zh-CN.yml b/locales/zh-CN.yml index c6e4d7a2..9cc265ef 100644 --- a/locales/zh-CN.yml +++ b/locales/zh-CN.yml @@ -17,4 +17,5 @@ daily: 日常 'Weekly Journal': 周记 Memoirs: 回忆录 Memoir: 回忆录 -Dresses: 女装 \ No newline at end of file +Dresses: 女装 +'Image Hosting': 图床 \ No newline at end of file diff --git a/pages/posts/Tech-Talk/Isaac-Sim/Isaac-Sim-Notes.md b/pages/posts/Tech-Talk/Isaac-Sim/Isaac-Sim-Notes.md index 498456c5..9ce2b34b 100644 --- a/pages/posts/Tech-Talk/Isaac-Sim/Isaac-Sim-Notes.md +++ b/pages/posts/Tech-Talk/Isaac-Sim/Isaac-Sim-Notes.md @@ -164,7 +164,7 @@ echo /home/`whoami`/.local/share/ov/pkg/isaac-sim-4.1.0 但是假如不是，可以进入 Isaac Sim 软件，随便点击一个上方栏的 Isaac Examples，并且 Open Containing Folder 即可。 -alt text + 例如 hello world 这个 example，这个文件夹应该在 `isaac-sim-4.1.0/exts/omni.isaac.examples/omni/isaac/examples/hello_world` 中，以下全部的操作视作在 `isaac-sim-4.1.0` 下进行。 diff --git a/pages/posts/Tech-Talk/MISCs/ImageBed.md b/pages/posts/Tech-Talk/MISCs/ImageBed.md new file mode 100644 index 00000000..18aee31e --- /dev/null +++ b/pages/posts/Tech-Talk/MISCs/ImageBed.md @@ -0,0 +1,85 @@ +--- +title: 一种优化后的免费图床解决方案 +excerpt: 仅需域名，无限空间，无限流量，国内快速访问，基于 vercel/PicX/webp。 +date: 2024-08-25 02:59:00+0800 +image: https://pic.axi404.top/121580810_p0.7w6r5wte87.webp +categories: + - 'Tech Talk' + - 'MISCs' +tags: + - 'Tech Talk' + - 'Image Hosting' +top: 1 +--- + +## 前言 + +最近在写博客的时候，发现图片上传的问题。由于博客使用的是 GitHub Pages，而 GitHub Pages 的图片上传收到访问速度的限制，因此需要寻找一种更好的解决方案。事实上，不只是图片，本身的博客依然有一定的体积，所以说找到一种很好的替代方案是很不错的。更何况把什么东西都扔到博客的仓库中，也太重了。我之前可能加上图片，博客已经将近 200 MB，而现在优化之后，只剩下了 1.4 MB。 + +## 图床现状 + +所以说就不得不说一下目前图床的现状了，无外乎就是付费以及免费的图床，一方面我都已经用 Github Pages 了，肯定还是尽可能寻求免费的解决方案，但是这种图床要不然十分不稳定，而且国内的连接情况不一定好，要不然可能直接就不支持 NSFW 内容。 + +虽然本博客并非什么奇奇怪怪的系统，但是依然可能上传一些本人的图片等，会被检测为 NSFW，这为我带来了极大的困扰，那么有没有一种方案呢？答案是有的，那就是使用 Github。 + +我们都知道，在把资源上传到 Github 之后，可以使用 Github 的 raw.githubusercontent.com 来访问这些资源，然而 Github 因为众所周知的原因，网速时有时无，很难指望作为一个稳定的图片存储源，而且操作起来也不是很直观。 + +## 解决方案 + +在进行了广泛的调研以及寻找之后，我找到了我的初步答案：PicX，网址是 [https://picx.xpoet.cn/](https://picx.xpoet.cn/)。PicX 是一个开源的图床工具，它可以可视化地进行图片的上传，虽然说本质上还是需要使用 Github 来存储图片，但是它提供了很多方便的功能，且不说做了一个网页这件事就已经神中神，其更是提供了自动转换 webp 压缩的选项。 + +在这里介绍一下 webp，这种有损压缩的格式，压缩的性能十分离谱，一张可能好几 MB 的图片，在压缩之后只有几百 kb 或者更少，这一点在二次元图片（一般被用作博客文章的封面或者头图）上面更为明显，提供了十分离谱的压缩效率，而相应地，其压缩后的图片质量也并不差，几乎看不出区别。因此，使用 webp 格式来存储图片，可以极大地减少博客的体积，同时，由于 webp 格式的图片体积小，加载速度也会更快。 + +PicX 本身有提供 Github 的图床方案或者一些不是很快的 cdn，但是事实上，虽然使用 webp 可以加快速度，但是并不是那么的理想，而且这个服务不是来自国内，所以还有优化的空间。 + +这时候就不难想到 vercel 了，因为部署过博客，而且博客就是在 vercel 运行的，因此我之前就知道 vercel 具有一个在国内的 CNAME 服务器，于是不难给 vercel 加上 vercel。 + +首先我们需要有一个域名，在这里直接使用 [namesilo](https://www.namesilo.com/)，比较老牌，而且可以支付宝支付。这里面购买就暂且不提了。 + +然后前往 [cloudflare](https://dash.cloudflare.com/) 来获取 DNS 解析以及更多更强大的功能，进入 dashbroad 选择 Add a domain： + + + + + + + +![](https://pic.axi404.top/image.5tqyhumx92.webp) + +接下来输入你的域名，这里以一个不存在的域名为例： + +![](https://pic.axi404.top/image-1.7zqd3mel07.webp) + +遗憾选择 Free 方案，毕竟是免费的解决方案： + +![](https://pic.axi404.top/image-2.7p3jagzcuw.webp) + +接下来添加一个 A，选择 vercel 的地址 `76.223.126.88` 或者 `76.76.21.98`，然后名称写 `@`，点击保存。 + +![](https://pic.axi404.top/image-4.839z1c7nq2.webp) + +接下来它要求你更改的 NameServer： + +![](https://pic.axi404.top/image-3.6pnfxawlp5.webp) + +并给出 NameServer： + +![](https://pic.axi404.top/image-5.4uav4ok63f.webp) + +之后就可以前往 namesilo 管理域名，在 My Account -> Domain Manager -> axi404.top -> NameServers 删掉原来的东西，并且添加这些。 + +之后回到 cloudflare，在快速入门中把 https 重写啥的都打开。 + +![](https://pic.axi404.top/image-6.3k7xyd26sb.webp) + +在 SSL/TLS 中选择完全或者完全（严格），否则会因为证书不匹配导致反复重定向而打不开网页： + +![](https://pic.axi404.top/image-7.70a9qgbtul.webp) + +接下来可以前往 [vercel](https://vercel.com/)，登录你的 Github 账号。PicX 会给你注册一个 picx-images-hosting 的仓库，在这个里面安装 vercel。Import 之后进入 Settings -> Domains，这边就会提示你使用你添加的域名，比如说 pic.axi404.top，之后点击 add。 + +![](https://pic.axi404.top/image-8.1023lq285x.webp) + +再回到 cloudflare，在 DNS 中添加一条 CNAME 记录，在我的例子中 name 为 pic，内容为 `cname-china.vercel-dns.com`，保存，即可。 + +此时整个的方案就结束了，你在 PicX 上面上传图片部署网站之后，Vercel 会自动更新，同时你的图床访问图片的方法，类似于 `https://pic.axi404.top/image.webp`，速度很快，完结撒花。 \ No newline at end of file diff --git a/pages/posts/Tech-Talk/Obsidian/Obsidian-Tutorial.md b/pages/posts/Tech-Talk/Obsidian/Obsidian-Tutorial.md index 3ea7fc48..a959f505 100644 --- a/pages/posts/Tech-Talk/Obsidian/Obsidian-Tutorial.md +++ b/pages/posts/Tech-Talk/Obsidian/Obsidian-Tutorial.md @@ -58,7 +58,7 @@ Obsidian 的插件安装分为使用插件市场进行安装或者手动安装 在插件市场中找到自己心仪的插件，并且点击安装即可，十分的简单。 -![alt text](https://pic.axi404.top/image.2obgeegff0.webp) +![](https://pic.axi404.top/image.2obgeegff0.webp) 在这里笔者推荐一款笔者最常用的插件，即 `Easy Typing`，这个插件可以帮助你进行快速的格式化文档，使得你的文档规范统一。`Easy Typing` 可以十分便捷的创建属于自己知识库的文本规范，同时可以对一些符号的输出进行自动的补全，比如： diff --git a/pages/posts/Tech-Talk/RoboMaster/RM-Tutorial-Section-2.md b/pages/posts/Tech-Talk/RoboMaster/RM-Tutorial-Section-2.md index b278f63f..eb7fe6d5 100644 --- a/pages/posts/Tech-Talk/RoboMaster/RM-Tutorial-Section-2.md +++ b/pages/posts/Tech-Talk/RoboMaster/RM-Tutorial-Section-2.md @@ -40,11 +40,11 @@ Markdown 的详细语法见 [Markdown 官网文档](https://markdown.com.cn/)， 通过在 VSCode 的拓展栏进行搜索，可以很轻易地找到 VSCode 的 SSH 插件： -![alt text](https://pic.axi404.top/SSH_1.4cktbl78ng.webp) +![](https://pic.axi404.top/SSH_1.4cktbl78ng.webp) 启用插件之后，点击左下角的打开远程窗口，选择连接到主机即可： -![alt text](https://pic.axi404.top/SSH_2.3k7xtuqmx9.webp) +![](https://pic.axi404.top/SSH_2.3k7xtuqmx9.webp) 在服务器的租用界面中，一般会提供 SSH 的指令，其格式为 `ssh -p port user@address`，之后按照提升输入密码即可。 diff --git a/pages/posts/Tech-Talk/VitePress/VitePress-Tutorial.md b/pages/posts/Tech-Talk/VitePress/VitePress-Tutorial.md index 9772f5dd..11abd2ee 100644 --- a/pages/posts/Tech-Talk/VitePress/VitePress-Tutorial.md +++ b/pages/posts/Tech-Talk/VitePress/VitePress-Tutorial.md @@ -61,7 +61,7 @@ VitePress 是一个基于 Vite 的静态网页生成器，它使用 Vue 作为 在 [Git 官网](https://git-scm.com/) 选择下载 Windows 版本并按照提示进行安装。 -![alt text](https://pic.axi404.top/download_git.3goby6c027.webp) +![](https://pic.axi404.top/download_git.3goby6c027.webp) 在安装中需要注意的是： @@ -94,19 +94,19 @@ cat ~/.ssh/id_ed25519.pub 进入本仓库的 [Github 主页](https://github.com/SurviveXJTU/SurviveXJTU.github.io)，点击 `Fork` 按钮，即可将本仓库 Fork 到自己的 Github 账号下。 -![alt text](https://pic.axi404.top/fork_1.1e8ja4df0x.webp) +![](https://pic.axi404.top/fork_1.1e8ja4df0x.webp) -![alt text](https://pic.axi404.top/fork_2.5mnqjy3nte.webp) +![](https://pic.axi404.top/fork_2.5mnqjy3nte.webp) Fork 操作本质上是复制了一份本仓库到自己的账号下，并在自己的账号下享有修改的权限，同时可以比较自己账号下的仓库与上游仓库之间的更改差别，Fork后的仓库可以在自己账号的 Repositories 中看到。 -![alt text](https://pic.axi404.top/find_fork.45m3svfps.webp) +![](https://pic.axi404.top/find_fork.45m3svfps.webp) ### 克隆仓库 在 Fork 完成之后，在自己 Fork 的仓库中，找到并点击 `< > Code` 按钮，之后点击 `SSH` 按钮，并复制链接。 -![alt text](https://pic.axi404.top/gain_ssh.m0632d03.webp) +![](https://pic.axi404.top/gain_ssh.m0632d03.webp) 在本地找到适合保存本项目的文件夹，右键资源管理器，点击 `在终端中打开`，并进行克隆操作。 @@ -226,11 +226,11 @@ git push origin main 假如说进行了成功的提交，可以注意到，自己的仓库中应显示如 `1 commit ahead of` 的字样。点击 `Contribute` 并点击 `Open pull request` 即可发起一个 Pull Request，并等待管理员进行审核。 -![alt text](https://pic.axi404.top/pr_1.ic1uo3ql1.webp) +![](https://pic.axi404.top/pr_1.ic1uo3ql1.webp) 请确保 PR 的 title 中表意明确，同时 description 中清晰描述了自己添加的内容，之后点击 `Create pull request` 即可，管理员在收到内容之后会进行审查并给出 `comment` 或直接将你的 PR Merge 进主分支，即完成了贡献。 -![alt text](https://pic.axi404.top/pr_2.2rv2e5oh1y.webp) +![](https://pic.axi404.top/pr_2.2rv2e5oh1y.webp) ## VitePress 快速建站