Build your website with awestruct and publish it on the cloud with git
-
Upload
xavier-coulon -
Category
Documents
-
view
884 -
download
1
Transcript of Build your website with awestruct and publish it on the cloud with git
![Page 1: Build your website with awestruct and publish it on the cloud with git](https://reader030.fdocuments.us/reader030/viewer/2022020307/55979dcc1a28abc3488b46a7/html5/thumbnails/1.jpg)
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](https://reader030.fdocuments.us/reader030/viewer/2022020307/55979dcc1a28abc3488b46a7/html5/thumbnails/2.jpg)
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](https://reader030.fdocuments.us/reader030/viewer/2022020307/55979dcc1a28abc3488b46a7/html5/thumbnails/3.jpg)
![Page 4: Build your website with awestruct and publish it on the cloud with git](https://reader030.fdocuments.us/reader030/viewer/2022020307/55979dcc1a28abc3488b46a7/html5/thumbnails/4.jpg)
Part I. Let's Have Fun Againat Baking Websites
![Page 5: Build your website with awestruct and publish it on the cloud with git](https://reader030.fdocuments.us/reader030/viewer/2022020307/55979dcc1a28abc3488b46a7/html5/thumbnails/5.jpg)
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](https://reader030.fdocuments.us/reader030/viewer/2022020307/55979dcc1a28abc3488b46a7/html5/thumbnails/6.jpg)
Layout with HAML
![Page 7: Build your website with awestruct and publish it on the cloud with git](https://reader030.fdocuments.us/reader030/viewer/2022020307/55979dcc1a28abc3488b46a7/html5/thumbnails/7.jpg)
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](https://reader030.fdocuments.us/reader030/viewer/2022020307/55979dcc1a28abc3488b46a7/html5/thumbnails/8.jpg)
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](https://reader030.fdocuments.us/reader030/viewer/2022020307/55979dcc1a28abc3488b46a7/html5/thumbnails/9.jpg)
Make it Sexy with CSS, SASS or LESS
![Page 10: Build your website with awestruct and publish it on the cloud with git](https://reader030.fdocuments.us/reader030/viewer/2022020307/55979dcc1a28abc3488b46a7/html5/thumbnails/10.jpg)
Dynamise with JavaScript orCoffeeScript
![Page 11: Build your website with awestruct and publish it on the cloud with git](https://reader030.fdocuments.us/reader030/viewer/2022020307/55979dcc1a28abc3488b46a7/html5/thumbnails/11.jpg)
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](https://reader030.fdocuments.us/reader030/viewer/2022020307/55979dcc1a28abc3488b46a7/html5/thumbnails/12.jpg)
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](https://reader030.fdocuments.us/reader030/viewer/2022020307/55979dcc1a28abc3488b46a7/html5/thumbnails/13.jpg)
Part II. Let's Bake our Website
with Awestruct !
![Page 14: Build your website with awestruct and publish it on the cloud with git](https://reader030.fdocuments.us/reader030/viewer/2022020307/55979dcc1a28abc3488b46a7/html5/thumbnails/14.jpg)
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](https://reader030.fdocuments.us/reader030/viewer/2022020307/55979dcc1a28abc3488b46a7/html5/thumbnails/15.jpg)
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](https://reader030.fdocuments.us/reader030/viewer/2022020307/55979dcc1a28abc3488b46a7/html5/thumbnails/16.jpg)
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](https://reader030.fdocuments.us/reader030/viewer/2022020307/55979dcc1a28abc3488b46a7/html5/thumbnails/17.jpg)
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](https://reader030.fdocuments.us/reader030/viewer/2022020307/55979dcc1a28abc3488b46a7/html5/thumbnails/18.jpg)
Awestruct Built-in Extensions andHelpers
IndexifierPostsTaggerAtomizerPaginatorDisqusGoogle Analyticsand more...
![Page 19: Build your website with awestruct and publish it on the cloud with git](https://reader030.fdocuments.us/reader030/viewer/2022020307/55979dcc1a28abc3488b46a7/html5/thumbnails/19.jpg)
Site Deployment
![Page 20: Build your website with awestruct and publish it on the cloud with git](https://reader030.fdocuments.us/reader030/viewer/2022020307/55979dcc1a28abc3488b46a7/html5/thumbnails/20.jpg)
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](https://reader030.fdocuments.us/reader030/viewer/2022020307/55979dcc1a28abc3488b46a7/html5/thumbnails/21.jpg)
OpenShift
![Page 22: Build your website with awestruct and publish it on the cloud with git](https://reader030.fdocuments.us/reader030/viewer/2022020307/55979dcc1a28abc3488b46a7/html5/thumbnails/22.jpg)
Demo
![Page 23: Build your website with awestruct and publish it on the cloud with git](https://reader030.fdocuments.us/reader030/viewer/2022020307/55979dcc1a28abc3488b46a7/html5/thumbnails/23.jpg)
fork the demo: github.com/xcoulon/sample-awestruct-site
![Page 24: Build your website with awestruct and publish it on the cloud with git](https://reader030.fdocuments.us/reader030/viewer/2022020307/55979dcc1a28abc3488b46a7/html5/thumbnails/24.jpg)
BTW, this prezo was also baked withAwestruct ;-)
![Page 25: Build your website with awestruct and publish it on the cloud with git](https://reader030.fdocuments.us/reader030/viewer/2022020307/55979dcc1a28abc3488b46a7/html5/thumbnails/25.jpg)
awestruct.org #awestruct @awestruct
![Page 26: Build your website with awestruct and publish it on the cloud with git](https://reader030.fdocuments.us/reader030/viewer/2022020307/55979dcc1a28abc3488b46a7/html5/thumbnails/26.jpg)
Thanks !
![Page 27: Build your website with awestruct and publish it on the cloud with git](https://reader030.fdocuments.us/reader030/viewer/2022020307/55979dcc1a28abc3488b46a7/html5/thumbnails/27.jpg)
Q/A