Built the create-blog page using react

You can see create icon in header once signed in.

You can create your blog and post it to my site.

This Create Blog page consists some interesting components like:

• Add Tags
• Select Images + remove selected images
• Live Markdown Editor, renders live preview

And last but the most interesting part

• Live Blog Preview using locally selected images

Cause the URL of any of locally selected image is given in markdown and we also need to view rendered image on preview. But the images are not yet uploaded while creating blog in local.

So, I mapped the ObjectURLs of the selected images with the image names. Then replaced all the image URLs in the markdown with ObjectURLs of the corresponding image and rendered the processed content in preview.

Once blog is posted, images are uploaded and loads via the main URL as usual.

Visit Create Page after signing in and try it out, click Open preview to open editor.

After selecting local images

Now how to add images in markdown? or what will be the proper URL of the selected image?

No worries !

You can simply right click on the content, where you want to paste the selected image URL. Then click on any image showed up in the drawer.

After choosing image, URL should be copied to clipboard.

Now you can paste image anywhere in your markdown content.