Back End

Cloudflare R2 Object Storage

We will be using Cloudflare to store public media and documents.

Cloudflare Worker

Little friend that will be serving our files through public URL.

We will use: https://seed-r2-worker.seedworker.workers.dev/<BUCKET_NAME>/<FILE_NAME>

Init

npm create cloudflare@latest -- seed-r2-worker
cd seed-r2-worker

For setup, select the following options:

  1. For "What would you like to start with?", choose "Hello World example".
  2. For "Which template would you like to use?", choose "Worker only".
  3. For "Which language do you want to use?", choose "JavaScript".
  4. For "Do you want to use git for version control?", choose "Yes".
  5. For "Do you want to deploy your application?", choose "No (we will be making some changes before deploying)".

Create bucket

npx wrangler r2 bucket create <YOUR_BUCKET_NAME>

Bind bucket to worker

{
  "r2_buckets": [
    {
      "binding": "MY_BUCKET",
      "bucket_name": "<YOUR_BUCKET_NAME>"
    }
  ]
}

Simple worker

export default {
    async fetch(request, env) {
        const url = new URL(request.url);
        const key = url.pathname.slice(1);

        switch (request.method) {
            // case 'PUT':
            //          await env.MY_BUCKET.put(key, request.body);
            //          return new Response(`Put ${key} successfully!`);
            case 'GET':
                const object = await env.MY_BUCKET.get(key);

                if (object === null) {
                    return new Response('Object Not Found', { status: 404 });
                }

                const headers = new Headers();
                object.writeHttpMetadata(headers);
                headers.set('etag', object.httpEtag);

                return new Response(object.body, {
                    headers,
                });
            // case 'DELETE':
            //          await env.MY_BUCKET.delete(key);
            //          return new Response('Deleted!');

            default:
                return new Response('Method Not Allowed', {
                    status: 405,
                    headers: {
                        Allow: 'GET',
                    },
                });
        }
    },
};

We can test locally with: 

npx wrangler dev

And deploy: 

npx wrangler deploy

Dev Docs

The website is available at https://www.seed.computer/devdocs/

  1. Source files are written in Org Mode
  2. Hugo uses these to build the website

Hugo

Initialize the docs website project: 

hugo new site docs

Basic hugo config: 

baseURL = "/devdocs/"
languageCode = "en-us"
title = "Seed Website Dev Docs"
theme = "PaperMod"

Build into our project's public folder: 

hugo -s docs -d ../public/devdocs