Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Simplify Your Website using Static Site Generators

Avatar for Barry Clark Barry Clark
November 04, 2014
Programming
0
450

Simplify Your Website using Static Site Generators

I gave this talk at Future Of Web Design NYC, 2014- https://futureofwebdesign.com/nyc-2014/

Do you really need all of that Wordpress overhead?

Could you improve your site load time, security, and maintainability while simplifying your development workflow and giving yourself more design control?

Barry will introduce you to the benefits of using Jekyll, a static site generator that's great for creating blogs, portfolio sites and simple client sites. He’ll walk through creating a site using Jekyll and hosting it on Github Pages, highlighting common issues that people run into during setup and how to overcome them to create better experiences for you and your clients.
Avatar for Barry Clark

Barry Clark

November 04, 2014
Tweet

More Decks by Barry Clark

See All by Barry Clark
Building to Scale at DoSomething.org
Avatar for Barry Clark barryclark
2
130

Other Decks in Programming

See All in Programming
iOS 26にアップデートすると実機でのHot Reloadができない？
Avatar for Aoi Umigishi umigishiaoi
0
130
Google Agent Development Kit でLINE Botを作ってみた
Avatar for Kento.Yamada ymd65536
2
250
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
Avatar for Marco Roth marcoroth
2
290
코딩 에이전트 체크리스트: Claude Code ver.
Avatar for nacyot nacyot
0
270
Flutterで備える！Accessibility Nutrition Labels完全ガイド
Avatar for 野瀬田　裕樹 yuukiw00w
0
160
A full stack side project webapp all in Kotlin (KotlinConf 2025)
Avatar for Dan Kim dankim
0
120
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
Avatar for Shohei Okada okashoi
1
260
Modern Angular with Signals and Signal Store: New Rules for Your Architecture @enterJS Advanced Angular Day 2025
Avatar for Manfred Steyer manfredsteyer
PRO
0
220
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
Avatar for r-kagaya rkaga
13
4.6k
XP, Testing and ninja testing
Avatar for seki at druby.org m_seki
3
250
ふつうの技術スタックでアート作品を作ってみる
Avatar for Akira Yagi akira888
1
880
PipeCDのプラグイン化で目指すところ
Avatar for Warashi warashi
1
280

Featured

See All Featured
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
35
6.7k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.7k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
44
2.4k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
53
2.9k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
6
310
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
695
190k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
179
9.8k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
28
3.9k
Designing for humans not robots
Avatar for Tammie Lister tammielis
253
25k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
48
2.9k
How GitHub (no longer) Works
Avatar for Zach Holman holman
314
140k
It's Worth the Effort
Avatar for 3n 3n
185
28k

Transcript

  1. using static site generators simplify your website

  2. @BazNYC Technical Director at DoSomething.org www.barryclark.co

  3. None
  4. None
  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. None

  12. The next 30mins of your life 1. CMS 2. Static

    Sites 3. Jekyll Walkthrough

  13. CMS 1

  14. None

  15. 23%

  16. Why Wordpress? • Free • Lots of developers • Content

    editor UX • Themes and plug-ins

  17. Wordpress trade-offs • PHP, MySQL, Apache • Hosting • Local

    development

  18. building pages at each request

  19. Caching

  20. do you need all that complexity?

  21. how much of it do you understand?

  22. CMS recap • PHP, MySQL • Build pages at each

    request • Cache pages to serve them faster

  23. Static Sites 2

  24. start simple

  25. Start simple 1. One page static site 2. Static site

    generator 3. Flat file CMS

  26. 1. one page static site

  27. None
  28. None
  29. None
  30. None

  31. 2. static site generator

  32. None
  33. None
  34. None
  35. None
  36. None

  37. javascript

  38. 3. flat file CMS

  39. None
  40. None
  41. None
  42. None
  43. None
  44. None
  45. None

  46. Benefits • Speed • Security • Hosting • Local development

    • Simplicity

  47. Static sites recap • One page static site • Static

    site generator • Flat file CMS

  48. Jekyll Walkthrough 3

  49. Why Jekyll? • Well maintained • Well documented • Widely

    used • Features & pre-processing • GitHub Pages

  50. GitHub Pages • Hosting on GitHub • Free, unlimited hosting

    + bandwidth • Custom domain names • Not just for Jekyll • Builds Jekyll sites for you

  51. Hosting Alternatives • Bitballoon • Site44 (Dropbox) • Amazon S3

    • Wherever you want

  52. local development

  53. gem install github-pages

  54. jekyll new

  55. None

  56. /Code/fowd-website !" _layouts # !" default.html # !" page.html #

    $" post.html !" _posts # $" 2014-11-4-Hello-FOWD.md !" images # $" FOWD.jpg !" _config.yml !" about.md !" index.html $" style.scss

  57. /Code/fowd-website !" _layouts # !" default.html # !" page.html #

    $" post.html !" _posts # $" 2014-11-4-Hello-FOWD.md !" images # $" FOWD.jpg !" _config.yml !" about.md !" index.html $" style.scss

  58. <!DOCTYPE html> <html> <head> <title>{{ site.title }} – {{ site.description

    }}</title> <link rel="stylesheet" type="text/css" href="/style.css" /> </head> <body> <header class=“masthead"> <h1>{{ site.title }}</h1> <p>{{ site.description }}</p> <nav> <a href="/">Blog</a> <a href="/about">About</a> </nav> </header> <div class="main" role="main">{{ content }}</div> <footer class="footer"></footer> </body> </html>

  59. <!DOCTYPE html> <html> <head> <title>{{ site.title }} – {{ site.description

    }}</title> <link rel="stylesheet" type="text/css" href="/style.css" /> </head> <body> <header class=“masthead"> <h1>{{ site.title }}</h1> <p>{{ site.description }}</p> <nav> <a href="/">Blog</a> <a href="/about">About</a> </nav> </header> <div class="main" role="main">{{ content }}</div> <footer class="footer"></footer> </body> </html>

  60. /Code/fowd-website !" _layouts # !" default.html # !" page.html #

    $" post.html !" _posts # $" 2014-11-4-Hello-FOWD.md !" images # $" FOWD.jpg !" _config.yml !" about.md !" index.html $" style.scss

  61. /Code/fowd-website !" _layouts # !" default.html # !" page.html #

    $" post.html !" _posts # $" 2014-11-4-Hello-FOWD.md !" images # $" FOWD.jpg !" _config.yml !" about.md !" index.html $" style.scss

  62. --- layout: default --- <article class="page"> <h1>{{ page.title }}</h1> <div

    class="entry"> {{ content }} </div> </article>

  63. --- layout: default --- <article class="page"> <h1>{{ page.title }}</h1> <div

    class="entry"> {{ content }} </div> </article>

  64. --- layout: default --- <article class="page"> <h1>{{ page.title }}</h1> <div

    class="entry"> {{ content }} </div> </article>

  65. --- layout: default --- <article class="post"> <h1>{{ page.title }}</h1> {{

    page.date | date: "%B %e, %Y" }} <div class="entry"> {{ content }} </div> </article>

  66. /Code/fowd-website !" _layouts # !" default.html # !" page.html #

    $" post.html !" _posts # $" 2014-11-4-Hello-FOWD.md !" images # $" FOWD.jpg !" _config.yml !" about.md !" index.html $" style.scss

  67. /Code/fowd-website !" _layouts # !" default.html # !" page.html #

    $" post.html !" _posts # $" 2014-11-4-Hello-FOWD.md !" images # $" FOWD.jpg !" _config.yml !" about.md !" index.html $" style.scss

  68. --- layout: post title: Hello FOWD --- Good morning Future

    of Web Design 2014! ![FOWD 2014](/images/FOWD.jpg)

  69. --- layout: post title: Hello FOWD --- Good morning Future

    of Web Design 2014! ![FOWD 2014](/images/FOWD.jpg)

  70. /Code/fowd-website !" _layouts # !" default.html # !" page.html #

    $" post.html !" _posts # $" 2014-11-4-Hello-FOWD.md !" images # $" FOWD.jpg !" _config.yml !" about.md !" index.html $" style.scss

  71. /Code/fowd-website !" _layouts # !" default.html # !" page.html #

    $" post.html !" _posts # $" 2014-11-4-Hello-FOWD.md !" images # $" FOWD.jpg !" _config.yml !" about.md !" index.html $" style.scss

  72. /Code/fowd-website !" _layouts # !" default.html # !" page.html #

    $" post.html !" _posts # $" 2014-11-4-Hello-FOWD.md !" images # $" FOWD.jpg !" _config.yml !" about.md !" index.html $" style.scss

  73. # Site settings title: Future of Web Design description: A

    demo Jekyll site # Build settings markdown: kramdown

  74. # Site settings title: Future of Web Design description: A

    demo Jekyll site # Build settings markdown: kramdown

  75. /Code/fowd-website !" _layouts # !" default.html # !" page.html #

    $" post.html !" _posts # $" 2014-11-4-Hello-FOWD.md !" images # $" FOWD.jpg !" _config.yml !" about.md !" index.html $" style.scss

  76. /Code/fowd-website !" _layouts # !" default.html # !" page.html #

    $" post.html !" _posts # $" 2014-11-4-Hello-FOWD.md !" images # $" FOWD.jpg !" _config.yml !" about.md !" index.html $" style.scss

  77. --- layout: page title: About --- Some information about FOWD

    2014. ### Contact Us [[email protected]] (mailto:[email protected])

  78. --- layout: page title: About --- Some information about FOWD

    2014. ### Contact Us [[email protected]] (mailto:[email protected])

  79. /Code/fowd-website !" _layouts # !" default.html # !" page.html #

    $" post.html !" _posts # $" 2014-11-4-Hello-FOWD.md !" images # $" FOWD.jpg !" _config.yml !" about.md !" index.html $" style.scss

  80. /Code/fowd-website !" _layouts # !" default.html # !" page.html #

    $" post.html !" _posts # $" 2014-11-4-Hello-FOWD.md !" images # $" FOWD.jpg !" _config.yml !" about.md !" index.html $" style.scss

  81. --- layout: default --- <div class="posts"> {% for post in

    site.posts %} <article class="post"> <h1><a href="{{ post.url }}">{{ post.title }}</a></h1> <div class="entry"> {{ post.content }} </div> </article> {% endfor %} </div>

  82. --- layout: default --- <div class="posts"> {% for post in

    site.posts %} <article class="post"> <h1><a href="{{ post.url }}">{{ post.title }}</a></h1> <div class="entry"> {{ post.content }} </div> </article> {% endfor %} </div>

  83. --- layout: default --- <div class="posts"> {% for post in

    site.posts %} <article class="post"> <h1><a href="{{ post.url }}">{{ post.title }}</a></h1> <div class="entry"> {{ post.content }} </div> </article> {% endfor %} </div>

  84. /Code/fowd-website !" _layouts # !" default.html # !" page.html #

    $" post.html !" _posts # $" 2014-11-4-Hello-FOWD.md !" images # $" FOWD.jpg !" _config.yml !" about.md !" index.html $" style.scss

  85. /Code/fowd-website !" _layouts # !" default.html # !" page.html #

    $" post.html !" _posts # $" 2014-11-4-Hello-FOWD.md !" images # $" FOWD.jpg !" _config.yml !" about.md !" index.html $" style.scss

  86. jekyll build

  87. /Code/fowd-website $" _site !" about # $" index.html !" Hello-FOWD

    # $" index.html !" index.html $" style.css
  88. None

  89. Jekyll walkthrough recap • Free hosting on GitHub Pages •

    Grab a starting template or jekyll new • Write posts in markdown

  90. Can you simplify?

  91. Thanks! http://speakerdeck.com/barryclark http://www.smashingmagazine.com/ 2014/08/01/build-blog-jekyll-github-pages/