GatsbyJSとNetlifyを使って爆速でLP・ブログを作成

LP・ブログを急ぎ作りたい
あとから修正もできるようにしたい
そんな人のための記事

LPやブログを簡単に、かつ、ソース管理ができる仕組みをご紹介します。

Reactを使ったフレームワークのGatsbyJSを使ってローカルで開発を行い、
gitでソースを管理して、Netlifyに連携することで、
pushするたびに自動ビルド→Webサイトへ公開を行います。

Gitのリポジトリを作成

Gitでmasterブランチを作成します。
※ すでに作成済みの場合は読み飛ばしてください。

ここで作成するmasterブランチは後ほど、Netlifyの自動ビルドで指定します。

Netlifyで連携できるリポジトリは
　・GitHub
　・GitLab
　・Bitbucket
となります。
その中からGitリポジトリを作成してください。

ターミナルを起動して、gitのソースをクローンします。
今回は例として、LPディレクトリにクローンします。

# gitからクローン
$ git clone https://gitlab.com/{gitのUser}/lp_project.git

# クローンするフォルダの作成
$ mkdir LP

# 任意ファイルの作成
$ touch README.md

# 変更としてステージ
$ git add README.md

# コミットと、コミット時のメッセージを設定
$ git commit -m "add README"

# masterブランチへプッシュ
$ git push -u origin master



テンプレートからLP・ブログを構築


Gatsbyjsからテンプレートを選択して、Netlifyで公開します。


スターターを選択する


公式HPから作成するスターターを選定します。

https://www.gatsbyjs.org/starters/?v=2




今回は

https://www.gatsbyjs.org/starters/codebushi/gatsby-starter-dimension/

にします。




ページの真ん中付近にあるCopyをクリックします。




コピーしたコマンドのnewの後の引数[gatsby-starter-dimension]はクローンするディレクトリ名なので、任意の名称をつけてください。

今回は一時フォルダとしてtemp使用します。


# グローバルインストールする
$ npm install -g gatsby-cli

# tempディレクトリを作成し、クローンする
$ gatsby new temp https://github.com/codebushi/gatsby-starter-dimension



LPディレクトリを作成します。

クローンしたファイルを、LPフォルダにコピーします。

※ .git や、 .gitignore 不要


以下のようなフォルダ構成になります。


.
└── LP
    ├── .cache
    ├── .git
    ├── .gitignore
    ├── .prettierrc
    ├── LICENSE
    ├── README.md
    ├── gatsby-browser.js
    ├── gatsby-config.js
    ├── gatsby-node.js
    ├── gatsby-ssr.js
    ├── node_modules
    ├── package-lock.json
    ├── package.json
    ├── public
    └── src



ローカル開発環境の構築


公式サイトを参考にしています。

https://www.gatsbyjs.org/docs/quick-start/1


# 実施済みの場合、不要。
# グローバルインストールする
$ npm install -g gatsby-cli

# 実施済みの場合、不要。
# LPディレクトリを作成し、クローンする
$ gatsby new LP https://github.com/codebushi/gatsby-starter-dimension

# 実施済みの場合、不要。
# LP ディレクトリへ移動する
$ cd LP

# アプリケーションをスタートする
# スターターによって package.json に定義してあるscriptが異なるので確認してください。
$ npm run develop



※ スターターによっては、別途プラグインのインストールが必要なものもあります。


http://localhost:8000/



にアクセスすると、表示できるようになります。


GitのリポジトリへPush


GitのマスターブランチにPushします。


$ git add *
$ sudo git add *
$ sudo git commit -m "すべてコミット"
$ sudo git push -u origin master



netlifyに連携


netlifyにアクセスします。

https://www.netlify.com/


Log in をクリックします。

※ 初めての場合、Sign up から新規登録を行なってください。


ログイン完了後、下記の画面に遷移します。




Gitを自動デプロイできるようにします。


New from site Git をクリックします。


自動デプロイするGitを選択します。




Gitを選択して認証が完了させます。


リポジトリを選択します。




デフォルトのままでOKです。

Deploy Siteをクリックします。




Production deploys が Published になったらでWeb公開されます！




Domain Settingから好きなドメインに変更も可能です✨


作成して、公開したLPはこちら。

https://anco-lp.netlify.com/


これですぐにLP・ブログが作成できますね！

関連記事一覧

  • コメント ( 0 )

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。