はじめてのスタティックサイト ジェネレーター.

スタティックサイト ジェネレーターの概要やGatsbyのチュートリアル、 スタティックサイト ホスティング「surge」や「Netlify」へのデプロイについての紹介。

Transcript

1. ͸ ͡ Ίͯͷ ε λ ςΟ ο Ϋ αΠ τ δΣ ω Ϩ ʔ λ ʔ 
 S E I J I A K AT S U K A D I G I TA L C U B E C O . LT D .
2. W K J + C S M D I G I TA L C U B E W H O A M I ? S E I J I A K AT S U K A amimoto-ami.com getshifter.io
3. • What’s Static Site Generatorʁ • Try Gatsby • What’s Static Site Hosting? Agenda
4. W H AT ’ S S TAT I C S I T E G E N E R AT O R ʁ
5. ͲΜͳ΋ͷʁ •֤ݴޠ΍ϥΠϒϥϦʹΑΔςϯϓϨʔτΤϯδϯ͔ΒJavaScriptͱ APIͰಈతͳσʔλίϯςϯπΛѻ͏੩తαΠτ͕࡞੒Ͱ͖ΔϏϧυ πʔϧ •δΣωϨʔλʔ͝ͱͷެࣜαΠτ΍ίϛϡχςΟ͕ެ։͍ͯ͠Δ΋ ͷΛར༻͢Δ͔ΧελϚΠζͯ͠ར༻
6. ಛ௃ • ϓϩδΣΫτ͸gitͰ؅ཧ • CLIத৺ͰγϯϓϧʹߏஙͰ͖Δ؀ڥͰͲ͜ͰͰ΋։ൃͰ͖Δ • αʔόʔαΠυͷߏ੒͸Web΍CDNͷΈ
 S3΍SaaSར༻ͳͲαʔόʔෆཁͳબ୒ࢶ΋ • ݕࡧ΍ϑΥʔϜͳͲ͸JavaScript΍֎෦࿈ܞΛ׆༻ • σϓϩΠ͸ΞτϛοΫʹߦ͏
7. ͲΜͳ΋ͷ͕͋Δʁ https://www.staticgen.com • 250छྨۙ͘ܝࡌ • ࣮૷͍ͯ͠Δݴޠ • ςϯϓϨʔτͷݴޠ
8. T RY G AT S B Y
9. • React੡ͷελςΟοΫαΠτ δΣωϨʔλʔ • HTML / CSS / JavaScript / React.js / GraphQLͰߏ੒ • WordPress, ϦϙδτϦ্ͷϑΝΠϧ, Markdown, API, Database, YamlͳͲ Λಉ͡ΠϯλʔϑΣʔεͰσʔλιʔεʹͰ͖Δ
 ࢀߟɿhttps://wp-kyoto.net/gatsbyͰwordpress-siteͷϑϩϯτΤϯυΛ࡞ͬͯΈΔ • ੩తHTML͸ReactͷSPAͱͯ͠ͷҐஔ෇͚
10. https://github.com/gatsbyjs/gatsby • ੩తαΠτͷϦιʔεͷσʔλऔ ಘʹGraphQLΛ࢖༻
 WordPress, S3, Firesore, etc… • GraphQLαʔόʔ͸ෆཁ
 σʔλιʔεʹ͸ϓϥάΠϯͰରԠ Gatsby on GraphQL
11. Show case https://www.gatsbyjs.org/showcase/
12. 1. ։ൃ؀ڥͷηοτΞοϓ
 Install Node.js, Install Git, Using the Gatsby CLI 2. Gatsby αΠτͷ࡞੒
 $ gatsby new [SITE_DIRECTORY_NAME] [URL_OF_STARTER_GITHUB_REPO]
 σΟϨΫτϦͷ࡞੒ͱςϯϓϨʔτྨͷऔಘ 3. gatsby developίϚϯυͰαʔόʔىಈ
 $ gatsby develop
 ʮhttp://localhost:8000ʯͰϗοτϦϩʔυ͠ͳ͕Βߏங Hello world ʹτϥΠ https://www.gatsbyjs.org/tutorial/part-zero/
13. Edit, Preview (src/pages/index.js)
14. • ੩తϑΝΠϧΛδΣωϨʔτ
 gatsbyίϚϯυͰsrc/public഑ԼͷjsϑΝΠϧ͔ΒHTMLΛੜ੒
 $ gatsby build • ελςΟοΫαΠτ ϗεςΟϯάʮsurge.shʯʹσϓϩΠ
 $ npm install --global surge (SuegeͷϑϦʔΞΧ΢ϯτΛొ࿥)
 $ surge public/ (σϓϩΠ)
 ΞΫηεՄೳͳURL͕දࣔ͞ΕΔ Go live via surge!
15. W H AT ’ S S TAT I C S I T E H O S T I N G ?
16. SurgeͬͯͳΜͩʁ https://surge.sh/pricing • ελςΟοΫαΠτ ༻ͷϗε ςΟϯάαʔϏε • ແྉͰSSL (ఏڙ͞ΕΔURL)΍ ΧελϜυϝΠϯ(Not ssl)ʹର Ԡ • CLI (surgeίϚϯυ)Ͱૢ࡞
17. ελςΟοΫαΠτ ϗεςΟϯάͷछྨ https://www.slant.co/topics/2256/~best-static-website-hosting-provider#1 1. HostingͷΈ
 GitHubPages΍GitLabPages 
 Amazon S3 / EC2 / VPS ͳͲ 2. Ϗϧυ, σϓϩΠ, ϗεςΟϯά
 Netlify (GitHub / GitLab / Bitbucket) 3. CMS, Ϗϧυ, σϓϩΠ, ϗεςΟϯά
 Netlify CMS , forestry.io, 4. All in One, Full Web UI for WordPress
 Shifter WordPressͷ੩తԽ͔ΒGlobal CDN·Ͱ
18. 1. GitHub, GitLab, BitbucketΞΧ΢ϯτΛ༻ҙ 2. NetlifyͷΞΧ΢ϯτΛ༻ҙ
 GitHub, GitLab, BitbucketͰϩάΠϯՄೳ 3. NetlifyʹϦϙδτϦΛඥ෇͚
 σϓϩΠίϚϯυʮGatsyby buildʯ
 ެ։σΟϨΫτϦʮpublic/ʯ 4. ϦϙδτϦʹcommit & push
 Netlify͕δΣωϨʔτͯ͘͠ΕΔͷͰศར 5. That’s it!
 gatsby-cliΛ࢖͏৔߹͸ͪ͜ΒΛࢀর
 A Step-by-Step Guide: Gatsby on Netlify ͓·͚ Go live via Netlify!
19. • ඪ४ػೳ
 Global deployment, right from Git
 HTTPS, custom domains, DNS management • CDNͷଳҬɿ100GB/݄ • Ϣʔβʔ਺ɿ1໊ • OrganizationɿProҎ্ • ύεϫʔυϩάΠϯɿProҎ্ • ACLɿBusinessҎ্ • Audit log ɿBusinessҎ্ Free usage
20. Less Is More. Let's go static with Shifter. • ΑΓྑ͍ύϑΥʔϚϯε (Static HTML + CDN) • ΑΓߴ͍ηΩϡϦςΟ (Micro services archtechture) • ΑΓ҆ՁͰ؆୯ͳεέʔϦϯά (No ops) • ΑΓྑ࣭ͳ։ൃऀΤΫεϖϦΤϯε (Cool, Clean architecture, Community friendly)
21. T H A N K S !