Insert Image on MkDocs

Now that you know how to install MkDocs and edit the configuration, it’s time to manage your documents. One of the managements is to insert images. In addition, this post also shows how to make our documents online, so that our documents can be read by all people in the world.

Setting mkdocs.yml

This file is available when we finish installing MkDocs via PIP. This file can be opened with any editor, such as Visual Studio Code (VSC). Please delete or edit the available menus according to your needs.

Setting index.md

This is the main part for editing text, namely mark down (md). To make it easier where the script, titles, and images are placed, run the mkdocs serve server. By running the server, the changes we can see the change immediately. Insert the image using the following code in the section you want.


Continue by filling in the image in the img folder location in the docs folder in MkDocs.

Deploy markdown results

Finally, deploy index.md settings by running the code:

mkdocs gh-deploy

If there are no errors, the site folder in MkDocs is ready to be uploaded online. For details, see the following video.