Hexo+云服务器构建简易不失效图床

2023-04-29 17:58:46 浏览数 (1)

引言

目前我的公众号发布流程都是把图片通过 PicGo 上传到 腾讯云COS 上面，再通过链接的方式方式转存到腾讯云开发者社区和公众号上。

但是这样面临两个问题：

第1，是腾讯云COS是收费的，每次上传和引用都是需要付费的。

第2，如果将来脱离腾讯云COS的话，这些链接就会失效，无法访问。

因此，综合考虑的话，将图片直接存到本地是一个收益比较高的方式。

具体流程如下：

在本地写，然后将图片存在 /source/img/ 文件夹里面。然后直接上传到服务器。这样将会获得一个类似于 https://yeyeziblog.eu.org/img/img.png 的可用链接。

通过这样的方式就可以实现 markdown 文本编辑时查看图片和获得链接的功能，需要的软件是 vs code 的插件和 Hexo 。

另外, 如需将 Markdown 文件上传到 Markdown Nice 之类的软件的时候需要将图片链接手动添加上自己的网址。

效果展示

公众号展示效果公众号展示效果

过程

vs code - Paste Image 设置

下载 Paste Image 插件并根据官方提示将以下代码录入 setting.json 即可。

代码语言：json复制
"pasteImage.namePrefix": "${currentFileNameWithoutExt}_",
"pasteImage.path": "${projectRoot}/source/img",
"pasteImage.basePath": "${projectRoot}/source",
"pasteImage.forceUnixStyleSeparator": true,
"pasteImage.prefix": "/"

作用:

将图片直接复制入 projectRoot 目录下的 /source/img 中, 命名为编辑文件名 时间, 如: 趣闻收集202304_2023-04-28-20-47-08 .

上传至服务器

注: 无需安装 hexo 插件.

服务器命令
代码语言：shell复制
git init yeyeziblog.git --bare --shared
cd yeyeziblog.git
cat > hooks/post-receive
git --work-tree=/www/wwwroot/simpread.yeyeziblog.eu.org --git-dir=/home/tenney/git/simpread.git checkout -f master
cat hooks/post-receive
chmod  x hooks/post-receive
本地更改
配置文件
代码语言：yaml复制
deploy:
  type: git
  repo: ssh://tenney@107.175.142.245:22/home/tenney/git/yeyeziblog.git
  branch: master
上传脚本
代码语言：shell复制
#!/bin/bash
SHELL_FOLDER=$(cd "$(dirname "$0")";pwd)
echo $SHELL_FOLDER
cd $SHELL_FOLDER
hexo clean
hexo g && hexo d

修改图片链接

上传之后在对所有 (/img/ 进行搜索, 并修改为 (https://yeyeziblog.eu.org/img/ 相似的格式.

结论

无论出现多少好用的工具，以本地文件形式保存大概率都是最自由和安全的，我们需要努力的地方是使其更加便捷。

引用

  1. Paste Image - Visual Studio Marketplace
  2. vsc-markdown-image/README.zh-cn.md - GitHub
  3. hexo插入图片并排 插入jpg，png，gif - 简书
hexo vscode-extensions markdown图床 Tech

0 人点赞