All the Ways!

All The Ways!

[to build a website]

Jamstack Boston | April 19, 2022
A talk first given at NERD Summit | March 20, 2020 [ video ]

alltheways.website created with revealjs.com, hosted on GitHub Pages

Common Media Inc.

Rick Hood

Lead Drupal Developer at Common Media since 2011
Western Mass (I am in Amherst, MA)
rick@commonmedia.com

NERD Summit

An organizer of NERD Summit
nerdsummit.org

New England Drupal Camp

A volunteer at New England Drupal Camp
nedcamp.org

Palawan
Palawan, 1991    Built for IBM Chair Tom Watson

Managed a boatbuilding and service company in Portsmouth, RI

Palawan
Skipped 2020, 2021 due to COVID

Yacht Insider's Guide (book, website)
www.yachtinsidersguide.com

Moog Voyager Old School
Moog Voyager Old School

Back into music production since 2020
soundcloud.com/flowte

All the Ways!

Why this talk?

At Common Media I do Drupal all day long.
I love Drupal, but over past few years I've had fun diving into React & JAMStack
which revealed another world of tools and software to build websites with.

All the Ways!

All The Ways!

  1. How did we get here (1990-2009)?
  2. Where are we now (2010-2020)?
  3. How does it work (demos)?
How did we get here?

1. How did we get here?

A brief history of website building: 1990-2009 (the first 2 decades)

thehistoryoftheweb.com/timeline

First web browser

The first web browser was 30+ years ago [1990]

Tim Berners-Lee wrote what would become known as WorldWideWeb on a NeXT Computer during the second half of 1990, while working for CERN.
The first successful build was completed by December 25, 1990.

https://en.wikipedia.org/wiki/WorldWideWeb

HTML

HTML [1990]

In 1989, Berners-Lee wrote a memo proposing an Internet-based hypertext system. Berners-Lee specified HTML and wrote the browser and server software in late 1990.

https://en.wikipedia.org/wiki/HTML

Common Gateway Interface (CGI)

Common Gateway Interface (CGI) [1993]

In 1993 the National Center for Supercomputing Applications (NCSA) team wrote the specification for calling command line executables. [1]

1. https://en.wikipedia.org/wiki/Common_Gateway_Interface

Perl

Perl [1994]

Larry Wall began work on Perl in 1987, while working as a programmer at Unisys, and released version 1.0 on December 18, 1987. Perl 5 was released on October 17, 1994. [1]
Perl was huge back in the day, but today it is found on only 0.2% of websites. [2]

1. https://en.wikipedia.org/wiki/Perl
2. https://w3techs.com/technologies/history_overview/programming_language/ms/y

PHP

PHP [1995]

Rasmus Lerdorf and team releases "Personal Home Page Tools (PHP Tools) version 1.0" on June 8, 1995. [1] PHP is used by 79.3% of all the websites whose server-side programming language we know. [2]

1. https://en.wikipedia.org/wiki/PHP
2. https://w3techs.com/technologies/details/pl-php

JavaScript

JavaScript [1995]

Deployed in the Netscape Navigator 2.0 beta 3 in December 1995. [1]
Today client-side JavaScript is used on 95% of website. [2]

1. https://en.wikipedia.org/wiki/JavaScript
2. https://w3techs.com/technologies/history_overview/client_side_language/all/y

My SQL

MySQL [1995]

The first version of MySQL appeared on 23 May 1995. [1]

1. https://en.wikipedia.org/wiki/MySQL

Active Server Pages

Active Server Pages [1996]

First released in December 1996, before being superseded in 2002 by ASP.NET. [1]
Today ASP is the second most used server-side language at 10.7%. [2]

1. https://en.wikipedia.org/wiki/Active_Server_Pages
2. https://w3techs.com/technologies/history_overview/programming_language/ms/y

Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS) [1996]

CSS was first proposed by Håkon Wium Lie on October 10, 1994. At the time, Lie was working with Tim Berners-Lee at CERN. The World Wide Web Consortium (W3C)
released CSS Recommendation (CSS1) in 1996. [1]

1. https://en.wikipedia.org/wiki/Cascading_Style_Sheets

Flash

Flash [1996]

In November 1996 Macromedia released Macromedia Flash 1.0. Flash as a two-part system, a graphics and animation editor known as Macromedia Flash, and a player known as Macromedia Flash Player. [1]

1. https://en.wikipedia.org/wiki/Adobe_Flash

Others

Others

Many others including: (date / usage) Java, (1995, 3.4%) Ruby, (1996, 3.0%) Scala, (2004, 1.6%)
Python, (1991, 1.2%) ColdFusion, (1995, 0.5%) Erlang (1998, 0.1%) and more.[1]

1. https://w3techs.com/technologies/history_overview/programming_language/ms/y

Web servers

Web Servers

Apache, (1995, 41.6%) Nginx, (2004, 31.4%) Cloudflare Server, (2009, 12.6%)
Microsoft-IIS (1995, 7.9%) and others. [1]

1. https://w3techs.com/technologies/overview/web_server

Tools

Code Editors

Emacs, (1976) Notepad, (1985) Vim, (1991) BB Edit, (1992) Microsoft FrontPage, (1996) Microsoft Visual Studio, (1997) Dreamweaver, (1997) NetBeans, (2000) Eclipse, (2001) TextMate, (2004) Coda, (2007) PhpStorm, (2009) Sublime Text, (2012) VS Code, (2015) and others. [1,2]

1. https://en.wikipedia.org/wiki/List_of_HTML_editors
2. https://en.wikipedia.org/wiki/List_of_text_editors

Tools

CMS & SaaS Tools

Wordpress, (2003, 35.5%) Joomla, (2005, 2.6%) Shopify, (2004, 2.0%) Drupal, (2000, 1.7%) Squarespace, (2004, 1.5%) Wix, (2006, 1.3%) Blogger, (1999, 0.9%) and many others. [1]

1. https://w3techs.com/technologies/overview/content_management

Recap: The First Two Decades

Recap: The First Two Decades

The 1990s

The 1990's

HTML, (1990) Perl, (1994) PHP, (1995) Javascript, (1995) MySQL, (1995)
CSS, (1996) ASP, (1996) Flash (1996)

A boom in basic web technologies.

The 2000s

The 2000's

Blogger, (1999) Drupal, (2000) Wordpress, (2003) Squarespace, (2004)
Rails, (2004) Joomla, (2005)

A boom in tools that used basic technologies.

The 2010s

2010-2020

What's next? Where are we now?

Career

My path

In 1997 I paid a visit to Mark Bistline in Newport, RI who at that time was using Macromedia Director to make interactive CD tours of private schools. I walked out thinking "I want to be doing that someday".
I got Director and learned some Lingo (Director's programming language).
Soon Flash came along. I fell in love with Photoshop and Flash.
When we sold the boat business in 1999, I took a left turn into graphic and web design.
Did a lot of ASP and Flash sites, then moved to PHP and Drupal.
Mark later founded schoolyard.com to build websites for schools,
eventually using Drupal for that, building sites for over 300 schools in 30 countries.

2020

2. Where are we now?

An explosion in five overlapping areas during the past decade:

  1. The rise of JavaScript frameworks/libraries
  2. Decoupling frontend from backend ("headless")
  3. Many new options for "backend as API"
  4. Static site generators on the rise
  5. New deploy, build & hosting services make it easy
JavaScript

1. JavaScript Frameworks / Libraries

Node.js, (2009) Express.js, (2010) Angular.js, (2010) Ember.js, (2011)
React.js, (2013) Vue.js, (2014) and many others. [1]

1. https://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks

Headless

2. Headless + API

The rise of decoupling frontend from backend.[1,2]

1. www.storyblok.com/tp/headless-cms-explained
2. en.wikipedia.org/wiki/Headless_content_management_system

CMS options

3. Options for CMS as backend API

Traditional: Wordpress, Drupal, Shopify, Django, etc.
New: Contentful, (2013) Sanity, (2016) GraphCMS, (2017) Netlify, (2014) Ghost, (2013)
Prismic, (2013) Statamatic, (2012) Grav, (2015) Kirby, (2012) Forestry, (2015)
Tina CMS, (2019) and many others. [1]

1. https://headlesscms.org/

Static Site Generators

4. Static Site Generators

Jekyll, (2008) Hugo, (2013) Eleventy, (2017) Next.js, (2016)
Nuxt, (2016), Gatsby, (2017) and many others. [1]

1. https://www.staticgen.com/

Static Site Generators

5. Deploy, build, host

Heroku, (2007) Github Pages, (2008) Platform.sh, (2010) Firebase, (2012) Netlify, (2014)
GitLab Pages, (2016) Zeit Now, (2016) and more. [1]

1. Google "aternatives to Netlify" finds this: www.slant.co/options/16947/alternatives/~netlify-alternatives

All Together Now!

All Together Now!

1. Javascript frameworks + 2. Headless API + 3. Backend-only CMS
+ 4. Static site generators + 5. Deploy/build/hosting

Static Site Generators

Example: Gatsby + Wordpress

This shows one of many options: using Gatsby as static site generator and frontend, with an API from Wordpress as backend.[1] Within Gatsby, GraphQL sucks in the data from the JSON API, then React queries GraphQL for data and builds the HTML.
Normally this is all server-side rendered -- static site, for speed and security -- but nothing stops you from client side calls to the JSON API from React.

1. https://www.gatsbyjs.org/docs/sourcing-from-wordpress/

Static Site Generators

Gatsby + Wordpress + Netlify

Hosted on Netlify, which does both the Gatsby build process
and hosting of the static files. [1]

1. https://www.netlify.com/with/gatsby/

Static Site Generators

Gatsby + Wordpress + Shopify

Add in an API from Shopify.[1]

1. https://www.gatsbyjs.org/docs/building-an-ecommerce-site-with-shopify/

Gatsby + CMS

Gatsby + API + CMS + DATA

Many options for backend data.[1]

1. https://www.gatsbyjs.org/blog/2018-2-6-choosing-a-back-end/

All the options

All The Ways!

Many options for SSG/SSR, back-end & data store, straight-up CSR and DIY-Saas.

This one slide is what this talk is all about.

Show me!

How does it work?

Brief demos to give you a taste.
[videos: 21 minutes]
  1. Squarespace [video: 3 minutes]
  2. Github Pages [video: 2 minutes]
  3. Eleventy (SSG) + Sanity (CMS) + Netlify (host) [video: 5 minutes]
  4. React (CSR frontend) + Firebase (backend) + Netlify (host) [video: 6 minutes]
  5. Gatsby (SSG) + Drupal (CMS) + Pantheon (host)+ Netlify (host) [video: 5 minutes]
Squarespace

1. Squarespace

Let's start with one of the simplest methods, deploying a website with Squarespace.

Squarespace

Squarespace

While Squarespace is simple, you can do a lot with it, for example one of my favorite podcasts Marc Maron's WTF Podcast uses it.
See also 35+ Stunning Examples of Websites Using Squarespace (2020).

Github Pages

2. Github pages

OK now custom coded site, deploying a website with Github Pages.

Github Pages

Github pages

Github pages can do a lot more than this.
By using Jekyll it can read data from Markdown files.
Setting up a GitHub Pages site with Jekyll

Eleventy

3. Eleventy + Sanity + Netlify

Eleventy (2017) is an SSG, gaining popularity.
Sanity (2016) is a back-end-as-API using GraphQL.

Eleventy

Eleventy

Really great (and short) intro to Eleventy by Kyle Mitofsky (simple, using Markdown):
www.youtube.com/watch?v=ozTesGh0l74
Long Eleventy Tutorial by Bryan Robinson (using Netlify CMS backend):
www.youtube.com/playlist?list=PLOSLUtJ_J3rrJ1R1qEf8CCEpV3GgbJGNr

React + Firebase

4. React + Firebase

This is very dynamic CSR application -- the opposite of a static site.
In this case the React frontend serves as the CMS (editor of the Firebase data).

React + Firebase

React + Firebase

More info:
reactforbeginners.com
firebase.google.com
Getting Started with React and Firebase - Firecasts (see part 2 also)
^ that last one is a good (and free) introduction to React using create-react-app

Gatsby + Drupal

5. Gatsby + Drupal + Netlify + Pantheon

This shows what was built in a Gatsby training I took at NEDCamp with Shane Thomas.
See this for more codekarate.com/category/tags/gatsbyjs

Gatsby + Drupal

What's going on?

You need a server that runs Node.js (Netlify) to do the Gatsby build process, and a host running PHP, a database, etc, (Pantheon) for the Drupal site.
There are many hosting options out there.

All the Ways!

The End. Now what?

Now what?

[this page scrolls]
  1. Learn some React [1,2,3]
    React is all over the place out there so it's a good idea to learn enough to understand the basics (components, props, state).
  2. Try Gatsby [4]
    Gatsby is an easy static site generator to try out and also has the buzz these days. Since it uses React you can combine this with #1.
  3. Try Netlify [5,6]
    A very popular deploy-build-host services out there for Javascript apps. Also try the Netlify CMS which saves data to Markdown files.
  4. Try Sanity [7]
    One of the new CMS-as-backend-only options. Integrates with Netlify. You can fire up the following from within Sanity: Gatsby, Next.js, Nuxt.js, Eleventy and more.
  5. Create a simple Github Pages site [8]
    Worth doing, just to see how it works -- probably the easiest way to host a site.
  6. Try Firebase [9,10]
    Also worth doing, just to see how it works. I found it interesting to mess with a non-Drupal and non-CMS way to store data and do user authentication. The React for Beginners course uses Firebase.
  7. Try Squarespace [11]
    Also worth doing, just to see how it works and to have in your toolbelt.
  8. Listen to the Syntax podcast [12]
    Wes Bos and Scott Tolinsky keep you up to date on the Javascript world.
  9. Attend the JAMStack Boston Meetup [13]
    Organized by Jim Fisk, Stephanie Luz and Joe Astuccio. Jim and Stephanie are both presenting at NERD Summit. The next meetup is on April 21 and features Dr. Gleb Bahmutov, PhD, also a NERD Summit speaker.

Below are additions since NERD Summit talk on March 20, 2020

  1. Learn Node [14]
    Learn how node runs Javascript on a server, as opposed to a browser.
  2. Learn GraphQL [15, 16]
    Learn about what Graph QL is and Apollo, a popaular way to implement it.
[1] reactforbeginners.com ($)
[2] www.leveluptutorials.com/tutorials/react-for-everyone ($)
[3] reactjs.org/docs/getting-started.html (free, see also 10 below)
[4] www.gatsbyjs.org (free)
[5] www.netlify.com/blog/2016/02/24/a-step-by-step-guide-gatsby-on-netlify (free to try)
[6] Netlify CMS – Publishing with the CMS (free)
[7] www.sanity.io/create (free to try)
[8] pages.github.com (free)
[9] firebase.google.com (free to try)
[10] Firebase on the Web - Tutorials (free, videos #14 & #15 are a good intro to React)
[11] www.squarespace.com (free to try)
[12] syntax.fm (free)
[13] www.meetup.com/JAMstack-Boston (free)
[14] Node.js Tutorial for Beginners: Learn Node in 1 Hour | Mosh (free)
[15] What is GraphQL? (14 min)
[16] What is Apollo? (8 min)

...and/or Google any of these topics and you will find all kinds of resources.

Slides are here alltheways.website
All the Ways!

All The Ways!

[to build a website]

Rick Hood [ rick@commonmedia.com ] alltheways.website