Complete Intro to Netlify in 3.5 hours

Given the wide range of Netlify products and features, statistically speaking, you’re probably unaware of something Netlify does that might dramatically improve the way you deploy modern web apps!

For example, most users who use Netlify’s Continuous Deployment might want to take better advantage of Custom Domains and Managed DNS.

Or you might use Netlify Forms for contact pages and file uploads via vanilla HTML form submission, and be unaware that you can send and retrieve form submissions via JavaScript.

Or you might want to get started with serverless functions and have no idea where to start.

The Netlify team has done excellent docs and blogposts and talks and talks and talks but everyone’s learning style is different!

Netlify ❤️ FreeCodeCamp

We are big fans of FreeCodeCamp and recently collaborated with them to record an extended tutorial to walk you through everything you can possibly want to know about Netlify and how its various products and features can link together to create a full JAMstack app!

(link to video)

Specifically, the contents cover:

• (00:03:42) Part 1: 🗺️ Netlify Edge – Netlify’s CDN layer for Hosting, Redirects, and more!
• (00:37:15) Part 2: ⚒️ Netlify Build – Automated builds of your projects and static site generators
• (01:02:02) Part 3: 👩🏼‍💻 Netlify Dev – local emulation of Netlify Functions, Redirects, and live sharing
• (01:24:17) Part 4: 🗒️ Netlify Forms – form submissions without a running server!
• (01:55:21) Part 5: 🆔 Netlify Identity – JWT based authentication with external provider support for GitHub, Google, and more!
• (02:34:07) Part 6: ✍️ NetlifyCMS – the leading open source Git-based (aka no running server) CMS!
• (02:59:53) Part 7: ➕ Netlify Addons – Add unblockable Analytics, Add a Serverless Database with Fauna DB, or attain PCI/SOC2 compliance with Very Good Security, and more!
• (03:18:18) Part 8: 🍻 Netlify API – Write your own Netlify client!
• (03:25:39) Part 9: ❓ Learn More – Join the JAMstack community and learn more from conferences and books!

Each of these sections come with extensive links for further followup – if you wish to read more, detailed notes and references per each section below! You are welcome to use this sequence to teach a full Netlify/JAMstack workshop if you wish.

Enjoy!

Detailed Notes and References:

Part 1: 🗺️ Netlify Edge (00:03:42)

• 4 methods
  • Netlify Drop
  • Netlify CLI
  • Continuous Deploy to Netlify
    • Deploy Hooks
    • Private repos
  • Deploy to Netlify Button
  • more ways (Siri, Wand, Watch, CodeSandbox)
• Functions
  • add a sample JS and Go function
  • setting Functions folder in app
  • setting Functions folder in netlify.toml
  • Event Triggered Functions
    • deploy-building, deploy-succeeded, deploy-failed, deploy-locked, deploy-unlocked
    • Env variables
      • INCOMING_HOOK_TITLE, INCOMING_HOOK_URL, INCOMING_HOOK_BODY
  • AWS Lambda versions: AWS_LAMBDA_JS_RUNTIME nodejs10.x
• Defaults
  • HTTPS
  • Deploy Previews
    • Branch deploys
    • Split testing
      • split-test-activated, split-test-deactivated, split-test-modified
  • Distributed Deploys, Atomic Deploys, Instant Rollbacks
• Post Processing
  • Forms separate video
  • Mixed Content
  • Prerendering
  • Asset Optimization
    • Netlify Large Media
    • https://url.netlify.com/HyRnZsqDH
  • Snippet Injection
    • for GA, eg its more involved if you do it in Nuxt
• Netlify and Custom Domains
  • Custom Netlify Domain
  • Redirects
    • _redirects file
    • netlify.toml version
    • Redirects Playground
  • Headers
    • _headers file
    • netlify.toml version
    • Headers Playground
    • Cache control
    • Auth headers
  • Custom Domains
  • Netlify DNS
    • DNS Docs
    • Community Common Issue: Should you use Netlify DNS?
    • Migrating to Netlify DNS with minimal downtime
  • Emails
• CDN Tips
  • Faster deploys
  • Enterprise

Part 2: ⚒️ Netlify Build (00:37:15)

• Netlify ❤️ Build Tools and SSGs
  • StaticGen.com
  • https://www.smashingmagazine.com/2015/11/modern-static-website-generators-next-big-thing/
• Understand The Build Process
  • You can always local build!!! You May Not Need CD™
  • Build Settings and where to set them
    • Build Settings Docs
    • in app
    • netlify.toml (override)
  • the Build Bot
    • How it Works
    • https://github.com/netlify/build-image/blob/master/run-build.sh
  • Build stages and Reading Logs
    • Netlify App Logs
    • Netlify Site Logs
    • Fetch from cache
      • NETLIFY_CACHE_DIR = “/opt/build/cache”
      • https://github.com/DavidWells/cache-me-outside
    • Install
    • Build
    • Package & optimize
    • Save cache
    • (post processing)
    • Deploy
    • Output manifest
  • Concurrent Builds and Canceling Builds
  • Gotchas
    • Common Build Gotchas
    • 15 min rule
    • Permissions and API Secrets
    • Think about what folder you are deploying
    • Community Build tips https://url.netlify.com/BJjJ7jqDH
  • Troubleshooting
    • Read your build logs
    • Make sure you can build locally
    • Hidden Dependencies
      • Environment version
      • Yarn vs npm
      • Preinstalled Grunt/Hugo/Bower etc
    • Netlify Community
• Environment Variables
  • Where to set them
  • https://gist.github.com/sw-yx/c53634e7e63f0015e43c16bc26832283
  • https://scotch.io/@sw-yx/netlify-environment-variables-the-cheat-codes-of-the-internet

Part 3: 👩🏼‍💻 Netlify Dev (01:02:02)

• Netlify Dev
  • Docs
  • netlify dev (netlify.toml)
    • command
    • port
  • netlify dev (detector)
    • env vars
    • Redirects
  • netlify dev —live (beta)
  • netlify functions:create
  • netlify functions:invoke
• netlify-lambda
  • netlify-lambda install
  • netlify-lambda build

Part 4: 🗒️ Netlify Forms (01:24:17)

• Introducing Forms in plain HTML
• File Uploads
• Customize Post-Submit page
• Slack/Email/Webhook Notifications
• Zapier
• submission-created
• Spam Filtering
  • Akismet
  • Honeypot
  • Recaptcha
• Forms in Single Page Apps
• Forms in Gatsby
• AJAX form submissions

Part 5: 🆔 Netlify Identity (01:55:21)

• Before Identity: Password Protection and Role Based Access Control
  • Netlify Password Protection
  • Netlify RBAC
• Identity
  • Enable Netlify Identity
  • Identity on a boilerplate
  • Adding netlify-identity-widget
  • Important settings
    • open signup vs invite only
    • confirm vs don’t confirm
    • External providers
    • Email templates
  • Metadata
    • User metadata
    • App metadata
  • gotrue-js and friends
    • gotrue
    • react-netlify-identity
    • react-netlify-identity-widget
    • gatsby-plugin-react-netlify-identity
  • Authenticated Functions: Identity + Functions
    • netlify functions:invoke
  • Event Triggered Functions
    • identity-validate: before sign up
    • identity-signup: on sign up
      • Note: this fires for only email+password signups, not for signups via external providers e.g. Google/GitHub
    • identity-login: on log in
  • Retrieving Netlify Form Info in Function
    • https://jamstack-comments.netlify.com
    • https://open-api.netlify.com/
  • Paid features
    • Branded OAuth
    • SSO
    • Audit log
    • Custom sender

Part 6: ✍️ NetlifyCMS (02:34:07)

• Concepts and Config
  • Admin Endpoint: /admin
  • Writing: WYSIWYG and Previewing
  • Editorial Workflow: Draft – Review – Ready
  • Media and Public folders
  • NetlifyCMS Backends
    • Git Gateway + Netlify Identity
      • Docs
      • https://github.com/netlify/git-gateway
      • https://www.netlifycms.org/docs/authentication-backends
    • GitHub backend
    • GitLab backend
    • Bitbucket backend
• Clone from Template
• Config
  • https://www.netlifycms.org/docs/configuration-options/
  • Collections
    • Folder vs File Types
    • Filter (published?)
    • https://www.netlifycms.org/docs/add-to-your-site/#collections
  • Widgets
    • Default Widgets
    • Custom Widgets
• Scheduled Posts
  • Zapier Netlify Integration
  • https://flaviocopes.com/netlify-auto-deploy/
  • https://davidwells.io/work/static-site-post-scheduler
• Media
  • Cloudinary
  • Uploadcare
  • Netlify Large Media

Part 7: ➕ Netlify Addons (02:59:53)

• Analytics
  • Netlify Analytics Product Page
  • Analytics Docs
  • Unblockable, No personal info
  • What unique visitors are
  • Missing files
• Large Media
  • https://git-lfs.github.com/
  • Large Media Docs
  • Large Media Product Page
  • https://netlify-photo-gallery.netlify.com
  • Image Transformation Docs
• Addon Marketplace
  • Partner Addon Docs
  • Fauna DB
    • What is Fauna?
    • Functions + Fauna Blogpost
    • Fauna Addon Announcement
    • https://github.com/fauna/netlify-faunadb-todomvc
    • https://github.com/netlify/netlify-faunadb-example
    • https://docs.fauna.com/fauna/current/start/netlify
  • Very Good Security
    • https://www.youtube.com/watch?v=k2I_4u8_I9s
    • https://www.youtube.com/watch?v=wtYzLdpSeJo
    • https://www.verygoodsecurity.com/docs/getting-started
    • https://www.verygoodsecurity.com/docs/integrations/netlify
    • https://github.com/verygoodsecurity/netlify-addon-demo
    • https://github.com/verygoodsecurity/netlify-addon-example
• Premium Addons
  • Support
  • Performance ADN

Part 8: 🍻 Netlify API (03:18:18)

• Make Your Own Netlify Client
• Example Clients
  • https://app.netlify.com
  • https://github.com/netlify/cli
  • https://github.com/stefanjudis/netlify-menubar
  • https://github.com/ShailenNaidoo/Netlify
• API docs
• OpenAPI docsite
• Netlify Libraries
  • https://github.com/netlify/js-client
  • https://github.com/netlify/open-api
  • https://github.com/netlify/cli-utils/

Part 9: ❓ Learn More (03:25:39)

• Status
  • https://twitter.com/netlifystatus
  • https://www.netlifystatus.com/
• Troubleshoot
  • https://docs.netlify.com/configure-builds/troubleshooting-tips/
  • http://community.netlify.com
  • https://www.netlify.com/support/
  • https://twitter.com/netlifysupport
• Talks
  • Mathias Biilmann
  • Chris Coyier
  • Sarah Drasner
  • Phil Hawksworth
  • Citrix’s Beth Pollock & Luis Ugarte – Delivering more to customers with less overhead
  • Quincy Larson – How freeCodeCamp Serves Millions of Learners Using the JAMstack
  • Paypal’s Jamund Ferguson
• VC perspective
  • a16z
  • KPCB
  • Redpoint
  • CRV
• Learn More
  • https://jamstackconf.com
  • https://jamstack.org
  • https://jamstack.slack.com
  • https://www.thenewdynamic.org/community/
  • JAMstack Radio
  • OReilly JAMstack Book