# Docusaurus on Fastly with Compute

Published: 2023-11-14

In this post I’m going to walk you through getting a [Docusaurus](https://docusaurus.io/) site stood-up on [Fastly’s Compute platform](https://developer.fastly.com/learning/compute/) for free in less than 2 minutes 💨

## What is Docusaurus?

[Docusaurus](https://docusaurus.io/) is an open-source static site generator designed for building efficient and easy-to-maintain documentation websites. It offers features like versioning, localization, and document search, making it ideal for technical documentation, blogs, and community-driven projects. Docusaurus simplifies content creation by supporting Markdown and provides customizable templates to get your site up and running quickly. Sounds pretty sweet.

## Why Choose Fastly's Compute?

[Fastly’s Compute platform](https://developer.fastly.com/learning/compute/) takes your web applications closer to your users by running them on servers distributed worldwide. This reduces latency, improves load times, and enhances the overall user experience. It's an excellent platform for hosting static sites like those generated by Docusaurus due to its high-performance capabilities and global reach.

## Step-by-Step

**Some quick prerequisites**

- Have at least [Node 16](https://nodejs.org/en/) with [NPM](https://www.npmjs.com/) installed on your machine
- Ensure you have a free Fastly account. If not, sign up at [Fastly's website](https://www.fastly.com/signup/)
- [Install the Fastly CLI](https://developer.fastly.com/learning/tools/cli/#installing) and set yourself up with a valid [auth token](https://docs.fastly.com/en/guides/using-api-tokens#creating-api-tokens)

### 1. Setting Up Your Docusaurus Project

First, create a new Docusaurus project if you haven't already:

```bash
npx create-docusaurus@latest docs-on-compute classic
```

Navigate into your project directory:

```bash
cd docs-on-compute
```

### 2. Building Your Docusaurus Site

Build your Docusaurus site locally:

```bash
npm run build
```

This step generates a static build of your site in the `build` directory.

### 3. Using the compute-js-static-publish Package

We're going to be using the [Compute JS Static Publish](https://github.com/fastly/compute-js-static-publish) package via [NPX](https://github.com/npm/npx):

```bash
npx @fastly/compute-js-static-publish --preset=docusarus
```

This package greatly simplifies the deployment of static sites to Compute via the Fastly CLI. You’ll notice it created a new directory `./compute-js` for you. Go ahead and change to that directory:

```bash
cd ./compute-js/
```

### 4. Using the Fastly CLI locally

Assuming you have the [Fastly CLI](https://developer.fastly.com/learning/tools/cli/#installing) installed and setup with a valid [auth token](https://docs.fastly.com/en/guides/using-api-tokens#creating-api-tokens), you can serve your new Docusaurus site on Compute locally by running:

```bash
fastly compute serve
```

If you head to `http://127.0.0.1:7676/` in your browser you’ll see it running!

### 5. Deploying to Compute

Deploy your site to Compute using the CLI:

```bash
fastly compute publish
```

Follow the prompts to complete the deployment and **boom** – you’ve got yourself a Docusaurus site running on the Fastly’s highly performant edge! You can go manage the configuration in your [Fastly account](https://manage.fastly.com) or continue iterating on your docs.

## Conclusion

By leveraging Fastly's Compute platform for your Docusaurus site, you can significantly improve performance, ensure scalability and reliability, enhance security, and be cost-effective (free), all while offering a developer-friendly environment. The `compute-js-static-publish` package makes the process straightforward, allowing you to focus on writing the best documentation for your users – which is really the end goal. Happy coding!