手把手教你搭建个人免费稳定的图床,史上最详细的教程!基于gitee+git+picgo

前言:对于自媒体工作者或者经常需要上传图片资源的朋友来说,图片上传到某个平台后,同步到其他平台会出现链接失效的情况,这就大大的增加了我们的时间成本,非常麻烦。

那么,搭建一个属于自己的免费稳定的图床就很有必要了!图床的好处是随时随地、任意平台都可以调用某张图片的链接,提高效率的同时还增加了图片的稳定性!

今天介绍的图床由 Gitee + Git + PicGo 搭建而成。可以直接拖拽图片到 PicGo 软件,即可获取图片的相应链接 ,当然支持自定义输出链接 。(本文图片较多,流量预警!)
4bf097fb1d446f3972c6bd0662d8168b

需要哪些软件或者工具:

• git工具
• gitee账号
• PicGo软件
• 系统环境:Win7 演示(Win系列都差不多~)
• 如果没有以上工具,通过以下教程来获取!

教程分为几个步骤:

1. 安装 Git
2. 注册 Gitee 码云,并新建仓库
3. 本地同步代码到 Gitee
4. 配置PicGo
5. 完成总结

**

第一步:开始安装 Git


可以参考我之前的一篇文章看,超级详细!

https://blog.csdn.net/wx_xiaobu/article/details/110621844

这里提醒一下,git 安装可以直接 “Next” 下一步,直到安装完成!!!但我建议你还是看着我的教程安装。

**

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

第二步:注册 Gitee 码云

  1. 打开码云官网(https://gitee.com),找到 “注册” 并点击进入。
    2d9bb81586e459c839bd7a47b62db74d
  2. 在注册页面填入你的相关信息,并保存起来,以防账号或者密码忘记。
    7ce36c89361a4751b83f6583b7e89e28
  3. 创建并登录之后,最好先验证邮箱。然后,在页面的导航找到 “+” 并点击,然后选择 “新建仓库”。
    bab0d0883b9f15042fe9e5f8946fab60
  4. 在新建仓库页面,填入仓库名称(自定义)>>> 开源公开 >>> 使用Readme初始化仓库 >>> 点击 “创建”。
    3ab95051d78a966693c63f2958d7f10c
  5. 建好后的仓库如下:
    b0fc03826d89ec43011d7a28b8a0804f
  6. 接着,我们创建 index.html 文件。在仓库页面找到 “文件”>>> “新建文件” 并点击。
    e2bc094dac93af07de3c2642af1d2fa7
  7. 新建一个 index.html 文件,再按如下图操作即可。牢记:index.html 不能输错,内容随便输入点什么~ 然后,点击最下方的 “提交” 。
    65955cbbbf10ffa83f895b9351a43a0e
  8. 然后,找到 “服务“选项 >>> “Gitee Pages” ,进入page页面后,选中 “强制使用HTTPS” >>> 点击 “启动”。
    60df4c5d19d2e731772fa5bab5eda6bb
  9. 成功后,会显示给你的静态网址,进入网址后,就可以看到刚才刚才我们输入到 index.html 的文本内容(当然,这只是前戏,还没完呢~)。
    20ecd9a9e3300ec6bc8bc1a45a5c0db3
    这个是刚才的设置的页面。
    4bab7612f281cac226b7e7554ec3c5ea
    我们注册好了gitee,并创建了仓库,接着来初始化本地配置。

**

第三步:本地同步代码到 Gitee仓库

**

  1. 新建文件夹,文件夹名称随便起。然后在文件夹上 点击鼠标”右键“,找到 “Git Bash Here”,进入 Git 操作窗口。
    e98e7bb6af43097cb1edd05cfeb1df93
  2. 在弹出的窗口的命令行输入:git init
git init

57ba3377c1e15999f0094325e5594ddb

此命令主要是为了初始化一个 git 本地仓库。如果成功,刚刚新建的文件夹下会出现一个隐藏的 .git 文件夹

  1. 接着,本地仓库和远程仓库建立连接。我们输入 git remote add origin (这个网址是你的仓库地址,地址获取看下面)
git remote add origin 网址

76871d8de4c5ea114318d208539f0305
获取仓库地址,打开刚才创建的仓库,找到 “克隆/下载”>>> 复制 HTTPS 地址
f0e7a5735b31ff015078c0ec88f9d85f
5. 接着输入命令 git pull origin master 这步的作用是:将码云上的仓库 pull 到本地新建的文件夹中。

git pull origin master

 

61be078fe88ba452309008fcb67f7f4d
5. 接着修改 index.html 文件,也就是你想要的页面,并添加素材,我这里又新建了一个 img 文件,用来以后存放图片(这个文件夹中必须要有文件,你就放一张图片就好了!当然也可以不创建~)

这里我上传的html相关文件都是我自己修改的。大家也可以到网上找一些模板试试。如果需要用我的模板,请到我的公众号后台回复 图床 获取!

e3ecf01715f5adb11681c58b58e74f0c
6. 使用如下命令来输入用户名和邮箱(此用户名和邮箱是 git 提交代码时用来显示你身份和联系方式的,并不是 gitee 的用户名和邮箱),我这里用的是gitee的信息。

git config --global user.name "gitee的用户名"
git config --global user.email "gitee绑定的邮箱"

 

79fe288a4b165181736d4749e7dcafa4
7. 然后输入 git add . (此命令可以将文件保存到缓存区,注意 . 之前还有空格!!!)

git add . 

64a828512ef0acb299b2181a5c84622d
8. 输入 git commit -am “此处填写上传文件描述” (此命令主要是为了添加文件描述)

 git commit -am "此处填写上传文件描述" 

89118419918c6f3a9442afe2461d79aa
10. 这时会弹出OpenSHH信息框,我们按照提示依次输入 username 账号password 密码
96b15e6f29919f446c0994104d451772
11. 如果弹出以下窗口,那我们安装 .NET Framework 4.6.1,这个百度都可以搜到。
e2efa3d378ac7068efe657f755f03d4b
12. 接着输入 git push origin master ,将本地代码push到我们的码云仓库,正确会显示如下信息。

git push origin master

 

b0611e2eac36aa342c2421f3b860662b
14. 再次打开我们的 gitee 仓库,就会看到我们本地的文件已经成功上传了。
591dc88bcb6e31d8b37fc93750fec9db
15. 我们再打开( https://pyshadow.gitee.io/test )自己的网址,如果还没有刷新,可以到 gitee pages 更新即可!

ee9a0eefdaca409098c57c514205bc0c
16. 成功的话,会正确显示我们的首页。
6174bcb48ff80bb4aee599430d5ddade
到这里,我们又成功的创建了仓库并且上传了静态页面的相关文件。

**

第四步:配置PicGo

**

  1. 首先,下载开源项目PicGo地址:
    https://github.com/Molunerfinn/PicGo/releases
    1d1eec73c695028e0fc4a17413928a00
    选择相应的系统进行下载,下载速度较慢,耐心等待。如果急需,文末有全部资料。
  2. 安装 PicGo ,选择 “仅为我安装 “。
    8b6a259a66ac846c615989372686306d
  3. 选择安装路径,看你自己的需求,我建议不要装到系统盘,我这里演示在 C 盘,然后直接安装就可以了。
    25da1fe1ffc021f3d3fcd6f465f5c966
  4. 安装好后,我们切换回 gitee 页面中,在我的头像中找到 “设置” 选项,并点击进入。
    3048fc5af8bd21287ec5b7db3fdc9f71
  5. 在账号信息中的左侧栏中找到 “私人令牌”,点击进入。

2c91fd8cb39bbc9c7f1392a313fff41e
6. 之后,点击 “+” 生成新令牌”。
7e49088f82599a054bf5fe0836192974
7. 输入令牌的描述,这里随便写。
d4504910c4aaed475d292accb635a564
8. 输入你的 gitee 密码。
26813c079c3389001124a530ca3b38a6
9. 复制保存好令牌!!!后面要用,也不要给别人透露。

25eef1cc713938effa10ce1f4d14f3b0
10. 打开软件,在任务栏中找到这个软件(我第一次用这个软件,都找不到,还以为软件崩溃了~),然后点击 “打开详情窗口”。
c842881f84401dffe31f83ae5618792e
11. 在 PicGo 软件中找到 “插件设置” >>> 输入 “gitee” ,搜索结果中的第二个 “gitee-uploader 1.x.x.x ” 就是我们要找的,然后点击 “安装”。
3d53d441e5dabe929ab8084866f5fc7a
12. 大多数人在点击安装后都会显示该信息框。那么我们安装就是了。因为我演示用的系统是 win7 ,所以,安装 node.js 是网址2 。

网址1:https://nodejs.org/zh-cn/ (此版本适用于系统高于 win8,win10)

网址2:https://nodejs.org/download/release/v10.0.0/(此版本适用于win7)

*ps : 如果下载速度慢的话,可以试试文末我提供的安装包。
6a716061ff4612d22409096c06c7110b
13. 安装好 node.js 后,重启 PicGo 软件,然后再次按照步骤11搜索 “gitee”,然后点击安装。

  • 安装好 gitee 插件后,建议再次重启 PicGo软件。之后,在 “图床设置”中找到 “gitee”,并填入相关数据。
  • repo:填写格式 用户名/仓库名
  • branch:仓库分支,选择默认的master即可
  • token:上面已经介绍过了,就是生成的私人令牌
  • path:图片存储路径,就是我刚才新建的 img 文件
  • customPath:需要不用填写,这个就是你提交图片时显示消息的格式,可以看下面的图,消息格式为 Upload 图片名 by PicGo
  • customUrl:不需要填写
    8caa08084dfa13c90179cd14a61572d8
    这里我们把 gitee 设置为默认图床,然后点击 “确定”,就算配置成功了。
  1. 检测 gitee 图床是否设置成功。我们在 “上传区” 拖入一张图片,如果右下角显示 “上传成功”,那么说明我们终于配置好图床了!!!
    131d4823857430e59bc9b2c8fb029215
    如果需要查看历史图片上传,在 “相册” 区域可以回看。
    90637b6c0f3b69b7d2429a48372f39a4
    总结:作为一个菜鸟,我在第一次搭建的时候也是遇到了很多困难,但是通过度娘都通通的解决了。我相信通过我的教程,会给你带来很多便利,也许也会遇到麻烦,你可以私信我,尽力帮你。

a66f8a0ac6b39b69fd4ebd93d84c45976901130ba2a73ccc8b1b36901c246afa

Related Post

发表回复