前言

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

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

这让我放弃了 autoPicCdn,为什么呢?

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

    img

  2. 图片没有管理

开始使用

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

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

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

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

步骤

我分为 5 点

  1. 克隆项目,本地调式
  2. 创建仓库(分为源码仓库和生成的静态仓库,注意是俩仓库)
  3. 修改 .travis.yml
  4. 部署到 Vercel
  5. 完成搭建

克隆项目

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

创建仓库

这里需要俩仓库

一:源码仓库

源码仓库

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

静态仓库

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

修改 .travis.yml

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
# 编译语言、环境
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 设置变量

img

变量

变量说明:

NAMEVALUE
GIT_NAMEGitHub 用户名
GIT_EMAIL邮箱
GH_TOKENhttps://github.com/settings/tokens/new 生成 TOKEN,勾选 repo 和 workflow
GH_REF也就是刚刚创建打包生成的 dist 目录的仓库,格式为:github.com/用户名/仓库名.git

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

static-pic

部署到 Vercel

打开 Vercel

导入刚刚的静态仓库

vercel-1

满屏的烟花说明成功了

vercel-2

我们点击 View Domains 自定义域名

vercel-3

输入自己的域名并点击右侧的 Add,随后根据它的提示进行域名解析,你也可以使用 Vercel 提供的二级域名,格式为 xxx.now.sh \ xxx.vercel.app

vercel-4

完成搭建

success

说实话这个管理我真的是太爱了,可以切换到不同的目录进行管理

管理