Now the problem remains how to get the image to the github repo. coped_from_nb folder cannot be used as it is automatically generated. So the only way to get my image to the above folder is by using it somewhere in my jupyter notebook (I think).
The final result that gets rendered is shown below. But the size of the table is small. How to make the table the complete width of the post?
Note:- Zero indent <img src="">. Otherwise nbdev will not convert the source URLs.
In this above example, two examples would be shown. All the details can be found in the two links above. But this is the basic template that would work fine. <div style="flex:1">, “1” is referring to the aspect ratio of the image (I used a dummy value for this example).
Things I learned
I only know basic HTML and CSS, so after reading the suggestion by @rohanrajpal, it solved all my issues with fastpages.
Cannot use brackets (, ) in markdown image import. The below code does not work.
!(image.png "Caption (something)")
It gives an error, I think it has something to do with the expression search that nbdev is doing underneath.
<figure> can be used to achieve this.
Could not use links in image port, due to the problem of brackets I think. The solution of (1) also solved this for me.
@hamelsmu, image links are not converted when image is imported using <img src="">. I think this is a nbdev issue but I am not sure. If this issue is solved, then there would be no need to make a separate folder for images, which needs to be first pushed to Github. This will help when we want to add links in caption of images or use multiple image like in flexbox.
Thanks @jeremy, @hamelsmu or this awesome blogging platform. I have converted all my previous blogs to fastpages and moved to fastpages as my personal website. Now I can just write a jupyter notebook and do git push and a new post is created.