The JAMStack (Javascript, APIs, Markup).
•Download as PPTX, PDF•
0 likes•165 views
Slideshows to compliment a talk I would like to do this year with Tech Exeter. You can read my slides and notes here.
More Related Content
What's hot
What's hot (20)
Similar to The JAMStack (Javascript, APIs, Markup).
Similar to The JAMStack (Javascript, APIs, Markup). (20)
Recently uploaded
Recently uploaded (20)
The JAMStack (Javascript, APIs, Markup).
- 1. The JAMStack A talk by Michael Brooks <https://michaelbrooks.dev>
- 2. What is the JAMStack JAMstack is a new way of building websites and apps that delivers better performance, higher security, lower cost of scaling, and a better developer experience. It's a modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup.
- 3. 1. Benefits ➔ Better Performance ➔ Higher Security ➔ Cheaper, Easier Scaling ➔ Better Developer Experience
- 4. Which languages can we use with the JAMStack? Many languages! Python! Ruby! Node! JS! HTML!
- 5. Where can I host my site? Anywhere!
- 6. How do I deploy my website? Through Github (Or any flavour of Git)!
- 7. Simple. Tell Netlify where your build pages will be created and which command to run in order to build your website. The rest is handled by Netlify.
- 9. Every time you push, Netlify will automatically deploy.
- 10. I’m Michael Brooks and you’ve been breathtaking! Twitter: @mike_d_brooks Personal website: https://michaelbrooks.co.uk Freelance website: https://michaelbrooks.dev
Editor's Notes
- The JAMStack is a new way of building the frontend for your websites. It’s cheap, reliable and more secure then hosting on a traditional server. It’s a modern web development architecture based on Javascript, APIs and prebuilt Markup.
- What are the benefits of the JAMStack? Better performance, higher security, cheaper, easier scaling and a better development experience.
- There are so many static site generators out there, if you can find one in your language then that’s JAMStack. The most popular languages are Python (MKDocs and Pelican), Ruby (Jekyll, Middleman and Metalsmith), NodeJS (Gatsby, Hugo VuePress and Gridsome) and many more. You can also create your own static website with JavaScript, HTML and CSS or run with your usual React or VueJS project just as long as there’s no server-side rendering.
- You could host it on your own server or with AWS or DigitalOcean and run your own Continious Integration services, but that kind of defeats the purpose. You can even run it on S3 or Google Cloud Storage which would be more beneficial, but I personally think two of the best hosting sites are Netlify and GitHub Pages because you can hook it up with your favourite git client and literally push-to-deploy.
- You’ve made your new website locally and you’re ready to deploy, but how do you deploy that to your host? By using Github or your favourite git client. There is however a small setup required in order to tell the host how to setup your website. For this example, I will use Netlify which calls it a TOML file.
- This basically says “on build you can create and find my generated files in the pages directory and to build this website, you should run “npm run docs:build”. Your directory and command might be different depending on what you use. However, Netlify comes with Ruby, PHP, Python and NodeJS so it should be able to handle most build commands. It will also install any packages or modules which your website requires based on your package manager’s .lock file.
- You then push your code to your git client, sign into Netlify and tell Netlify which repository you want to use in order to create your new website.
- Once you have done this, it will begin a build process. When the build is successful, every time you push to your client, it will automatically any updates. It will even deploy all pull requests so you can preview PRs without having to pull locally. This is all done through different subdomain urls and won’t affect your live site at all.
- I hope you enjoyed my talk on the JAMStack and if you have any questions, then please feel free to ask.