Deployment
Author: Shine ChangStatic Site Generation
Static site generation can be used in a blog or organization site that does not require dynamic or persistent data. Since there is no need for a custom server, all we would need is a file distribution server.
The simplest form of a “static site” is a vanilla HTML CSS JS website.
More complex websites built with frameworks can also be built as a static site by a generator. Essentially, the generation tool “compiles” your high-level files into vanilla HTML CSS JS.
Jekyll
is a common static site framework tailored towards blogs. Modern JS frameworks, such as React
, Vue
, and Svelte
either have in-house generators or support generators.
Serverless
As mentioned in “cloud infrastructure”, serverless is very nice for deploying applications quickly. It maintains the behavior of a typical backend server, while making it very cheap to deploy. To use serverless however, we need to format our backends as functions, which means we won’t be writing an HTTP server as we normally would. Though it is possible to write functions ourselves and deploy them as is, it is advised to use a web framework like SvelteKit
or Next.js
that supports and handles the bundling. (I think) The functions defined through these frameworks are deployed as serverless functions under the hood.
Example: Serverless & SvelteKit
In SvelteKit, we define a API route to create a custom backend service.
Here is an example SvelteKit API route that is to be deployed as a serverless function.
app/src/routes/api/logout/+server.js
:
export async function POST ({ cookies }) {
cookies.delete("session", { path: "/" });
console.log("deleted 'session' cookie");
return new Response("done", { status: 200 });
}
Deployment Options
- Github Pages:
- Static site host.
- Supports
Jekyll
as a static site generator. Static site generators take your files, templates/renders it, and stores the static result somewhere to be hosted; think of it as a compiler for pages.Jekyll
is great for making quick blogs. - Github Pages is great for hosting plain HTML/JS/CSS sites, or Jekyll-made blogs.
- Vercel:
- Serverless Host. Uses AWS Lambda under the hood
- Supports many frameworks like NEXT.js, Sveltekit, Flask, Django, Vue, Angular, Jekyll.
- Very friendly to use, clean interface.
- Links to a git repository, rebuilds & redeploys automatically
- Cloudflare Pages
- Serverless Host.
- Supports most frameworks.
- Similar to Vercel in capability.
- Git integration
- Render:
- Virtual Machine-based host
- Can use a pinger to keep alive.
- Better than Repl.it for its better throttling and caps.
- Repl.it:
- Virtual Machine-based host
- Can use a pinger to keep alive.
- Not recommended for its strict throttling and bandwidth caps.