Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
はじめてのスタティックサイト ジェネレーター.
Search
DigitalCube Inc.
April 03, 2019
Technology
0
2.3k
はじめてのスタティックサイト ジェネレーター.
スタティックサイト ジェネレーターの概要やGatsbyのチュートリアル、 スタティックサイト ホスティング「surge」や「Netlify」へのデプロイについての紹介。
DigitalCube Inc.
April 03, 2019
Tweet
Share
More Decks by DigitalCube Inc.
See All by DigitalCube Inc.
ISMSを3ヶ月で爆速取得したプロジェクトマネジメントのコツ
digitalcube
0
330
地方の零細企業が AWS MarketPlace 使って10年どうだった?
digitalcube
0
720
[株式会社デジタルキューブ] 会社概要
digitalcube
1
3.9k
[4/7 開催] Shifter オンラインミートアップ!春のフレッシャーズ祭り
digitalcube
0
470
WordPress のフルサイト編集を使ったサイト作成と Shifter を使ってノーコードで安全なサイトを運用する
digitalcube
0
630
Shifter の基本と最新情報
digitalcube
0
140
[12/10 開催] Shifter オンラインミートアップ!
digitalcube
0
20
Snow Monkey での 自社サービスサイト構築事例
digitalcube
0
550
Shifter 新ダッシュボード 3 つのポイントをご紹介
digitalcube
0
320
Other Decks in Technology
See All in Technology
Reducing Cross-Zone Egress at Spotify with Custom gRPC Load Balancing Recap
koh_naga
0
210
ワールドカフェI /チューターを改良する / World Café I and Improving the Tutors
ks91
PRO
0
120
Postman v10リリース後を振り返る / Looking back at Postman v10 after release
yokawasa
1
160
ChatworkのSRE部って実は 半分くらいPlatform Engineering部かもしれない
saramune
0
160
SIEMを用いて、セキュリティログ分析の可視化と分析を実現し、PDCAサイクルを回してみた
coconala_engineer
0
330
FrontDoorとWebAppsを組み合わせた際のリダイレクト処理の注意点
kenichirokimura
1
530
プロンプトエンジニアリングでがんばらない-Agentic Workflow へ-近藤憲児
kenjikondobai
3
870
検証を通して見えてきたTiDBの性能特性
lycorptech_jp
PRO
6
3.8k
「スニダン」開発組織の構造に込めた意図 ~組織作りはパッションや政治ではない!~
rinchsan
3
570
20分で完全に理解するGrafanaダッシュボード
hamadakoji
3
670
web-application-security
matsuihidetoshi
0
170
Building a RAG-poweredAI chat appwith Python and VS Code
pamelafox
0
100
Featured
See All Featured
Side Projects
sachag
451
41k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
6
1.5k
No one is an island. Learnings from fostering a developers community.
thoeni
16
2.1k
Mobile First: as difficult as doing things right
swwweet
216
8.6k
The Language of Interfaces
destraynor
151
23k
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
7
1k
Web Components: a chance to create the future
zenorocha
305
41k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
2
3.4k
A better future with KSS
kneath
231
16k
In The Pink: A Labor of Love
frogandcode
138
21k
Bash Introduction
62gerente
604
210k
Transcript
͡ Ίͯͷ ε λ ςΟ ο Ϋ αΠ τ
δΣ ω Ϩ ʔ λ ʔ 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 .
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
• What’s Static Site Generatorʁ • Try Gatsby • What’s
Static Site Hosting? Agenda
W H AT ’ S S TAT I C S
I T E G E N E R AT O R ʁ
ͲΜͳͷʁ •֤ݴޠϥΠϒϥϦʹΑΔςϯϓϨʔτΤϯδϯ͔ΒJavaScriptͱ APIͰಈతͳσʔλίϯςϯπΛѻ͏੩తαΠτ͕࡞Ͱ͖ΔϏϧυ πʔϧ •δΣωϨʔλʔ͝ͱͷެࣜαΠτίϛϡχςΟ͕ެ։͍ͯ͠Δ ͷΛར༻͢Δ͔ΧελϚΠζͯ͠ར༻
ಛ • ϓϩδΣΫτgitͰཧ • CLIத৺ͰγϯϓϧʹߏஙͰ͖ΔڥͰͲ͜ͰͰ։ൃͰ͖Δ • αʔόʔαΠυͷߏWebCDNͷΈ S3SaaSར༻ͳͲαʔόʔෆཁͳબࢶ • ݕࡧϑΥʔϜͳͲJavaScript֎෦࿈ܞΛ׆༻
• σϓϩΠΞτϛοΫʹߦ͏
ͲΜͳͷ͕͋Δʁ https://www.staticgen.com • 250छྨۙ͘ܝࡌ • ࣮͍ͯ͠Δݴޠ • ςϯϓϨʔτͷݴޠ
T RY G AT S B Y
• ReactͷελςΟοΫαΠτ δΣωϨʔλʔ • HTML / CSS / JavaScript /
React.js / GraphQLͰߏ • WordPress, ϦϙδτϦ্ͷϑΝΠϧ, Markdown, API, Database, YamlͳͲ Λಉ͡ΠϯλʔϑΣʔεͰσʔλιʔεʹͰ͖Δ ࢀߟɿhttps://wp-kyoto.net/gatsbyͰwordpress-siteͷϑϩϯτΤϯυΛ࡞ͬͯΈΔ • ੩తHTMLReactͷSPAͱͯ͠ͷҐஔ͚
https://github.com/gatsbyjs/gatsby • ੩తαΠτͷϦιʔεͷσʔλऔ ಘʹGraphQLΛ༻ WordPress, S3, Firesore, etc… • GraphQLαʔόʔෆཁ
σʔλιʔεʹϓϥάΠϯͰରԠ Gatsby on GraphQL
Show case https://www.gatsbyjs.org/showcase/
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/
Edit, Preview (src/pages/index.js)
• ੩తϑΝΠϧΛδΣωϨʔτ gatsbyίϚϯυͰsrc/publicԼͷjsϑΝΠϧ͔ΒHTMLΛੜ $ gatsby build • ελςΟοΫαΠτ ϗεςΟϯάʮsurge.shʯʹσϓϩΠ $
npm install --global surge (SuegeͷϑϦʔΞΧϯτΛొ) $ surge public/ (σϓϩΠ) ΞΫηεՄೳͳURL͕දࣔ͞ΕΔ Go live via surge!
W H AT ’ S S TAT I C S
I T E H O S T I N G ?
SurgeͬͯͳΜͩʁ https://surge.sh/pricing • ελςΟοΫαΠτ ༻ͷϗε ςΟϯάαʔϏε • ແྉͰSSL (ఏڙ͞ΕΔURL) ΧελϜυϝΠϯ(Not
ssl)ʹର Ԡ • CLI (surgeίϚϯυ)Ͱૢ࡞
ελςΟοΫαΠτ ϗεςΟϯάͷछྨ https://www.slant.co/topics/2256/~best-static-website-hosting-provider#1 1. HostingͷΈ GitHubPagesGitLabPages 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·Ͱ
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!
• ඪ४ػೳ Global deployment, right from Git HTTPS, custom domains,
DNS management • CDNͷଳҬɿ100GB/݄ • Ϣʔβʔɿ1໊ • OrganizationɿProҎ্ • ύεϫʔυϩάΠϯɿProҎ্ • ACLɿBusinessҎ্ • Audit log ɿBusinessҎ্ Free usage
Less Is More. Let's go static with Shifter. • ΑΓྑ͍ύϑΥʔϚϯε
(Static HTML + CDN) • ΑΓߴ͍ηΩϡϦςΟ (Micro services archtechture) • ΑΓ҆ՁͰ؆୯ͳεέʔϦϯά (No ops) • ΑΓྑ࣭ͳ։ൃऀΤΫεϖϦΤϯε (Cool, Clean architecture, Community friendly)
T H A N K S !