Today's Deep-Dive: Docusaurus
Ep. 235

Today's Deep-Dive: Docusaurus

Episode description

The Deep Dive podcast explores Docusaurus, a tool revolutionizing website building, especially for content-heavy sites. Docusaurus simplifies the creation, deployment, and maintenance of websites, making it ideal for documentation, projects, and blogs. It focuses on content, allowing users to spend more time on writing and less on complex web development. The tool uses MDX, an enhanced version of Markdown that embeds React components, enabling interactive elements like charts and code playgrounds within text. Docusaurus converts these files into static HTML pages, ensuring fast, secure, and cost-effective hosting. It offers powerful features like React-based customization, pluggable architecture for adding features, and built-in translation support for multilingual sites. The tool also handles document versioning, ensuring users access the correct documentation for their software version, and integrates with Algolia for advanced search capabilities. Docusaurus has gained widespread adoption, with over 61,000 stars on GitHub and use by major projects like Redux and SuperBase. It is beginner-friendly, with instant browser trials and a five-minute tutorial for quick setup. The community is welcoming, offering beginner-friendly bugs and active Discord channels for support and contribution. Docusaurus shifts the focus to content creation, potentially transforming how knowledge is shared and communities are connected.

Gain digital sovereignty now and save costs

Let’s have a look at your digital challenges together. What tools are you currently using? Are your processes optimal? How is the state of backups and security updates?

Digital Souvereignty is easily achived with Open Source software (which usually cost way less, too). Our division Safeserver offers hosting, operation and maintenance for countless Free and Open Source tools.

Try it now for 1 Euro - 30 days free!

Download transcript (.srt)
0:00

Welcome back to the Deep Dive, the show where we dig into a ton of information and

0:04

try to make

0:04

sense of it all for you, turning complex stuff into, well, hopefully, clear

0:08

knowledge. Today,

0:10

we're diving into a really interesting tool. It's kind of changing the game for how

0:14

people build

0:14

websites, especially sites that are really heavy on content. Now, before we jump

0:19

right in,

0:19

we want to give a quick shout out to our supporter, Safe Server. They're fantastic

0:24

at helping with

0:24

your digital transformation journey, and they also handle the hosting for powerful

0:28

software,

0:28

kind of like the stuff we're about to talk about today. You can find out more about

0:32

them at

0:32

www.safeserver.de. Seriously, it's thanks to supporters like Safe Server that we

0:38

can do these

0:39

deep dives. Okay, so today's focus, DocuSaurus. If you've ever, you know, wanted to

0:46

build a really

0:46

nice website, maybe for documentation or a project or even a blog, but you felt

0:50

kind of stopped by

0:51

the technical side of things, well, DocuSaurus might just be the answer you're

0:54

looking for.

0:54

Our mission today is to really unpack it. What is DocuSaurus? Why is it such a big

0:58

deal for building

0:59

efficient content for sites? And crucially, how does it make things easier, even if

1:03

you're just

1:04

starting out? All right, let's get into it. At its core, what exactly is DocuSaurus?

1:09

Well,

1:09

fundamentally, DocuSaurus is this framework, right? Specifically designed to make

1:16

it way easier to

1:18

build, deploy, and importantly, maintain websites, especially for open source

1:24

projects initially.

1:25

But it's useful way beyond that. Think of it like a specialized platform for

1:30

websites,

1:30

where the information is the main thing. Your docs, your blog posts, your tutorials,

1:35

that's the star.

1:36

And the big idea, the real promise, is that it helps you build these optimized

1:40

websites fast,

1:42

so you can spend your time on the actual content, not wrestling with complex web

1:47

development stuff

1:48

upfront. Which is totally different from how you might traditionally build a site,

1:52

where setting up the basics can take ages before you write a single word.

1:55

That sounds amazing, that idea of focusing just on the content. But how does it

1:59

actually do that?

2:00

What's the magic behind the scenes that lets you just write?

2:03

Yeah, that's where this thing called MDX comes in. It's actually pretty clever. You

2:06

probably know

2:06

Markdown, right? That simple text formatting you use for remes or notes.

2:10

Sure.

2:10

So MDX is like Markdown, but with the really cool superpower,

2:15

you can embed React components directly inside your text.

2:20

Wait, React component, like the building blocks for web interfaces?

2:23

Exactly.

2:23

So you're saying I could be writing a document and then just dropping an

2:28

interactive chart or a code

2:29

playground or something right there in the middle of the text without getting

2:32

tangled in loads of

2:33

JavaScript.

2:34

Precisely. That's the key. You just write your stuff using this enhanced Markdown,

2:38

this MDX.

2:39

And DocuSource handles the heavy lifting.

2:42

It takes those files and turns them into static HTML pages.

2:46

Static HTML. Okay, so that means they're pre-built.

2:48

Right. Think of it like baking a cake beforehand. It's all ready to go.

2:52

When someone visits your site, the page is served up instantly,

2:56

super fast, very secure, and cheap to host, too.

2:58

It really streamlines the whole thing, lets you focus on the message,

3:02

but still gives you the power to add those dynamic bits when you need them.

3:06

So it's not just about getting text online, it's about getting a high quality

3:10

fast site running with like minimal hassle, cutting out that initial setup pain.

3:14

That makes total sense. DocuSaurus basically handles the build process,

3:18

freeing you up to actually communicate.

3:20

Okay, that's a really strong pitch for starting something new,

3:24

but you mentioned it's more than just getting a basic site up.

3:27

It sounds like DocuSaurus has some pretty powerful features built in

3:31

that make it suitable for bigger projects, maybe growing communities, too.

3:36

What are some of those standout capabilities?

3:38

Yeah, absolutely. That's a really important point.

3:40

One huge strength is that it's built using React itself.

3:44

So if you or your team already know React,

3:48

you've got a massive amount of flexibility to customize the site's look and feel,

3:52

add new features using standard web tech.

3:55

It uses what they call a pluggable architecture.

3:57

Pluggable architecture, like Lego.

3:59

Kinda, yeah. Think of it like that.

4:01

DocuSaurus gives you this solid base, the core structure.

4:05

But because it's pluggable, you can easily add or swap out different pieces,

4:08

maybe a custom search feature, a different kind of sidebar,

4:11

integrations with other tools, without having to rebuild everything from scratch.

4:16

You get a lot of power to make it unique,

4:18

while still using all the data and systems DocuSaurus manages through its plugins.

4:22

Okay, so developers get a solid foundation but can still build custom stuff on top

4:27

without reinventing the wheel for common things like navigation or search.

4:31

That sounds efficient.

4:32

It really is.

4:33

What about reaching people worldwide?

4:36

Does DocuSaurus help with, say, translations?

4:39

Oh definitely, that's a massive plus.

4:41

Localization, you know, translation support, it comes right out of the box.

4:46

Really? Out of the box?

4:47

Yep, which is a huge time saver for any project aiming for an international

4:51

audience.

4:51

It makes it surprisingly easy to translate your docs into different languages.

4:56

You can manage the translations using tools developers often already use,

5:00

like Git or specific platforms like Crowdon. And what's really neat is you can

5:04

deploy these

5:05

translated versions separately. So your French site can update independently from

5:09

your English

5:09

one, for example. It supports languages like French, Brazilian, Portuguese, Korean,

5:14

Chinese.

5:14

Simplifies that whole complex multilingual setup.

5:18

That's also a major headache for global projects.

5:21

Okay, thinking about software specifically, projects have different versions, right?

5:26

Version 1, version 2. How does DocuSource deal with keeping the docs aligned with

5:32

the right

5:32

software version? Ah, yes. Document versioning. That's another lifesaver feature.

5:38

For any project

5:38

that evolves, like software releases, DocuSource has a system to keep the

5:42

documentation perfectly

5:43

in sync with each version. So imagine you have users on version 1.0, but new folks

5:48

are using 2.0.

5:49

Right, common scenario.

5:50

DocuSource makes sure that when someone searches or browsers,

5:53

they see the docs for their specific version automatically.

5:56

Oh, that's smart.

5:56

Yeah, it prevents so much confusion. No more looking at outdated

5:59

instructions or features that don't exist yet. Everyone gets the right info for the

6:03

version

6:03

they're actually using.

6:04

That's a really thoughtful design, anticipating how people actually use docs.

6:08

Okay, and one more thing. Big documentation sites can be hard to navigate. Finding

6:14

that one specific

6:15

piece of info. How does DocuSource tackle search?

6:19

Good search is critical, absolutely. And DocuSource integrates really well with

6:22

Algolia Documentation Search. Algolia? I've heard of them. They're specialists in

6:26

search, right?

6:27

Exactly. It's not just some basic keyword search. Algolia is powerful. Designed

6:32

specifically for

6:32

documentation. It understands context. It handles typos gracefully. And it delivers

6:37

really relevant

6:38

results, even if you have a huge amount of content. So users can actually find what

6:42

they need quickly.

6:43

Yep. Makes the docs way more useful. Okay, so we've covered what it is.

6:47

The core ideas, these powerful features like React extensibility, localization,

6:53

versioning,

6:53

Algolia search. But what's the real world story? Is this like a niche tool or is it

6:59

actually making

7:00

waves out there? Oh, it's definitely making waves. A big splash. Yeah. The adoption

7:04

numbers are pretty

7:04

telling. On GitHub, DocuSource has over 61,000 stars and more than 9,300 forks. Wow.

7:14

Okay. And

7:14

those aren't just numbers on a screen, right? They represent a really active,

7:18

engaged community

7:19

building with it and contributing back. Plus, it's used by over 11,700 projects now.

7:24

11,700. That's a

7:25

lot. It is. It shows widespread trust and impact. And you mentioned it's not just

7:29

small projects.

7:30

There are some pretty big names using it. Yeah, definitely. You've got projects

7:33

like Redux,

7:34

which is huge in the React world. SuperBase, the open source Firebase alternative.

7:39

The IOTA

7:40

wiki uses it. Temporal for workflow orchestration. Testing library. These are major

7:46

tools and

7:46

platforms. Right. Names people definitely recognize. Exactly. And what they say

7:50

about it is interesting

7:51

too. Mark Erickson from Redux basically said, you know, DocuSource lets them focus

7:56

on content.

7:57

And it just works. It just works. Developers love hearing that. Don't we all? SuperBase

8:02

put it

8:02

simply. They spend less time building documentation and more time building their

8:07

actual product.

8:08

That's the dream. Right. Pretty much. Christopher Chideau, who leads prettier

8:13

development at Meta,

8:14

talked about the relief of not having to spend a week each time spitting up a new

8:18

one

8:19

for every new open source site. That's valuable time save. Hugely valuable. And

8:23

maybe one of the

8:23

most striking examples is Hector Ramos from the React Native team. He said that

8:27

after they moved

8:28

their docs to DocuSource, open source contributions have skyrocketed. Skyrocketed.

8:34

Because it was

8:35

easier to contribute. Seems like it. It made the whole process more inviting,

8:39

easier to jump into,

8:40

which is massive for community health. And, you know, it doesn't hurt that the

8:46

project itself

8:46

is backed by Meta Platforms Inc., which gives it a solid foundation. Okay, that's

8:50

compelling evidence.

8:51

So for the listener, maybe someone feeling inspired now who wants to actually try

8:55

it out,

8:56

how easy is it to get your hands dirty with DocuSource? Is it beginner friendly? It

9:00

really

9:01

is designed to be approachable. Super low barrier to entry. You can literally try

9:05

it out instantly

9:06

right in your web browser. No installation needed. Just go to DocuSource.new. DocuSource.new,

9:12

like

9:12

a live playground. Exactly. Perfect for just kicking the tires, seeing how it feels.

9:17

Or if you want to set up a real site on your own machine, it's basically one

9:20

command in your terminal.

9:22

npm and it's DocuSource at latest. npm and DocuSource at latest. And they even have

9:27

a five-minute

9:28

tutorial. Seriously, you can go from nothing to a running DocuSource site in just a

9:32

few minutes.

9:32

They really focused on making that initial step easy. That's fantastic. Removes

9:36

that initial

9:37

hurdle. And what if someone tries it, loves it, builds something cool, and then

9:40

thinks,

9:41

hey, I want to help make DocuSource even better. How do they get involved with the

9:45

community or

9:46

contribute back? Yeah, the DocuSource community is known for being really welcoming.

9:51

They actively

9:52

encourage contributions. Even if you're new to open source, they actually keep a

9:55

list of

9:56

beginner-friendly bugs. These are specific issues picked out as good starting

10:00

points for new

10:01

contributors to learn the ropes. Well, that's smart. It takes away the intimidation

10:04

factor.

10:05

Totally. And for connecting with people, asking questions, getting help. They have

10:10

active Discord

10:11

channels. There's a hashtag general channel for users and a hashtag contributors

10:14

channel if

10:15

you're looking to get involved with the code itself. Plus, you can find them on X

10:19

or use GitHub

10:20

issues for bug reports and feature discussions. It's a very open and supportive

10:23

environment.

10:24

Great. So lots of ways to connect and contribute. All right. Well, that brings us

10:28

towards the end

10:29

of our deep dive into DocuSource today. It seems pretty clear it's much more than

10:34

just a website

10:34

builder. It's kind of a whole philosophy, isn't it, about simplifying the creation

10:39

of these powerful,

10:40

good-looking, customizable, translation-ready documentation sites. It really seems

10:46

to shift

10:47

the focus, letting creators, letting you put your energy where it matters most, the

10:52

actual content,

10:52

the knowledge you want to share. Absolutely. And that, I think, leads to a really

10:56

interesting

10:57

question for you, the listener. In this world we live in, just overflowing with

11:00

information,

11:01

where getting your message across clearly and accessibly is so vital, how could a

11:05

tool like

11:06

DocuSource fundamentally change the way you, or maybe your project, shares

11:11

knowledge and actually

11:12

connects with your community? Think about the impact of making your ideas, your

11:16

documentation,

11:16

instantly available, easy to find, easy to translate. What could that unlock? That's

11:21

definitely something to chew on, a great final thought. And with that, a huge thank

11:25

you once

11:25

again to Safe Server for supporting the show and making these deep dives possible.

11:29

Remember,

11:30

you can learn more about how they can help with your digital transformation and

11:33

hosting needs

11:34

over at www.safeserver.de. We definitely encourage you to check out DocuSource

11:39

resources, and keep learning. Until next time, keep diving deep.

11:39

resources, and keep learning. Until next time, keep diving deep.