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

Tags


{% if user.name == 'elvis' %}
  Hey Elvis
{% endif %}
  • assign - Assigns some value to a variable
  • capture - Block tag that captures text into a variable
  • case - Block tag, its the standard case...when block
  • comment - Block tag, comments out the text in the block
  • cycle - Cycle is usually used within a loop to alternate between values, like colors or DOM classes.
  • for - For loop
  • if - Standard if/else block
  • include - Includes another template; useful for partials
  • raw - temporarily disable tag processing to avoid syntax conflicts.
  • unless - Mirror of if statement

Tags

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

  1. Find a Tag
  2. Find an Object
  3. Find an Object with a Filter applied
  4. 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)

  1. Find a Tag
  2. Find an Object
  3. Find an Object with a Filter applied
  4. Find the Front-Matter
  5. what {{content}} prints

{{ content }}

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

what about the simple user?

How can I simply add a new post?

prose.io

Made with Slides.com