13th May, 2020

Making my online portfolio

Running serverless to host a JAMStack website


What is JAMStack?

The Jamstack is not about specific technologies. It’s a new way of building websites and apps that delivers better performance, higher security, lower cost of scaling, and a better developer experience.

From the definition provided by JAMStack, JAMStack is a totally new way of writing page contents using markdown language. This is different from what we know, and how we used to write contents where we would call REST API from a server and connected to a server or from a Content Management System (CMS for short).

The initials of JAMStack are described by - "Javascript, APIs and Markup".

Why did I made the move to switch over to JAMStack?

To start off, when I was looking for a new way to start hosting my personal portfolio, the following lists need to be able to provide for me:

  • Build, deploy and make changes at any time
  • Would need to be able to integrate to CI/CD for use with Github / Bitbucket
  • Preferably, would want to be able to run off from Command Line Interface (CLI) rather than needing to SSH al the time (similar to S3)
  • Should be cheap and widely accessible from anywhere

Since I was building websites, I know for a fact that building and uploading the dist folder would only be the folder that I needed to put online, therefore if I would like to be able to showcase different projects, I would only need to point it to the subdomain that I need.

After researching many alternatives like Heroku, Netlify, Vercel (formally known as Zeit/Now), I came across CloudFlare Worker which is a service that runs off serverless platform. What this means is that, I could benefit from spending too much time to get my website up and running. With that in mind, another benefit that this provides to me is the fact that the uptime is 100%, making changes to DNS settings / Adding new Worker is instant.

Steps needed towards hosting

  • run wrangler init --site, which would give us a .toml file and a workers-site folder - allowing us to config one line of code for different site
  • run npm run generate to build dist folder used for serving static files
  • config .toml file where needed (examples below)
  • run wrangler publish, which would install dependencies
name = "$NAME"    <--- The name of the new subdomain that we want to point to
type = "webpack"
account_id = "$ACCOUNT_ID"
workers_dev = true
route = ""
zone_id = "$ZONE_ID"

[site]
bucket = "dist"   <--- can be called the "build" folder (building from React)
entry-point = "workers-site"

What's in the long run for me?

Starting off, hosting using CloudFlare Worker cost $5 per month for unlimited requests, which is considered cheap and comparable to hosting a shared server hosted on like Digital Ocean and A2. While it's the same price to host on server and serverless, with a server, we need to manage ourselves (if we can unmanaged configuration), which means we need to set up a proxy that points to subdomain ourselves.

Provided that we need to setup these, this proves to:

  • Take a lot of time to host a single website
  • Either do a SSH and do setup Git to automatically pull for new updates on master branch / so SCP
  • Configure Nginx (used for proxy)

To most people, this would mean that they need a fast internet up to a certain point meaning for travelers, this may be a drawback.

On the bright side, we are able to use GraphQL on CloudFlare Worker, which opens up new possibilities to us. This means that we could be calling requests like we normally do on a NodeJS project (except we can't link to MongoDB as of writing this blog post).

Last updated: 5th August, 2020

JAMStack Portfolio Markdown Serverless Cloudflare