built hugo for edge post

src/static_site/hosfe.lt/public/posts/edge/index.html

@@ -21,7 +21,7 @@
 <meta itemprop="description" content="I&rsquo;m Six Feet From The Edge and I&rsquo;m Thinking&hellip; Well, unlike that Classic Creed Song One Last Breath that was on the radio when I was a kid I&rsquo;m actually on the edge! However, not in the way the song was intended, definitely in a technical sense.
 I am taking advantage of learning at my new job by utilizing Fastly&rsquo;s Edge Compute service and deploying this blog from their edge network making this site 100% delivered from a WASM pre-compiled binary."><meta itemprop="datePublished" content="2024-01-05T09:18:47-05:00" />
 <meta itemprop="dateModified" content="2024-01-05T09:18:47-05:00" />
-<meta itemprop="wordCount" content="1736">
+<meta itemprop="wordCount" content="1730">
 <meta itemprop="keywords" content="untagged," /><meta property="og:title" content="It&#39;s 2024 and This Blog is Now On The Edge" />
 <meta property="og:description" content="I&rsquo;m Six Feet From The Edge and I&rsquo;m Thinking&hellip; Well, unlike that Classic Creed Song One Last Breath that was on the radio when I was a kid I&rsquo;m actually on the edge! However, not in the way the song was intended, definitely in a technical sense.
 I am taking advantage of learning at my new job by utilizing Fastly&rsquo;s Edge Compute service and deploying this blog from their edge network making this site 100% delivered from a WASM pre-compiled binary." />
@@ -90,25 +90,25 @@ <h1>It&#39;s 2024 and This Blog is Now On The Edge</h1>
 			</header>
 			<div class="post-info"><p><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-feather"><path d="M20.24 12.24a6 6 0 0 0-8.49-8.49L5 10.5V19h8.5z"></path><line x1="16" y1="8" x2="2" y2="22"></line><line x1="17.5" y1="15" x2="9" y2="15"></line></svg><a href="/about/" target="_blank">Ricky Hosfelt</a></p>
 <p><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-tag meta-icon"><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path><line x1="7" y1="7" x2="7" y2="7"></line></svg><span class="tag"><a href="https://hosfe.lt/tags/untagged">untagged</a></span></p>
-<p><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>1736 Words
+<p><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>1730 Words
     –
 
 
 
-    7 Minutes, 53 Seconds</p>
+    7 Minutes, 51 Seconds</p>
 <p><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>2024-01-05 09:18 -0500</p></div>
 			<hr class="post-end">
 			<div class="content">
 				<h1 id="im-six-feet-from-the-edge-and-im-thinking">I&rsquo;m Six Feet From The Edge and I&rsquo;m Thinking&hellip;<a href="#im-six-feet-from-the-edge-and-im-thinking" class="anchor" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 7h3a5 5 0 0 1 5 5 5 5 0 0 1-5 5h-3m-6 0H6a5 5 0 0 1-5-5 5 5 0 0 1 5-5h3"></path><line x1="8" y1="12" x2="16" y2="12"></line></svg></a></h1>
 <p>Well, unlike that <a href="https://www.youtube.com/watch?v=qnkuBUAwfe0">Classic Creed Song</a> <em>One Last Breath</em> that was on the radio when I was a kid I&rsquo;m actually on the edge! However, not in the way the song was intended, definitely in a technical sense.</p>
 <p>I am taking advantage of learning at my new job by utilizing <a href="htttps://fastly.com">Fastly&rsquo;s</a> Edge Compute service and deploying this blog from their edge network making this site 100% delivered from a WASM pre-compiled binary. In this post I&rsquo;ll be explaining how I did it along with some lessons I learned along the way.</p>
 <h2 id="why-i-put-the-blog-on-the-edge">Why I Put The Blog On The Edge<a href="#why-i-put-the-blog-on-the-edge" class="anchor" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 7h3a5 5 0 0 1 5 5 5 5 0 0 1-5 5h-3m-6 0H6a5 5 0 0 1-5-5 5 5 0 0 1 5-5h3"></path><line x1="8" y1="12" x2="16" y2="12"></line></svg></a></h2>
-<p>Previously, for about 10 years I have been using the same <a href="https://digitalocean.com">Digital Ocean</a> Droplet as a Virtual Private Server (VPS) serving my site. I have no complaints and it&rsquo;s only costed me about $7/month to have a website that I can do almost anything with! However, it&rsquo;s gotten pretty out-of-date on the backend and I did not have a real good way to fully automate a deployment without doing (in my opinion) a lot of work. Plus, a new friend saw my certificates were expired again and pushed me to start digging more into better ways to manage those (thanks Colton!).</p>
+<p>Previously, for about 10 years I have been using the same <a href="https://digitalocean.com">Digital Ocean</a> Droplet as a Virtual Private Server (VPS) serving my site. I have no complaints and it has only been about $7/month to have a website that I can do almost anything with! However, it&rsquo;s gotten pretty out-of-date on the backend and I did not have a real good way to fully automate a deployment without doing (in my opinion) a lot of work. Plus, a new friend saw my certificates were expired again and pushed me to start digging more into better ways to manage those (thanks Colton!).</p>
 <h3 id="but-what-advantage-does-the-edge-have">But What Advantage Does The Edge Have?<a href="#but-what-advantage-does-the-edge-have" class="anchor" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 7h3a5 5 0 0 1 5 5 5 5 0 0 1-5 5h-3m-6 0H6a5 5 0 0 1-5-5 5 5 0 0 1 5-5h3"></path><line x1="8" y1="12" x2="16" y2="12"></line></svg></a></h3>
 <p>Many people will be able to describe this better than me, <a href="https://www.fastly.com/blog/no-origin-static-websites-at-the-edge">Kats for example here</a>, but for me the main advantage is freeing up my VPS for updating, more experiments, learning a new technology, and hosting a faster blog around the world.</p>
 <h3 id="in-your-own-wordswhat-is-the-edge">In Your Own Words&hellip;What Is The Edge?<a href="#in-your-own-wordswhat-is-the-edge" class="anchor" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 7h3a5 5 0 0 1 5 5 5 5 0 0 1-5 5h-3m-6 0H6a5 5 0 0 1-5-5 5 5 0 0 1 5-5h3"></path><line x1="8" y1="12" x2="16" y2="12"></line></svg></a></h3>
 <p>The Edge is essentially a CDN but instead of content sitting in cache around the world it is computed on the fly when requested at the site that&rsquo;s closest. Both a CDN and the Edge offer faster websites and I wanted to move closer to one repository and deploy method for the site. That and since my site is <em>so simple</em> I opted for compute instead of a traditional CDN.</p>
-<p>Finally I could take advantage of things like <a href="https://docs.fastly.com/products/certainly">Certianly</a> and never have to worry about updating my TLS certificates again, something that definitely happened to me at least twice a year while I was trying to get <code>certbot</code> to play nice with cron jobs (not a knock against it, <a href="https://letsencrypt.org/">Let&rsquo;s Encrypt</a> is an amazing resource and pretty much the only reason I&rsquo;ve had a website for so long).</p>
+<p>Finally I could take advantage of things like <a href="https://docs.fastly.com/products/certainly">Certainly</a> and never have to worry about updating my TLS certificates again, something that definitely happened to me at least twice a year while I was trying to get <code>certbot</code> to play nice with cron jobs (not a knock against it, <a href="https://letsencrypt.org/">Let&rsquo;s Encrypt</a> is an amazing resource and pretty much the only reason I&rsquo;ve had a website for so long).</p>
 <h2 id="how-to-get-started">How To Get Started<a href="#how-to-get-started" class="anchor" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 7h3a5 5 0 0 1 5 5 5 5 0 0 1-5 5h-3m-6 0H6a5 5 0 0 1-5-5 5 5 0 0 1 5-5h3"></path><line x1="8" y1="12" x2="16" y2="12"></line></svg></a></h2>
 <p>There&rsquo;s essentially two paths you have to work on in parallel the raw code for the blog and the setting up of the networking to point to the edge network to serve said code.</p>
 <h3 id="some-warnings-first">Some Warnings First<a href="#some-warnings-first" class="anchor" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 7h3a5 5 0 0 1 5 5 5 5 0 0 1-5 5h-3m-6 0H6a5 5 0 0 1-5-5 5 5 0 0 1 5-5h3"></path><line x1="8" y1="12" x2="16" y2="12"></line></svg></a></h3>
@@ -127,11 +127,11 @@ <h3 id="the-blogs-code">The Blog&rsquo;s Code<a href="#the-blogs-code" class="an
 <h3 id="okay-but-how-do-you-get-started">Okay, But How Do You Get Started?<a href="#okay-but-how-do-you-get-started" class="anchor" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 7h3a5 5 0 0 1 5 5 5 5 0 0 1-5 5h-3m-6 0H6a5 5 0 0 1-5-5 5 5 0 0 1 5-5h3"></path><line x1="8" y1="12" x2="16" y2="12"></line></svg></a></h3>
 <p>So that is all simple enough but getting started was a little bit confusing for me (I could not find a specific set of cohesive steps to get started) so I&rsquo;ll walk through how I did it. Previous caveats apply here, this is information I cobbled together and not the <em>best</em> way but a way that works for me.</p>
 <p>Throughout this guide I&rsquo;ll be using Fastly as mentioned previously.</p>
-<p>First, I created my <a href="https://manage.fastly.com/home">Fastly account</a>. Your experience here will vary please check the prices and understand the cost before you proceed.</p>
+<p>First, I created my <a href="https://manage.fastly.com/home">Fastly account</a> and set it up in the following way to create an edge compute service.</p>
 <p>Next, is to create a compute service. Do not worry about a domain or host for now you can set it to anything you want and change it later. We will use the test generated link and setup the networking later. Make sure to save your <code>service_id</code> as it will be necessary to push an update to that newly created service.</p>
 <p>To use the Fastly CLI (next step) you&rsquo;ll need a new token with permissions to do so. In the Fastly Management domain go to your Profile (upper right) &gt; Account &gt; API Tokens (lower left) and generate an API token with Global API Access both the first option (<code>Global</code>) for full control and Global Read (<code>global:read</code> is enable by default but write is not).</p>
 <p class="warning">make _sure_ you save this token off as soon as you navigate away from this screen you will lose access to display the token again for security reasons.</p>
-<p class="warning">make sure to keep this safe it's a secret and just like an AWS S3 key could cost you a lot of money if you leak it. I suggest immediately storing it in a password manager like [1Password](https://1password.com/) so you can access it safely and from the CLI (I'll show you how to do this as well). Finally, for security I do recommend letting this expire and generating a new one roughly every 6 months.</p>
+<p class="warning">make sure to keep this safe it's a secret. Just like any secret key, it could cost you money if you leak it. I suggest immediately storing it in a password manager like <a href="https://1password.com" target=_blank>1Password</a> so you can access it safely and from the CLI (I'll show you how to do this as well). Finally, for security I do recommend letting this expire and generating a new one roughly every 6 months.</p>
 <p>After that I installed the <a href="https://developer.fastly.com/reference/cli/">Fastly CLI</a> (or you can do everything from the web if you prefer but I like using CLIs so I do when I can). For me that was as simple as following the <code>brew install fastly/tap/fastly</code> command.</p>
 <p>Next up we&rsquo;ll test out a working CLI interface. I use 1Password&rsquo;s CLI to help insert secrets without leaking them (read the install instructions here: <a href="https://developer.1password.com/docs/cli/get-started/">1Password CLI</a>); however, you can do what you are most comfortable with (both security and tool-wise). The command I would recommend running first is:</p>
 <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-fish" data-lang="fish"><span class="line"><span class="cl">~<span class="c"># fastly whoami --token $(op item get &#34;$YOUR_FASTLY_ITEM_NAME&#34; --fields $YOUR_API_TOKEN_FIELD_NAME)
@@ -141,7 +141,7 @@ <h3 id="okay-but-how-do-you-get-started">Okay, But How Do You Get Started?<a hre
 </span></span></span></code></pre></div><p>Once that deploys you can check it via the Management portal, click on Compute &gt; Your Service &gt; Version Number &gt; Then you should see &ldquo;Test Domain&rdquo; next to your domain.</p>
 <p>As you get more complex or if you want to test the binary locally you can do so very easily just:</p>
 <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-fish" data-lang="fish"><span class="line"><span class="cl">~<span class="c"># fastly compute serve
-</span></span></span></code></pre></div><p class="idea">That will create the binary and host it locally to `127.0.0.1:7676`</p>
+</span></span></span></code></pre></div><p class="idea">That will create the binary and host it locally to <code>127.0.0.1:7676</code></p>
 <p>There&rsquo;s quite a few starter kits (including in different languages) on the <a href="https://github.com/search?q=%22fastly%2Fcompute-starter-kit%22+owner%3Afastly+&amp;type=repositories">Fastly Organization</a> take a look through I just picked the one I found the simplest to get started!</p>
 <h4 id="fastlys-template-structure-explained">Fastly&rsquo;s Template Structure Explained<a href="#fastlys-template-structure-explained" class="anchor" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 7h3a5 5 0 0 1 5 5 5 5 0 0 1-5 5h-3m-6 0H6a5 5 0 0 1-5-5 5 5 0 0 1 5-5h3"></path><line x1="8" y1="12" x2="16" y2="12"></line></svg></a></h4>
 <p>If you fork one of Fastly&rsquo;s template repositories there&rsquo;s some files in there that probably need a bit of explaining. I&rsquo;ll quickly go over those.</p>
@@ -151,7 +151,7 @@ <h4 id="fastlys-template-structure-explained">Fastly&rsquo;s Template Structure
 <p><code>README</code> - I definitely forgot to change this at first, so learn from my mistakes!</p>
 <p><code>./.github/CODEOWNERS</code> - This is for the Fastly organization and template, change and/or remove this file it won&rsquo;t work anyways!</p>
 <h2 id="to-be-continued">To Be Continued&hellip;<a href="#to-be-continued" class="anchor" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 7h3a5 5 0 0 1 5 5 5 5 0 0 1-5 5h-3m-6 0H6a5 5 0 0 1-5-5 5 5 0 0 1 5-5h3"></path><line x1="8" y1="12" x2="16" y2="12"></line></svg></a></h2>
-<p>That is pretty much all you need to really get started with the edge using a test domain, In the next post (since this one has gotten a little longer than I anticipated) I&rsquo;ll explain my DNS and deployment setup. I hope this was helpful!</p>
+<p>That is pretty much all you need to really get started with the edge using a test domain. In the next post (since this one has gotten a little longer than I anticipated) I&rsquo;ll explain my DNS and deployment setup. I hope this was helpful!</p>
 
 			</div>