利用jsDeliver和github托管网站资源

2023-11-10 23:22:22

typora＋picgo+jsDeliver+GitHub：免费图床拿来吧你！

（本方法仅适用于托管网站或者blog的js,css和图片等资源，但是不推荐作为图床使用或者上传大文件视频，毕竟维护良好的生态才能更好的发展。）

文章目录

typora＋picgo+jsDeliver+GitHub：免费图床拿来吧你！

一、概述

1. 为什么自己搭建图床？

**①免费图床不稳定，上传图片易丢失。**举个本人的亲身经历，我大一下暑假前用hexo+butterfly搭建了一个部署在GitHub服务器上的网站（网址），搭建的时候把用到的海量图片都上传到了网上的免费图床，结果大二上寒假再去看的时候发现全是失效图片。。。

**②Markdown语法写博客，需上传图片到网络。**比如用typora写在本地写好博客会发现一键粘贴如果不设置的话并不能将图片粘过去，极大地降低了我们的生产效率，原因是typora的图片文件指向的是本地文件路径，我们需要将图片上传至网络才能在线访问。

**③网页文件包含海量图片影响网页加载时间。**这个时候有好奇心重的同学要问了既然上传至网络，那我干脆和网页文件一起上线不就好了吗？经过大量的实践证明，把海量的图片放到网页文件中不仅消耗服务器资源而且网页加载速度还会变慢，绝对是事倍功半的工作方法，不推荐。

2. 什么是图床？

图床：一般是指储存图片的服务器，有国内和国外之分。国外的图床由于有空间距离等因素决定访问速度很慢影响图片显示速度。国内也分为单线空间、多线空间和cdn加速三种。（–摘自百度百科）

3. 什么是GitHub？

GitHub：一个面向开源及私有软件项目的托管平台，因为只支持Git作为唯一的版本库格式进行托管，故名GitHub。（–摘自百度百科）

4. 什么是jsDeliver？

jsDelivr ：一个免费开源的 CDN 解决方案，用于帮助开发者和站长。包含 JavaScript 库、jQuery 插件、CSS 框架、字体等等 Web 上常用的静态资源。

4.1 什么是CDN？

CDN（Content Delivery Network或Content Distribution Network，内容分发网络）：是指一种透过互联网互相连接的电脑网络系统，利用最靠近每位用户的服务器，更快、更可靠地将音乐、图片、视频、应用程序及其他文件发送给用户，来提供高性能、可扩展性及低成本的网络内容传递给用户。

4.2 jsDeliver在国内能访问吗？

可以。这个去查他的域名注册信息就能发现他们公司把域名挂在了国内，自然是能访问的。

二、配置GitHub

1. 新建仓库(略)

2. 推送资源至仓库（略）

3. 发布版本（略）

4. 设置token

Github的setting->developer setting->personnel access tokens ->generate new taken -> 设置note(密钥名)->设置expiration（有效期）-> scopes(repo)

三、利用jsDelive加载资源

https://cdn.jsdelivr.net/gh/你的用户名/你的仓库名@发布的版本号/文件路径
【例】
https://cdn.jsdelivr.net/gh/dew-white/cdn@v0.1/img/cj.png

四、免费图床推荐

1. 聚合图床

网址：https://www.superbed.cn/

简介：将图片分发到多处备份，借助其本身的CDN加速功能，节省服务器流量，并且不用担心图片被删除，即便其中某几个图床上的图片被删除了，还有其他备份，保证万无一失，支持匿名和注册管理
限制：无

2. 路过图床

网址：https://imgchr.com/

简介：支持免注册上传图片，永久存储，支持HTTPS加密访问和调用图片，提供多种图片链接格式，成立于2011年

限制：上限10M

五、typora中的实践

你是否还在问本地.md文件其他设备无法访问图片而苦恼，那就赶快尝试以下方法解决吧！

方法一、人工写链接（不推荐！！！）

https://cdn.jsdelivr.net/gh/你的用户名/你的仓库名@发布的版本号/文件路径
【例】
https://cdn.jsdelivr.net/gh/dew-white/cdn@v0.1/img/cj.png

方法二、 picgo(app)

1. 安装picgo

下载路径：https://github.com/Molunerfinn/PicGo/releases/tag/v2.3.0

2. 图床设置

3.配置typora

文件 > 偏好设置 > 图像 > 上传服务设定，上传服务选择 Custom Command，命令填写格式：[node路径] [picgo路径] upload，示例如下，根据自己的实际安装路径填写。

C:\Develop\nodejs\node C:\Develop\nodejs\node_global\node_modules\picgo\bin\picgo upload

方法三、customed command

1. 下载node.js

网址：https://nodejs.org/zh-cn/

2. cmd命令下载picgo（必须是v1.4.4）

npm install -g picgo@1.4.4

3. 配置相应文件(查找文件时建议使用everything)

3.1 进入 Node.js 全局包路径，找到 picgo 模块，编辑 picgo\dist\src\plugins\uploader\smms.js 文件，替换为以下内容保存。

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });

/**
 * 获取上传请求参数
 * @param {string} fileName 文件名称
 * @param {Buffer} image 文件
 */
const postOptions = (fileName, image, config) => {
    return {
        method: 'POST',
        url: 'https://imgtu.com/json',  // 请求地址
        headers: {
            contentType: 'multipart/form-data',
            'User-Agent': 'PicGo',
            'Cookie': config.Cookie   // 从配置中读取cookie
        },
        formData: {
            auth_token: config.auth_token,  // 从配置中读取token
            type: 'file',
            action: 'upload',
            source: {
                value: image,
                options: {
                    filename: fileName
                }
            }
        }
    };
};

/**
 * 处理上传
 * @param {PicGo} ctx picgo核心对象
 */
const handle = async (ctx) => {
    // 读取配置文件内容
    const smmsConfig = ctx.getConfig('picBed.smms');
    if (!smmsConfig) {
        throw new Error('Can\'t find smms config, please provide api token, see https://sm.ms/home/apitoken');
    }
    // 获取上传图片对象
    const imgList = ctx.output;
    for (const img of imgList) {
        if (img.fileName && img.buffer) {
            let image = img.buffer;
            if (!image && img.base64Image) {
                image = Buffer.from(img.base64Image, 'base64');
            }
            // 传入图片名称、图片buffer、配置，获取上传参数
            const postConfig = postOptions(img.fileName, image, smmsConfig);
            // 执行上传请求，获取响应，转换为json对象
            let body = await ctx.Request.request(postConfig);
            body = JSON.parse(body);

            // 解析响应
            if (body.status_code === 200) {
                delete img.base64Image;
                delete img.buffer;
                // 从响应对象中获取url，并设置上
                img.imgUrl = body.image.url;
            }
            else {
                ctx.emit('notification', {
                    title: '上传失败',
                    body: body.error.message
                });
                throw new Error(body.error.message);
            }
        }
    }
    return ctx;
};

/**
 * smms图传配置文件约束
 * @param {PicGo} ctx picgo核心对象
 */
const config = (ctx) => {
    const userConfig = ctx.getConfig('picBed.smms') || {};
    const config = [
        {
            name: 'token',
            message: 'api token',
            type: 'input',
            default: userConfig.token || '',
            required: true
        }
    ];
    return config;
};

exports.default = {
    name: 'SM.MS图床',
    handle,
    config
};

3.2 创建配置文件，路径：C:\Users$username.picgo\config.json，内容如下

{  "picBed": {    "uploader": "smms",     "smms": {      "auth_token": "d7af9fc5dd20d280d4f67cd8dd464fabf1844d9a",      "Cookie": "_ga=GA1.2.650273945.1603294038; _gid=GA1.2.1281460922.1605894072; KEEP_LOGIN=FvrM6%3A8188288104ddb1cff227b4c3b67ed83a6f9c5751ba0eab88b6f93dc72bb5097cdd2bacb5b79d4baf7abf25c95f9753cc01989ce5f79439ce4c89ac66d5911076029a349a2cc57bfc08556983e10d58da02cbbbeaf089c4f8a72a5b155c0eced20f0c307ae8bf53a58dbe8f5b8e7c6d79f48a1c%3A1605898871; PHPSESSID=dtov7is0da2ai36pfphen5nt59; Hm_lvt_c1a64f283dcc84e35f0a947fcf3b8594=1605894072,1605963994; Hm_lpvt_c1a64f283dcc84e35f0a947fcf3b8594=1605968640"    }  },  "picgoPlugins": {}}

注意：cookie和token不稳定，需自行查询你安装时的cookie和token

{
  "picBed": {
    "smms": {
      "Cookie": "自行替换为图床的cookie",
      "auth_token": "自行替换为图床的token"
    },
    "uploader": "smms"
  }
}

3.3 配置typora

文件 > 偏好设置 > 图像 > 上传服务设定，上传服务选择 Custom Command，命令填写格式：[node路径] [picgo路径] upload，示例如下，根据自己的实际安装路径填写。

C:\Program Files\nodejs\node C:\Users\33309\AppData\Roaming\npm\node_modules\picgo\bin\picgo upload

码农公寓