欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2024-03-19 16:59:58
...

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

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

今天介绍的图床由 Gitee + Git + PicGo 搭建而成。可以直接拖拽图片到 PicGo 软件,即可获取图片的相应链接 ,当然支持自定义输出链接 。(本文图片较多,流量预警!)
手把手教你搭建个人免费稳定的图床,史上最详细的教程!基于gitee+git+picgo

需要哪些软件或者工具:

• 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),找到 “注册” 并点击进入。
    手把手教你搭建个人免费稳定的图床,史上最详细的教程!基于gitee+git+picgo
  2. 在注册页面填入你的相关信息,并保存起来,以防账号或者密码忘记。
    手把手教你搭建个人免费稳定的图床,史上最详细的教程!基于gitee+git+picgo
  3. 创建并登录之后,最好先验证邮箱。然后,在页面的导航找到 “+” 并点击,然后选择 “新建仓库”。
    手把手教你搭建个人免费稳定的图床,史上最详细的教程!基于gitee+git+picgo
  4. 在新建仓库页面,填入仓库名称(自定义)>>> 开源公开 >>> 使用Readme初始化仓库 >>> 点击 “创建”。
    手把手教你搭建个人免费稳定的图床,史上最详细的教程!基于gitee+git+picgo
  5. 建好后的仓库如下:
    手把手教你搭建个人免费稳定的图床,史上最详细的教程!基于gitee+git+picgo
  6. 接着,我们创建 index.html 文件。在仓库页面找到 “文件”>>> “新建文件” 并点击。
    手把手教你搭建个人免费稳定的图床,史上最详细的教程!基于gitee+git+picgo
  7. 新建一个 index.html 文件,再按如下图操作即可。牢记:index.html 不能输错,内容随便输入点什么~ 然后,点击最下方的 “提交” 。
    手把手教你搭建个人免费稳定的图床,史上最详细的教程!基于gitee+git+picgo
  8. 然后,找到 "服务"选项 >>> “Gitee Pages” ,进入page页面后,选中 “强制使用HTTPS” >>> 点击 “启动”。
    手把手教你搭建个人免费稳定的图床,史上最详细的教程!基于gitee+git+picgo
  9. 成功后,会显示给你的静态网址,进入网址后,就可以看到刚才刚才我们输入到 index.html 的文本内容(当然,这只是前戏,还没完呢~)。
    手把手教你搭建个人免费稳定的图床,史上最详细的教程!基于gitee+git+picgo
    这个是刚才的设置的页面。
    手把手教你搭建个人免费稳定的图床,史上最详细的教程!基于gitee+git+picgo
    我们注册好了gitee,并创建了仓库,接着来初始化本地配置。

**

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

**

  1. 新建文件夹,文件夹名称随便起。然后在文件夹上 点击鼠标"右键",找到 “Git Bash Here”,进入 Git 操作窗口。
    手把手教你搭建个人免费稳定的图床,史上最详细的教程!基于gitee+git+picgo
  2. 在弹出的窗口的命令行输入:git init
git init

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

  • 此命令主要是为了初始化一个 git 本地仓库。如果成功,刚刚新建的文件夹下会出现一个隐藏的 .git 文件夹
  1. 接着,本地仓库和远程仓库建立连接。我们输入 git remote add origin (这个网址是你的仓库地址,地址获取看下面)
git remote add origin 网址

手把手教你搭建个人免费稳定的图床,史上最详细的教程!基于gitee+git+picgo
获取仓库地址,打开刚才创建的仓库,找到 “克隆/下载”>>> 复制 HTTPS 地址
手把手教你搭建个人免费稳定的图床,史上最详细的教程!基于gitee+git+picgo
5. 接着输入命令 git pull origin master 这步的作用是:将码云上的仓库 pull 到本地新建的文件夹中。

git pull origin master

手把手教你搭建个人免费稳定的图床,史上最详细的教程!基于gitee+git+picgo
5. 接着修改 index.html 文件,也就是你想要的页面,并添加素材,我这里又新建了一个 img 文件,用来以后存放图片(这个文件夹中必须要有文件,你就放一张图片就好了!当然也可以不创建~)

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

手把手教你搭建个人免费稳定的图床,史上最详细的教程!基于gitee+git+picgo
6. 使用如下命令来输入用户名和邮箱(此用户名和邮箱是 git 提交代码时用来显示你身份和联系方式的,并不是 gitee 的用户名和邮箱),我这里用的是gitee的信息。

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

手把手教你搭建个人免费稳定的图床,史上最详细的教程!基于gitee+git+picgo
7. 然后输入 git add . (此命令可以将文件保存到缓存区,注意 . 之前还有空格!!!)

git add . 

手把手教你搭建个人免费稳定的图床,史上最详细的教程!基于gitee+git+picgo
8. 输入 git commit -am “此处填写上传文件描述” (此命令主要是为了添加文件描述)

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

手把手教你搭建个人免费稳定的图床,史上最详细的教程!基于gitee+git+picgo
10. 这时会弹出OpenSHH信息框,我们按照提示依次输入 username 账号password 密码
手把手教你搭建个人免费稳定的图床,史上最详细的教程!基于gitee+git+picgo
11. 如果弹出以下窗口,那我们安装 .NET Framework 4.6.1,这个百度都可以搜到。
手把手教你搭建个人免费稳定的图床,史上最详细的教程!基于gitee+git+picgo
12. 接着输入 git push origin master ,将本地代码push到我们的码云仓库,正确会显示如下信息。

git push origin master

手把手教你搭建个人免费稳定的图床,史上最详细的教程!基于gitee+git+picgo
14. 再次打开我们的 gitee 仓库,就会看到我们本地的文件已经成功上传了。
手把手教你搭建个人免费稳定的图床,史上最详细的教程!基于gitee+git+picgo
15. 我们再打开( https://pyshadow.gitee.io/test )自己的网址,如果还没有刷新,可以到 gitee pages 更新即可!

手把手教你搭建个人免费稳定的图床,史上最详细的教程!基于gitee+git+picgo
16. 成功的话,会正确显示我们的首页。
手把手教你搭建个人免费稳定的图床,史上最详细的教程!基于gitee+git+picgo
到这里,我们又成功的创建了仓库并且上传了静态页面的相关文件。

**

第四步:配置PicGo

**

  1. 首先,下载开源项目PicGo地址:
    https://github.com/Molunerfinn/PicGo/releases
    手把手教你搭建个人免费稳定的图床,史上最详细的教程!基于gitee+git+picgo
    选择相应的系统进行下载,下载速度较慢,耐心等待。如果急需,文末有全部资料。

  2. 安装 PicGo ,选择 "仅为我安装 "。
    手把手教你搭建个人免费稳定的图床,史上最详细的教程!基于gitee+git+picgo

  3. 选择安装路径,看你自己的需求,我建议不要装到系统盘,我这里演示在 C 盘,然后直接安装就可以了。
    手把手教你搭建个人免费稳定的图床,史上最详细的教程!基于gitee+git+picgo

  4. 安装好后,我们切换回 gitee 页面中,在我的头像中找到 “设置” 选项,并点击进入。
    手把手教你搭建个人免费稳定的图床,史上最详细的教程!基于gitee+git+picgo

  5. 在账号信息中的左侧栏中找到 “私人令牌”,点击进入。

手把手教你搭建个人免费稳定的图床,史上最详细的教程!基于gitee+git+picgo
6. 之后,点击 “+” 生成新令牌"。
手把手教你搭建个人免费稳定的图床,史上最详细的教程!基于gitee+git+picgo
7. 输入令牌的描述,这里随便写。
手把手教你搭建个人免费稳定的图床,史上最详细的教程!基于gitee+git+picgo
8. 输入你的 gitee 密码。
手把手教你搭建个人免费稳定的图床,史上最详细的教程!基于gitee+git+picgo
9. 复制保存好令牌!!!后面要用,也不要给别人透露。

手把手教你搭建个人免费稳定的图床,史上最详细的教程!基于gitee+git+picgo
10. 打开软件,在任务栏中找到这个软件(我第一次用这个软件,都找不到,还以为软件崩溃了~),然后点击 “打开详情窗口”。
手把手教你搭建个人免费稳定的图床,史上最详细的教程!基于gitee+git+picgo
11. 在 PicGo 软件中找到 “插件设置” >>> 输入 “gitee” ,搜索结果中的第二个 "gitee-uploader 1.x.x.x " 就是我们要找的,然后点击 “安装”。
手把手教你搭建个人免费稳定的图床,史上最详细的教程!基于gitee+git+picgo
12. 大多数人在点击安装后都会显示该信息框。那么我们安装就是了。因为我演示用的系统是 win7 ,所以,安装 node.js 是网址2 。

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

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

*ps : 如果下载速度慢的话,可以试试文末我提供的安装包。
手把手教你搭建个人免费稳定的图床,史上最详细的教程!基于gitee+git+picgo
13. 安装好 node.js 后,重启 PicGo 软件,然后再次按照步骤11搜索 “gitee”,然后点击安装。

  • 安装好 gitee 插件后,建议再次重启 PicGo软件。之后,在 "图床设置"中找到 “gitee”,并填入相关数据。

  • repo:填写格式 用户名/仓库名

  • branch:仓库分支,选择默认的master即可

  • token:上面已经介绍过了,就是生成的私人令牌

  • path:图片存储路径,就是我刚才新建的 img 文件

  • customPath:需要不用填写,这个就是你提交图片时显示消息的格式,可以看下面的图,消息格式为 Upload 图片名 by PicGo

  • customUrl:不需要填写
    手把手教你搭建个人免费稳定的图床,史上最详细的教程!基于gitee+git+picgo
    这里我们把 gitee 设置为默认图床,然后点击 “确定”,就算配置成功了。

  1. 检测 gitee 图床是否设置成功。我们在 “上传区” 拖入一张图片,如果右下角显示 “上传成功”,那么说明我们终于配置好图床了!!!
    手把手教你搭建个人免费稳定的图床,史上最详细的教程!基于gitee+git+picgo
    如果需要查看历史图片上传,在 “相册” 区域可以回看。
    手把手教你搭建个人免费稳定的图床,史上最详细的教程!基于gitee+git+picgo
    总结:作为一个菜鸟,我在第一次搭建的时候也是遇到了很多困难,但是通过度娘都通通的解决了。我相信通过我的教程,会给你带来很多便利,也许也会遇到麻烦,你可以私信我,尽力帮你。

手把手教你搭建个人免费稳定的图床,史上最详细的教程!基于gitee+git+picgo手把手教你搭建个人免费稳定的图床,史上最详细的教程!基于gitee+git+picgo
以上所有软件或者命令,我都打包上传到了网盘,如果需要,请关注公众号:小布软件分享,后台回复 >>> 图床 <<< 获取!

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