GitHub remains ane of the virtually reliable repository website for code, but we can also utilize its storage capability to host images for our website. The easiest mode is but to upload/button image files to your GitHub repo and become the link from the web. But beyond manual upload, we always prefer elegant ways.

In this tutorial, we will use a image upload tool called PicGo. Then we are going to set up a custom domain for the GitHub repo to enable the pretty link for our images, e.thou.: https://moving picture.fizzy.cc/img/somepicture.png (I will besides apply it as a sit-in in the post-obit text).

PicGo currently supports 8 epitome hosting providers, some of them are professional Object Storage Service (OSS) providers. We will but focus on how to prepare on GitHub for now.

Notation: PicGo is just bachelor in Chinese now, only after the setup you lot won't need to use the interface anymore.

1 GitHub Settings

1.i Create A New GitHub Repo

Outset, you lot need to create a new GitHub Repo as the host. Proper noun the repo whatever yous similar. Brand sure the repo is public otherwise the images cannot exist access by your website or anyone else. Tick the box to create a default README.md file for the repo.

1.two Create an Admission Token

Click your avatar at the acme right corner, go to Settings -> Developer Settings -> Personal access tokens, or merely click here. And then click the "Generate new token" button.

Write a Note the reference for yourself and ONLY select repo in the scopes.

Go to the lesser of the page, click the dark-green "Generate token". Copy the token now and paste it somewhere else or yous will not be able to admission to it. The token is the key that PicGo volition use to access your repo later. Exercise non give the token to others!

1.3 Ready Custom Domain

1.iii.1 GitHub Repo Settings

Now direct to the Settings of your repo created earlier. Scroll down and find the GitHub Pages setting.

Select the master branch every bit the source of the folio. So the page volition refresh.

Scroll down and type in the custom domain name you want for the repo, recommend to use a secondary domain (e.grand. picture show.fizzy.cc). And so click "Salvage", the folio volition refresh once again.

Now if you coil downward you lot will come across a notification tells yous that your site is ready with the custom domain you prepare, and there is a CNAME file within your repo. Exercise not delete it.

Do not shut the folio for at present.

1.3.two Update DNS of Domain

Now go to your domain registrar or DNS service prodiver, create a CNAME record for your domain. The host is what you specified earlier (e.chiliad. pic), the value is YOUR-GITHUB_ACCOUNT.github.io (east.g. myname.github.io).

The DNS settings may have few minutes to be effective. You can attempt ping with the domain to see if information technology has the aforementioned ip as your github.io domain's ip. If you refresh the setting page yous will probably encounter:

Don't be panic, just wait for the DNS settings to have effect. After that, refresh the GitHub Pages settings page, click the "Enforce HTTPS" if a certificate has been issued already.

Now we have finished all settings in the GitHub.

2 PicGO Settings

2.1 Download PicGo

Go to the release page of PicGo to download the latest version for your computer, it supports MacOS, Windows and Linux.

Right click the PicGo icon and Open up the window, then set up as below:

2.2 Set Shortcut Keys

Past default the shortcut central for upload is control or control + shift + P. You can customize it at:

Now you tin select some images in your folder or copy a prototype to your clipboard, then use the shortcut key to automatically upload them to your GitHub repo. Then you tin click the PicGo icon and click the latest image to copy the image url in markdown format. Paste it to anywhere in your blog editor.

Notice

GitHub is a skilful place to host all your regular weblog images. Still, in that location is a storage limitation of rach repository on GitHub. If your website stores images more than 1GB, y'all might want to consider other alternatives rather than using this method. Read more than here.

Alternatives

  • uPic: https://github.com/gee1k/uPic (support clipboard upload)

If yous accept whatever question please experience free to inquire in the comment section below.