How to Deploy Your Jamstack Site to Cloudflare Pages

This article describes how deploy your Jamstack site to Cloudflare Pages — a new service with a simple-to-use and generous free hosting plan.

The web world may be using WordPress, but developers are moving toward Jamstack technologies (also referred to as static sites). The name Jamstack (once written as JAMStack) stands for JavaScript, APIs, and Markup, and was devised by Netlify. Like Ajax, the scope of the term has widened, but a Jamstack site typically uses pre-rendered static content with client-side logic connecting to a set of loosely coupled back-end APIs. The benefits are compelling:

  • Performance: Where possible, Jamstack sites generate pages once during a build process rather than on view. They’re fast and are often deployed to content delivery networks (CDNs) physically closer to the user.

  • Scalability: Jamstack sites are a collection of generated files which do not require server-side processing or database connectivity. Pages are effectively pre-cached and deployed globally.

  • Portability: Once generated, it’s possible to host a Jamstack site anywhere. There’s no vendor lock-in.

  • Development: Developers can use whatever tools they prefer to generate a site. If necessary, article editors can continue to use WordPress or any other CMS to write content.

  • Deployment: Jamstack sites can be automatically deployed to test and production sites by committing Git branches. There’s no need for complex continuous integration or deployment processes.

The following tutorials explain how to create a Jamstack site from scratch:

  • Getting Started with Eleventy (see the Github repository)
  • How to Create a Static Site with Metalsmith

Jamstack Hosting Services

You can host a site anywhere including GitHub Pages and Amazon S3, but Netlify and Vercel dominate the Jamstack space. They offer generous plans and simple Git-based deployments.

The latest entrant to the market is Cloudflare — a company best known for their global CDN, edge security, and caching services. The new Cloudflare Pages service offers Jamstack hosting across their colossal global infrastructure. The free plan is now available to everyone and includes:

  • unlimited sites, requests, and bandwidth
  • SSL and security
  • robust content caching and expiry
  • web analytics
  • production and test deployments from GitHub branches
  • one build at a time with up to 500 builds per month, and
  • thorough documentation with getting started tutorials, deployment examples migration guides

The build platform supports languages including Node.js, Python, PHP, Ruby, Go, Java, Elixir, and Erlang. Most site builder software should work, but the following tools have verified compatibility:

  • Angular (Angular CLI)
  • Brunch
  • Docusaurus
  • Eleventy
  • Ember.js
  • Gatsby
  • GitBook
  • Gridsome
  • Hugo
  • Jekyll
  • Mkdocs
  • Next.js (static HTML export)
  • Nuxt.js
  • Pelican
  • React (create-react-app)
  • React Static
  • Slate
  • Svelte
  • Umi
  • Vue
  • VuePress

Continue reading How to Deploy Your Jamstack Site to Cloudflare Pages on SitePoint.

Similar Posts