Gatsby.jsでおしゃれなポートフォリオを作ろう！

3895 ワード
静的サイトジェネレーター Git Netlify gatsby React Git テキストリンク

自己紹介

むちゃんです。
関西を拠点に活動しているフロントエンドエンジニア目指しています。

HAL大阪の2回生です:(2020.8.25現在)

イベントなど回っているので是非大阪辺りの方は会いましょう！

概要

GatsbyjsとNetlifyで爆速ポートフォリオを作成しました。

実際の完成物

今回、僕が作ったポートフォリオはこんな感じです。


GatsbyJSとは

GatsbyJSはReactで作られた静的サイトジェネレーターです。


・よく耳にするReactを自分なりにまとめてみた...
・Reactベース静的サイトジェネレータGatsbyの真の力をお見せします

Gatsbyのインストール

プロジェクトを作成し構成を確認します。

①Gatsbyのインストール
$ npm install -g gatsby-cli

②プロジェクト作成
$ gatsby new portfolio
$ cd portfolio

├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── LICENSE
├── package.json
├── public
│   ├── index.html
│   ├── render-page.js.map
│   └── static
├── README.md
├── src
│   ├── components
│   │   └── Header
│   │       └── index.js
│   ├── layouts
│   │   ├── index.css
│   │   └── index.js
│   └── pages
│       ├── 404.js
│       ├── index.js
│       └── page-2.js
└── yarn.lock

③ローカルで確認
$ gatsby develop

確認方法 http://localhost:8000/
※この辺りは色んな記事などを参考にしてください。

Netlifyでデプロイ方法

この辺りに詳しく書いてあるので是非読んでみてください。

流れ

  1. 作ったサイトをGitHubにpushしておく
  2. Netlifyの設定とデプロイする
  3. サイトを更新する

あとがき

今回は自分なりにGatsby.jsでNetlifyにデプロイして
爆速なポートフォリオ作成する。についてまとめてみました。

是非おしゃれなポートフォリオ作ってみてください。

ポートフォリオ:hongmuchan.net
Twitter:@HomgMuchan是非フォロー待っています❗️