Skip to main content

Cholphone

· 3 min read
John M Telford

John Telford​

The latest incarnation of the John Telford website is built using the mdBook site generator

Tech Talk John​

The latest incarnation of the TechTalkJohn Blog is what you are viewing. It is built using the blog components of the Docusaurus site generator.

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

I chose this site generator because:

  • Docusaurus abstracts React
  • Posts are written use MDX
    • Embedded JSX and HTML
    • MDX is compiled to the troika of HTML, CSS, and JavaScript standard website programming languages
    • The blog sidebar on the left side of the screen displays a list of blog posts
  • The right menu is the selected blog post headers levels
  • Click menu bar Blog Tags for a list of blog post with tags. Click a tag for all blog posts with that tag
  • Multiple tags can be assigned to blog posts
  • Light or dark theme toggle

Docusaurus​

Docusaurus is a static-site documentation site generator. It is an open-source website generator created by Facebook. It builds a single-page application with a fast client-side navigation, and extracts React

Features​

Features

out-of-the-box​

The out-of-the-box features I was looking for are:

Components​

  • Powered by React and MDX
  • JSX embedded in blog and MDX documents
  • Extend and customize with React
  • A Jamstack implemented site generator

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