Homepage of Mark Gibson (jollytoad)

This is codebase of my personal homepage. It's a place I've created for tinkering.

It was originally designed to run on Deno, and be deployed to Deno Deploy.

There is also experimental support for running on Bun and deploying to Cloudflare Pages. I hope to gradually add more runtime and deployment options as I investigate them.

Pre-requisites

Install Deno.

Alternatively use pkgx dev environment, to automatically fetch the required tooling (deno, bun, etc).

Local https support

(Supports Deno & Bun)

To emulate a more realistic production environment locally, you can provide a localhost key/cert pair, which automatically be picked up and the server will be run over https.

The simplest way is using mkcert. To install via Homebrew on a Mac (or checkout the link for alternatives):

brew install mkcert nss

Then create certificate and install a local certificate authority:

deno task mkcert

Usage locally

With Deno

Using Deno as the runtime:

deno task start

With Bun

To use Bun as the runtime, you must have installed bun.

deno task install:bun
deno task start:bun

or just directly execute:

./app/main_bun.ts

You don't need Deno or Node installed to run via Bun.

With Cloudflare Pages (Wrangler)

To run as a Cloudflare Pages dev site, you must also have Bun pre-installed.

deno task start:cloudflare

This performs a build stage using Deno before starting.

Deployment

Deno Deploy

Sign up to Deno Deploy, create a project, and then edit the deno.json file and change the target project in the deploy task.

Grab your Deploy access token, and set the DENO_DEPLOY_TOKEN env var.

To deploy a staging site:

deno task deploy

Or, to deploy to production:

deno task deploy --prod

Cloudflare Pages

Sign up to Cloudflare, go to Workers & Pages and hit Create, switch to the Pages tab and click Connect to Git.

You can connect to this repo or a fork.

You have to configure the build settings as:

• Framework preset: None
• Build command: ./scripts/install_deno.sh && $HOME/.deno/bin/deno task build:cloudflare
• Build output directory: .cloudflare/dist

You can now Save and Deploy.

How does it work?

Go ahead, have a browse, take a look at main.ts to see how the app works in production, you should be able to follow imports and functions to understand how it all hangs together.

If you are feeling more adventurous take a look at dev.ts which also calls various build scripts to dynamically generate the routing and cron job modules.

The project uses and showcases much of my http functions library, which is designed to be easy to follow and understand (hopefully).

Debugging tools

If you switch to "jsx": "react-jsxdev" in deno.json, then all elements will include an additional jsx-dev attribute with a link to it's place the source. A dev time script will also catch Alt/Option clicks on any element and open the source file in VSCode.