Oh hi! Welcome to your new blog. 🎡
This project is powered by Eleventy, a lightweight static site generator that builds plain HTML files for quick loading by your visitors.
In this guide we'll learn how to deploy your blog to Fastly Compute for free – your amazing posts will immediately be available for everyone, everywhere all at once. 🪄
You can alternatively deploy your blog to other platforms, like GitHub Pages.
- Remix your own blog
- Get to know your blog
- Deploy your blog to Fastly Compute
- Save your edits to GitHub
- How this project works
- Keep going! 🚀
Fork this repository to create your own copy of the site.
In your fork, open the site in a codespace by clicking Code > Codespaces and creating a new codespace on your main branch.
Give the codespace a minute or two to start up – it'll automatically build and preview your new website!
- When your website preview opens, click the 🔎 Split button at the bottom so that you can see the site side by side with your code.
- You can close [x] the Terminal while you work.
Make sure you save your changes to GitHub.
You can make edits in the files by opening them from the left sidebar. Your blog preview will update as you work!
The files you'll want to edit are most likely in the source and assets directories:
📝 Edit the post content and add new posts using Markdown .md files in source/posts.
💡 Change your site HTML in the source/_layouts Nunchucks .njk files.
🎨 Change your site style rules in assets/style.css.
ℹ️ Edit the metadata for your site, like the title and description, in the source/_data folder JSON file.
🖼️ Add images in the assets/ folder – you'll find an example of including an image in a post in source/posts/fourth-post.md.
🚨
⚠️ Danger zone: There are directories in the project that might break your site... 😱😈
- The
deploy/_sitefolder is autogenerated by 11ty so best not to edit in there.- The
deploy/_appfolder is autogenerated by the Fastly tooling – you should only edit in there if you want to change the Compute app you deploy to the edge.- The
helpersfolder contains the bash scripts that run when your project starts and when you hit the 🚀 Publish button.
You can share links to your draft site with collaborators – click 🔗 Share at the bottom of the editor. The terminal output will include a link you can right-click and copy to share with anyone you like!
This project includes a handy shortcut button for grabbing your preview URL but it might be a wee bit error prone 😅 you can also access these details in 💻 Terminal > PORTS or by clicking the little Forwarded Ports icon:
Change
privatetopublicby right-clicking your running port and choosing from the options.
Copy the URL to your clipboard and share it 📋.
Ready to unveil your site to the world? Deploy it to Fastly!
Grab a Fastly API key from your account and add it to your GitHub repo:
- Sign up for a free Fastly developer account
- Grab an API Token from Account > API Tokens > Personal Tokens > Create Token
- Type: Automation
- Role: Engineer
- Scope: Global (deselect the Read-only access box)
- Access: All services
- Expiration: Never expire
- Copy the token value into GitHub
- Back in your codespace, click into the textfield at the top of the editor and type
>to access the command palette - Type
secretand select Codespaces: Manage user secrets -
- Click + Add a new secret
-
- Enter the name
FASTLY_API_TOKEN -
- Paste your token value and enter
- Back in your codespace, click into the textfield at the top of the editor and type
In the notifications area at the bottom right of your codespace, you should see a prompt to reload for the new environment variable, so go ahead and click that (otherwise click the little bell 🔔 icon to check for the message).
Hit the 🚀 Publish button at the bottom of the editor, enter y and watch the Terminal output for your new site address! It might take a couple of minutes... 🥁
You'll see your new *.edgecompute.app address in the output. Open it in a new tab and tell everyone you know about your new site. 📣
🎢 Whenever you update your content, like adding a new blog post, hit the 🚀 Publish button again to go live!
GitHub will keep the edits you make in the codespace only for a limited time, so it's a good idea to commit your work to a repo regularly. Use the Source Control button on the left of the editor – you can make commits, open and merge pull requests right inside the codespace.
GitHub will notify you if any of your codespaces are about to expire. If you have changes you want to keep, you can use the Export changes to a branch option.
This project uses the Fastly JavaScript Static Publisher to turn your blog into a serverless app that runs at the network edge, near your users.
- The 11ty framework builds your posts into the HTML and other files that make up your website, placing them in the
deploy/_sitefolder. - The Static Publisher uses those files to scaffold a Compute app that compiles into Webassembly (Wasm) to run fast and securely on the Fastly network – you'll find the Compute code in
deploy/_appafter you deploy. - When you publish, the project deploys the app to Fastly, creating a service and uploading the Wasm to it.
- It then then publishes your content to a KV Store – a key-value store that also runs on Fastly and that your app can talk to.
The app itself only needs deployed to Fastly once, when you click the 🚀 Publish button after that, we just update the content in your KV Store and your Compute app will pull your posts from there.
📝 Your Fastly service and KV Store will include your GitHub username and repo in their names, so you'll only be able to deploy one Compute app per repo unless you tweak the scripts.
⚙️ The settings we use to create the guided experience in the codespace are in the .devcontainer/ folder.
🧰 You'll find the Fastly CLI commands we use under the hood in the helpers/publish.sh script.
💻 If you check the right-hand side of the Terminal you'll find multiple processes – this is to run the 11ty and Fastly commands.
This project uses the following extensions from the dev community! 🙌
Don't stop there, add a domain to your new site.
You'll find your service in your Fastly account control panel – check out the Observability stats! 📊
Check out more tips on using the Static Publisher in its README. Note that if you change the Compute code, you'll need to run a separate deploy command to push your changes to Fastly as the 🚀 Publish button only deploys once, after that it just updates your KV content.
🛟 Get help on the community forum.
