使用Github 当作自己个人博客的图床

前提

本文前提:

  1. 我个人博客的草稿是存放在 github上的一个仓库 diarynote
  2. 截图存放的图片或者需要放在文章中图片,会固定存放在对应的文件夹中,我个人是使用日期文件夹,如: uploads/190828/test.jpg
  3. 本文中提到的这个仓库,都是指我自己的 diarynote 仓库

使用GitHub作为图床

从上面的描述可以知道,我自己的一个项目仓库的一个文件夹在 GitHub的 的路径固定是 https://github.com/wakasann/diarynote/tree/master/draft/

当我使用Typora工具在本地编写当前仓库的Markdown 图片路径一般都会写成

![](uploads/190828/test.jpg)

编辑的时候,可以边预览边编辑,因为编辑时,查看的是本地的图片,访问速度快,也好替换。

一般编辑完之后,我自己会这个仓库的改动推送到 GitHub上。

当自己准备发布当前编辑的Markdown 文件中,并且该文件中图片时,可以通过喜欢的文本编辑工具,如:sublime text

查找

uploads

替换为

https://raw.githubusercontent.com/wakasann/diarynote/master/draft/uploads

废话1

自从有了博客的草稿仓库之后,我遇到发布的烦恼是:

  1. 将草稿发布到我自己 Hexo 源码项目中时,需要将图片复制一遍到 source/uploads,然后在草稿的图片链接面前加一个/就可以了,这个工作量对我来说还行
  2. 将草稿发布到 博客园时,那文章中的使用到的图片就需要通过博客园的图片上传进行上传,这个发操作对比上一点,上传的工作量就有点大了

慢慢的,自己通过逛v2ex 社区,发现了一个 sm.ms的网站,,然后自己也注册了,体验过,速度还是可以的,对写 Markdown文档也有很大的帮助,后来了解到图床是指 专门存放图片的服务器。

我主要是从维护自己个人博客图片路径的麻烦程度来考虑使用哪种图床来进行选择。

  1. 使用非github图床时,如原博文中, markdown 图片路径是: ![](uploads/20190814/20190812173836.png) ,在 Typora 和 在我自己基于Hexo的博客中,都可以直接显示图片。

通过sm.ms 上传的图片,得到 ![20190812173836.png](https://i.loli.net/2019/08/14/sLlFKmqwAXvaGfO.png),替换之后,在 Typora 和 在我自己基于Hexo的博客中,也都可以直接显示图片。

自己担心以后免费的图床以后不存在了,那博客中的所有图片也就看不到了,要替换自己草稿仓库中已存放图片路径,工作量会比较大,故 最后选择 自己存放博客草稿的仓库服务器 Github 作为自己的图床。

  1. 使用github图床时,如: 如原博文中, markdown 图片路径是: ![](uploads/20190814/20190812173836.png) ,在 Typora 和 在我自己基于Hexo的博客中,都可以直接显示图片。

通过查看这个仓库的图片路径,发现在dfaft文件夹的的所有图片路径相同开头的路径是https://raw.githubusercontent.com/wakasann/diarynote/master/draft/,我只需要在 已有的Markdown 文件中 图片链接 前面加 https://raw.githubusercontent.com/wakasann/diarynote/master/draft/ 即可,以后github的图床不能使用时,我可以通过我自己喜欢的 sublime text 文本编辑工具,将这个仓库的所有Markdown 源文件的 https://raw.githubusercontent.com/wakasann/diarynote/master/draft/ 替换为空,然后就可以重新发布到基于Hexo的个人博客网站上了,但发布到非基于hexo 的其它平台时,自己还是无法避免要和自己上面提到的烦恼2 一样,一张一张的上传了。


废话2

我的个人博客目前是使用 hexo 进行搭建,存放的主机的1个月流量少,如下图:

发布在 博客园自己的博文的流量也是少的,所以没有 达到滥用的程度。

得到以上的结论之后,我自己的心里也好过一点了,嘿嘿嘿 ??

从下面参考的文章,自己明白

使用GitHub作为图床的缺点

  1. 当提交图片上传的GitHub的仓库时,会给自己的Github帐号 添加无效的提交绿点

而使用GitHub作为图床,对我来说的好处是:

  1. 仓库中的图片路径 维护起来比较方便, 将同一个随笔发布到其它平台时,发布的速度会比较快
  2. 免费

通过帖子 你们都用什么图床啊?,看回复,自己了解到的是:

  1. 使用 阿里云OSS 或者腾讯云OSS 加开源的 PicGo 来自己搭建图床
  2. 在自己服务器上使用开源的 imgurl 来搭建图床
  3. 使用Gitee 做图床
  4. 使用网上已有的免费图床 sm.ms ,imgchr
References
  1. 厘清把 github 当图床的思路
  2. Github做图床
  3. github做Markdown图床
  4. 图床工具的使用---PicGo

原文地址:https://www.cnblogs.com/fsong/p/11425669.html

时间: 2024-10-07 23:35:08

使用Github 当作自己个人博客的图床的相关文章

hexo博客微博图床失效解决办法

最近在v2ex上看到有人说微博图床开始限制外链了.当时我看了看我的博客,图片还好.第二天再去看的时候就挂了.评论里有人说改一个no-ferrer能解决. 记录一下操作方法. N:\blog\themes\jacman\layout\_partial\head.ejs 修改上述路径的文件,jacman是所用的主题文件夹.因为每个页面都会包含head这个文件,在里面加上一行代码 <meta name="referrer" content="no-referrer"

Github Pages 搭建个人博客

1.Github简介 Github很好的将代码和社区联系在了一起,于是发生了很多有趣的事情,世界也因为他美好了一点点.Github作为现在最流行的代码仓库,已经得到很多大公司和项目的青睐,比如jQuery.Twitter等.为使项目更方便的被人理解,介绍页面少不了,甚至会需要完整的文档站,Github替你想到了这一点,他提供了Github Pages的服务,不仅可以方便的为项目建立介绍站点,也可以用来建立个人博客. Github Pages有以下几个优点: 轻量级的博客系统,没有麻烦的配置 使用

使用github + Octopress 搭建免费博客 + 碰到问题的解决方法

使用github + Octopress 搭建免费博客,先说碰到的问题,具体创建方法见下面. 问题1, 添加ruby淘宝链接问题,显示无法获取, 解决: source “http://ruby.taobao.org” 需要修改成: source “https://ruby.taobao.org” 问题2,rake setup_github_pages 操作之后没有反应, 解决: 此时需要直接写git://github.com/yourname/yourname.github.io.git 具体配

使用 Hexo,Material Theme 以及 Github Pages 搭建个人博客

title: 使用 Hexo,Material Theme 以及 Github Pages 搭建个人博客 date: 2019-04-29 00:05:50 tags: 其他 --- 准备条件 Node.js npm Git GitHub账号 开始搭建 hexo init Blog cd Blog npm install hexo-deployer-git --save npm install hexo-material cp node_modules/hexo-material themes/

Linux下使用 github+hexo 搭建个人博客03-hexo配置优化

上两张文章,我们说了 hexo 部署.主题的切换.博文的创建.MarkDown 简单使用和 hexo 部署到 GitHub Pages. 也说了我们会使用 next 主题做为我们后期博客的使用和维护.但是该主题的原生态,可能或多或少不满足我们当前的需求,因此需要我们对其进行优化,达到我们想要的效果. 因此这篇文章和下篇文章主要就是针对主题的优化进行书写的. 注意事项 1.优化完毕或者新建博客后需要 hexo g 生成静态文件: 2.然后重新启动服务,使用命令 hexo s -p 80 3.浏览器

Linux下使用 github+hexo 搭建个人博客04-next主题优化

上篇我们说了 hexo 的优化,针对的站点的优化. 本篇讲解 next 主题的优化,包括:使用语言.前端页面显示宽度.菜单.侧栏.头像.添加或取消动画效果.打赏功能等等. 让页面排版更符合我们所要的功能和所想的风格. 可参考网站 http://theme-next.iissnan.com/getting-started.html 主题设定 选择 Scheme 修改 next 主题配置文件. 1 [[email protected] next]# pwd 2 /app/softinsall/hex

Hexo+Butterfly+Github+Coding搭建个人博客

Hexo+Butterfly+Github+Coding搭建个人博客 背景 之前用docsify搭建了一个简单的博客,但是docsify主题较少(也可能本人没有找到正确的设置方法⊙﹏⊙|∣),没有自己很喜欢的主题.于是,在近期,利用空闲的时间,用Hexo重新搭建了一个博客.关于Hexo的具体介绍,可以在其官方网站查看具体的说明. 搭建Hexo 搭建Hexo比较简单,按照官方文档的步骤操作即可.这里,简单记录如下: 安装前提 安装Hexo需要先安装: Node.js(Node.js版本不低于8.1

window下Jekyll+github搭建自己的博客

1.安装git 1-1.下载git,这里给出一个地址:http://git-scm.com/downloads 1-2.安装,一路next 1-3.配置git环境变量,将git安装路径中bin的位置xx\Git\bin 和 git-core的位置xx\Git\libexec\git-core添加到path环境变量 2.安装Jekyll 2-1.安装RubyInstallers,下载地址:http://rubyinstaller.org/downloads/,注意:安装过程勾选add to pat

Ubuntu14.04+Jekyll+Github Pages搭建静态博客

官方教程http://jekyllrb.com/docs/installation/ 1. Jekyll简介 简单: 无需数据库.无需评论功能,不需要不断更新版本,只需要关心博客内容. 静态: 只用 Markdown (或 Textile).Liquid.HTML & CSS 就可以构建可部署的静态网站. 博客形态: 自定义地址.分类.页面.博客内容 以及 自定义的布局设计 都是系统中的一等公民. Jekyll详细介绍 2. Github Pages简介 Github Pages是Github提