Oh hi! Welcome to your new blog. 🎡
You can publish this site to Fastly for free!
This project is a blog powered by Eleventy, a lightweight static site generator that builds plain HTML files for quick loading by your visitors.
In this guide we'll show you how to deploy your blog to Fastly Compute for super fast performance – your great posts will immediately be available for everyone, everywhere all at once. 🪄
You can alternatively deploy your blog to other platforms, like GitHub Pages.
Fork your own copy of this repo, click Code > Codespaces and create a new Codespace to edit the project.
Give the Codespace a minute or two to start up – it'll automatically build and run your new website, opening a preview to see your site update as you edit!
- 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.
You can make edits in the files by opening them from the left sidebar. Your blog preview will update as you edit!
The files you'll want to edit are mostly in the source and assets directories:
📝 Edit the post content and add new posts in source/posts.
💡 Change your site HTML in the source/_layouts files.
ℹ️ Edit the metadata for your site in the source/_data folder.
🎨 Change your site style rules in assets/style.css.
🖼️ Add images in the assets/ folder – you'll find an example of adding an image to a post in source/posts/fourth-post.md.
🚨
⚠️ Danger zone: There are directories in the project that you might want to be careful with..
- The
_sitefolder is autogenerated by 11ty so best not to edit in there.- The
_appfolder is autogenerated by the Fastly tooling so 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.
Share your draft site with collaborators by opening 💻 Terminal > PORTS.
Change private to public by right clicking your running port and choosing from the options.
Copy the URL to your clipboard and share it 📋.
Ready to share your site with the world? Deploy it to Fastly to make it available for everyone everywhere all at once!
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 > Personal Profile > API 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 your GitHub repo
- Open Settings > Secrets and Variables > Codespaces
- Create a New repository secret
- Enter the name
FASTLY_API_TOKEN - Paste your token value in and save
Back in your Codespace, you should see a prompt to reload for the new environment variable so go ahead and click that.
Hit the 🚀 Publish button and watch the Terminal output for your new site address!
Open it in a new tab and tell everyone you know. 📣
🎢 Whenever you update your content, like adding a new blog post, hit the 🚀 Publish button again to go live!
This project uses the Fastly JavaScript Static Publisher to turn your blog into a serverless application 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
_sitefolder. - The Static Publisher uses those files to scaffold a Compute app that compiles into Webassembly (Wasm) that can run fast and securely on the Fastly network – you'll find the Compute code in
_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.
Your app only needs deployed to Fastly once, after that we just update the new content to your KV Store and your Compute app will pull your posts from there.
⚙️ The settings we use to create the guided experience in Codespaces are in the .devcontainer/ folder.
🧰 You'll find the Fastly CLI commands we use under the hood in the helpers/publish.sh script.
This project uses the following extensions from the dev community! 🙌
Don't stop there, add a domain to your new site.
Check out lots more tips on using the Static Publisher in its repo README. Note that if you make changes to the Compute code, you'll need to run a separate deploy command to deploy your changes to Fastly as the 🚀 Publish button will only deploy once, after that it'll just update your content.
🛟 Get help on the community forum.
