Adding Images To a Hexo Post Via Markdown

Maher Jendoubi asked how to add images to a Hexo blog post via Markdown.

Rather than try to post the answer in the comments of my course Build a Better Blog with a Static Site Generator, I thought I'd do so via a blog post so that I could go into more detail.

First let's look at the basic Markdown syntax for inserting an image:

![]()

So it's just an exclamation point (or bang) followed by square braces and then parentheses.

This is essentially the same as a link, but with the addition of the exclamation point.

The two bits of info we need to add are the Alt Text and the image location.

The Alt Text goes inside the square braces and the link goes inside the parentheses.

If we look at the image at the top of this post what I see in my text editor is this:

![Sample Image Added via Markdown](/images/2015/12/sampleImage.jpg)

If you view source on my page what you would see is this:

<img src="/images/2015/12/sampleImage.jpg" alt="Sample Image Added via Markdown">

So the next question is "Where the heck do I put the image??".

The answer is actually “Wherever you like inside the source directory.”

In my case I have a structure inside my source directory that looks like this (pruned for clarity here):

├───content
│   ├───images
│   │   └───2015
│   │       ├───01
│   │       ├───02
│   │       ├───07
│   │       ├───09
│   │       ├───10
│   │       ├───11
│   │       └───12
│   └───presentations
│       └───2015
│           ├───02
│           ├───07
│           ├───10
│           └───11
├───_data
└───_posts

I put my static content inside a “content” directory because I picked up the habit while working with ASP MVC. You might choose to simply create an “img” directory.

Any directory that starts with an underscore (_data and _posts) will be either ignored (_data) or in the case of _posts, processed by Hexo (converted from Markdown to HTML for instance), but anything without an underscore will simply be copied to the output directory.

You can expand on that syntax a few ways.

I like to put my images inside <figure> tags, so the full bit I see is this:

<figure class="left-align quarter-width">![Sample Image Added via Markdown](/images/2015/12/sampleImage.jpg)<figcaption>
  This is a sample image added via Markdown in an HTML figure. Also, I got a new camera
  and took a pretty cool picture of a helicopter.
</figcaption>
</figure>

Yes it looks crappy all run together on that first line, but if you put in linebreaks Hexo's Markdown to HTML conversion will add in extra <br/> tags and screw up your layout.

One last thing I often do is make the image itself into a link.

This one gets messy, so hold on… We'll make it simply link to the full image itself.

[![Sample Image Added via Markdown](/images/2015/12/sampleImage.jpg)](/images/2015/12/sampleImageFullSize.jpg)

And here is the result:

The messy part you see is that the entire image syntax goes inside the link's square brackets.

That is very easy to get wrong. This is another bit where using your text editor's snippet functionality can help (covered in Module 6 of my course).

I hope this helps! Let me know in the comments if you have any questions.