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

自己紹介

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

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でデプロイ方法

• NetlifyでWebサイトを公開する方法

• Netlifyへの自動デプロイをしよう

• NetlifyはGitHubなどからデプロイできる静的Webホスティングサービス

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

流れ

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

あとがき

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

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

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