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

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

Other Decks in Programming

Transcript

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

    Sites 3. Jekyll Walkthrough
  2. 23%

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

    request • Cache pages to serve them faster
  4. Static sites recap • One page static site • Static

    site generator • Flat file CMS
  5. Why Jekyll? • Well maintained • Well documented • Widely

    used • Features & pre-processing • GitHub Pages
  6. GitHub Pages • Hosting on GitHub • Free, unlimited hosting

    + bandwidth • Custom domain names • Not just for Jekyll • Builds Jekyll sites for you
  7. /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
  8. /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
  9. <!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>
  10. <!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>
  11. /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
  12. /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
  13. --- layout: default --- <article class="post"> <h1>{{ page.title }}</h1> {{

    page.date | date: "%B %e, %Y" }} <div class="entry"> {{ content }} </div> </article>
  14. /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
  15. /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
  16. --- layout: post title: Hello FOWD --- Good morning Future

    of Web Design 2014! ![FOWD 2014](/images/FOWD.jpg)
  17. --- layout: post title: Hello FOWD --- Good morning Future

    of Web Design 2014! ![FOWD 2014](/images/FOWD.jpg)
  18. /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
  19. /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
  20. /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
  21. # Site settings title: Future of Web Design description: A

    demo Jekyll site # Build settings markdown: kramdown
  22. # Site settings title: Future of Web Design description: A

    demo Jekyll site # Build settings markdown: kramdown
  23. /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
  24. /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
  25. /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
  26. /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
  27. --- 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>
  28. --- 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>
  29. --- 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>
  30. /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
  31. /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
  32. /Code/fowd-website $" _site !" about # $" index.html !" Hello-FOWD

    # $" index.html !" index.html $" style.css
  33. Jekyll walkthrough recap • Free hosting on GitHub Pages •

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