作者:Mintimate
Mintimate's Blog,只为与你分享
有些人可能对图床这个没什么概念,所谓图床,英文叫法应该叫:ImageHost,也就是储存图片的中枢,可以理解为:用户存储图片后,系统提供改图片的直接链接,用来通过网络访问显示该图片。
使用图床,更好地管理图片,方便打包备份图片;配合CDN,还能更好优化网站加载。
Markdown、HTML就是很好的图床使用场景点:Markdown和HTML插入图片,使用标记展示一个图片:
# Markdown
![图片描述](图片地址)
# HTML
<img src="图片地址"/>
其中,图片地址
可以使用图片的绝对或者相对路径,比如:
/img/Mintimate_Logo.png
:到网站根目录下img文件夹找Mintimate_Logo.png图片来展示。../Mintimate_logo.png
:到上级目录找Mintimate_Logo.png图片来展示。而在一些网站上进行操作,没有明确绝对路径和相对路径时,就需要用到网络地址图片这个时候就可以用图床提供的直接链接,比如:评论回复
当然,更多用与文本创作。比如我在写这篇文章时,就用到腾讯云的图床:
图床的实现很简单,归根结底,就是上次图片到服务器,服务器提供图片链接地址,一般会使用:
来实现图床功能。
但是,考虑到成本和后期便于管理,我们使用:
所以,大题上我们搭建的图床过程:
Lighthouse上细节实现:
首先,我们需要一台轻量应用服务器;因为要配合CDN,所以带宽无所谓。建议购买优惠产品:
建议使用Linux系统服务器,这次我使用Debian发行版本Linux来演示:
内容分发网络,需要备案域名。如果你没有域名或者域名没有备案,可以参考:
域名备案挺简单的,大概7-14天可以备案完成。具体可以参考备案文档。
之后需要内容分发:腾讯云内容分发网络
首先,我们需要SSH连接服务器,之后为了方便,我们使用宝塔快速搭建Nginx,使用我们先安装一下宝塔:
之后,复制到SSH控制台:
之后,安装好宝塔后,进入宝塔面板内,到软件商店
内下载:
这样Nginx就已经安装好了。
我们需要通过Nginx设置一个网站,用来展示我们的图片,因为我们刚刚已经通过宝塔安装Nginx,所以在这再设置一个网站:
我们这里设置的图床网站地址为:/www/wwwroot/imagehost.flyinbug.cn
:
现在,我们先放一下。先去配置Git。
因为我们采用本地文件,同步至服务器Git仓库的方式,来上传图片的,所以服务器需要安装Git。
首先,我们要安装Git,在SSH内输入:
# Ubuntu/Debian
sudo apt-get install git
# Centos
sudo yum install git
因为,我是Debian发行版本Linux。所以使用sudo apt-get install git
来安装Git:
我以前安装过,所以并没有很多细节日志,小伙伴们第一次安装Git,输出的日志应该会比我多。
首先,我们看看我们事先有没有创建Git用户,输入命令:
cat /etc/passwd|grep -v nologin|grep -v halt|grep -v shutdown|awk -F":" '{ print $1"|"$3"|"$4 }'|more
我们创建git
用户:
sudo adduser git
按提示设置密码和信息即可创建完成:
之后,我们到/home
目录下,即可看到新添加的git用户:
到此,配置Git已经完成。感兴趣的可以:
为了避免权限问题,我们切换为刚刚创建的git用户:
# 切换为git用户
sudo su git
进入git用户家目录内(/home/git
),创建一个mySource
文件夹,里面用来存git仓库:
# 切换环境为/home/git内
cd ~
# 创建mySource文件夹
mkdir mySource
之后,我们进入mySource
文件夹,并初始化一个叫imagehost.git
的git仓库:
cd mySource
# 初始化叫imagehost.git的仓库
sudo git init --bare imagehost.git
之后会多一个项目文件夹:
进入项目文件夹查看初始化的内容:
这个时候,我们图床仓库
就创建好了。
我们设置一下hooks,用于每次本地仓库推送到云端时,自动用最新版本图床图片覆盖至Nginx网站下。我们刚刚Nginx创建的图床网站地址:/www/wwwroot/imagehost.flyinbug.cn
,所以:
# (当前在项目文件夹内)进入hooks文件夹内
cd hooks
# 创建并编辑钩子
vim post-receive
其中:
--work-tree
:填Nginx网站地址。--git-dir
:填图床仓库地址。之后提取按,赋予执行权:
chmod +x post-receive
刚刚我们已经创建了图床仓库
,本地也需要安装Git。这里不再赘述。在安装好后,以下方法二选一:
powershell
或terminal
内同步仓库到本地。本文演示在Terminal上操作:
git clone git@server-IP:/home/mySource/imagehost.git
其中,server-IP
为你服务器的IP或域名:
之后,本地就出现这个仓库了:
之后,我们对本地仓库加入图片:
之后,我们在终端内操作:
服务器:
chmod 777 /www/wwwroot/imagehost.flyinbug.cn
本地:
# 添加所有文件
git add
# 创建commit
git commit -m "init".
# 推送到服务器主分支
git push origin HEAD
这个时候,我们的服务器上Nginx文件夹内就有文件(图片)了:
如果你域名直接解析到服务器IP,就可以直接用域名看到图片了:
但是,这样很危险⚠️:
所以,我们需要套上CDN加速。
我们进入CDN控制台,选择域名管理-添加域名
:
之后,填写信息:
即可开启CDN,并可以在CDN控制台看到效果:
检测一下域名对应IP,可以看到是CDN节点服务器IP,而不是我们轻量应用服务器的IP:
注意⚠️:
使用CDN配合服务器Git操作,搭建的小型化图床。适合个人或者小型团队使用。同时,利用Git,方便进行备份和回档。
但是一定要注意设置CDN域名的防盗链和IP响应限制。搭建有什么不清楚,可以文章下留言嗷~
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。