build your website with awestruct and publish it on the cloud with git

27
Build your Website with Awestruct and Publish it on the Cloud with Git Xavier Coulon, Red Hat @xcoulon

Upload: xavier-coulon

Post on 04-Jul-2015

885 views

Category:

Documents


1 download

TRANSCRIPT

Page 1: Build your website with awestruct and publish it on the cloud with git

Build your Websitewith Awestruct and

Publish it on the Cloudwith Git

Xavier Coulon, Red Hat @xcoulon

Page 2: Build your website with awestruct and publish it on the cloud with git

F*ck CMSDo you need a CMS to run your website ?

(hint: no)Push files to a Web Server

setup mod_phpCMS security patches

Database admin/backupsData migration hell

Page 3: Build your website with awestruct and publish it on the cloud with git
Page 4: Build your website with awestruct and publish it on the cloud with git

Part I. Let's Have Fun Againat Baking Websites

Page 5: Build your website with awestruct and publish it on the cloud with git

Content First !Write your Articles in

Markdown, Textile or AsciiDoc

Page 6: Build your website with awestruct and publish it on the cloud with git

Layout with HAML

Page 7: Build your website with awestruct and publish it on the cloud with git

Comparing HAML with HTMLHTML

HAML

<div> <strong>Hello, World!</strong></div>

%div %strong Hello, World!

Page 8: Build your website with awestruct and publish it on the cloud with git

Comparing HAML with HTMLHTML

HAML

<div id="wrapper" class="box"> <strong id="message" class="code">Hello, World!</strong></div>

%div{:id => "wrapper", :class => "box"} %strong{:id => "message", :class => "code"} Hello, World!

#wrapper.box %strong#message.code Hello, World!

Page 9: Build your website with awestruct and publish it on the cloud with git

Make it Sexy with CSS, SASS or LESS

Page 10: Build your website with awestruct and publish it on the cloud with git

Dynamise with JavaScript orCoffeeScript

Page 11: Build your website with awestruct and publish it on the cloud with git

Deploy on a Web Server with GitIt's just (text) files !

Page 12: Build your website with awestruct and publish it on the cloud with git

It's a Developer's Workflow !(think about it)

A developer codes and tests, then pushes to a remote git repo to share

An author writes and reviews, then pushes to a remote git repo to publish

and both can even have CI and Staging sites !

Page 13: Build your website with awestruct and publish it on the cloud with git

Part II. Let's Bake our Website

with Awestruct !

Page 14: Build your website with awestruct and publish it on the cloud with git

Getting Started gem install awestruct mkdir crazy-awesome-project-site awestruct --init --framework bootstrap|blueprint|960 awestruct -d

Page 15: Build your website with awestruct and publish it on the cloud with git

Awestruct Project Structure _config site.yml

_ext pipeline.rb

_layout base.html.haml

_site news 2013-01-19-some-article.md

index.html.haml

Page 16: Build your website with awestruct and publish it on the cloud with git

Properties/MetadataYAML

Engine context (_config/*.yml)Page context (front-matter)

Available within the pages and the extensions.

Page 17: Build your website with awestruct and publish it on the cloud with git

Managing Profiles_site/config.yml

specific "profiles" entry

... profiles: development: base_url: http://localhost:4242 disqus: super-crazy-project-dev disqus_developer: true production: base_url: http://xcoulon.github.com/sample-awestruct-site deploy: host: github_pages disqus: super-crazy-project google_analytics: UA-12345678-1

Page 18: Build your website with awestruct and publish it on the cloud with git

Awestruct Built-in Extensions andHelpers

IndexifierPostsTaggerAtomizerPaginatorDisqusGoogle Analyticsand more...

Page 19: Build your website with awestruct and publish it on the cloud with git

Site Deployment

Page 20: Build your website with awestruct and publish it on the cloud with git

GitHub Pages _config/site.yml

... profiles: ... production: base_url: http://xcoulon.github.com/sample-awestruct-site ... deploy: host: github_pages

git commit awestruct -P production --force awestruct -P production --deploy

Page 21: Build your website with awestruct and publish it on the cloud with git

OpenShift

Page 22: Build your website with awestruct and publish it on the cloud with git

Demo

Page 23: Build your website with awestruct and publish it on the cloud with git

fork the demo: github.com/xcoulon/sample-awestruct-site

Page 24: Build your website with awestruct and publish it on the cloud with git

BTW, this prezo was also baked withAwestruct ;-)

Page 26: Build your website with awestruct and publish it on the cloud with git

Thanks !

Page 27: Build your website with awestruct and publish it on the cloud with git

Q/A