afterwrd

Your Facebook years, kept somewhere of your own

Your Facebook archive as a private website that only people you invite can see. It runs in your own free Cloudflare account: no one else holds your data, and there's nothing to pay. About 15 minutes on a computer.

1. Ask Facebook for your download

   In Facebook's Download your information, choose your profile, All available information, format JSON and media quality High. Facebook emails you when it's ready, which can take from minutes to a day. You'll need the zip file(s) at step 5.

2. Make a free Cloudflare account

   An email address is all it asks for. Don't add a card; afterwrd stays within the free plan.

   Sign up to Cloudflare

3. Create a Worker

   In Cloudflare, go to Workers & Pages and press Create application, then Start with Hello World. Change the Worker name to afterwrd (it becomes your site's address), leave Protect with Cloudflare Access off and press Deploy.

   Open Workers & Pages

   If the link lands elsewhere: Compute → Workers & Pages in the left-hand menu.

4. Paste in the installer

   Copy the installer, then in your new Worker press Edit code, select everything in the editor (⌘A or Ctrl+A), paste over it and press Deploy.

   Copy installer
   See what you're pasting (afterwrd 0.4.1)

   // afterwrd installer, version 0.4.1. // // Paste this whole file into a Cloudflare Worker and deploy it, then open the Worker's address: // - into a new "Hello World" Worker, it installs afterwrd; // - over an existing afterwrd, it updates it to this version, keeping its people, archive and photos. // // What it does, with the API token you give it: // 1. finds this Worker in your account // 2. creates a D1 database for afterwrd, or reuses the one afterwrd already has // 3. downloads afterwrd from the address below and checks every file against the fingerprint below, // so what's installed is exactly the published release // 4. uploads it as a new version of this Worker // The token is used only while installing and isn't stored anywhere. Delete it afterwards. // src/deploy.js var API = "https://api.cloudflare.com/client/v4"; async function api(token, path, init = {}) { const headers = { Authorization: `Bearer ${token}` }; if (typeof init.body === "string") headers["Content-Type"] = "application/json"; const response = await fetch(`${API}${path}`, { ...init, headers }); const data = await response.json().catch(() => ({})); if (!response.ok || data.success === false) { const message = data.errors?.map((e) => e.message).join("; ") || `HTTP ${response.status}`; throw new Error(`Cloudflare said: ${message}`); } return data.result; } async function findWorker(token, script) { for (const account of await api(token, "/accounts")) { const response = await fetch(`${API}/accounts/${account.id}/workers/scripts/${script}/settings`, { headers: { Authorization: `Bearer ${token}` } }); if (response.ok) return { account: account.id, settings: (await response.json()).result }; } throw new Error(`Couldn't find a Worker called "${script}" with that token. Was the token made in the same Cloudflare account?`); } async function loadRelease(base, manifestSha256 = null) { const bytes = await download(`${base}/manifest.json`); if (manifestSha256 && await sha256(bytes) !== manifestSha256) { throw new Error("The release doesn't match the fingerprint it should have, so nothing was installed."); } const manifest = JSON.parse(new TextDecoder().decode(bytes)); return { manifest, async file(hash) { const contents = await download(`${base}/${hash}`); if (await sha256(contents) !== hash) throw new Error("A release file doesn't match its fingerprint, so nothing was installed."); return contents; } }; } async function uploadAssets(token, account, script, release) { const { manifest } = release; const byHash = new Map(manifest.assets.map((a) => [a.hash, a])); const session = await api(token, `/accounts/${account}/workers/scripts/${script}/assets-upload-session`, { method: "POST", body: JSON.stringify({ manifest: Object.fromEntries(manifest.assets.map((a) => [a.path, { hash: a.hash, size: a.size }])) }) }); let jwt = session.jwt; for (const bucket of session.buckets ?? []) { const form = new FormData(); for (const hash of bucket) { const asset = byHash.get(hash); form.append(hash, new File([base64(await release.file(asset.sha256))], hash, { type: asset.type })); } const uploaded = await api(session.jwt, `/accounts/${account}/workers/assets/upload?base64=true`, { method: "POST", body: form }); jwt = uploaded?.jwt ?? jwt; } return jwt; } async function findOrCreateDatabase(token, account, name) { const found = (await api(token, `/accounts/${account}/d1/database?name=${encodeURIComponent(name)}`)).find((d) => d.name === name); return found ?? api(token, `/accounts/${account}/d1/database`, { method: "POST", body: JSON.stringify({ name }) }); } function existingDatabase(settings) { const binding = settings.bindings?.find((b) => b.type === "d1" && b.name === "DB"); return binding ? binding.id ?? binding.database_id : null; } async function deployVersion(token, account, script, release, { jwt, databaseId, settings, secrets = {} }) { const { manifest } = release; const hasStore = (name) => settings.bindings?.some((b) => b.type === "durable_object_namespace" && b.class_name === name); const newClasses = manifest.migrations.new_sqlite_classes.filter((name) => !hasStore(name)); const metadata = { main_module: manifest.main_module, compatibility_date: manifest.compatibility_date, compatibility_flags: manifest.compatibility_flags, bindings: [ { type: "d1", name: "DB", id: databaseId }, ...manifest.durable_objects.map((d) => ({ type: "durable_object_namespace", name: d.name, class_name: d.class_name })), { type: "assets", name: "ASSETS" }, ...Object.entries(secrets).map(([name, text]) => ({ type: "secret_text", name, text })) ], keep_bindings: ["secret_text"], assets: { jwt, config: manifest.assets_config } }; if (newClasses.length) metadata.migrations = { new_tag: manifest.migrations.new_tag, new_sqlite_classes: newClasses }; const form = new FormData(); form.append("metadata", new Blob([JSON.stringify(metadata)], { type: "application/json" })); for (const module of manifest.modules) { form.append(module.name, new File([await release.file(module.sha256)], module.name, { type: module.type })); } await api(token, `/accounts/${account}/workers/scripts/${script}`, { method: "PUT", body: form }); } async function download(url) { const response = await fetch(url, { headers: { "User-Agent": "afterwrd" } }); if (!response.ok) throw new Error(`Couldn't download the release (${response.status}).`); return new Uint8Array(await response.arrayBuffer()); } async function sha256(bytes) { const digest = await crypto.subtle.digest("SHA-256", bytes); return [...new Uint8Array(digest)].map((b) => b.toString(16).padStart(2, "0")).join(""); } function base64(bytes) { let binary = ""; for (let i = 0; i < bytes.length; i += 32768) binary += String.fromCharCode(...bytes.subarray(i, i + 32768)); return btoa(binary); } // installer/installer.js var RELEASE = "https://github.com/stemill/afterwrd/releases/download/v0.4.1"; var MANIFEST_SHA256 = "aaa1e6724f9c8e5b79b1499888db15938cef223d2ce9eb5a47ca9146b2822ae3"; var VERSION = "0.4.1"; var PERMISSIONS = [{ key: "workers_scripts", type: "edit" }, { key: "d1", type: "edit" }, { key: "account_settings", type: "read" }]; var TOKEN_URL = "https://dash.cloudflare.com/profile/api-tokens?permissionGroupKeys=" + encodeURIComponent(JSON.stringify(PERMISSIONS)) + "&accountId=*&zoneId=all&name=afterwrd%20installer"; var TOKENS_PAGE = "https://dash.cloudflare.com/profile/api-tokens"; var MediaStore = class { fetch() { return new Response("afterwrd is being updated; try again in a minute.", { status: 503 }); } }; var installer_default = { async fetch(request) { const url = new URL(request.url); if (request.method === "GET" && url.pathname === "/") { return new Response(page(), { headers: { "Content-Type": "text/html; charset=utf-8", "Cache-Control": "no-store" } }); } const step = url.pathname.slice("/install/".length); if (request.method === "POST" && url.pathname.startsWith("/install/") && Object.hasOwn(STEPS, step)) { if (request.headers.get("Origin") !== url.origin) return Response.json({ error: "Request from another site" }, { status: 403 }); try { return Response.json(await STEPS[step](await request.json(), scriptName(url))); } catch (error) { return Response.json({ error: error.message }, { status: 400 }); } } return new Response("afterwrd is being installed.", { status: 404 }); } }; function scriptName(url) { if (!url.hostname.endsWith(".workers.dev")) throw new Error("Open the installer at its workers.dev address."); return url.hostname.split(".")[0]; } var STEPS = { // Which of the token's accounts this Worker is in, whether it's already afterwrd, and which release goes in. async check({ token }, script) { const { manifest } = await loadRelease(RELEASE, MANIFEST_SHA256); const { account, settings } = await findWorker(token, script); return { account, version: manifest.version, upgrade: Boolean(existingDatabase(settings)) }; }, // The site's own files (stylesheet, import page). async assets({ token, account }, script) { return { jwt: await uploadAssets(token, account, script, await loadRelease(RELEASE, MANIFEST_SHA256)) }; }, // The database and the code, as a new version of this Worker. async deploy({ token, account, jwt }, script) { const release = await loadRelease(RELEASE, MANIFEST_SHA256); const settings = await api(token, `/accounts/${account}/workers/scripts/${script}/settings`); const existing = existingDatabase(settings); if (existing) { await deployVersion(token, account, script, release, { jwt, databaseId: existing, settings }); return { next: "/", upgrade: true }; } const database = await findOrCreateDatabase(token, account, script); const setupCode = [...crypto.getRandomValues(new Uint8Array(24))].map((b) => b.toString(16).padStart(2, "0")).join(""); await deployVersion(token, account, script, release, { jwt, databaseId: database.uuid, settings, secrets: { SETUP_CODE: setupCode } }); return { next: `/_auth/setup?code=${setupCode}`, upgrade: false }; } }; function page() { return `<!doctype html> <html lang="en-GB"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="robots" content="noindex, nofollow"> <link rel="icon" href="data:,"> <title>Install afterwrd</title> <style> :root { --bg: #f6f4f0; --surface: #ffffff; --text: #1d2420; --muted: #69736e; --border: #e5e1da; --accent: #0b8a6c; --accent-strong: #08745b; --accent-soft: #dff3ec; --on-accent: #ffffff; } @media (prefers-color-scheme: dark) { :root { --bg: #111513; --surface: #191f1c; --text: #e8eeea; --muted: #9aa69f; --border: #28302c; --accent: #3fcf9f; --accent-strong: #66dbb4; --accent-soft: #183a2e; --on-accent: #08251c; } } * { box-sizing: border-box; } body { margin: 0; padding: 16px; background: var(--bg); color: var(--text); font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } main { max-width: 560px; margin: 24px auto; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 24px; } h1 { font: 800 1.7rem/1.2 ui-rounded, "SF Pro Rounded", "Nunito", "Quicksand", system-ui, sans-serif; margin: 0 0 10px; letter-spacing: -0.01em; } ol.how { padding-left: 1.2rem; } ol.how li { margin: 0.5rem 0; } .meta { color: var(--muted); font-size: 0.85rem; } a.button, button { display: inline-block; padding: 10px 16px; border: 0; border-radius: 999px; background: var(--accent); color: var(--on-accent); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; } a.button.secondary { background: var(--surface); color: var(--text); border: 1px solid var(--border); } button:disabled { opacity: 0.6; cursor: default; } input { width: 100%; font: inherit; padding: 10px; margin: 6px 0 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); -webkit-text-security: disc; } #log { padding-left: 1.2rem; } #error { color: #d93025; } #done { border-top: 1px solid var(--border); margin-top: 16px; padding-top: 12px; } #done[hidden] { display: none; } </style> </head> <body> <main> <h1>Install afterwrd</h1> <p>This installs afterwrd ${VERSION} into your Cloudflare account, as this Worker. If this Worker is already afterwrd, it updates it to ${VERSION}, keeping everyone's access and your archive. It needs a Cloudflare API token so it can create a database and upload afterwrd.</p> <ol class="how"> <li><a class="button" href="${TOKEN_URL}" target="_blank" rel="noopener">Create a token</a><br> <span class="meta">On the page that opens, the permissions are already filled in. Scroll down, press <b>Continue to summary</b>, then <b>Create Token</b>, then copy the token.</span></li> <li>Paste the token here:<input id="token" type="text" autocomplete="off" spellcheck="false" placeholder="Your API token"></li> <li><button id="go">Install afterwrd</button></li> </ol> <ol id="log"></ol> <p id="error" role="alert"></p> <section id="done" hidden> <p><b id="done-title"></b></p> <p>One last thing: <b>delete the token</b>. afterwrd doesn't keep it, but while it exists it can change your Workers. Find "afterwrd installer" in the list and choose <b>Delete</b>.</p> <p><a class="button secondary" href="${TOKENS_PAGE}" target="_blank" rel="noopener">Open my API tokens</a> <a class="button" id="continue" href="/">Continue to afterwrd</a></p> </section> <p class="meta">Release files are checked against the fingerprint ${MANIFEST_SHA256.slice(0, 12)}\u2026 before anything is installed.</p> </main> <script> const log = (text) => { const li = document.createElement("li"); li.textContent = text; document.getElementById("log").append(li); }; async function step(name, body) { const res = await fetch("/install/" + name, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body) }); const data = await res.json(); if (!res.ok) throw new Error(data.error || "Something went wrong."); return data; } document.getElementById("go").addEventListener("click", async (e) => { const box = document.getElementById("token"); const token = box.value.trim(); const error = document.getElementById("error"); error.textContent = ""; if (!token) { error.textContent = "Paste your API token first."; return; } e.target.disabled = true; try { log("Checking the token and the release\u2026"); const { account, version, upgrade } = await step("check", { token }); log("Uploading afterwrd " + version + "'s site files\u2026"); const { jwt } = await step("assets", { token, account }); log(upgrade ? "Updating afterwrd to " + version + "\u2026" : "Creating the database and installing afterwrd\u2026"); const { next } = await step("deploy", { token, account, jwt }); box.value = ""; log("Waiting for afterwrd to start\u2026"); for (let i = 0; i < 30; i++) { const res = await fetch("/_auth/login", { cache: "no-store" }); if (res.ok) break; await new Promise((r) => setTimeout(r, 2000)); } document.getElementById("done-title").textContent = upgrade ? "afterwrd is updated to " + version + "." : "afterwrd is installed. Next you'll make yourself its owner."; document.getElementById("continue").href = next; document.getElementById("done").hidden = false; } catch (err) { error.textContent = err.message; e.target.disabled = false; } }); <\/script> </body> </html>`; } export { MediaStore, installer_default as default };

5. Open your Worker and follow the installer

   Press Visit (or open https://afterwrd.<your-name>.workers.dev). The installer walks you through the rest: a Cloudflare token it needs once, a passkey for you (your face, fingerprint or device PIN; no password), then importing your Facebook zip and inviting people.