Deploy a Static File Website to Vercel

This blog post explains how to deploy a solution that consists of static files as a website on the Vercel content delivery network. A static website typically consists of HTML and supporting files such as CSS, JavaScript, and images. Vercel will host small websites with limited services at no cost. You can easily configure Vercel to deploy a solution from GitHub, GitLab, or Bitbucket.

Vercel provides tools and services for developing, previewing, deploying, optimizing, and hosting scalable Jamstack websites. I have no preference for Vercel over alternatives such as netlify; I just happen to have caught some Vercel marketing recently.

Vercel focuses on both front-end developer productivity and solution performance including a global edge network. Jamstack solutions hosted with Vercel can retrieve content from any headless CMS or other repository and integrate with any external system such as search, commerce, and otherwise.

Arguably, Jamstack solutions do not include server-side logic for HTML generation. By this definition, customers should be able to deploy any Jamstack solution to any CDN (content delivery network – basically a farm of static file webservers). The files include JavaScript that allows dynamic behaviors on the client, such as retrieving data from a headless content management system or other services.

Vercel built Next.js, a server-side React framework, on top of Node.js, a server-side JavaScript framework. Before a deployment, Next.js can prerender React components into static HTML files, but Vercel solutions can also use Next.js at runtime, such as to render entire pages or parts of pages from React syntax to HTML on the server at runtime as well as React server components.

Using Next.js or any Vercel-specific technologies appears to me as a form of vendor lock-in that could complicate moving to an alternate hosting provider. I guess React is already a bit of a lock-in, and therefore React server components could be acceptable. I plan to use ASP.NET Razor Pages to generate the HTML.

The easiest way to get started with Vercel may be to deploy a completely static site that does not depend on any CMS. Such a solution might use a static site generation tool to get files into something like GitHub for deployment to Vercel, which requires a GitHub account and a Vercel account.

Log in to GitHub and create a repository, which (unless configured otherwise) represents the document root of a static website. You can commit any files in this directory or start with something really simple, such as an index.html file that contains only the following:

<html><body>Static Body</body></html>

Log into Vercel to deploy this GitHub repository as a website. On the Overview tab, click Create a New Project. Choose to Import Git Repository and select the github account and repository. When Vercel prompts to Create a Team, click Skip, then Deploy. The deployment process takes a moment, then Vercel shows a preview of the home page of the new website, which you can click to see the URLs that Vercel associates with the site.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: