GatsbyJSとNetlifyでiOS/AndroidアプリのLPを勢いで作ってみた

## 経緯
2020年1月にiOSアプリをリリースして、もともとAndroidのアプリがあったので
これは今ならLP作れるのでは... :sparkles: 
という浅い考えと、何か新しい方法で試してみたいという欲求から今回は
GatsbyJSとNetlifyを使ってLPを作る事にしました。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">2020年初のアプリリリースしました🎉<br>神社巡ったり好きな方は良ければ使って見てください。iOSアプリです。m(_ _)m<a href="https://t.co/qv2C9dDhu1">https://t.co/qv2C9dDhu1</a></p>&mdash; slowhand (@wes_ja0927) <a href="https://twitter.com/wes_ja0927/status/1218172126093438976?ref_src=twsrc%5Etfw">January 17, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## GatsbyJSとNetlify
- [GatsbyJS](https://www.gatsbyjs.org/)
    - GatsbyJSに関してはこちら参照 [GatsbyJSを試してみた](https://qiita.com/Slowhand0309/items/a37865e9806cd143a6d7)
- [Netlify](https://www.netlify.com/)
    - 静的サイトをホスティングすることができるWebサービス
    - [料金に関して](https://www.netlify.com/pricing/)
        - 今回は無料の枠内で対応

###  :computer:環境構築
****
今回は[こちら](https://www.gatsbyjs.org/starters/anubhavsrivastava/gatsby-starter-newage/)のテンプレートを使用してLPを作成したいと思います。

```sh
$ gatsby new app-lp https://github.com/anubhavsrivastava/gatsby-starter-newage
```

早速起動してみます。

```sh
$ cd app-lp
$ gatsby develop
```
ブラウザで `http://localhost:8000/`にアクセスして↓のページが表示されればOKです。
![image1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/299271/799d2480-7af7-3efc-511f-217f621cc95d.png)
LPポイですねw (当たり前)

ここまで出来たら、一度Github上にリポジトリを作成しPushします。
今回はPrivateなリポジトリでも可能なのか検証も含めPrivateリポジトリで試しました。
(確認後Publicにしてます)

### :pencil: サイトページの内容を修正
****

#### 基本的な情報
`config.js` で設定されているので、ここを適宜修正します。

```js
module.exports = {
  siteTitle: '[アプリ名]', // <title> ☆修正
  manifestName: 'app-lp', // ☆修正
  manifestShortName: 'Landing', // max 12 characters
  manifestStartUrl: '/',
  manifestBackgroundColor: '#EB6101', // ☆修正
  manifestThemeColor: '#EB6101', // ☆修正
  manifestDisplay: 'standalone',
  manifestIcon: 'src/assets/img/website-icon.png', // ☆アイコン修正
  pathPrefix: `/app-lp/`, // ☆修正
  // social ☆必要に応じて修正
  socialLinks: [
    {
      icon: 'fa-github',
      name: 'Github',
      url: 'https://github.com/xxxx',
    },
    {
      icon: 'fa-linkedin-in',
      name: 'Linkedin',
      url: 'https://linkedin.com/in/xxxx/',
    },
    {
      icon: 'fa-twitter',
      name: 'Twitter',
      url: 'https://twitter.com/xxxx',
    },
    {
      icon: 'fa-facebook-f',
      name: 'Facebook',
      url: 'https://facebook.com/xxxx',
    },
  ],
};
```

### Footerの修正
まずは簡単な所から、`src/components/Footer.js` のコピーライトの部分を修正しました。

```js
import React from 'react';

export default function Footer() {
  return (
    <footer>
      <div className="container">
        <p>&copy; [名前]. All Rights Reserved.</p>
      </div>
    </footer>
  );
}
```

### コンテンツ全般の修正
次にコンテンツ全般の修正をガッツリ行いました。主に修正するファイルは
`src/pages/index.js` になります。
また、適宜CSSも微調整しました。

### Netlifyでページ公開
ページを修正したら、早速デプロイして公開していきたいと思います。
Netlifyにログインすると以下のページが表示されます。
![image2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/299271/d0cd87a9-b285-dfa2-9a4a-4340b92dd29f.png)

早速Githubのレポジトリと連携しようと思うので、「New from site Git」から連携するリポジトリを選択します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/299271/79a12762-fa9b-77d0-28e8-dda8d8b2710f.png" width="400" />

設定はデフォルトのままで「Deploy site」で早速デプロイしてみます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/299271/b8b91c5e-a7ca-014e-1b32-17ae5f3d7204.png" width="400" />

これだけでデプロイが完了しました :tada: 簡単。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/299271/ad95eef6-b98d-420d-0f04-6c1bad6bffcc.png" width="400" />


最後にサイト名を修正します :sparkles: 
![image7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/299271/1ed26a98-4d29-4eea-7575-fc78b57c9bff.png)

今回作成したLPは以下に公開してます !
https://ss-map-lp.netlify.com/
※ドメイン変更まで行うと有料になるので、今回はやりませんでした。

リポジトリはこちら
https://github.com/Slowhand0309/ss-map-lp
(※Privateでも大丈夫そうだったので、今は公開してます)

ものの数時間でデプロイできました :sparkles:  更新があっても後はリポジトリにPushするだけなのでとても便利そうです。

### :link: 参考になったURL
****
- [GatsbyJSとNetlifyを使って爆速でLP・ブログを作成 | boost株式会社｜毎日を、ゲームに。](https://www.boost-on.net/5101)
- [Starter Library | GatsbyJS](https://www.gatsbyjs.org/starters/?c=Landing%20Page&v=2)