Publish your website without a host
Senior Learning Experience Manager, Fastly
Originally published on dev.to
When you use a CDN, cached copies of your website’s static assets are stored at the network edge for fast delivery to your visitors. Well, if your website is just those assets, why not just dump the whole thing at the edge and serve it directly from there instead of storing it on a web hosting service in the first place?
That's what the JavaScript Static Publisher for Fastly Compute does. It delivers your static site straight from the network edge using a serverless app to handle user requests, and an edge data store for your content. This kind of originless setup is well-suited to generate static sites made up of HTML, CSS, and client side JavaScript, like blogs and React apps.
You can deploy existing sites to Fastly Compute using a few simple commands in your IDE. You can also create a new site, edit, and publish it without installing a thing on your computer by following a guided experience in a GitHub codespace – fork a demo project, open it in the browser, pop in an API key, and publish at the click of a button.
Try a simple static site
The ~website-to-compute project demonstrates how to publish a simple static site to the edge from a GitHub codespace.
The steps are in the repo readme, here’s the TL;DR:
Fork the repo
Open your forked version for editing in the browser by clicking Code > Codespaces and creating a new codespace on your main branch (The codespace config will run a few setup tasks when it first opens; it might take a couple of minutes)
Your website preview will open in a tab – click the 🔎 Split button at the bottom to see the site side by side with your code
Edit your site HTML and CSS! Your preview will update in the editor… 👀
Share your draft site with collaborators by clicking🔗 Share and copying the URL to your clipboard 📋
When you’re ready to publish to Fastly, sign up for an account and grab an API key, copying it into your codespace project
Click the🚀 Publish button along the bottom of the editor and follow the prompts
Your
edgecompute.appaddress will appear in the terminal output
Make sure you save your edits to GitHub using the Source Control area on the left of the editor
Publish a project from your computer
If you already have a static site on your computer that you want to deploy, open it in an IDE.
Import the Static Publisher and pass it the root directory to scaffold a Compute app for your site:
npx @fastly/compute-js-static-publish@latest --root-dir=./_site --kv-store-name=site-contentSet up dependencies:
cd compute-js && npm install🧪 If you want to test your site locally before deploying, use npm run dev:publish and npm run dev:start then open it in the browser.
When you're ready to publish, grab a Fastly API key and set it as the value of the FASTLY_API_TOKEN environment variable.
Deploy your app:
npm run fastly:deploy
Open the edgecompute.app address in the terminal output – it won't show the content yet so don't worry if you see an error message. 😅
Publish your content to the KV Store:
npm run fastly:publish
Reload your edgecompute.app URL in the browser and with any luck your content will be there!
💡 Each time you have new content to publish, just run the fastly:publish command again.
📚 For more details, check out the tutorial.
Write and publish a blog from a codespace
The ~11ty-to-compute project publishes an Eleventy blog to the edge. You can draft new blog posts in the codespace and publish whenever you’re ready to share them with the world.
Check out the README for steps, but here's the gist:
Fork the repo and open it in a codespace
Make changes and add blog posts
Grab a Fastly API key and add it in the codespace
Hit the🚀 Publish button
Tell the world!
Next steps
Find out more about the JavaScript Static Publisher for Fastly Compute
Learn more about the publication flow in the static site publisher tutorial
Need help? Post on the Fastly Community forum!
