ATProto Browser
Experimental browser for the Atmosphere
Experimental browser for the Atmosphere
{
"uri": "at://did:plc:6ll5xi67lyuyovt6fiv4fnjo/industries.geesawra.website/25299df4483f85ac75fadfa33683577e3a29f3006b024b520dce3d41e0aa5fee",
"cid": "bafyreifgshvwbfjixaralhlx53u2crgqd65jlfivmcebrym7bllznlkb3e",
"value": {
"$type": "industries.geesawra.website",
"title": "Cloudflare atpages | geesawra.industries",
"embeds": [
{
"$type": "blob",
"ref": {
"$link": "bafkreigenauclkihgxjiqkciyum46maffnsdqxmhidr223jnzq67ae2jfu"
},
"mimeType": "*/*",
"size": 1017
},
{
"$type": "blob",
"ref": {
"$link": "bafkreidamltn7c4xcbt24vpgkgbxkmjcneldzazvmlmpva3cps7zvylini"
},
"mimeType": "*/*",
"size": 148
},
{
"$type": "blob",
"ref": {
"$link": "bafkreiao2jv7wrvyrwicczk3cecvoccs7r3qrt2c4ci2lvx2bs6on6xv7u"
},
"mimeType": "*/*",
"size": 1988
}
],
"content": "<!DOCTYPE html><html lang=\"en-us\"><head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n <title>Cloudflare atpages | geesawra.industries</title>\n <link rel=\"stylesheet\" href=\"/at/geesawra.industries/blobs/bafkreigenauclkihgxjiqkciyum46maffnsdqxmhidr223jnzq67ae2jfu\">\n <link rel=\"stylesheet\" href=\"/at/geesawra.industries/blobs/bafkreidamltn7c4xcbt24vpgkgbxkmjcneldzazvmlmpva3cps7zvylini\">\n <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin=\"\">\n<link href=\"https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&family=Bungee+Shade&display=swap\" rel=\"stylesheet\">\n<link rel=\"stylesheet\" href=\"/at/geesawra.industries/blobs/bafkreiao2jv7wrvyrwicczk3cecvoccs7r3qrt2c4ci2lvx2bs6on6xv7u\">\n<script type=\"module\" src=\"https://cdn.jsdelivr.net/npm/@daviddarnes/bluesky-post\"></script>\n\n </head>\n\n <body>\n <nav>\n <ul class=\"menu\">\n \n <li><a href=\"/\">Home</a></li>\n \n <li><a href=\"/at/geesawra.industries/industries.geesawra.website/df50555e2c1437af886a0c0e56855ac376a853f0b7e99f89b0fc4dc98b2b6e29\">Posts</a></li>\n \n </ul>\n <hr>\n </nav>\n\n<div class=\"article-meta\">\n<h1><span class=\"title\">Cloudflare atpages</span></h1>\n<h3 class=\"author\">Authored by geesawra</h3>\n<h3 class=\"date\">2025/04/23</h3>\n</div>\n\n<main>\n<p>Hi!</p>\n<p>I recently played with <a href=\"https://github.com/geesawra/atpage\"><code>atpage</code></a> again after a long hiatus (which was due mostly to <code>$newjob</code>, so it wasn’t all that bad), and wanted to see if I could deploy it to GitHub Pages, as a treat.</p>\n<p>After some initial success, I quickly encountered the same issue I had during the <a href=\"/at/geesawra.industries/industries.geesawra.website/7f2633d8d2e059e30a789516935b6d4dcc3cd2ecabc6dec32d7f94a4ff0260f6\">first iteration</a>: you can’t easily hotlink a blog post online and expect it to work, because the Service Worker is only installed when visiting the website’s root.</p>\n<p>I <a href=\"https://bsky.app/profile/geesawra.industries/post/3lng6cbuqss2z\">complained on Bluesky</a> and it turns out <strong>Cloudflare Pages</strong> allows you to do custom redirects and stuff like that, for free, without hosting anything yourself.</p>\n<template id=\"bluesky-post-template\">\n<div class=\"bskypost\">\n <blockquote>\n <div id=\"post-content\">\n <p>\n </p><div id=\"author\">\n <img data-key=\"author.avatar\" class=\"post-image\">\n <div id=\"author-text\">\n <span data-key=\"author.displayName\">Slow connection? No problem, <a href=\"https://bsky.app/profile/geesawra.industries/post/3lng6cbuqss2z\">link here</a>!</span> • <a data-key=\"url\">@<span data-key=\"username\"></span></a>\n </div>\n <p></p>\n </div>\n <p data-key=\"record.text\" class=\"post-text\"></p>\n <p style=\"text-align: right\"><a href=\"https://bsky.app/profile/geesawra.industries/post/3lng6cbuqss2z\">Original skeet</a></p>\n </div>\n </blockquote>\n <p></p>\n</div>\n</template>\n\n<bluesky-post>\n <a href=\"https://bsky.app/profile/geesawra.industries/post/3lng6cbuqss2z\"></a>\n</bluesky-post>\n\n<p>I wanted to replicate the same workflow as any common Hugo user, which boils down to <code>git commit</code>, <code>git push</code> and poof, your new blogpost is available on your website.</p>\n<p>Setting up GitHub Actions wasn’t as bad as I expected: I cloned the blog sources repo, cloned atpage in a subdirectory, called Hugo to obtain the rendered HTML, then <code>atpage post</code> to post it on my PDS, easy!</p>\n<p>Setting up Cloudflare Pages wasn’t much harder to be fair, I don’t like how they coerce you to move your domain’s DNS servers to theirs if you want to use your own - you can probably set it up differently, but I can’t see how.</p>\n<p>A neat feature of Pages is that you can specify custom redirects by including a text file called <code>_redirects</code> in your deployment bundle.</p>\n<p>This is how I do it with Caddy v2:</p>\n<pre tabindex=\"0\"><code>geesawra.industries {\n handle /at/* {\n root * /geesawra.industries\n }\n\troot * /geesawra.industries\n\tfile_server\n}\n</code></pre><p>This is how I do it with <code>_redirects</code>:</p>\n<pre tabindex=\"0\"><code>/at/* / 200\n</code></pre><p>By moving to Cloudflare Pages I also gained access to very business tooling, like staging and production environments: whatever isn’t the <code>main</code> branch is automatically treated as staging, and you also get a deploy-specific URL to go look at your staging website!</p>\n<p>I use GitHub environments to have all the fancy UI/UX goodies, like a “click here to see your staging prod” button in PRs, or the deus ex machina, branch protection rules.</p>\n<p>Each environment is tied to a specific Bluesky account, so that I don’t end up overwriting my main account’s blog with the staging one.</p>\n<p>I’m not a web developer, and I’m in awe at what we can achieve nowadays with great tooling available <strong>completely free of charge</strong>.</p>\n<p>I <a href=\"https://github.com/geesawra/geesawra.industries\">open-sourced</a> this blog, including the Pages configuration and the GitHub Action I wrote to automate the deployment.</p>\n<p>I should also document <code>atpage</code>, shouldn’t I? <code>:^)</code></p>\n<p>Until next time!</p>\n\n</main>\n\n <footer>\n \n \n <hr>\n © <a href=\"https://geesawra.industries\">geesawra</a> 2024 – 2025 | <a href=\"https://github.com/geesawra\">Github</a> | <a href=\"https://bsky.app/profile/geesawra.industries\">Bluesky</a>\n \n </footer>\n \n\n\n</body></html>"
}
}