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. この記事へのコメントはありません。