My Obsidian & Mkdocs workflow

Share & showcase
1

Hello Everyone,

I wanted to share with you my workflow with Obsidian and Mkdocs. And why I chose both.

I’m an Instructor & Technical Writer. I wanted a tool that:

  1. Supports publishing my .md files
  2. Supports Multi-language (ltr +rtl)
  3. Supports HTML & javaScript tags

Mkdocs is a great static site generator tool, build using Python. It’s extremely easy to use and modify.

All what you need to after finishing modifications - CSS & YAML - is to open the /docs folder as your vault in Obsidian.

In regards to multi-language support, I’m writing in both Arabic & English. So I need to create a duplicate of each markdown file with a slight change. ex: Index.en.md & Index.ar.md. So when the used switch languages from the main navigation bar, files are going to be replaced with the correct language.

Here is a link of a quick live version on github:
https://tarekshehata.github.io/alkashi/Math/Basic%20Shapes/Circle/

Here is a screenshot:

screencapture-127-0-0-1-8000-Math-Basic-Shapes-Circle-2021-09-20-21_55_01
screencapture-127-0-0-1-8000-Math-Basic-Shapes-Circle-2021-09-20-21_55_011706×936 120 KB

I’ve installed exactly:

  1. Mkdocs Material
  2. Mkdocs Gruvbox
  3. Mkdocs i18n plugin

And some other dependencies in the virtual environment. It was very easy thanks to God.

Please let me know if you have any suggestions, ideas or questions. I’ll be very happy to help :slight_smile:

6 Likes
2

Your site is very tidy and attractive. The instructional content looks clear and well organized. Good job.

3

A very tidy website!
Do you think it’s possible to share only some note? I don’t want to have all my notes in github.

4

IIRC, mkdocs material does not support Mermaid. How did you draw diagram like in your demo post? Thanks.

https://tarekshehata.github.io/alkashi/Math/Basic%20Shapes/Circle/

1 Like
5

I also like how you did the tabs for the code-blocks

mind sharing the source md-files?