Skip to main content

21 posts tagged with "Docusaurus"

The Docusaurus static site generator.

View All Tags

How we fixed my SEO

· 33 min read
John Reilly
OSS Engineer - TypeScript, Azure, React, Node.js, .NET
Growtika
A dedicated SEO and growth marketing firm for dev-focused, cybersecurity, fintech and deep tech startups

We might also call this:

I ruined my SEO and a stranger from Hacker News help me fix it

This is a follow up to my "How I ruined my SEO" post. That was about how my site stopped ranking in Google's search results around October 2022. This post is about how Growtika and I worked together to fix it.

As we'll see, the art of SEO (Search Engine Optimisation) is a mysterious one. We made a number of changes that we believe helped. All told, my site spent about a year out in the cold - barely surfacing in search results. But in October 2023 it started ranking again. And it's been ranking ever since.

I put that down to the assistance rendered by Growtika. What was the nature of that assistance? I'll tell you. This post is a biggie; so buckle up!

title image reading "How we fixed my SEO" with images of graphs trending upwards in the background

Docusaurus 3: how to migrate rehype plugins

· 13 min read
John Reilly
OSS Engineer - TypeScript, Azure, React, Node.js, .NET

Docusaurus v3 is on the way. One of the big changes that is coming with Docusaurus 3 is MDX 3. My blog has been built with Docusaurus 2 and I have a number of rehype plugins that I use to improve the experience of the blog. These include:

I wanted to migrate these plugins to Docusaurus 3. This post is about how I did that - and if you've got a rehype plugin it could probably provide some guidance on the changes you'd need to make.

title image reading "Migrating rehype plugins to Docusaurus 3" with the Docusaurus logos

Docusaurus blogs: using the createFeedItems API with git commit date

· 6 min read
John Reilly
OSS Engineer - TypeScript, Azure, React, Node.js, .NET

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.

This post builds upon a technique we've previously used to drive the lastmod properties of our sitemap. You can read about driving lastmod from git commit here.

title image reading "Docusaurus: using the createFeedItems API with git commit date" with the Docusaurus logo

Adding lastmod to sitemap based on git commits

· 5 min read
John Reilly
OSS Engineer - TypeScript, Azure, React, Node.js, .NET

This post demonstrates enriching an XML sitemap with lastmod timestamps based on git commits. The sitemap being enriched in this post was generated automatically by Docusaurus. The techniques used are predicated on the way Docusaurus works; in that it is file based. You could easily use this technique for another file based website solution; but you would need tweaks to target the relevant files you would use to drive your lastmod.

If you're interested in applying the same technique to your RSS / Atom / JSON feeds in Docusaurus, you may find this post interesting.

title image reading "Adding lastmod to sitemap based on git commits" with XML and Docusaurus logos

Lighthouse meet GitHub Actions

· 12 min read
John Reilly
OSS Engineer - TypeScript, Azure, React, Node.js, .NET

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.

title image reading "Lighthouse meet GitHub Actions" with the Lighthouse logo and a screenshot of the results in a GitHub comment`

Lazy loading images with Docusaurus

· 3 min read
John Reilly
OSS Engineer - TypeScript, Azure, React, Node.js, .NET

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.

title image reading &quot;Lazy loading images with Docusaurus&quot; with a Docusaurus logo and an image that reads &lt;img loading=&quot;lazy&quot;

Docusaurus, meta tags and Google Discover

· 3 min read
John Reilly
OSS Engineer - TypeScript, Azure, React, Node.js, .NET

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.

title image reading &quot;Docusaurus, meta tags and Google Discover&quot; with a Docusaurus logo and the Google Discover phone photo taken from https://developers.google.com/search/docs/advanced/mobile/google-discover

Blog Archive for Docusaurus

· 6 min read
John Reilly
OSS Engineer - TypeScript, Azure, React, Node.js, .NET

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.

Docusaurus blog archive

Updated 2021-09-01

As of v2.0.0-beta.6, Docusauras does ship with blog archive functionality that lives at the archive route. This is down to the work of Gabriel Csapo in this PR.

If you'd like to know how to build your own, read on... But you may not need to!