Dynamic Static Site Strategies from Smashing Conf NY

Slide 1

Slide 1 text

DYNAMIC STATIC SITE STRATEGIES (AND OTHER TONGUE TWISTERS) 7 7 @PHILHAWKSWORTH

Slide 2

Slide 2 text

PHILHAWKSWORTH

Slide 3

Slide 3 text

@philhawksworth BRENDAN DAWES, 9:28 TODAY …THE COMBINATION OF MANY MUNDANE THINGS TO CREATE SOMETHING INTERESTING

Slide 4

Slide 4 text

@philhawksworth STATIC SITES

Slide 5

Slide 5 text

@philhawksworth DYNAMIC STATIC SITE STRATEGIES

Slide 6

Slide 6 text

@philhawksworth SSG

Slide 7

Slide 7 text

@philhawksworth SSGEEWIZZ

Slide 8

Slide 8 text

@philhawksworth SSGEEWIZZ @philhawksworth

Slide 9

Slide 9 text

@philhawksworth STATIC SITES GO ALL HOLLYWOOD

Slide 10

Slide 10 text

@philhawksworth BRIGHT COLOURS

Slide 11

Slide 11 text

@philhawksworth BIG FONTS

Slide 12

Slide 12 text

@philhawksworth BIG FONTS & BRIGHT COLOURS

Slide 13

Slide 13 text

@philhawksworth PREVIOUS RANTS 7 7

Slide 14

Slide 14 text

@philhawksworth I LOVE THE WEB 7 7

Slide 15

Slide 15 text

AITCH TEE TEE PEE DOUBLE MEH – Alex Sexton 7 7 http://domain.com/path?query=lovely#fragment @philhawksworth

Slide 16

Slide 16 text

AITCH TEE TEE PEE DOUBLE MEH – Alex Sexton 7 7 @philhawksworth

Slide 17

Slide 17 text

@philhawksworth http foobar. http ://

Slide 18

Slide 18 text

@philhawksworth http ://

Slide 19

Slide 19 text

@philhawksworth KICKING UP A STINK CMS about 7 7

Slide 20

Slide 20 text

@philhawksworth BUILDING FOR THE WEB CAN BE HARD 7 7

Slide 21

Slide 21 text

@philhawksworth OMFG DEVICES

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

@philhawksworth OF TOOLS AND COMPLEXITY A FULL STACK FROM FRONT END TO BACK END there is a

Slide 24

Slide 24 text

@philhawksworth MAKE THE STACK can we SHORTER?

Slide 25

Slide 25 text

@philhawksworth COMPLEXITY 7 7

Slide 26

Slide 26 text

@philhawksworth REMOVING OBSTRUCTIONS TO QUALITY 7 7

Slide 27

Slide 27 text

@philhawksworth REMOVING OBSTRUCTIONS TO LONGEVITY 7 7

Slide 28

Slide 28 text

@philhawksworth

Slide 29

Slide 29 text

@philhawksworth SIMPLICITY 7 7

Slide 30

Slide 30 text

@philhawksworth BAKE, DON’T FRY – Aaron Swartz

Slide 31

Slide 31 text

@philhawksworth I CARE ABOUT NOT HAVING TO MAINTAIN CRANKY AOLSERVER, POSTGRES AND ORACLE INSTALLS AARON SWARTZ, 2002

Slide 32

Slide 32 text

@philhawksworth BEST FIT 7 7

Slide 33

Slide 33 text

@philhawksworth FEW WRITES MANY READS

Slide 34

Slide 34 text

@philhawksworth SIMPLICITY 7 7

Slide 35

Slide 35 text

@philhawksworth

Slide 36

Slide 36 text

@philhawksworth Empire State Building  New York Jim Mao Building  Shanghai Sears Tower  Chicago Petronas Towers Huala Lumpur Tapei 101 Taipei The size and lag of your parallax page

Slide 37

Slide 37 text

@philhawksworth DUMBING DOWN SIMPLIFYING is not 7 7

Slide 38

Slide 38 text

@philhawksworth DUMBING DOWN SIMPLIFYING is not 7 7 WHAT MATTERS IT LETS US FOCUS on 7 7

Slide 39

Slide 39 text

@philhawksworth A MOMENT ABOUT BENEFITS 7 7

Slide 40

Slide 40 text

@philhawksworth CHEAPER, SIMPLER HOSTING FEWER POINTS OF FAILURE FEWER VULNERABILITIES EASIER COMPLIANCE GREATER PORTABILITY SANDBOXED ENVIRONMENTS

Slide 41

Slide 41 text

@philhawksworth

Slide 42

Slide 42 text

@philhawksworth

Slide 43

Slide 43 text

@philhawksworth

Slide 44

Slide 44 text

@philhawksworth ?

Slide 45

Slide 45 text

@philhawksworth CREDENCE 7 7

Slide 46

Slide 46 text

@philhawksworth CONTRIBUTE.BARACKOBAMA.COM

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

@philhawksworth BAKED WITH JEKYLL LARGE AUDIENCE RAPID ITERATIONS SERVED STATICALLY

Slide 49

Slide 49 text

@philhawksworth GOOGLE YEAR IN SEARCH

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

@philhawksworth LARGE AUDIENCE INFREQUENTLY UPDATED LONG LIFE

Slide 52

Slide 52 text

@philhawksworth 40 STORIES 52 LANGUAGES 2.6B SOCIAL IMPRESSIONS

Slide 53

Slide 53 text

@philhawksworth CONTENT ABSTRACTED BAKED WITH SSG SERVED STATIC BY GOOGLE

Slide 54

Slide 54 text

@philhawksworth STATIC SITES 7 7 are ALREADY MAINSTREAM

Slide 55

Slide 55 text

@philhawksworth MANY, MANY CLIENTS BUT I NEED SOMETHING MORE POWERFUL FOR MY PROJECT

Slide 56

Slide 56 text

@philhawksworth BUT DO YOU?

Slide 57

Slide 57 text

@philhawksworth FEEL MORE DYNAMIC 7 7

Slide 58

Slide 58 text

@philhawksworth ENABLERS 7 7

Slide 59

Slide 59 text

@philhawksworth GENERATORS AND TEMPLATING 7 7

Slide 60

Slide 60 text

STATICSITEGENERATORS.NET

Slide 61

Slide 61 text

@philhawksworth 435

Slide 62

Slide 62 text

@philhawksworth

Slide 63

Slide 63 text

@philhawksworth A LITTLE CAUTION 7 7

Slide 64

Slide 64 text

@philhawksworth M

Slide 65

Slide 65 text

TAX @philhawksworth M HIPSTER the

Slide 66

Slide 66 text

@philhawksworth BAKE A SITE MORE QUICKLY 7 7

Slide 67

Slide 67 text

@philhawksworth UPDATE A SITE MORE QUICKLY 7 7

Slide 68

Slide 68 text

@philhawksworth FEEL MORE DYNAMIC 7 7

Slide 69

Slide 69 text

@philhawksworth SIDE EFFECT as a STYLEGUIDE 7 7

Slide 70

Slide 70 text

@philhawksworth ARTEFACT as an STYLEGUIDE 7 7

Slide 71

Slide 71 text

@philhawksworth PROCESS as a STYLEGUIDE 7 7

Slide 72

Slide 72 text

@philhawksworth STYLEGUIDE BUILD MODULES PRODUCTION TEMPLATES CONTENT SSG OPTIMISATION DEPLOYMENT

Slide 73

Slide 73 text

@philhawksworth UNLESS IT’S PART OF YOUR BUILD, YOUR STYLEGUIDE IS JUST MORE DOCUMENTATION TO MAINTAIN

Slide 74

Slide 74 text

@philhawksworth IT’S A SYSTEM. A LIVING BREATHING LIBRARY OF COMPONENTS ANNA DEBENHAM

Slide 75

Slide 75 text

@philhawksworth AUTOMATION 7 7

Slide 76

Slide 76 text

@philhawksworth GRUNT GULP BRUNCH BELCH BURP COUGH SNEEZE M M M

Slide 77

Slide 77 text

@philhawksworth DEPLOY FASTER DEPLOY SAFER 7 7

Slide 78

Slide 78 text

@philhawksworth UPDATE FASTER 7 7

Slide 79

Slide 79 text

@philhawksworth FEEL MORE DYNAMIC 7 7

Slide 80

Slide 80 text

@philhawksworth SURGE.SH

Slide 81

Slide 81 text

@philhawksworth HIT THE CEILING 7 7

Slide 82

Slide 82 text

@philhawksworth BECAUSE WE NEED A DEVELOPER MINDSET

Slide 83

Slide 83 text

@philhawksworth A DEVELOPER MINDSET IS NOT ALWAYS VERY HOLLYWOOD

Slide 84

Slide 84 text

@philhawksworth WE STILL WANT THE SHIZZLE

Slide 85

Slide 85 text

@philhawksworth AND WE WANT TO MANAGE CONTENT OURSELVES

Slide 86

Slide 86 text

@philhawksworth LET’S LOOK AT COMMON COMPLEXITY

Slide 87

Slide 87 text

DEV ENVIRONMENTS QA ENVIRONMENT STAGING ENVIRONMENT @philhawksworth VIEWS SERVER LOGIC DATA CACHE VIEWS SERVER LOGIC USER ADMIN PRODUCTION ENVIRONMENT

Slide 88

Slide 88 text

@philhawksworth REDUCE COMPLEXITY

Slide 89

Slide 89 text

@philhawksworth OTHER PEOPLE’S PLUMBING

Slide 90

Slide 90 text

@philhawksworth USER STATIC PROD ENV ADMIN DEPLOY AAS SSG DEV ENVIRONMENTS BUILD CONTENT AAS REPO

Slide 91

Slide 91 text

@philhawksworth BUT THAT’S NOT SIMPLIFYING!

Slide 92

Slide 92 text

@philhawksworth IT’S ABOUT SHIFTING COMPLEXITY

Slide 93

Slide 93 text

@philhawksworth OUTSOURCE COMPLEXITY 7 7

Slide 94

Slide 94 text

@philhawksworth DISTANCE THE USER FROM THE COMPLEXITY 7 7

Slide 95

Slide 95 text

@philhawksworth SOURCE CONTENT AT BUILD TIME (NOT RUN TIME)

Slide 96

Slide 96 text

@philhawksworth CONTENTFUL.COM

Slide 97

Slide 97 text

@philhawksworth A HOSTED CMS INTERFACE EXPOSES CONTENT VIA AN API SUPPORTS TRANSLATIONS USER ROLES AND MANAGEMENT ENVIRONMENTS & VERSIONS

Slide 98

Slide 98 text

@philhawksworth DECOUPLE THE CONTENT ADMINISTRATION from THE PRODUCTION ENVIRONMENT 7 7

Slide 99

Slide 99 text

@philhawksworth USER STATIC PROD ENV ADMIN DEPLOY AAS SSG DEV ENVIRONMENTS BUILD CONTENT AAS REPO CONTENTFUL

Slide 100

Slide 100 text

@philhawksworth

Slide 101

Slide 101 text

@philhawksworth HOSTING

Slide 102

Slide 102 text

@philhawksworth “HOSTING PLUS”

Slide 103

Slide 103 text

@philhawksworth “HOSTING WITH BENEFITS”

Slide 104

Slide 104 text

NETLIFY NETLIFY.COM

Slide 105

Slide 105 text

@philhawksworth USER STATIC ADMIN BUILD AND HOSTING AAS SSG DEV ENVIRONMENTS BUILD CONTENT AAS REPO NETLIFY CONTENTFUL

Slide 106

Slide 106 text

@philhawksworth COMMIT HOOKS AND BUILDS

Slide 107

Slide 107 text

@philhawksworth HOOKS NOTIFICATIONS CONTROL OF HEADERS BASIC AUTH HTTPS

Slide 108

Slide 108 text

@philhawksworth USER STATIC ADMIN BUILD AND HOSTING AAS SSG DEV ENVIRONMENTS BUILD CONTENT AAS REPO NETLIFY CONTENTFUL

Slide 109

Slide 109 text

@philhawksworth LIMITATIONS

Slide 110

Slide 110 text

@philhawksworth PERSONALISATION VERY VERY LARGE SITES USER GENERATED CONTENT

Slide 111

Slide 111 text

@philhawksworth LOCALISATION 7 7

Slide 112

Slide 112 text

@philhawksworth STATIC SITE GENERATOR CONTENT FEEDS GOOGLE TRANSLATE

Slide 113

Slide 113 text

@philhawksworth INDICATIVE TRANSLATIONS

Slide 114

Slide 114 text

@philhawksworth GOOGLE DOCS

Slide 115

Slide 115 text

@philhawksworth GOOGLE DOCS

Slide 116

Slide 116 text

@philhawksworth GOOGLE DOCS

Slide 117

Slide 117 text

@philhawksworth GOOGLE DOCS / GOOGLE TRANSLATE =GoogleTranslate(source!A2, “en", "es") =GoogleTranslate(text, source_language, target_language)

Slide 118

Slide 118 text

@philhawksworth GOOGLE DOCS / GOOGLE TRANSLATE

Slide 119

Slide 119 text

@philhawksworth GOOGLE DOCS / GOOGLE TRANSLATE

Slide 120

Slide 120 text

@philhawksworth GOOGLE DOCS / GOOGLE TRANSLATE

Slide 121

Slide 121 text

@philhawksworth GOOGLE DOCS / GOOGLE TRANSLATE

Slide 122

Slide 122 text

@philhawksworth CONSUME FEEDS https://docs.google.com/spreadsheets/d/ /export ?gid= &format=csv

Slide 123

Slide 123 text

@philhawksworth CONSUME FEEDS https://docs.google.com/spreadsheets/d/ 13tr8nOZNbmA0Fr…p7MnuALmk /export ?gid=143780363 &format=csv

Slide 124

Slide 124 text

@philhawksworth CONVERT TO YAML

Slide 125

Slide 125 text

@philhawksworth github.com/doowb/grunt-convert

Slide 126

Slide 126 text

@philhawksworth BAKE AND ENJOY

Slide 127

Slide 127 text

@philhawksworth GOOGLE DOCS

Slide 128

Slide 128 text

@philhawksworth GOOGLE DOCS HAWKSWORX.DEV/ES/BLOG

Slide 129

Slide 129 text

@philhawksworth GOOGLE DOCS HAWKSWORX.DEV/ES/BLOG

Slide 130

Slide 130 text

@philhawksworth GOOGLE DOCS HAWKSWORX.DEV/FR/BLOG

Slide 131

Slide 131 text

@philhawksworth GOOGLE DOCS HAWKSWORX.DEV/FR/BLOG

Slide 132

Slide 132 text

@philhawksworth GOOGLE DOCS HAWKSWORX.DEV/KO/BLOG

Slide 133

Slide 133 text

@philhawksworth REACT TO CODE CHANGES REACT TO CONTENT CHANGES GENERATE STYLEGUIDES & SITES GENERATE LOCALISATIONS POPULATE JS SEARCH COMMENTS AND USER INPUT

Slide 134

Slide 134 text

@philhawksworth PERCEPTION OF STATIC SITES 7 7

Slide 135

Slide 135 text

@philhawksworth STATIC FLAT SIMPLE BASIC

Slide 136

Slide 136 text

@philhawksworth STATIC HOSTED SITES CAN BE AS DYNAMIC AS THE TOOLS WE USE TO BUILD AND PUBLISH THEM

Slide 137

Slide 137 text

@philhawksworth STATIC HOSTED SITES CAN BE AS DYNAMIC AS THE TOOLS WE USE TO BUILD AND PUBLISH THEM

Slide 138

Slide 138 text

@philhawksworth TIME TO REBRAND STATIC SITES

Slide 139

Slide 139 text

@philhawksworth THE JAM STACK JAVASCRIPT / APIS / MARKUP MATHIAS BIILMANN, NETLIFY speakerdeck.com/biilmann/the-jam-stack

Slide 140

Slide 140 text

@philhawksworth I’M A SOFTWARE ENGINEER WHAT LANGUAGE? JAVASCRIPT HA HA HA HA...!

Slide 141

Slide 141 text

@philhawksworth MAKE THE STACK can SHORTER we ?

Slide 142

Slide 142 text

@philhawksworth MAKE THE STACK can SHORTER we !

Slide 143

Slide 143 text

@philhawksworth THE SHORT STACK

Slide 144

Slide 144 text

@philhawksworth WRAPPING UP

Slide 145

Slide 145 text

@philhawksworth SIMPLIFYING PRODUCTION ENVIRONMENTS IS A WIN PUT DISTANCE BETWEEN YOUR USERS AND YOUR COMPLEXITY

Slide 146

Slide 146 text

@philhawksworth STATIC SITE GENERATORS & BUILD AUTOMATION ARE MATURING POWERFUL HOSTED TOOLS WHICH SOLVE COMMON SHORTFALLS ARE AVAILABLE

Slide 147

Slide 147 text

@philhawksworth LINKS http://www.netlify.com https://www.staticgen.com http://jekyllrb.com http://roots.cx https://gohugo.io http://www.contentful.com https://github.com/dommmel/jekyll-contentful https://www.google.com/2014 http://wercker.com https://speakerdeck.com/biilmann/the-jam-stack https://www.smashingmagazine.com/2015/11/modern-static-website-generators-next-big-thing/

Slide 148

Slide 148 text

THANKS @PHILHAWKSWORTH 7 7