超おすすめ!GatsbyJSでのポートフォリオサイト作成の手順・気づいたことなど

どうも、調べても調べても解決しないと頭が痛くなるヒトシマです。それは誰でもそうだろ。

ヒトシマはなんとか頑張ってGatsbyJS使ってウェブサイトデザインからコーディングまで50時間かけてポートフォリオを完成しました。

ということで気づいたことなど、手順などを書いていきます。OSはMacなのでMac前提で話していきます。

GatsbyJSのいいところ

GatsbyJSのいいところは、負荷に強く高速なところらしい。あとサーバーやDBに影響されない。急にエラーが起きたとしても、ページにはなんの影響も出ないらしい。詳しくは自分で調べてみてね。ヒトシマもあんまわからない。以下の記事がGatsbyJSの良さについてよく書かれていると思います。


GatsbyJSの導入

テンプレートが最初から用意されているので、いちいちドキュメントに従ってファイルを生成しなくてもいいです。

便利なNode.jsのライブラリをインストールするとき、使うコマンドは最初からあるnpmだとバグるのでyarnがおすすめです。

Node.js…便利な関数がいっぱい使える便利な道具だと思ってる。例えるなら、物置部屋とか道具箱。
npm…便利な道具を自分の場所で使えるようにするコマンド。例えば斧が欲しかったら、npm install 斧とすれば手に入る(比喩です。実際には斧はNode.jsでは使えません)。
yarn…npmと似たようなもの。npmでインストールできる。

以下の順番でやるとうまいこと行くかと思います。できなかったらひたすらにぐぐりまくってください。もしかしたら環境変数とかが関係してくると思います。.bash_profileにPATHを指定したらできるかもしれないです。

①Node.jsのインストール

②npmでyarnのインストール

③yarnでgatsby-cliのインストール

④例えば以下のコマンドの実行をする。

gatsby new my-blog-starter https://github.com/gatsbyjs/gatsby-starter-blog
cd my-blog-starter/
gatsby develop

http://localhost:8000にアクセスするとシンプルなブログサイトが既にできてます。ヒトシマはこれをもとにポートフォリオサイトを作成しました。

有志の方がいろんなテンプレート(例えばTypeScriptが導入されていたりする)作ってたりするので調べて違うものを使うのもありです。

GatsbyJSのファイルについて

ヒトシマがいじったファイルは以下です。

root/
 ├gatsby-config.js
 ├gatsby-node.js
 ├gatsby-browser.js
 ├src/
  │ ├components/
  │ ├css/
  │ ├fonts/
  │ ├pages/
  │ ├templates/
  │ ├utils/
  │   ├typography.js
 └content/
      ├assets/
      ├index/
      ├skills/
      ├works/

gatsby-config.jsはサイトの情報(metaタグに書くようなやつ)を置いといたり、プラグイン(GatsbyJS専用の便利な道具みたいなの)の登録・設定ができたりします。Gatsbyが読み込むファイルの場所とかも指定できたりします。

gatsby-node.jsはページのテンプレートとマークダウンファイルによってたくさんページを量産したり、nodeを作ったりできます。nodeはファイルが持つ情報のようなものです。ヒトシマはマークダウンファイルの時にだけノードを作ってます。

マークダウンファイル・・・htmlをわざわざ記述しなくとも、特定の記号を使うことで、簡単に文書の記述ができるもの。詳しくは調べてみてね。

gatsby-browser.jsはサーバーサイドレンダリングじゃなく、ブラウザサイドで実行されるファイルみたいです。あんまり何に使うのかよくわかってないですが、ページ全体を覆うレイアウトを書いたり、共通のcssをインポートできるみたいです。

conponents以下はページでもテンプレートでもないReactコンポーネントを納める場所。SEOコンポーネントとか共通のレイアウトコンポーネントとかが入っています。

src/pages以下にあるコンポーネントは自動的にページとして生成されるみたいです。

css・fontsフォルダはそのままです。

templetes以下はテンプレートを納める場所です。テンプレートはページの構成が一緒で文章と画像を差し替えるだけでいいページをたくさん作る時に使います。

typography.jsはサイト全体の文字の色とか行間などタイポグラフィと呼ばれる部分が設定できます。体裁を整えたりができるわけですね。

content以下はページで使う画像ファイルや、マークダウンファイルを収納します。assetはworks/index/skillページで使っているもの以外の画像を収納します。

ちなみにsrc/components以下の、書いてないけどlayout.jsはヘッダーとかフッターとかサイト全体での共通部分のレイアウトを設定するコンポーネントです。


Netlifyについて

Netlifyはサーバーサイドの事なんも考えなくても、デプロイができてしまう優れもの。なんと無料。

express.jsとか書かなくてもいい。なんのコーディングもいらない。

Netlifyでデプロイしたけど、そんなに難しくない。GitHubのレポジトリをそのまま選択したらできるので。唯一Netlifyでハマったのはwindowだね。

window is not defined

ってエラーをbuild中に吐いてfailedになっちゃう。

どうやら調べてると、

if (typeof window !== `undefined`) {
  //windowが使われている問題のコード
}

を記述すればいいっぽいけど、エラーを吐いてるのはimportしてるライブラリ。

if (typeof window !== `undefined`) {
  import //Name from "libraly"
}

と書いてみたのだけど怒られてしまう。ちなみにNameはReactのコンポーネントです。

調べて調べて調べてようやく見つけたのが、requireを使う方法。

let Name
if (typeof window !== `undefined`) {
  Name = require("libraly")
}

とやると上手くいった。そんな方法あるとか知らんがな!!!

おわりに

という事でGatsbyJSとNetlifyについて軽ーく説明をした。html, cssだけだといろいろ辛いことが、GatsbyJSとNetlifyで解決してしまう。LPやHP作成などの静的サイトを生成するにはもってこいなので、そこのあなたも使ってみてはいかがだろうか。

ここまでご覧いただきありがとうございました!

もしなにかございましたら、マシュマロ(匿名でコメントできます!)に投げてくださいましたら、何らかの形(多分Twitter?)で返答いたしますのでお気軽にどうぞ。お役に立てるかどうかはわかりませんが……。

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
役に立ったのであれば、他の方にも分けてあげてください!
14
UI/UXからフロントエンドまで幅広くやりたい大学生。自分なりにぼちぼち発信していきたい。
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。