みんなもMiddlemanで技術ブログ作って幸せになろう！

@HTML5minutes

Transcript

1. ΈΜͳ΋MiddlemanͰ ٕज़ϒϩά࡞ͬͯ ޾ͤʹͳΖ͏ʂ 2015/06/12 (Thu) ϨόϨδʔζגࣜձࣾ teratail։ൃνʔϜɹग़઒ ز෉
2. ࣗݾ঺հ • ग़઒ ز෉ʢσΨϫ ΠΫΦʣ • 2015೥4݄ϨόϨδʔζ৽ଔೖࣾ • teratail։ൃνʔϜ ΤϯδχΞ • PHPͷਓ • झຯɿαʔόʔࣗಈԽ • ͠Ό΂Δͷۤखɻͨ·ʹ͕࣌ࢭ·Δɻ @ikuwow
3. teratail஌ͬͯΔʁ teratailεςοΧʔ഑ͬͯ·͢ “೔ຊͷΤϯδχΞ͕ू͏Q&AίϛϡχςΟαΠτ”
4. ͨͩࠓ೔͸teratailͷ͜ͱ͸શ͘࿩͠·ͤΜ ׬શʹࣗ෼ͷझຯΛ࿩͠·͢…
5. Middleman஌ͬͯΔʁ https://middlemanapp.com
6. Middlemanͱ͸ʁ • Ruby੡ϑϩϯτΤϯυ ੜ੒πʔϧ • ERBɺHamlɺSassɺ LessɺCoffeeScript͔Β HTMLɺCSSɺJSΛੜ੒ $ gem install middleman $ middleman init myblog
7. MiddlemanͰϒϩά࡞Γ·ͨ͠ http://ikuwow.website/
8. ͳΜͰMiddlemanͰϒϩάʁ • MarkdownͰॻ͖͍ͨʂWordPressͷҋ͸΋͏ݟͨ͘ͳ͍ʂʂ • VimͰهࣄॻ͖͍ͨɾɾɾɻ • Yeoman͸JS͜Θ͍͠ɺJekyll͸ॏ͍Β͍͠͠ɺ
 Octpress͸ϩΰ͕ΩϞ͍͠ɾɾɾ • Middleman͸࠷ۙ։ൃ͕׆ൃɻ೔ຊޠυΩϡϝϯτॆ࣮ɻ
 ͋ͱݸਓతʹ਌͠Έ΍͍͢Rubyɻ
9. ϒϩά͕௒؆୯ʹ࡞ΕΔ • middleman-blogͱ͍ ͏ެࣜϓϥάΠϯ͕௒ ༏ल • λά෇͚ɺԼॻ͖ɺ URL੔ܗɺΞʔΧΠ ϒɺ… $ middleman init —template=blog $ middleman serve ## config.rb activate :blog do |blog| # ϒϩάػೳͷΦϓγϣϯΛઃఆ end
10. σΟϨΫτϦߏ੒ • Jekyllʹൺ΂ͯ
 ௒γϯϓϧ myblog/ +-- .gitignore +-- Gemfile +-- Gemfile.lock +-- config.rb +-- source/ +-- images/ ¦ +-- background.png ¦ +-- middleman.png +-- index.html.erb +-- javascripts/ ¦ +-- all.js +-- layouts/ ¦ +-- layout.erb +-- stylesheets/ +-- all.css +-- normalize.css +-- build/
11. ͍ͭ΋ͷΤσΟλͰMarkdown YAMLͰFrontmatterॻ͘ $ middleman article my- article
12. RailsͷViewͬΆ͘ॻ͚Δ <% wrap_layout :layout do %> <h1><%= current_article.title unless current_article.nil? %></h1> <p class="post-meta""> <% if !current_article.nil? %> <% current_article.tags.each do |tag| %> <%= link_to tag, tag_path(tag), :class => "post-category post-category-design"%> <% end %> <% end %> </p> <div class="social-buttons-box"> <%= partial "social_buttons" %> </div> <%= link_to ‘ϗʔϜ’, ‘http://ikuwow.website' %> <% end %>
13. GitHub PagesʹσϓϩΠ $ middleman deploy هࣄΛॻ͘=> git commit => git push => ͦͷ৔Ͱ൓ө
14. ͍ͭ΋ͷΤσΟλͰ
16. MarkdownͰهࣄΛॻ͖ git commit
17. GitHub Pagesʹଈ൓ө git push
18. ීஈͷ։ൃͷྲྀΕͰ ϒϩά͕ॻ͚Δʂ
19. Middleman ࠷ߴ
20. MiddlemanͰ ٕज़ϒϩάΛॻ͜͏ʂ
21. MiddlemanͰαΠτ࡞Δͱ υΩϡϝϯτʹࡌͤͯ΋Β͑·͢ ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠