Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Edge Post Part 2 #4

Merged
merged 6 commits into from
Jan 26, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions src/main.rs
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,16 @@ fn main(req: Request) -> Result<Response, Error> {
.with_content_type(mime::TEXT_HTML_UTF_8)
.with_body(include_str!("static_site/hosfe.lt/public/posts/edge/index.html")))
},
"/posts/edge2/" => {
Ok(Response::from_status(StatusCode::OK)
.with_content_type(mime::TEXT_HTML_UTF_8)
.with_body(include_str!("static_site/hosfe.lt/public/posts/edge2/index.html")))
},
"/images/edge-post-2_certificate.png" => {
Ok(Response::from_status(StatusCode::OK)
.with_content_type(mime::IMAGE_PNG)
.with_body(include_bytes!("static_site/hosfe.lt/public/images/edge-post-2_certificate.png").as_slice()))
},
// Catch all other requests and return a 404.
_ => {
Ok(Response::from_status(StatusCode::NOT_FOUND)
Expand Down
9 changes: 8 additions & 1 deletion src/static_site/hosfe.lt/content/posts/edge.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,14 @@ draft: false
toc: true
images:
tags:
- untagged
- blog
- Fastly
- setup
- tech
- dns
- http
- wasm
- rust
---

# I'm Six Feet From The Edge and I'm Thinking...
Expand Down
98 changes: 98 additions & 0 deletions src/static_site/hosfe.lt/content/posts/edge2.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
---
title: "This Blog is on the Edge Part 2: The Journey Continues"
date: 2024-01-22T16:16:18-05:00
draft: false
toc: true
images:
tags:
- blog
- Fastly
- setup
- tech
- dns
- http
- wasm
- rust
---

# Part 2: The Journey Continues

This is part two of how I got my blog on the edge using Fastly's Compute network. In this part I'll go over DNS, certificate setup, and what I use to build and deploy the blog in more detail.

{{< admonition type=note title="Note" >}}
This post will be pretty Fastly specific when it comes to DNS and managing the certificates
{{< /admonition >}}

In case you missed it the [first part is here](https://hosfe.lt/posts/edge/).

## It's Always DNS

I will admit I am not an expert here and what I have works for me and I had to run through a few trail and error runs to get what I wanted working.

With that out of the way the first thing to do is take your domain name and in the [Fastly Admin Portal](https://manage.fastly.com) on your compute service from part 1 add them to the `Domains` section (this is the exact URL users will input when they want to visit your site).

Here I have both (hosfe.lt and www.hosfe.lt). In the Fastly world it is better to have a subdomain (`www` or the like, I am planning on using `ricky` in the near future). I'll explain why later.

Once this is done move onto the `Hosts`, here is the specific host you want to use (this can be just your root level domain e.g. hosfe.lt) as it will be the one the certificate covers. Normally this would be your origin but since this site is completely on the edge we are just using it for certificate security at this point.

## TLS

Now to secure the site we need to use the `Secure` feature of the dashboard. Here we can generate certificates for our host and any subdomains (I used the wildcard domain since I'll probably be moving from the root to `ricky.hosfe.lt` in the future and adding more subdomains for experiements). If you can I would recommend doing your root plus whatever subdomains you want (or wildcard).

This step will also required you to put in an `_acme-challenge` to verify you actually own your domain. I use Digital Ocean for my domain networking and throwing that `CNAME` in along with it's value was easy. The first certificate took about 10 minutes to verify and propagate after that they have been less than a minute.

## DNS Part 2: There's Always a Part 2

Once, you have your TLS certificate setup you should be good to go! In order to take full advantage of the edge you need to use a subdomain. This is because root domains are not allows to have a `CNAME` entry for them and must point to an `A` or `AAAA` record. You _can_ use Compute with a root domain and I'll show you how to find that here.

### Finding Your CNAME Reference for Subdomains

After we have created our TLS under the secure tab we need to know _which_ type of certificate we created. Going into the `Secure` App and `TLS Management` area we can click to view the certificate to see if we have a `t` or `s` type.

![Which certificate type is active](/images/edge-post-2_certificate.png)

Once we know that we can give our subdomain a `CNAME` that Fastly will utilize over the whole edge network. If you need more help there's a lot more info on the [developer docs](https://docs.fastly.com/en/guides/working-with-cname-records-and-your-dns-provider#tls-enabled-hostnames)

### Finding the IP Address for your A Record and Root Domain

While we are here we can also give the root domain an IP address to hit if you are keen on using that. This won't take advantage of the whole edge at first so this is why I mentioned previously that it was better to use a subdomain. There's a lot more info [here](https://docs.fastly.com/en/guides/using-fastly-with-apex-domains#when-you-have-tls-configured).

That's it, you should now have a working secured website that is completely on the Fastly Compute network! Honestly, it's more work than GeoCities was but given the flexibility I am exited for the [internet to get weird again](https://www.rollingstone.com/culture/culture-commentary/internet-future-about-to-get-weird-1234938403/).

## Hugo

In case you're wondering the static site generator I am currently using is [Hugo](https://gohugo.io). The Theme is [hermit-v2](https://themes.gohugo.io/themes/hermit-v2/). Realistically I wanted a simple yet customizable theme and went with the first I found. I can also change it out pretty easily. Top that with an incredibly simple build system (literally compiling the site by just `hugo`) and I was sold.


## How to Deploy and GitHub Actions

Lastly, how I currently deploy the blog. You can see my [GitHub Actions YAML here](https://github.com/deg4uss3r/hosfe.lt/blob/main/.github/workflows/test.yml). The important part is that I split this in two stages. A test and check on each commit/PR and a deploy only on a tag. This helps me control when I actually push content to the blog.

```yaml
deploy:
if: |
startsWith(github.ref, 'refs/tags/v') && needs.test.result == 'success'
```

I love that little `if` statement. It will only deploy if the test suite was successful on a tagged run.

Further one thing I found confusing at first was I needed to use the Fastly `fastly/compute-actions@v5` action not just the `deploy` action as it still needs to compile and ship the WASM binary. After that it was pretty easy to get working, it will use the `fastly.toml` at the root of the project and off it goes just like doing it via the CLI (see [Part 1](https://hosfe.lt/posts/edge/) to set that up).

{{< admonition type=danger title="WARNING" >}}
Don't forget to store your Fastly API token in GitHub Secrets so you don't expose it!
{{< /admonition >}}

```yaml
env:
FASTLY_API_TOKEN: ${{ secrets.FASTLY_API_TOKEN }}
```

## What's next?

First, there's some DNS changes I want to make which won't be too bad and shouldn't have an affect on the structure of the site. Moving from the root domain for the blog to `ricky.hosfe.lt` and making the root a landing page only.

For the website I got some great suggestions and probably the first one will be compressing the included HTML text (and incorporated images) and shrinking the size of the WASM binary that gets uploaded (right now sitting at 1.78Mb). Though with the inline image I'm sure a little larger as of today.

Next, I would like to add much more logging and statistics to understand traffic flow and be able to play with observability and what's possible with the compute platform (with the added benefit of knowing how little people have read the blog).

Slowly but surely I'll get to those but I also want to sprinkle in writing on some topics I want to chat about. So see you soon and I hope this helps, enjoy!
3 changes: 2 additions & 1 deletion src/static_site/hosfe.lt/hugo.toml
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ defaultContentLanguageInSubdir = false
theme = "hermit-v2"

pygmentsCodefences = true
pygmentsUseClasses = true


copyright = "2023"
Expand Down Expand Up @@ -76,3 +75,5 @@ disableKinds = ["taxonomy", "term"]
[markup.goldmark.renderer]
unsafe= true

[markup.highlight]
style="dracula"
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 8 additions & 1 deletion src/static_site/hosfe.lt/public/index.xml
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,15 @@
<generator>Hugo -- gohugo.io</generator>
<language>en-us</language>
<copyright>2023</copyright>
<lastBuildDate>Fri, 05 Jan 2024 09:18:47 -0500</lastBuildDate>
<lastBuildDate>Mon, 22 Jan 2024 16:16:18 -0500</lastBuildDate>
<atom:link href="https://hosfe.lt/index.xml" rel="self" type="application/rss+xml" />
<item>
<title>This Blog is on the Edge Part 2: The Journey Continues</title>
<link>https://hosfe.lt/posts/edge2/</link>
<pubDate>Mon, 22 Jan 2024 16:16:18 -0500</pubDate>
<guid>https://hosfe.lt/posts/edge2/</guid>
<description>Part 2: The Journey Continues This is part two of how I got my blog on the edge using Fastly&amp;rsquo;s Compute network. In this part I&amp;rsquo;ll go over DNS, certificate setup, and what I use to build and deploy the blog in more detail.&#xA;Note This post will be pretty Fastly specific when it comes to DNS and managing the certificates In case you missed it the first part is here.</description>
</item>
<item>
<title>It&#39;s 2024 and This Blog is Now On The Edge</title>
<link>https://hosfe.lt/posts/edge/</link>
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Loading