{"componentChunkName":"component---src-templates-single-post-js","path":"/posts/gatsby-js-netlify-その-1/","webpackCompilationHash":"0bb9bd8306defc5c5a8b","result":{"data":{"post":{"frontmatter":{"meta":{"title":"GatsbyJS + Netlify_その1","description":"GatsbyJS + Netlify 始めました。\n安い！早い！便利なGatsbyJS + Netlifyのまとめです。","noindex":null,"canonicalLink":null},"title":"GatsbyJS + Netlify_その1","template":"SinglePost","subtitle":null,"date":"2019-08-15T00:25:26.225Z","categories":[{"category":"Tech"}]},"html":"

GatsbyJS + Netlify 始めました。

\n

\"IMG\"

\n

知り合いのエンジニアのエンジニアに教えてもらって、GatsbyJSとNetlifyの存在を知りました。\n「すごい！」の一言です。
\n以前は静的なページはHTMLで書いて、github pagesに載せるか、Dockerとnginxproxyでサブドメイン貼って、サーバー立ててやったりしてましたが、GatsbyJSとNetlifyの存在をしり使ってみました。

\n

導入方法

\n

ざっくり言うと、Gatsbyからポチッとやって、終わり。これでもう静的サイトができちゃいます。
\nただし、かゆいところに手が届かないので、色々設定していく。
\nまず、カスタムドメインとしてサブドメインを設定。
\nテンプレート次第だけど、自分にあったサイトに編集。

\n

Gatsubyからテンプレートを選んで、デプロイまで。

\n
    \n
  1. ここからテンプレートを選択。今回は一番使いやすそうなgatsby-starter-lumenを選択。
    2. \n
  2. 右下に小さく「try this starter　Netlify」と書いてあるので、ポチる。するとGitHubアカウントを聞かれるので、ログインする。
    3. \n
\n

\"IMG\"

\n
    \n
  1. 「Repository name」を変更したければ変更して「Save and Deploy」で完了。
    2. \n
\n

\"IMG\"

\n

これだけでデプロイされます。デプロイに少し時間がかかるので、1分くらい待ちます。\n表示されているURLへアクセスしてみると、ちゃんとHTTPSで画面が表示されるはず。

\n

\"IMG\"

\n

なるほど、これは簡単

\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n
こちらでも公開中
\"hatena\"
はてなブログ
\"luck!\"
Luck!
\n
\n
\n\n
\n
\n
\n\n
","id":"1877003c-32b0-5bc4-9cee-8b736797bf64"},"allPosts":{"edges":[{"node":{"id":"11e872df-ccae-573a-bd93-b9c1fafbab72","fields":{"slug":"/posts/えいちつー-西葛西/"},"frontmatter":{"title":"えいちつー_西葛西"}},"next":{"fields":{"slug":"/posts/animate-cssで間隔を調整する/"},"frontmatter":{"title":"Animate.cssで間隔を調整する"}},"previous":null},{"node":{"id":"af531f3a-b7d2-5c9e-ad22-e8378a078f07","fields":{"slug":"/posts/animate-cssで間隔を調整する/"},"frontmatter":{"title":"Animate.cssで間隔を調整する"}},"next":{"fields":{"slug":"/posts/amazonでスマホ三脚を購入/"},"frontmatter":{"title":"amazonでスマホ三脚を購入"}},"previous":{"fields":{"slug":"/posts/えいちつー-西葛西/"},"frontmatter":{"title":"えいちつー_西葛西"}}},{"node":{"id":"b320c2db-f74d-5213-be91-d01c7f94f8c0","fields":{"slug":"/posts/amazonでスマホ三脚を購入/"},"frontmatter":{"title":"amazonでスマホ三脚を購入"}},"next":{"fields":{"slug":"/posts/twitterのシェアボタンがうまく動かない/"},"frontmatter":{"title":"Twitterのシェアボタンがうまく動かない"}},"previous":{"fields":{"slug":"/posts/animate-cssで間隔を調整する/"},"frontmatter":{"title":"Animate.cssで間隔を調整する"}}},{"node":{"id":"cbd9c95c-a098-592c-bfd9-a936996ff335","fields":{"slug":"/posts/twitterのシェアボタンがうまく動かない/"},"frontmatter":{"title":"Twitterのシェアボタンがうまく動かない"}},"next":{"fields":{"slug":"/posts/バチェラーカードリリース/"},"frontmatter":{"title":"バチェラーカードリリース"}},"previous":{"fields":{"slug":"/posts/amazonでスマホ三脚を購入/"},"frontmatter":{"title":"amazonでスマホ三脚を購入"}}},{"node":{"id":"fc5fe850-be92-5297-859f-0839f6b2fbb7","fields":{"slug":"/posts/バチェラーカードリリース/"},"frontmatter":{"title":"バチェラーカードリリース"}},"next":{"fields":{"slug":"/posts/snsのシェアボタンとsnsのログインボタンをサクッと作る/"},"frontmatter":{"title":"SNSのシェアボタンとSNSのログインボタンをサクッと作る"}},"previous":{"fields":{"slug":"/posts/twitterのシェアボタンがうまく動かない/"},"frontmatter":{"title":"Twitterのシェアボタンがうまく動かない"}}},{"node":{"id":"d8500bc6-e602-599e-a22f-80810d132de2","fields":{"slug":"/posts/snsのシェアボタンとsnsのログインボタンをサクッと作る/"},"frontmatter":{"title":"SNSのシェアボタンとSNSのログインボタンをサクッと作る"}},"next":{"fields":{"slug":"/posts/スタジオアリスの増えデジアルバムを自分で増やす。/"},"frontmatter":{"title":"スタジオアリスの増えデジアルバムを自分で増やす。"}},"previous":{"fields":{"slug":"/posts/バチェラーカードリリース/"},"frontmatter":{"title":"バチェラーカードリリース"}}},{"node":{"id":"4c934147-b318-5afd-9241-c1f5d4d75e2f","fields":{"slug":"/posts/スタジオアリスの増えデジアルバムを自分で増やす。/"},"frontmatter":{"title":"スタジオアリスの増えデジアルバムを自分で増やす。"}},"next":{"fields":{"slug":"/posts/鈴屋-館山/"},"frontmatter":{"title":"鈴屋_館山"}},"previous":{"fields":{"slug":"/posts/snsのシェアボタンとsnsのログインボタンをサクッと作る/"},"frontmatter":{"title":"SNSのシェアボタンとSNSのログインボタンをサクッと作る"}}},{"node":{"id":"04233bd7-e37d-57cb-b458-50e230b67866","fields":{"slug":"/posts/鈴屋-館山/"},"frontmatter":{"title":"鈴屋_館山"}},"next":{"fields":{"slug":"/posts/からしや-葛西/"},"frontmatter":{"title":"からしや_葛西"}},"previous":{"fields":{"slug":"/posts/スタジオアリスの増えデジアルバムを自分で増やす。/"},"frontmatter":{"title":"スタジオアリスの増えデジアルバムを自分で増やす。"}}},{"node":{"id":"ecb65f65-3564-58d5-b2c6-1b712b21783b","fields":{"slug":"/posts/からしや-葛西/"},"frontmatter":{"title":"からしや_葛西"}},"next":{"fields":{"slug":"/posts/吉村家-横浜/"},"frontmatter":{"title":"吉村家_横浜"}},"previous":{"fields":{"slug":"/posts/鈴屋-館山/"},"frontmatter":{"title":"鈴屋_館山"}}},{"node":{"id":"86bea805-00cf-5633-af27-2bcd764f3d42","fields":{"slug":"/posts/吉村家-横浜/"},"frontmatter":{"title":"吉村家_横浜"}},"next":{"fields":{"slug":"/posts/golangでanacondaを利用して-twitterにつぶやく/"},"frontmatter":{"title":"golangでanacondaを利用してTwitterにつぶやく"}},"previous":{"fields":{"slug":"/posts/からしや-葛西/"},"frontmatter":{"title":"からしや_葛西"}}},{"node":{"id":"e3ba1aa1-d2b2-5519-b9b9-00efdcadbd11","fields":{"slug":"/posts/golangでanacondaを利用して-twitterにつぶやく/"},"frontmatter":{"title":"golangでanacondaを利用してTwitterにつぶやく"}},"next":{"fields":{"slug":"/posts/amazonで花椒-四川山椒-をかってみた/"},"frontmatter":{"title":"Amazonで花椒 四川山椒 をかってみた"}},"previous":{"fields":{"slug":"/posts/吉村家-横浜/"},"frontmatter":{"title":"吉村家_横浜"}}},{"node":{"id":"d31690b3-2c7d-5560-9ab4-a57d83e95b62","fields":{"slug":"/posts/amazonで花椒-四川山椒-をかってみた/"},"frontmatter":{"title":"Amazonで花椒 四川山椒 をかってみた"}},"next":{"fields":{"slug":"/posts/gatsby-js-netlify-その-3/"},"frontmatter":{"title":"GatsbyJS + Netlify_その3"}},"previous":{"fields":{"slug":"/posts/golangでanacondaを利用して-twitterにつぶやく/"},"frontmatter":{"title":"golangでanacondaを利用してTwitterにつぶやく"}}},{"node":{"id":"8601b324-6161-51ed-95ce-cb5ffe1ffaa6","fields":{"slug":"/posts/gatsby-js-netlify-その-3/"},"frontmatter":{"title":"GatsbyJS + Netlify_その3"}},"next":{"fields":{"slug":"/posts/gatsby-js-netlify-その-2/"},"frontmatter":{"title":"GatsbyJS + Netlify_その2"}},"previous":{"fields":{"slug":"/posts/amazonで花椒-四川山椒-をかってみた/"},"frontmatter":{"title":"Amazonで花椒 四川山椒 をかってみた"}}},{"node":{"id":"450caa1d-e0c5-5096-95c9-13b3857b90b3","fields":{"slug":"/posts/gatsby-js-netlify-その-2/"},"frontmatter":{"title":"GatsbyJS + Netlify_その2"}},"next":{"fields":{"slug":"/posts/gatsby-js-netlify-その-1/"},"frontmatter":{"title":"GatsbyJS + Netlify_その1"}},"previous":{"fields":{"slug":"/posts/gatsby-js-netlify-その-3/"},"frontmatter":{"title":"GatsbyJS + Netlify_その3"}}},{"node":{"id":"1877003c-32b0-5bc4-9cee-8b736797bf64","fields":{"slug":"/posts/gatsby-js-netlify-その-1/"},"frontmatter":{"title":"GatsbyJS + Netlify_その1"}},"next":{"fields":{"slug":"/posts/田舎道/"},"frontmatter":{"title":"田舎道"}},"previous":{"fields":{"slug":"/posts/gatsby-js-netlify-その-2/"},"frontmatter":{"title":"GatsbyJS + Netlify_その2"}}},{"node":{"id":"3777734d-dc86-5124-830b-b123179a6255","fields":{"slug":"/posts/田舎道/"},"frontmatter":{"title":"田舎道"}},"next":{"fields":{"slug":"/posts/nuxtで作ったプロジェクトを-s-3-にデプロイする。ついでにパイプラインも作成/"},"frontmatter":{"title":"Nuxtで作ったプロジェクトをS3にデプロイする。ついでにパイプラインも作成 "}},"previous":{"fields":{"slug":"/posts/gatsby-js-netlify-その-1/"},"frontmatter":{"title":"GatsbyJS + Netlify_その1"}}},{"node":{"id":"b911ff27-f1bd-5dbd-8d55-bc836c9d0864","fields":{"slug":"/posts/nuxtで作ったプロジェクトを-s-3-にデプロイする。ついでにパイプラインも作成/"},"frontmatter":{"title":"Nuxtで作ったプロジェクトをS3にデプロイする。ついでにパイプラインも作成 "}},"next":{"fields":{"slug":"/posts/linked-in-apiを使う/"},"frontmatter":{"title":"LinkedInAPIを使う"}},"previous":{"fields":{"slug":"/posts/田舎道/"},"frontmatter":{"title":"田舎道"}}},{"node":{"id":"868b483d-2cde-508c-8978-327a3f734203","fields":{"slug":"/posts/linked-in-apiを使う/"},"frontmatter":{"title":"LinkedInAPIを使う"}},"next":{"fields":{"slug":"/posts/backlog-jenkins-nginx-dockerで-webサービスを構築-その-3/"},"frontmatter":{"title":"backlog-jenkins-nginx-dockerでWebサービスを構築_その3"}},"previous":{"fields":{"slug":"/posts/nuxtで作ったプロジェクトを-s-3-にデプロイする。ついでにパイプラインも作成/"},"frontmatter":{"title":"Nuxtで作ったプロジェクトをS3にデプロイする。ついでにパイプラインも作成 "}}},{"node":{"id":"f22af0ac-f3e5-5cc1-b552-8c66b6026112","fields":{"slug":"/posts/backlog-jenkins-nginx-dockerで-webサービスを構築-その-3/"},"frontmatter":{"title":"backlog-jenkins-nginx-dockerでWebサービスを構築_その3"}},"next":{"fields":{"slug":"/posts/backlog-jenkins-nginx-dockerで-webサービスを構築-その-2/"},"frontmatter":{"title":"backlog-jenkins-nginx-dockerでWebサービスを構築_その2"}},"previous":{"fields":{"slug":"/posts/linked-in-apiを使う/"},"frontmatter":{"title":"LinkedInAPIを使う"}}},{"node":{"id":"569f7ab2-0c83-5683-81fa-21c69fd5117a","fields":{"slug":"/posts/backlog-jenkins-nginx-dockerで-webサービスを構築-その-2/"},"frontmatter":{"title":"backlog-jenkins-nginx-dockerでWebサービスを構築_その2"}},"next":{"fields":{"slug":"/posts/backlog-jenkins-nginx-dockerで-webサービスを構築-その-1/"},"frontmatter":{"title":"backlog-jenkins-nginx-dockerでWebサービスを構築_その1"}},"previous":{"fields":{"slug":"/posts/backlog-jenkins-nginx-dockerで-webサービスを構築-その-3/"},"frontmatter":{"title":"backlog-jenkins-nginx-dockerでWebサービスを構築_その3"}}},{"node":{"id":"9abaf084-569e-53db-970a-42f6b1961c26","fields":{"slug":"/posts/backlog-jenkins-nginx-dockerで-webサービスを構築-その-1/"},"frontmatter":{"title":"backlog-jenkins-nginx-dockerでWebサービスを構築_その1"}},"next":{"fields":{"slug":"/posts/aws-githubからソースを取得し、-ecs-fargate-or-ec-2-にデプロイするパイプラインを作成する-その-2-（デプロイまで）/"},"frontmatter":{"title":"AWS Githubからソースを取得し、ECS(Fargate or EC2)にデプロイするパイプラインを作成する_その2（デプロイまで）"}},"previous":{"fields":{"slug":"/posts/backlog-jenkins-nginx-dockerで-webサービスを構築-その-2/"},"frontmatter":{"title":"backlog-jenkins-nginx-dockerでWebサービスを構築_その2"}}},{"node":{"id":"2b4b8b24-8bac-5d6e-b8be-be93abf830a3","fields":{"slug":"/posts/aws-githubからソースを取得し、-ecs-fargate-or-ec-2-にデプロイするパイプラインを作成する-その-2-（デプロイまで）/"},"frontmatter":{"title":"AWS Githubからソースを取得し、ECS(Fargate or EC2)にデプロイするパイプラインを作成する_その2（デプロイまで）"}},"next":{"fields":{"slug":"/posts/aws-githubからソースを取得し、-ecs-fargate-or-ec-2-にデプロイするパイプラインを作成する-その-1-（albの作成まで）/"},"frontmatter":{"title":"AWS Githubからソースを取得し、ECS(Fargate or EC2)にデプロイするパイプラインを作成する_その1（ALBの作成まで）"}},"previous":{"fields":{"slug":"/posts/backlog-jenkins-nginx-dockerで-webサービスを構築-その-1/"},"frontmatter":{"title":"backlog-jenkins-nginx-dockerでWebサービスを構築_その1"}}},{"node":{"id":"c3a9a179-8a04-5767-b325-56f39a3a8173","fields":{"slug":"/posts/aws-githubからソースを取得し、-ecs-fargate-or-ec-2-にデプロイするパイプラインを作成する-その-1-（albの作成まで）/"},"frontmatter":{"title":"AWS Githubからソースを取得し、ECS(Fargate or EC2)にデプロイするパイプラインを作成する_その1（ALBの作成まで）"}},"next":null,"previous":{"fields":{"slug":"/posts/aws-githubからソースを取得し、-ecs-fargate-or-ec-2-にデプロイするパイプラインを作成する-その-2-（デプロイまで）/"},"frontmatter":{"title":"AWS Githubからソースを取得し、ECS(Fargate or EC2)にデプロイするパイプラインを作成する_その2（デプロイまで）"}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"id":"1877003c-32b0-5bc4-9cee-8b736797bf64"}}}