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
git worktree × Claude Code × MCP ～生成AI時代の並列開発フロー～
Avatar for hisuzuya hisuzuya
1
570
Hypervel - A Coroutine Framework for Laravel Artisans
Avatar for Albert Chen albertcht
1
130
プロダクト志向ってなんなんだろうね
Avatar for RightTouch righttouch
PRO
0
190
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
Avatar for Nealle nealle
2
10k
ニーリーにおけるプロダクトエンジニア
Avatar for Nealle nealle
0
840
5つのアンチパターンから学ぶLT設計
Avatar for Narihara narihara
1
170
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
Avatar for Yuichi Maekawa kaelaela
10
5.4k
iOS 26にアップデートすると実機でのHot Reloadができない？
Avatar for Aoi Umigishi umigishiaoi
0
130
Azure AI Foundryではじめてのマルチエージェントワークフロー
Avatar for 瀬尾佳隆 seosoft
0
170
AI コーディングエージェントの時代へ：JetBrains が描く開発の未来
Avatar for Masaru Horioka masaruhr
1
160
システム成長を止めない！本番無停止テーブル移行の全貌
Avatar for さかうぇ sakawe_ee
1
200
High-Level Programming Languages in AI Era -Human Thought and Mind-
Avatar for Hayato Ishida hayat01sh1da
PRO
0
780

Featured

See All Featured
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
328
39k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
77
5.9k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
30
2.1k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
53
7.7k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
29
1.8k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.4k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
512
110k
Building Adaptive Systems
Avatar for Chris Keathley keathley
43
2.7k
Building Applications with DynamoDB
Avatar for Matt Wood mza
95
6.5k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
53k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
613
210k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
3.9k

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/