ポートフォリオサイトは作らなきゃなーとか思いながらも、WordPressで作るのもホスティグやらコーディングが面倒で、後回しになっていました。
静的サイトジェネレーターをふとネットで見かけて、GatsbyJSのドキュメントを試したら簡単に形ができるのに感動して、持て余してるGitHub Pagesでホスティングしたサイトを作ろうと思ったのがこのポートフォリオブログサイトを立ち上げたキッカケです。
とりあえず技術ブログのつもりで作ったので、折角なら作成手順を書いていきたいと思います。
GatsbyJSとは
GatsbyJS(https://www.gatsbyjs.org)は、React用製の 静的サイトジェネレーター です。
他にも静的サイトジェネレーターは、
- jekyll (https://jekyllrb-ja.github.io)
- hugo (https://gohugo.io)
- hexo (https://hexo.io)
- VuePress (https://vuepress.vuejs.org)
等、フロントやサーバーサイドの色々な言語でプロジェクトやサービスがあります。
どれを使うか少し迷いましたが、ReactJSに触れてみたいことと名前が好きという理由からGatsbyJSにしました。きっと「The Great Gatsby」からきてるんだろうね。
導入方法
まずはNodeJSとnpmのバージョンはこちら
$ node -v
v11.10.1
$ npm -v
6.9.0GatsbyJSをnpmでインストール
$ npm i -g gatsby-cliGatsbyJSのチュートリアルを眺めてたら、Startersと呼ばれるジェネレートされるサイトデザインのテンプレートがあったので、今回はそこから「gatsby-starter-lumen」をベースに作りました。
このstarterテーマはnpm scriptでyarnを使うみたいなので、インストールしておきます。
$ npm i -g yarnここまでのグローバルにインストールしたnpmパッケージを確認。
$ npm -g list --depth=0
/Users/USERNAME/.nodebrew/node/v11.10.1/lib
├── gatsby-cli@2.4.16
├── npm@6.9.0
└── yarn@1.13.0プロジェクトの作成をします。
ここでSTARTERS_NAMEを省略すると「gatsby-starter-blog」をインストールされます。
$ gatsby new PROJECT_NAME STARTERS_NAMEインストールされたプロジェクトをローカルサーバで立ち上げて起動してみます。
$ cd PROJECT_NAME
$ npm run develop問題なくビルドされればローカルサーバが立ち上がるので、ブラウザで確認してみましょう。
以上のターミナル操作でローカル環境にプロジェクトができたので、あとはNetlifyやGithub Pages等にDeployして公開しちゃいましょう。
Github PagesにDeploy
因みにこのブログはドメインでもわかるように、Github Pagesでホスティングしています。
私が行ったGithub PagesのUserページとして公開する場合の手順も書いておきます。
私はGithubで
- ジェネレーターのソース
- ビルドされたソース
の2つを管理したかったので少し悩みましたが、developブランチとmasterブランチで管理する形をとりました。
管理するブランチはこんな感じ。
develop→ ジェネレーターのソースmaster→ ビルドされたソース
個人のブログだし、リポジトリ自体private運用なので十分かな。
因みにGithub PagesをUserサイトとして公開するにはmasterブランチに公開するファイルを配置する必要があるので確認してください。
リポジトリやブランチの確認が済んだら、以下の作業で実際にリモートリポジトリにソースをcommitします。
# プロジェクトディレクトリに移動
$ cd PROJECT_DIR
# gatsby newした際に生成される.gitディレクトリを削除
$ rm -r .git
# 再度、gitを設定
$ git init
# Githubのremoteを設定
$ git remote add origin REPOSITORY
# developブランチを作成して移動
$ git checkout -b develop
# あとはremoteにcommit
$ git add .
$ git commit -m "COMMIT MESSAGE"
$ git push origin develop確認ですが、ジェネレーターのソースはdevelopブランチにpushします。
次にビルドで生成される公開するソースをmasterにdeployします。
こちらはGatsbyJSのドキュメントを参考にnpmパッケージをインストールします。
# gh-pagesをインストール
$ npm i gh-pages --save-dev
# deployコマンドをnpm runで実行できるようにpackage.jsonに登録
{
"scripts": {
"deploy": "gatsby build && gh-pages -d public -b master"
}
}
# deploy
$ npm run deployこれでhttp://USERNAME.github.ioを確認すれば公開されています。
感想
導入が簡単で、SPAが手軽にできるのはとっても助かりますね。
ブログとして記事を書くのもMarkdownで書けるのはいいですよね。
書いたら、npm run developで確認してnpm run deployでデプロイと手軽に記事をサイトに反映できます。
今まではWordPressでゴリゴリとサイトを作ってましたが、セキュリティーホールを気にする心配がだいぶ少なくなりますし、圧倒的にWordPressより早いサイトが出来上がりますからね。
あとは独自ドメインやホスティングをNetlifyにしたりとありますが、私は当面今のドメインとホスティングでサイトを修正しながらReactJSとGatsbyJSを学んでいこうと思います。
最後にGoogle PageSpeed Insightsで計測した当サイトの結果を載せておきます。
まーHTMLだから早いのは当たり前だけど、世界中でホスティングしているGithub Pagesのおかげもあるよね。
当面はこのブログを改修しながら、一からStarterテーマを作ることかな。
。。。いや、欲張らず小まめにブログ更新してアウトプットする癖をつけるか。あと記事書くスピードか。毎回こんなに時間かかってたら長続きしないよね。