dynamic website creation

ΙΕΚ ΑΚΜΗ. - Thessaloniki - 11/12/2014

The "static" way

Dimitris Dervas

Drupal web develloper

dimitris@techangel.gr

Techangel.gr

Creating a website

in 2014

should be

quick

easy

and after deployment

fast

with no worries

no headaches

as a developer

I am lazy

so I have a few prequesities

I WANT

to use

Control

Productive quickly

to be

let's go back in time

in the beginning there was

HTML

next there was the

( Content Management System )

CMS

great frameworks

but

too complicated for a beginner

You need to know:

setup a Linux server

with

Apache or NginX
MySql
PHP

You need to know:

the CMS and its quirks and its modules and every modules settings

9769 modules

34825 plugins

Drupal 7

a lot of time

too much effort

is there another way?

back to the basics

just static files

blazing fast

full control

CMS free

DevelopmentSeed.org

Climatescope.org

How did they do it?

I wish for...

static site generator

text files

HTML

configuration file

_config.yml

new page

How to create:

new post for blog

new content type

karate

index.html

http://mydomain.com/karate

masters

index.html

http://mydomain.com/masters

}

index.html

http://mydomain.com

all posts in one folder

_posts

categories in posts

( articles, news )

I wish for...

articles

news

_posts

2014-05-21-articles-entry.md

2014-05-21-news-entry.md

content types

I wish for...

_kata

_masters

masters-entry.md

kata-entry.md

add new fields

( kata image, date of birth of master, etc )

I wish to...

Front Matter

---

---
layout: post
title: Blogging Like a Hacker
photo: master-itoshu.jpg
date_of_birth: 1870
---

I do not want to repeat myself

I wish to...

include html templates

_includes

head.html

header.html

footer.html

enter

teplate engine

Liquid

Static site generators

hosting

Free

Super Cheap

+

Why ?

most starred
easier for beginners

Dev environment

online IDE

Jekyll Documentation

Liquid

( template engine )

Documentation Github Liquid

Documentation Shopify

Most useful Tag


{% include any.html %}

Objects


{{ product.title }} <!-- Output: Awesome T-Shirt-->

Objects take filters


{{ 'sales' | append: '.jpg' }} <!-- Output: sales.jpg -->

Filters

date - reformat a date (syntax reference)

capitalize - capitalize words in the input sentence

downcase - convert an input string to lowercase

upcase - convert an input string to uppercase

first - get the first element of the passed in array

last - get the last element of the passed in array

join - join elements of the array with certain character between them

sort - sort elements of the array

map - map/collect an array on a given property

size - return the size of an array or string

escape - escape a string

and more

documentation

Let's start

Install jekyll

let's see the file tree

Title Text

.
├── _config.yml
├── _drafts
|   ├── begin-with-the-crazy-ideas.textile
|   └── on-simplicity-in-technology.markdown
├── _includes
|   ├── head.html
|   ├── footer.html
|   └── header.html
├── _layouts
|   ├── default.html
|   └── post.html
├── _posts
|   ├── 2007-10-29-why-every-programmer-should-play-nethack.textile
|   └── 2009-04-26-barcamp-boston-4-roundup.textile
├── _data
|   └── members.yml
├── _site
└── index.html

---
layout: default
---

<div class="home">

  <h1 class="page-heading">Posts</h1>

  <ul class="post-list">
    {% for post in site.posts %}
      <li>
        <span class="post-meta">{{ post.date | date: "%b %-d, %Y" }}</span>

        <h2>
          <a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
        </h2>
      </li>
    {% endfor %}
  </ul>

  <p class="rss-subscribe">subscribe <a href="{{ "/feed.xml" | prepend: site.baseurl }}">via RSS</a></p>

</div>

index.html

Quiz time

Find a Tag
Find an Object
Find an Object with a Filter applied
Find the Front-Matter

<!DOCTYPE html>
<html>

  {% include head.html %}

  <body>

    {% include header.html %}

    <div class="page-content">
      <div class="wrapper">
        {{ content }}
      </div>
    </div>

    {% include footer.html %}

  </body>

</html>

_layouts/default.html

Quiz time (again)

Find a Tag
Find an Object
Find an Object with a Filter applied
Find the Front-Matter
what {{content}} prints

check documentation

so it will print the content of the index.html

New Post

just a new file in the _posts folder

how to show all

what if I do not want posts

collections

data

Anatomy of a live site

basics of git

atlasian tutorials

github

git init 
git add .
git commit -m "Master README added"
git remote add origin git@github.com:chrisjacob/grandmaster.git
git push origin master
git checkout -b gh-pages
git rebase master
git push origin gh-pages