I've written previously about using Structured Data with React. This post goes a little further and talks about how to use Structured Data with Docusaurus and MDX. More specifically it looks at how to create a component that both renders FAQs into a page, and the same information as Structured Data.
19 posts tagged with "Docusaurus"
View All TagsDocusaurus blogs: adding breadcrumb Structured Data
By default, Docusaurus blogs don't add breadcrumb Structured Data to their blog posts. It's not hard to make it happen though; this post shows how to add it using the JSON-LD format.
Docusaurus blogs: using the createFeedItems API with git commit date
A new API landed in Docusaurus 2.3.0 - it's called createFeedItems
. It's a great API that allows you to tweak the Atom / RSS / JSON feeds for your blog. This post shows how to use it with the git commit date.
Docusaurus: improving Core Web Vitals with fetchpriority
By using fetchpriority
on your Largest Contentful Paint you can improve your Core Web Vitals. This post implements that with Docusaurus.
Serving Docusaurus images with Cloudinary
Cloudinary offers an image CDN which can improve performance of your site. This post details how to get Docusaurus to use Cloudinary to serve optimised images.
Publishing Docusaurus to dev.to with the dev.to API
The dev.to API provides a way to cross post your Docusaurus blogs to dev.to. This post describes how to do that with TypeScript, Node.js and the dev.to API.
Docusaurus: Using fontaine to reduce custom font cumulative layout shift
Custom font usage can introduce cumulative layout shift (or "jank") to your website. This post shows how to use fontaine to reduce this with Docusaurus sites.
Adding lastmod to sitemap based on git commits
This post demonstrates enriching an XML sitemap with lastmod
timestamps based on git commits.
XML: read and write with Node.js
This post demonstrates reading and writing XML in Node.js using fast-xml-parser
. We'll use the Docusauruses XML sitemap as an example.
Faster Docusaurus builds with swc-loader
This post demonstrates how to speed up your Docusaurus build by using SWC and the swc-loader
for webpack.
Azure Static Web Apps: Node.js 16 / 18 and Oryx
Azure Static Web Apps presently fixes to Node.js 14 when building. If you require a different version of Node to build, this can be a problem. This post outlines a workaround.
Lighthouse meet GitHub Actions
Lighthouse is a tremendous tool for auditing the performance and usability of websites. Rather than having to perform these audits manually, it's helpful to be able to plug it into your CI pipeline. This post illustrates how to integrate Lighthouse into a GitHub Actions workflow for an Azure Static Web App, and report findings directly in pull requests that are raised.
Azure Static Web Apps - a Netlify alternative
Jamstack sites have taken the world by storm. There's currently fierce competition between offerings like Netlify and Cloudflare. A new player in this space is Azure Static Web Apps. This post will look at what working with SWAs is like and will demonstrate deploying one using GitHub Actions.
Lazy loading images with Docusaurus
If you'd like to improve the performance of a Docusaurus website by implementing native lazy-loading of images, you can. This post shows you how you too can have <img loading="lazy"
on your images by writing a Rehype plugin.
Preload fonts with Docusaurus (updated 03/11/2022)
When we're using custom fonts in our websites, it's good practice to preload the fonts to minimise the flash of unstyled text. This post shows how to achieve this with Docusaurus.
Docusaurus, meta tags and Google Discover
Google Discover is a way that people can find your content. To make your content more attractive, Google encourage using high quality images which are enabled by setting the max-image-preview:large
meta tag. This post shows you how to achieve that with Docusaurus.
Blog Archive for Docusaurus
Docusaurus doesn't ship with "blog archive" functionality. By which I mean, something that allows you to look at an overview of your historic blog posts. It turns out it is fairly straightforward to implement your own. This post does just that.
RSS update; we moved to Docusaurus
My blog lived happily on Blogger for the past decade. It's now built with Docusaurus and hosted on GitHub Pages. To understand the why, read my last post. This post serves purely to share details of feed updates for RSS / Atom subscribers.
The definitive guide to migrating from Blogger to Docusaurus
This post documents how to migrate a blog from Blogger to Docusaurus.