A VuePress-next template to build a static web site as blog and knowledge management system.
"Two dishes one fish" is a smart cuisine using different part of one fish to make two delicious dishes, inspired by it I want to build web site as a blog and a knowledge management system, with the same Markdown files system.
I choose VuePress as the generator to compile the Markdown files to HTML files and deploy the static site to Github Page.
VuePress is so easy to use by the out-of-the-box default theme just setting some configurations. My major work is to optimise the experience of browser the website and post:
- the Markdown files can classify into tow types, it can be a blog post and a note at the same time, or just as a note.
- add a blog posts navigation page, the blog post show as cards, user can browser the posts in three mode: cards grid mode, cards masonry mode, and posts list mode.
- add a notes navigation page, all Markdown files will be notes, the notes show in a grid layout as the same structure as they save in the files system, powering by D3.js, you can also browser the notes in a tree chart.
- support to add tags to Markdown file and filter the posts or notes in navigation page.
- follow the RWD, responsive web design, principle, you can browser the website in different screen size.
- Live Demo: Collection
- Video Demo: Youtube | Bilibili