ブログ執筆を支える技術

https://itmokumoku.connpass.com/event/119460/
こちらのイベントで、「ブログの執筆環境」を紹介するLTを行った時のスライド

Transcript

1. ɹɹɹࣥච Λࢧ͑Δٕज़ िҰϒϩάߋ৽ͷ෣୆ཪ ϒϩά @kz_morita 2019 3/31 ͳΜͰ΋LTେձୈ̏஄
2. ࣗݾ঺հ • kazuki morita • ɹ foresta • @kz_morita • NewsPicks • Software Engineer • Swift / iOS • ֬཰౷ܭษڧத
3. ϒϩάࣥචঢ়گ • 9/1 ~ 3/31 ·Ͱͷ7ϲ݄ؒ • ߹ܭ27هࣄ • ि̍هࣄϖʔε
4. ϒϩάΛॻ͘໨త • Πϯϓοτͷ ྔΛ૿΍͢ • Πϯϓοτͷ࣭ΛߴΊΔ • ݸਓͷϒϥϯσΟϯά
5. ϒϩά͕ଓ͔ͳ͍ཧ༝ • ໘౗͍͘͞ • → ॻ͔͟ΔΛಘͳ͍؀ڥΛ࡞Δ • → Ͱ͖Δ͚ͩշదͳࣥච؀ڥΛ࡞Δ • ωλ͕ͳ͍ • ؾ߹͍
6. ॻ͔͟ΔΛಘͳ͍؀ڥ࡞Γ
7. ॻ͔͟ΔΛಘͳ͍؀ڥͱ͸ʁ • ߴΒ͔ʹએݴ
8. ॻ͔͟ΔΛಘͳ͍؀ڥͱ͸ʁ • slackάϧʔϓʮwrite-blog-every-weekʯ
9. շదͳࣥච؀ڥͷߏங
10. շదͳϒϩάࣥච؀ڥͱ͸ʁ • ϒϥ΢β্Ͱॻ͖ͨ͘ͳ͍ • ϩʔΧϧͰαΫαΫ • Vim ͓޷ΈͷΤσΟλ & MarkdownͰ͔͖͍ͨ • ॻ͍͙ͯ͢ϓϨϏϡʔ͍ͨ͠ • όʔδϣϯ؅ཧ͍ͨ͠
11. ͘͞ΒVPS localhost:8080
 Preview ϩʔΧϧPC Build & Deploy push http://~
12. ࣥච࣌ • ϩʔΧϧαʔόʔΛͨͯΔ • هࣄΛ৽ن࡞੒ • vim Ͱ Markdownฤू • อଘ͢ΔͱϦΞϧλΠϜͰϓϨϏϡʔ͕ߋ৽ ͞ΕΔͷͰ౎౓֬ೝͰ͖Δ
13. σϓϩΠ • $ git push origin master • Ҏ্!
14. ϒϩάΛࢧ͑Δٕज़ͨͪ
15. ͘͞ΒVPS localhost:8080
 Preview ϩʔΧϧPC Build & Deploy push http://~
16. Hugo • Golang੡ͷ੩తαΠτδΣωϨʔλ • MarkDown → HTMLϑΝΠϧ • $ hugo server Ͱαʔόʔཱ͕ͭ • $ hugo Ͱmd → html ʹϏϧυ
17. Hugo Πϯετʔϧ • OSXͳΒHomebrew ͰҰൃͰೖΔ
 $ brew install Hugo • ޙड़͢ΔσϓϩΠεΫϦϓτͷͨΊαʔόʔ ʹ΋hugoΛೖΕΔɻʢαʔόʔ͸CentOS ͩͬͨͷͰɺgithubͰམͱͯ͠ɺgo installʣ
18. ͘͞ΒVPS localhost:8080
 Preview ϩʔΧϧPC Build & Deploy push http://~
19. Jenkins • ͘͞ΒVPSʹΠϯετʔϧ • Githubͷmasterϒϥϯν΁ͷpushΛhook͢Δ
 ઃఆ • deployεΫϦϓτߏங npm install npm run webpack hugo rsync -rlptgoD --delete --exclude ".git/" \ /path/to/jenkins/workspace/public/ \ /path/to/webserver/directory/
20. ͦͷଞ • ϑϩϯτΤϯυ
 (HTML/CSS) • γΣΞػೳ • ϚʔΫμ΢ϯϨΠΞ΢τ • MathJax(਺ࣜ) • PWA • Πϯϑϥ(͘͞ΒVPS) • Let's Encrypt • αΠτσβΠϯ • ϩΰ੍࡞ • OGPը૾ • Ξχϝʔγϣϯ • SEOରࡦ
21. ·ͱΊ • շదͳ؀ڥͰिҰͰͷϒϩάߋ৽͕ܧଓத • շదͳࣥච؀ڥΛߏஙͨ݁͠Ռɺ৭ʑͳ෼໺ ͷ஌ݟ͕ಘΒΕͨ • Πϯϑϥ / σβΠϯ / ϑϩϯτΤϯυ etc... • ंྠͷ࠶։ൃ͸࠷ߴͷ᩵୔
22. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ https://blog.foresta.me https://github.com/foresta/blog.foresta.me →͓·͚͋ΔΑ
23. ͓·͚
24. ϑϩϯτΤϯυ؀ڥ • Sass + ES6 + Webpack4Ͱߏங • HTML & CSS ͸΄ͱΜͲ1͔Βߏங
25. γΣΞ • ֤छSNS΁ͷγΣΞϩδοΫΛ࣮૷ • Twitter, Facebook, Pocket, ͸ͯͿ΁ͷରԠ
26. هࣄͷϨΠΞ΢τ • هࣄ͕ಡΈ΍͍͢Α͏ʹϑΥϯτͩͬͨΓɺ ߦؒͩͬͨΓࡉ͔͘ௐ੔ • ਺ࣜΛॻͨ͘Ίͷ
 MathJaxͷಋೖ
27. PWAରԠ • ແବʹʮϗʔϜʹ௥Ճʯ͕Ͱ͖Δ • ServiceWorkerରԠ (sw.js) ͱmanifest.jsonͷ഑ஔ • Chrome 73 ͔ΒͷDesktop PWAʹ΋ࣗಈͰରԠ Ͱ͖ͨ!
28. Πϯϑϥ • ͘͞ΒVPSΛϨϯλϧ • ηΩϡϦςΟܥͱ͔ͷઃఆΛҰ௨Γ • Let's EncryptͰ httpsରԠ (SSL/TLS) • ໊͓લ.comͰυϝΠϯऔಘ
29. σβΠϯ • ৭ܾΊͨΓɺશମͷํ޲ੑܾΊͨΓ • શମతʹϚςϦΞϧσβΠϯʹ४ڌ(ͨͭ͠΋Γ) • ϩΰ੍࡞ • γΣΞ༻ͷOGPը૾࡞੒ https://material.io/design/
30. Ξχϝʔγϣϯ • ؾ࣋ͪྑ͍ (ͱࢥ͏) Ξχϝʔγϣϯ