How to add images to a Markdown-based page

Intro

Here, you will learn how to add images to a Markdown-based page. These instructions show how to add these images locally, on your computer, so first you need to know how to work locally with GitHub Desktop app and Obsidian. If you're new to these tools, we recommend reading this howto first:

• How to edit or add Markdown-based pages locally on your computer

Or you can follow these two tutorials to start from scratch:

• Tutorial 1: Create a Markdown based website from scratch
• Tutorial 2: Edit your website locally on your computer

Prerequisites

• A GitHub account
• A GitHub Desktop app
• Obsidian

Steps

Step 1: Set the assets folder as an attachment folder

In Obsidian, in the root of your vault, create a new folder called 'assets'. Then, right click on and select "set as attachment folder". By doing so, all the images you paste into your note will automatically be saved to this folder (instead of being saved to the root, next to all your notes). This is necessary for your website to display embedded images.

Step 2: Copy and paste your image

Copy whichever image you would like to add and paste it directly into your Obsidian note. You can check that it has been saved to the "assets" folder.

Step 3: Commit and push

To learn more about this step, see the howto or the tutorials listed in the intro section.

Summary

Congratulations, you've now learned how to add an image to your Markdown page!

If anything is not clear to you, or you have suggestions on how we can make this 'How to' better, please don't hesitate to let us know.

Happy editing!