DEV Community

Qiwen Yu
Qiwen Yu

Posted on

2

Lab 6 Learn from Docusaurus for My SSG: TextHTMLPress

Docusaurus Dive-in

Docusaurus will help you ship a beautiful documentation site in no time. Docusaurus is a static-site generator. It builds a single-page application with a fast client-side navigation, leveraging the full power of React to make your site interactive. It provides out-of-the-box documentation features, but can be used to create any kind of site (personal website, product, blog, marketing landing pages, etc).
In one sentence, it is a easy-to-use static site generator, and fully support MarkDown files.

To set up a new website:

  • With node.js, $ npx create-docusaurus@latest my-website classic
  • Run development server, $ cd my-website, npm start
  • Create a new repo and publish it on GitHub.
  • Locally, deploy using $ GIT_USER=<Your GitHub username> USE_SSH=true yarn deploy

My website of this repo can be found here, the corresponding repo is here.

Add Features to My Own SSG: TextHTMLPress

The main feature of Docusaurus is to help project maintainers focus on the content. Thus, it provides a lot of features to support generate html files from MarkDown files. In this work, I was trying to implement this feature on my own SSG.

Add Markdown File Support

The issue was raised by myself here. As suggested in the comment, there is a package called python-markdown which was built for parsing MarkDown files to html style string. Therefore, this package is enough to generate a raw html body with header lines in MarkDown files properly handled.

Add Markdown Frontmatter Support

The issue was raised by myself here.As suggested in the comment, there is a package called python-frontmatter to parse yaml style header in markdown file. Once meta data was extracted from the frontmatter, using yattag and jinja2 packages to generate a proper html file with proper tags.

Overall, the commit to fix these two issues was here.

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more