Gatsby+Netlifyを使って、手軽にポートフォリオサイトを作ろう！

こんにちは、Design Journal編集部です。 早速ですが、みなさんは自身のポートフォリオを持っていますか？ 一昔前は紙で地道に作成する方法しかありませんでしたが、現在はテクノロジーの進化によってWebサイトで作成するポートフォリオが主流になりました。 Webサイトでポートフォリオを作成する場合、まずは何で作るのかを決めなければいけません。現在だと、プログラミング未経験の方の場合はWixやSTUDIOといったWebサイトビルダーを使用してノーコードでWebサイトを作成する手法が主流です。また、HTMLやCSSといった簡単なコードが書ける方はWordPressを使用するケースも多く見られます。

今回はHTMLやCSSがある程度書ける方向けに、Gatsbyという今流行りの静的サイトジェネレーターを使用して、ポートフォリオサイトを作成し実際に公開するまでの一連の流れを紹介します。

Gatsbyとは？

Gatsbyは Reactをベースに開発された静的サイトジェネレーター（Static Site Generator）です。「Reactって何？」「静的サイトジェネレーター？」と思われる方がいると思いますが、簡単に言えば「今流行りのフレームワーク」です。ちなみにReactを使ってアプリを構築している企業は、Airbnb、Facebook、Instagram、Netflixなど名だたる企業ばかりです。

静的サイトジェネレーターとは？

静的サイトジェネレーター（以下SSG）は、HTMLファイルを生成するツールです。こちらを参考に、2021年5月現在で人気のSSGは下記の3つです。（GitHubのStar数を基準にしています。）

• Next.js
• Hugo
• Gatsby

上の３つのSSGを個人開発で使用した経験からプログラミングの経験が浅くても比較的開発しやすいツールはGatsbyだと思います。

メリット

SSGを使用してアプリを開発する事でどんなメリットがあるのでしょうか？私なりに考えてみました。

表示の高速化

SSGは、事前にHTMLファイルを生成します。そのためユーザーがWebサイトにアクセスした時点で、表示するHTMLファイルが用意できています。なので、CMSのようにユーザーがWebサイトにアクセスする度にHTMLファイルを生成しないので、表示速度が物凄く早いです。 [こちらのWebサイト]()は、Gatsbyを使用して構築していますが、SSGを使ってWebサイトを構築すると、どのくらい表示速度が速いかが確認できます。

メンテナンスのしやすさ・セキュリィティの向上

WordPressなどのCMSは、Webサイトを作成するのにコンテンツを保管するDBが必要です。そのため、その分の準備コストやメンテナンスコストがかかるのに加え、簡単に脆弱な箇所が発見されやすく、外部から攻撃されやすいです。 それに比べSSGは、管理画面やDBをそもそも必要としないため、外部から侵入されたり操作される心配がありません。

デメリット

動的なWebサイトに不向き

SSGは、データの更新の度にビルドを行うため更新頻度の高いWebサイトには不向きです。さらに、ページ数が多くなればなるほど、ビルド時間が遅くなります。そのためSSGと相性が良いWebサイトは、下記の4つがいいでしょう。

• ポートフォリオサイト
• コーポレートサイト
• ブログ
• LP

Webサイトの開発経験がある程度必須

今回のGatsbyはReactを使用しているため、WordPressでHTML、 CSSが書けていた方でも結構難しいです。なので、Gatsbyを使用する場合は、JavaScriptがある程度書ける事が最低条件だと思います。

開発環境の構築

Gatsbyを使用するには、まずいくつかのセットアップが必要です。下記にあるものを全てをインストールするとGatsbyを使用できます。なお、今回のセットアップはこちらの記事を参考にしています。

• Homebrew
• nodebrew
• Node.js
• Gatsby CLI

ターミナルを開く

Macにあらかじめインストールされているターミナルというアプリを使ってセットアップを行います。まずはターミナルを開いてみましょう。ターミナルは、コマンドと呼ばれる命令文を用いてMacの操作や設定をおこなうためのツールです。

Homebrewのインストール ※2021/05現在

パッケージ管理システムのHomebrewをインストールしましょう。公式サイトに記載されているスクリプトを実行します。下記のコマンドをコピーして、ターミナルにペーストしEnterを押せばコマンドが実行されます。

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Homebrewのバージョンを確認して、きちんとインストールできたか確認します。

brew -v

下記のように結果が出れば、無事インストールされています。

Homebrew 1.1.0 Homebrew/homebrew-core (git revision bb24; last commit 2016-11-15)

nodebrewのインストール

Node.jsというサーバーサイドで動作するJavaScriptをインストールする為に、先程インストールしたHomebrewを使ってnodebrewをインストールします。

brew install nodebrew

先程と同じように、きちんとインストールできたかを確認します。

nodebrew - v nodebrew 0.9.6 < Usage: nodebrew help Show this message nodebrew install Download and install (compile from source) nodebrew install-binary Download and install (binary file) nodebrew uninstall Uninstall nodebrew use Use nodebrew list List installed versions nodebrew ls Alias for `list` nodebrew ls-remote List remote versions nodebrew ls-all List remote and installed versions nodebrew alias Set alias nodebrew unalias Remove alias nodebrew clean | all Remove source file nodebrew selfupdate Update nodebrew nodebrew migrate-package Install global NPM packages contained in to current version nodebrew exec -- Execute using specified Example: # install from binary nodebrew install-binary v0.10.22 # use a specific version number nodebrew use v0.10.22 # io.js nodebrew install-binary io@v1.0.0 nodebrew use io@v1.0.0

Node.jsのインストール

次にNode.jsをインストールします。今回は安定版をインストールしましょう。

nodebrew install-binary stable

インストールされたバージョンを確認してみましょう。

nodebrew Is v7.1.0 current: none

current noneと表示されているのは、インストール直後のためNode.jsが無効化されているからです。早速有効化しましょう。なお、表示されるバージョンが上記の結果で記載されたバージョンと異なる場合があります。異なる場合は、表示されたバージョンを差し替えましょう。

nodebrew use v7.1.0

これで有効化されたはずです。先程のようにインストールされたバージョンを再度確認してみると、下記のようにバージョンが記載されるはずです。

nodebrew Is v7.1.0 current: v7.1.0

これで、指定したバージョンが有効化されました。

パスを通す

Node.jsを使用するためにパスを通します。

echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile

これで一通りのセットアップが整いました。残ったインストールはGatsby CLIのみとなりましたが、その前に一度ターミナルのアプリを閉じて再起動しましょう。 再起動ができたら、Node.jsが使用できるか確認します。

node -v

下記のように、有効化したバージョンが表示されれば、インストール完了です。

v7.1.0

Gatsby CLIのインストール

最後にGatsby CLIをインストールすれば、全てのセットアップが完了しGatsbyを使用する事ができます。

npm install -g gatsby-cli

今まで同様、インストールされているか確認してみましょう。

gatsby -v

下記のようにバージョンが表示されれば、無事Gatsbyを使用できるようになります。

Gatsby CLI version: 2.17.0

スターターの選定

セットアップが無事終わり、ようやくポートフォリオを作成する準備が整いました。Gatsbyを使って一からWebサイトを作成するのは骨が折れる作業です。便利なことに、Gatsbyではスターターと呼ばれる環境や見た目があらかじめ作成されたテンプレートを利用できます。今回はスターターを使ってささっとポートフォリオを作成していきたいと思います。使用するスターターは、私が個人的に開発したKerry Blog Gatsby Starterを使います。

このスターターは、基本的な開発環境が一通り整えてあり、ブログ機能を備えたWebサイトの作成に適したスターターです。また、SCSSやTypeScriptを使用したメンテナブルな開発環境となっています。

開発

それでは、早速開発を進めたいと思います。コードエディターはVSCodeを使用しています。既に他のアプリを使用している場合はそちらを使っても構いません。なお、下記のWebアプリ・デスクトップアプリを使用するため、アカウントの作成やアプリのダウンロードを済ませておいてください。

• GitHub – アカウントの作成
• VSCode – デスクトップアプリのダウンロード
• GitHub Desktop – デスクトップアプリのダウンロード

準備ができたら、Kerry Blgo Gatsby Starterのページに行き、タブ下部にある緑色のボタンCodeをクリックして、Open with GitHub Desktopを選択しましょう。

すると、GitHub Desktopが立ち上がり下記のモーダルが表示されます。

Local Pathは、ダウンロードするスターターのフォルダ（リポジトリ）を自身のMacのどこにダウンロードするか決められます。階層を分かりやすくする為に、/Users/Mac名/kerry-gatsby-starter/のように、するといいでしょう。よければ、右下の青色ボタンCloneをクリックしましょう。完了すると、指定の場所にフォルダがダウンロードされます。

それでは、先ほどクローンしたリポジトリを開いてみましょう。VSCodeを開き、ショートカットcmd+oでkerry-gatsby-starterのフォルダを選択します。すると、下記のようにフォルダを開いた状態になります。

パッケージのインストール

ファイルを編集していく前に、いくつかやるべきことがあります。まずパッケージと呼ばれる便利ツールのようなものをインストールする必要があります。VSCodeでターミナルをエディター上で開く事ができる為、上のメニューバーからView→Terminalまたは、ショートカットキー ctrl+`でターミナルを開きましょう。

それではパッケージと呼ばれる便利ツールのようなものを、アプリにインストールします。

npm install

上記のコマンドを実行すると、リポジトリ内にあるpackage.jsonに記載されているパッケージ一式が、全てインストールされます。 README.mdと同じ階層に、node_modulesというフォルダが追加されていたら、無事インストール完了です。 最後に、開発用サーバーを起動してみましょう！これを行う事で、実際にポートフォリオサイトを見ながらファイルを編集する事ができます。また、編集した箇所はリアルタイムで更新されます。

gatsby develop

ブラウザでhttp://localhost:8000/にアクセスすると、下記の画面が表示されるはずです。

ロゴの変更

今回は、簡単なカスタマイズの中でロゴの変更をご紹介します。（めも：kerry-logo.svg→logo.svgのリネーム）今回使用しているスターターでは、src/components/header/Header.tsxというヘッダー内でロゴをimportしています。このロゴファイル（assets/svg/kerry-logo.svg）と自分の好きなロゴをドラッグ＆ドロップで上書きしてみましょう。すると、下記のようにヘッダーのロゴが変更されているはずです。今回は、私が普段使用しているアバターのキャラクターをロゴとして表示します。

修正箇所の反映

ロゴの修正を現在のローカルリポジトリをリモートリポジトリに上書きしましょう。左のサイドバーの上から３つ目のアイコンをクリックします。するとGitに関する基本的な操作を行う画面が表示されます。

この画面で、ステージング、コミット、プッシュを行います。まずステージングを行うには、ファイル名をホバーして右に表示される＋アイコンを選択しましょう。

すると ＋アイコンを押したファイルが変更エリアに移動し、ステージングが完了します。次に、ローカルリポジトリにコミットします。コミットをする際は、どんな変更をしたのか分かるようにメッセージを書いておくといいでしょう。

そして上部のバーにあるチェックアイコンをクリックしてコミットを行いましょう。これで編集したファイルがローカルリポジトリに反映されます。

最後に、メニューアイコンを選択しプッシュアイコンをクリックしてプッシュしましょう。これで無事ロゴの変更が完了しました。

Webサイトを公開

最後に、作成したポートフォリオサイトを公開してみましょう。今回は、Netlifyを使って公開します。Netlifyとは、Gatsbyなどで作成した静的サイトをホスティングすることができるWebサービスで、基本無料で使用できます。

ログイン

まずはこちらからGitHubアカウントでログインしましょう。

リポジトリの選択

Team Overviewのページまで進み、New site from Gitを選択して、今回作成したリポジトリを選択します。

デプロイやビルドの設定

色々と設定する画面が表示されます。深く考えずに下記の通りに設定して、Deploy siteを選択しましょう。

デプロイ

するとデプロイが開始され、処理中のステータスになります。デプロイ時間は数十秒から遅くて数時間かかりますので、気長に待ちましょう。

完了するとステータスがPublishedに変更され、自動で割り当てられたURL（仮のドメイン）が表示されます。そのURLをクリックして、作成したポートフォリオサイトが表示されているか確認してみましょう。

URLの変更

先ほど自動で割り当てられたURLを変更できます。Site Settingsを選択し、Site Information→Change site nameで好きな名前に変更できます。

カスタムドメイン

お名前.comなどのドメイン登録サービスで取得した独自ドメインに変更することも可能です。本記事ではこちらの説明は省きますが、下記の記事を参考にするとスムーズに設定できます。

• 【Netlify】カスタムドメインを設定する
• Netlifyにお名前.comで取得した独自ドメインを設定する

自動更新

Netlifyは、最初で選択したGithubのリポジトリ内のファイルが修正・変更される度にWebサイトへ自動的に更新してくれます。そのため、VSCodeでプッシュするだけでWebサイトを更新できます。なお、更新メニューにあるDeploysから更新履歴を確認ができます。

まとめ

今回は、Gatsbyを使用して簡単なポートフォリオサイトを作成しました。プログラミング未経験の方には開発が難しいかもしれませんが、WordPressを触ったことがある方や、JavaScriptがある程度書ける方にとっては使いやすいフレームワークだと思います。この記事を機会に、素敵なポートフォリオサイトを作ってみてください！

• #デザイン
• #ブランディング
• #デザイナー