介绍一个 GitHub + jsDelivr 图床神器

前言

像最原始用 GitHub + jsDelivr 的时候，一推图片 commit、push，然后浏览器访问 https://cdn.jsdelivr.net/gh/用户名/仓库名@分支/ 点来点去再复制图片的链接，这真的是非常的繁琐，后来有了 PicGo ，这大大的让我们简便了许多，再后来又有了 autoPicCdn，这让我们无需下载安装，直接网页上使用。

而今天无意中发现了一款基于 GitHub API 的免费、稳定且高效的图床管理神器。图片外链使用 jsDelivr 进行 CDN 加速，免下载安装，打开网站即可使用

这让我放弃了 autoPicCdn，为什么呢？

autoPicCdn 是 PHP 写的，得要虚拟主机，虽然也有很多免费的，这个不重要，主要是我号多，每次上传我还得跑去 up.php 改配置…所以我就弄了三台虚拟主机且还不够，域名嘛，倒无所谓，整几个 Freenom 的免费域名就好
图片没有管理

开始使用

今天介绍的这个图床神器也就是 picx

首先这个项目是基于 Vue 写的，这点我就很喜欢，而且无需服务器，你可以打开 picx 的网站，直接使用，地址：https://picx.xpoet.cn/

怎么使用，作者的 README.md 也讲的非常清楚，照着做即可

而本篇文章不只是介绍，而是搭建一个自用的图床神器，不想麻烦的你可以直接打开 picx 的网站即可使用

步骤

我分为 5 点

克隆项目，本地调式
创建仓库（分为源码仓库和生成的静态仓库，注意是俩仓库）
修改 .travis.yml
部署到 Vercel
完成搭建

克隆项目

项目地址：https://github.com/XPoet/picx
随便在哪 git clone https://github.com.cnpmjs.org/XPoet/picx.git
在 picx 根目录中执行 npm install
执行 npm run serve 进行本地调式，默认端口是 8080
收工

创建仓库

这里需要俩仓库

一：源码仓库

二：是打包之后生成的 dist 目录的仓库，就是个空仓库，可以这么理解：由持续集成帮你 push

当然你可以不这么做，甚至你可以在 picx 根目录执行 npm run build 之后吧生成的 dist 目录直接 push，随后导入到 Vercel 并自定义域名大功告成

修改 .travis.yml

因为我要部署在 Vercel 嘛，故这里修改一下

# 编译语言、环境
dist: xenial
os: linux
language: node_js

# Node.js 版本
node_js:
  - 12

cache: npm

# 只有 master 分支更改才触发 CI
branches:
  only:
    - master

before_install:
  - export TZ='Asia/Shanghai'

install:
  - npm install # 安装依赖

script:
  - npm run build # 执行打包命令，生成 dist 静态文件
  - cd ./dist
  - git init
  - git config user.name "${GIT_NAME}"
  - git config user.email "${GIT_EMAIL}"
  - git add .
  - git commit -m "update By garvey"
  - git push --force --quiet "https://${GH_TOKEN}@${GH_REF}" master:master

修改完成之后，在 travis-ci 导入你的源码仓库，随后点击 Settings 设置变量

变量说明：

NAME	VALUE
GIT_NAME	GitHub 用户名
GIT_EMAIL	邮箱
GH_TOKEN	去 https://github.com/settings/tokens/new 生成 TOKEN，勾选 repo 和 workflow
GH_REF	也就是刚刚创建打包生成的 dist 目录的仓库，格式为：github.com/用户名/仓库名.git

配置完成后并 push，然后等待 travis 完成工作之后，静态仓库就有了打包之后的文件了