This site uses https://gridsome.org which is a static site generator based on VueJS. I love it! It’s wonderful to work with. It’s pretty young, but hopefully it’ll grow up strong over the coming years.
Here’s an overview of the site’s development stack:
- Install Gridsome CLI
npm install --global @gridsome/cli - Clone this repository from Github.
- Navigate to the project’s folder
- Run
gridsome developto start a local dev server athttp://localhost:8080 - Happy coding 🎉🙌
- The backend database is hosted at https://airtable.com, which is a no-code tool for creating spreadsheets and databases. The backend can be viewed here: Shortcuts Directory Airtable
- The data is imported into Gridsome using the plugin
@gridsome/source-airtableplugin - Airtable has web request rate limits that make it not a bad option as a pure backend web server. This site, and the Gridsome/Airtable plugin, bake in the data whenever the site is built on the server. This makes it so the site is very quick because it doesn’t have to request data from Airtable’s servers.
- Every time the data in Airtable changes, the site needs to be rebuilt to pull in the latest data. I do this by making a trivial change like adding a comment to the bottom of my
main.jsfile.
This site is deployed and hosted at https://netlify.com. Every new push to the main branch of the repo creates a new build of the site. For more information, check out Netlify’s documentation.