Skip to main content

Docusaurus

· 2 min read
John M Telford

Deep Technology Dives​

I have been doing deep technology diving exploring website site generators over the years. I have chosen to reincarnate JohnTelford.com website using mdBook and TechTalkJohn blog websites using Docusaurus.

jamstack​

Some website site generators I experienced did not have some of the out-of-the-box features I was looking for.

My preference for website site generators are based on Jamstack architecture

Some out-of-the-box missing aributes I was looking for in deep technology dives were:

  • Sidebar Menu
  • Automatic last update date of file
  • File tags
  • An integrated blog
  • JSX embedded Markdown

I found these and more attributes in some of the website site generators listed in Site Generators.

#

Docusaurus

Docusaurus framework has the out-of-the-box features I was looking for, so I reincarnated TechTalkJohn blog websites using it

Docusaurus is a static-site documentation site generator. It is an open-source website framework created by Facebook. It builds a single-page application with a fast client-side navigation, leveraging React to make websites interactive. Features

out-of-the-box​

The out-of-the-box features I am using are:

Components​

  • Powered by React and MDX
  • JSX embedded in blog and MDX documents
  • Extend and customize with React
  • Modern Jamstack documentation

Development​

  • Hot web browser reloading with fast edit changes incremental builds
  • Route-based code and data splitting
  • Check for errors by building deployment website on local server, using the same process as the deployment server
  • Publish Vercel

The Docusaurus sidebar menu is feature rich, flexible, and not difficult to configure, unlike others I have experienced in my deep technology dives.

There are different types of sidebar items:

  • Doc: link to a doc page, assigning it to the sidebar

  • Ref: link to a doc page, without assigning it to the sidebar

  • Link: link to any internal or external page

  • Category: create a hierarchy of sidebar items

  • Autogenerated: generate a sidebar slice automatically

Files​

  • A website integrated blog
  • Automatic last update date of file
  • File tags

User Experience​

  • Full website is searchable using Algolia
  • Sidebar Menu
    • Website and blog pages
    • MDX files Table of Contents