JAMstack

November 11, 2019

The (little) ultimate JAMstack-Guide with Gridsome and Co.

This Guide shows a simple Vue.js-Project (this site!) with

  • Gridsome (like Gatsby, but for vue.js)
  • TailwindCSS
  • Netlify
  • PWA
  • Google Analytics or Google Tag Manager
  • Darkmode
  • Blog with Taging
  • RSS-Feed
  • XML-Sitemap
  • Search
  • tbc

background

JAMstack is a modern architecture — Create fast and secure sites and dynamic apps with JavaScript, APIs, and prerendered Markup, served without web servers.

Install Gridsome

I started with the Gridsome Portfolio Starter

  • install Gridsome globaly npm install --global @gridsome/cli or use yarn
  • Clone the repo git clone https://github.com/drehimself/gridsome-portfolio-starter.git
  • rename and change into mv gridsome-portfolio-starter jamstack-project and cd jamstack-project
  • install all deps npm install
  • start gridsome gridsome develop and browse localhost:8080
  • make a own project-repo

Forms

Forms dosn´t work is static Pages. But there are any Solutions, e.g. FormSpree.io or Netlily Forms. Both are very simple and works well. I use FormSpree.io.

Install Plugins

  • Google Analytics npm install @gridsome/plugin-google-analytics See Details here.
  • PWA npm install gridsome-plugin-pwa See Details here.

Content

Insert Content ...

Git and Deploy

  • make a repo, if it not happened
  • create netlify account and connect github with netlify
  • choose your gridsome-repo and the master-branch
  • add deployment-settings see netlify.toml inside the gridsome-project
  • testing ...

Workarround

  1. Edit
  2. Push the Changes to Masterbranch
  3. Netlify-Tests starts and deploys automaticly the project (approx. 1 minute with zero downtime)

Netlify-Button

The Button shows the Netlify-State. error building success

Netlify Status

Test the Page with Google-Lighthouse

background

Next Steps

  • remove all content and connect to headless cms (Prismic or Storyblok)
  • add comments (blog)
  • tbc