Skip to content

Commit

Permalink
build static site
Browse files Browse the repository at this point in the history
  • Loading branch information
@deg4uss3r
deg4uss3r committed Jan 25, 2024
1 parent 49030f4 commit 10f3eee
Show file tree
Hide file tree
Showing 2 changed files with 70 additions and 22 deletions.
50 changes: 37 additions & 13 deletions src/static_site/hosfe.lt/public/posts/edge/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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="1730">
<meta itemprop="wordCount" content="1733">
<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." />
Expand All @@ -34,7 +34,7 @@
<meta name="twitter: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."/>
<title>It&#39;s 2024 and This Blog is Now On The Edge</title>
<link rel="stylesheet dns-prefetch preconnect preload prefetch" as="style" href="https://hosfe.lt/css/style.min.dbbe08cb3b07bbce02de1a13a57d4221bb75487e75b0d1a5196a5353f7135921.css" integrity="sha256-274IyzsHu84C3hoTpX1CIbt1SH51sNGlGWpTU/cTWSE=" crossorigin="anonymous"><link rel="stylesheet preload prefetch" as="style" href="https://hosfe.lt/css/style.min.2faed4cf7533c5236bf011e885da2e0c2670dea54d80f6b5ff1f370613f0983a.css" integrity="sha256-L67Uz3UzxSNr8BHohdouDCZw3qVNgPa1/x83BhPwmDo=" crossorigin="anonymous">
<link rel="stylesheet dns-prefetch preconnect preload prefetch" as="style" href="https://hosfe.lt/css/style.min.dbbe08cb3b07bbce02de1a13a57d4221bb75487e75b0d1a5196a5353f7135921.css" integrity="sha256-274IyzsHu84C3hoTpX1CIbt1SH51sNGlGWpTU/cTWSE=" crossorigin="anonymous">
</head>
<body id="page">
<header id="site-header" class="animated slideInUp">
Expand Down Expand Up @@ -90,12 +90,12 @@ <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>1730 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>1733 Words
–



7 Minutes, 51 Seconds</p>
7 Minutes, 52 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">
Expand All @@ -113,7 +113,13 @@ <h2 id="how-to-get-started">How To Get Started<a href="#how-to-get-started" clas
<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>
<p>I am definitely not done with the blog that&rsquo;s for sure! As well as I am very certain there are better ways to do things but I wanted to give a little insight into how I learned and pieced together the information to get this working. If you have any suggestion throw in <a href="https://github.com/deg4uss3r/hosfe.lt/issues">an issue</a> for me!</p>
<p><strong>DISCLAIMER</strong> I am a Fastly employee (and very new). So anything in the blog does not speak for Fastly itself but my own personal experience using the products they provide.</p>

<aside class="admonition success">
<div class="admonition-title">
<div class="icon"><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-check-circle"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg></div><b>Info</b>
</div>
<div class="admonition-content">I am a Fastly employee (and very new). So anything in the blog does not speak for Fastly itself but my own personal experience using the products they provide.</div>
</aside>
<p>Finally, this blog and post (and my life) will be centered around Rust. There&rsquo;s plenty of resources for other languages (like <a href="https://developer.fastly.com/learning/compute/javascript/">JavaScript</a> and <a href="https://developer.fastly.com/learning/compute/go/">Go</a>, but I know very little about those).</p>
<h3 id="the-blogs-code">The Blog&rsquo;s Code<a href="#the-blogs-code" 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 main focus of this section will be my <code>main.rs</code> Rust module (<a href="https://github.com/deg4uss3r/hosfe.lt/src/main.rs">on GitHub</a>). The source HTML is also in there but that is less interesting and I will briefly cover that later.</p>
Expand All @@ -130,18 +136,36 @@ <h3 id="okay-but-how-do-you-get-started">Okay, But How Do You Get Started?<a hre
<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. 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>

<aside class="admonition danger">
<div class="admonition-title">
<div class="icon"><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-alert-triangle"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg></div><b>WARNING</b>
</div>
<div class="admonition-content">make <em>sure</em> 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.</div>
</aside>

<aside class="admonition danger">
<div class="admonition-title">
<div class="icon"><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-alert-triangle"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg></div><b>WARNING</b>
</div>
<div class="admonition-content">make sure to keep this safe it&rsquo;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">1Password</a> so you can access it safely and from the CLI (I&rsquo;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.</div>
</aside>
<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)
</span></span></span></code></pre></div><p>If you get an output with your name and email you are good to go! Otherwise it would appear the account token you&rsquo;ve generated isn&rsquo;t working or you have a previous configuration somewhere that is messing with it. Reach out to the <a href="https://developer.fastly.com/">Fastly Developer Docs</a> or the <a href="https://community.fastly.com/">Contact the community</a> for additional help.</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-fish" data-lang="fish"><span class="line"><span class="cl">~ fastly whoami <span class="na">--token</span> <span class="nv">$(</span><span class="nf">op</span> item get <span class="s2">&#34;</span><span class="nv">$YOUR_FASTLY_ITEM_NAME</span><span class="s2">&#34;</span> <span class="na">--fields</span> <span class="nv">$YOUR_API_TOKEN_FIELD_NAME</span><span class="o">)</span>
</span></span></code></pre></div><p>If you get an output with your name and email you are good to go! Otherwise it would appear the account token you&rsquo;ve generated isn&rsquo;t working or you have a previous configuration somewhere that is messing with it. Reach out to the <a href="https://developer.fastly.com/">Fastly Developer Docs</a> or the <a href="https://community.fastly.com/">Contact the community</a> for additional help.</p>
<p>Once you have a successful result from <code>whoami</code> you&rsquo;re ready to push to your service! I would recommend following the <a href="https://github.com/fastly/compute-starter-kit-rust-default">Rust template repository</a> by forking it and pushing a single simple page (e.g. one match arm with the catchall as well) with anything you want. Do so by calling the following inside the template repo:</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 publish --token $YOUR_TOKEN --service-id $YOUR_SERVICE_ID
</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>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-fish" data-lang="fish"><span class="line"><span class="cl">~ fastly compute publish <span class="na">--token</span> <span class="nv">$YOUR_TOKEN</span> <span class="na">--service-id</span> <span class="nv">$YOUR_SERVICE_ID</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 <code>127.0.0.1:7676</code></p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-fish" data-lang="fish"><span class="line"><span class="cl">~ fastly compute serve
</span></span></code></pre></div>
<aside class="admonition tip">
<div class="admonition-title">
<div class="icon"><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-sun"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg></div><b>💡</b>
</div>
<div class="admonition-content">That will create the binary and host it locally to <code>127.0.0.1:7676</code></div>
</aside>
<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>
Expand Down
Loading

0 comments on commit 10f3eee

Please sign in to comment.