Static Sites com o Middleman

Lightning Talk apresentado no Floripa On Rails

Transcript

1. @brodock
   blog.gabrielmazetto.eti.br
   Gabriel Mazetto
   

   View Slide

2. Sites Estáticos
   com o Middleman
   

   View Slide

3. CREATE, COLLABORATE AND DEPLOY
   

   View Slide

4. Por que Sites Estáticos?
   

   View Slide

5. View Slide

6. Poderosos e Escaláveis
   

   View Slide

7. View Slide

8. Inclusive para Blogs
   

   View Slide

9. View Slide

10. Instalação
    e primeiros passos
    

    View Slide

11. $ gem install middleman
    Successfully installed middleman-4.1.1
    Parsing documentation for middleman-4.1.1
    Installing ri documentation for middleman-4.1.1
    Done installing documentation for middleman after 0 seconds
    1 gem installed
    

    View Slide

12. $ middleman init floripaonrails
    exist
    create .gitignore
    create Gemfile
    create config.rb
    create source/images/middleman-logo.svg
    create source/index.html.erb
    create source/javascripts/all.js
    create source/layouts/layout.erb
    create source/stylesheets/_normalize.scss
    create source/stylesheets/site.css.scss
    Do you want to use Compass? yes
    Do you want to use LiveReload? yes
    insert Gemfile
    insert config.rb
    ...
    run bundle install from "./floripaonrails"
    

    View Slide

13. $ middleman help
    Commands:
    middleman build [options]
    middleman config [options]
    middleman console [options]
    middleman deploy [options]
    middleman extension [options]
    middleman help [COMMAND]
    middleman init TARGET [options]
    middleman server [options]
    middleman version
    

    View Slide

14. View Slide

15. configure :development do
    activate :livereload
    end
    # Build-specific configuration
    configure :build do
    # Minify CSS on build
    # activate :minify_css
    # Minify Javascript on build
    # activate :minify_javascript
    end
    activate :disqus do |d|
    d.shortname = 'floripaonrails'
    end
    

    View Slide

16. plugins e extenções
    Funcionalidades
    

    View Slide

17. Templates Engines
    Use a que você quiser
    

    View Slide

18. Slim
    Erubis
    Less CSS
    Builder
    Liquid
    RDiscount
    Redcarpet
    BlueCloth
    Kramdown
    Maruku
    HAML
    RedCloth
    RDoc
    Radius
    Markaby
    Nokogiri
    CoffeeScript
    Creole (Wiki markup)
    WikiCloth (Wiki markup)
    Yajl
    Stylus
    

    View Slide

19. Hands On
    

    View Slide

20. Onde Fazer o Deploy?
    

    View Slide

21. Apache/Nginx
    Github Pages
    Gitlab Pages
    

    View Slide

22. .gitlab-ci.yml
    

    View Slide

23. image: ruby:2.2
    variables:
    LANG: "C.UTF-8"
    pages:
    script:
    - which ruby
    - bundle install --deployment --jobs $(nproc)
    - bundle exec middleman build
    artifacts:
    paths:
    - public
    only:
    - source
    

    View Slide

24. config.rb
    

    View Slide

25. ...
    # Pretty URLs
    activate :directory_indexes
    # Build HTML files to 'public' folder (GitLab Pages convention)
    set :build_dir, 'public'
    ...
    

    View Slide

26. View Slide

27. Perguntas?
    

    View Slide

28. http://doc.gitlab.
    com/ee/pages
    

    View Slide