Build a static image server via Github

Xin Guo
3 min readApr 20, 2020

--

When we write the Blog in markdown, we need to face a problem which is displaying an image. To achieve this, we need to provide a url for the image as following:

![Alt](<image-url>)

Usually, we use a path of the image on your local laptop, or google an image on network. But when we want to post the article on to the network or send the article to someone else, we need to consider how to send the images together. We need to figure out how to package them and sometimes, the images you googled are deleted so you lose that image forever. And people can not see the image in the article, this really influence the readability of the article. So, we need a stable server to manage our images.

Build a static file server is a good approach, but it is a little expensive in both effort and money aspect. eg. AWS, Azure. Of course we can also choose some free cloud service like Heroku, Heroku allow each user to build 5 free server, so of course it can host a static file server. But you still need the knowledge to build the server and all kinds of configuration. Every time you add a new image, you need to deploy again. So I am going to provide a new idea — Github.

Github Image Server

Github

As our code VCS, itself can store the files. We usually push some images into the GitHub repos in our software projects. And GitHub provide a url to ref these images, so we can get a fixed URL to request these images easily. And also when you copy the article to somewhere else, you don’t need to worry about losing the image.

You need to google or draw the image you need by yourself, put it in you git repo, commit and push the changes to the Github remote repo. And that’s it.

If you want to get the image URL, you can open the GitHub repo in browser and find the image, right click the image and select copy image address, then paste in your markdown document. eg.

https://github.com/emagrorrim/static-images/blob/master/images/v1/github.png?raw=true

You will find the URL is not generated randomly, it confirms to a fixed pattern:

https://github.com/<username>/<static-images-repo-name>/blob/master/<path-to-image>/<image-name>.<png|jpg|...>?raw=true

And for a repo, most parts of the URL are fixed, even <path-to-image> is also fixed. In fact, we just need to change the <image-name> and file format.

Static File Server

Using this method, it is not just an image server, it can host all kinds of static files.

Of course this is not fit to normal web application, it just apply to markdown blog. Besides, it can also share the files, you can share the file links to other people. But be careful, the GitHub public repo means everyone can access your files stored in it.

Summary

In conclusion, Github is a quite good tool unless the files or images are private or including any personal information. It can help us build a static file server very fast. And you don’t need to have knowledge about how to build a server. All you need to learn is Github itself.

Next

Build a static image server via Github — Upload CLI: https://medium.com/@emagrorrimxguo/build-a-static-image-server-via-github-upload-cli-4f809a155f05

--

--