How to put up pictures on blog

Writing blog posts is fun, but pure text can be boring. Sometimes, a picture is worth a thousand words. Today, I’ll explain how to add images to my blog.

Update: I discovered a clever way to upload images. My initial method broke HTTPS encryption—a warning appeared saying the site is not secure, meaning attackers might see and modify the images.

To resolve this, I found another method: create an issue in any GitHub repository, drag and drop your image into the issue, and wait for it to upload. Once complete, GitHub provides you with a secure link to the image.

You can then embed the image in Markdown. For example, if you have an image named huis-ten-bosch.png in your /assets directory, use:

![Huis Ten Bosch](https://jeffreywu1996.github.io/assets/huis-ten-bosch.png)

Let’s try it with a picture from last summer at Huis Ten Bosch:

Vola! Success.

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 https://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.