Publish your website without a host

This content originally appeared on DEV Community and was authored by Sue Smith

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 generated static sites made up of HTML, CSS, and client side JavaScript, like blogs and react apps.

Jump to:

• Try a simple static site
• Publish a project from your computer
• Write and publish a blog from a codespace

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.app address 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-content

Set 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 detail 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!

You can share your WIP blog posts for feedback from collaborators using the button at the bottom of the editor.

Next steps

• Point your own domain at your new site
• Learn about edge computing
• 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!

This content originally appeared on DEV Community and was authored by Sue Smith