How to put up pictures on blog

23 May 2017

Writing blog post is fun, but pure text can be boring sometimes. And sometimes a picture is worth a thousand words. Therefore, today I am going to find out how to post images on my blog.

Update: I found a new sneaky way of uploading images. The method below kind of breaks the https encrytion (the green lock at the top of the url address on your browser, and I don’t like it) I am not exactly sure of why this happens. But the browser complained that the site is not secure anymore because

Attackers might be able to see the images you’re looking at on this site and trick you by modifying them. I am not entirely sure what that means, but it does not seem very good.

To overcome that break of security of my site, I have found another way to upload picutres via github. The trick is to create a issue on the any github repo, drag the image into the issues section and wait for it to upload. After it is done uploading, it will have a link of the picture. And viola, the picture is uploaded to github and you have a link to that picture.

Note. I also changed the picture example below to use the method I learned above to keep my website ‘secure’.

I found a guide here which includes instructions on how to host pictures on the blog.

There is two steps to putting up images on the site.

1. First, I need to know how to put up the image on the blog. This can be accomplished easily with using Markdown (which we use to write our blog).
2. Second, I need a location to put the image at. In other words, I need to host the image somewhere on the internet.

Show images using Markdown

Here’s a cheatsheet I found online that tells you how to put images up with markdown.

Host images on github

There are many ways to upload images on the internet. A simple google search will show image hosting sites avaliable for free. But why rely on those when we can do it ourselves. I have a minimalist mindset. If I can find a way to do it myself, then that will be the priority.

Since this blog is hosted on github itself, I can create a folder within that repository hosted by github and thus have a directory on the internet where I can host things. First create a directory that will store the images that I will host. I will call this directory /assets Go to the directory of the blog, and type mkdir assets.

Now, stuff in the /assets can be accessed on the internet with the link. For example if I have an image called huis-ten-bosch.png, then I can access it with the link http://jeffreywu1996.github.io/assets/huis-ten-bosch.png

Now, using this link with markdown, we should be able to finally put the image on the internet.

Let’s try it. This is a picture of me last summer at Huis Ten Bosch. Let’s see if it shows up.

Vola! Success.