【开源图床】使用Typora+PicGo+Github+CDN搭建个人博客图床

简介: 【开源图床】使用Typora+PicGo+Github+CDN搭建个人博客图床

image.gif

准备工作:

首先电脑得提前完成安装如下:

1. nodejs环境(node ,npm):【安装指南】nodejs下载、安装与配置详细教程

2. Picgo:【安装指南】图床神器之Picgo下载、安装与配置详细教程

3. Typora:【安装指南】markdown神器之Typora下载、安装与无限使用详细教程

工具介绍:

  • typora: Markdown工具,写Markdown文件的神器,简洁、方便、免费
  • PicGo:开源的图片管理工具,可以自己上传图片到各种图床
  • CDN(内容分发网络)是一种网络架构,由于Github搭建的是国外的图床,导致访问速度很慢影响图片显示速度,所以国内也分为单线空间、多线空间和cdn加速三种。本文使用CDN加速网站访问速度。

目录

🌼一、什么是图床?

🌷二、Typora+PicGo+Github+CDN搭建个人图床

☀️2.1 PicGo

☀️2.2 Typora


🌼一、什么是图床?

图床是一种在线存储图片的服务,通常用于在网页、博客等互联网平台上存储和分享图片。图床服务允许用户将图片上传到服务器,并生成一个唯一的URL链接用于访问这些图片。这样一来,用户可以在发布文章、发表评论或者分享内容时,直接引用这些图片的链接,而无需将图片文件直接插入到内容中。图床服务的优势在于可以减轻网站或博客的服务器负担,提高页面加载速度,同时也方便了用户管理和分享图片资源。常见的图床服务提供商包括七牛云、腾讯云、阿里云等,此外,也有一些开源的图床工具可供用户自行搭建和使用。


🌷二、Typora+PicGo+Github+CDN搭建个人图床

☀️2.1 PicGo

打开PicGo,可以看到PicGo默认显示Github的图床

点击图床设置->github(将其设置成默认图床)

现在需要填入对应的参数(见后续)

前往github官网https://github.com/ 先注册后登录。

新建仓库(后续用以存放图片)

创建仓库

此时可以写入参数如下

点击:个人头像->settings

下滑找到Developer settings

创建新的令牌

增加描述

令牌创建成功,记得复制令牌!!!

把复制的令牌填入Picgo的参数token,并且参数customPath选择年月,点击确定。

设置自定义域名我们使用免费的CDN,其中UserName和RepoName分别修改成自己的GitHub的用户名和仓库名(很简单的查看方式就是去刚刚创建的图床仓库项目地址下查看)

设定自定义域名:
https://raw.githubusercontent.com/UserName/RepoName/main
https://cdn.jsdelivr.net/gh/UserName/RepoName
二选一

这里不同的markdown编辑器可能在其中一个域名的图片渲染不出来,那怎么办呢?当然是换一个呀~     希望大家在搭建后续发现这个问题能够记起这里曾有这样一句话~

由于GitHub 默认分支由master分支改名为main分支,设置分支为main

最后PicGo参数填写如下:


☀️2.2 Typora

打开Typora,选择文件->偏好设置->图像【配置如下】

点击验证图片上传资源

显示成功!!!

我们可以登录github的对应项目img/目录下查看上传的图片


相关实践学习
Serverless极速搭建Hexo博客
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
目录
相关文章
|
4月前
|
缓存 前端开发 JavaScript
通过jsDelivr实现Github图床CDN加速
jsdelivr是一个免费的公共CDN(内容分发网络)服务,它允许网站开发者将他们的代码库、JavaScript库、字体和其他资源托管在jsdelivr上,并通过jsdelivr的CDN网络进行快速分发。使用jsdelivr可以有效地减少用户下载资源的时间,提高网页加载速度,同时减轻原始服务器的负载。
342 1
|
16天前
|
前端开发 JavaScript 开发工具
使用jsDelivr和GitHub,上传本地静态资源到免费CDN
本文介绍了一种将本地图片和静态资源(如 js、css、文档等)上传至免费CDN的方法,便于随时调用。具体步骤包括:在GitHub创建仓库`resources`存放资源;通过上传或Git命令同步文件;在仓库中创建新版本并发布。之后即可通过指定格式的URL访问这些CDN资源。此方法简单高效,适合开发者快速部署和共享静态内容。
使用jsDelivr和GitHub,上传本地静态资源到免费CDN
|
1月前
PicGo——利用PicGo和GitHub搭建免费图床提供给Typecho使用
PicGo——利用PicGo和GitHub搭建免费图床提供给Typecho使用
12 0
|
3月前
|
Linux
Typore+PicGo+GitHub图床搭建
Typore+PicGo+GitHub图床搭建
25 1
|
4月前
|
程序员
借用GitHub将typora图片文件快速上传CSDN
借用GitHub将typora图片文件快速上传CSDN
如何利用 Github 搭建自己的免费图床?
如何利用 Github 搭建自己的免费图床?
1319 0
如何利用 Github 搭建自己的免费图床?
|
15天前
|
Rust 前端开发 JavaScript
Github 2024-05-20 开源项目周报 Top15
根据Github Trendings的统计,2024年5月20日当周共有15个项目上榜。按开发语言分类,项目数量如下:Python项目5个,TypeScript项目3个,C++项目2个,Jupyter Notebook项目2个,C、Go、Rust和C#项目各1个。介绍了多个值得关注的项目,包括ChatGPT桌面应用程序、Fooocus图像生成软件、Jellyfin媒体系统等。这些项目涵盖了多种功能和技术领域,值得关注和研究。
32 3
|
15天前
|
SQL JavaScript 前端开发
Github 2024-08-05 开源项目周报 Top15
根据 Github Trendings 的统计,本周(2024年8月5日统计)共有15个项目上榜。以下是根据开发语言汇总的项目数量: - Go 项目:4个 - JavaScript 项目:3个 - Python 项目:3个 - Java 项目:2个 - TypeScript 项目:2个 - C 项目:1个 - Shell 项目:1个 - Dockerfile 项目:1个 - 非开发语言项目:1个
22 2
|
15天前
|
人工智能 Rust JavaScript
Github 2024-08-26 开源项目周报Top15
根据Github Trendings的统计,本周共有15个项目上榜。以下是按开发语言汇总的项目数量:Python项目8个,TypeScript、C++ 和 Rust 项目各2个,Jupyter Notebook、Shell、Swift 和 Dart 项目各1个。其中,RustDesk 是一款用 Rust 编写的开源远程桌面软件,可作为 TeamViewer 的替代品;Whisper 是一个通用的语音识别模型,基于大规模音频数据集训练而成;初学者的生成式人工智能(第2版)则是由微软提供的18门课程,教授构建生成式AI应用所需的知识。
49 1
|
15天前
|
Rust Dart 前端开发
Github 2024-08-19 开源项目周报Top15
根据Github Trendings的统计,本周(2024年8月19日统计)共有15个项目上榜。按开发语言分类,上榜项目数量如下:Python项目最多,有7项;其次是JavaScript和TypeScript,各有3项;Dart有2项;HTML、PowerShell、Clojure和C++各1项。此外,还介绍了多个热门项目,包括Bootstrap 5、RustDesk、ComfyUI、易采集、Penpot等,涵盖了Web开发、远程桌面、自动化测试、设计工具等多个领域。
52 1

热门文章

最新文章