自己紹介

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

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

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

概要

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

実際の完成物

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

GatsbyJSとは

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

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

Gatsbyのインストール

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

①Gatsbyのインストール

②プロジェクト作成
$ 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でデプロイ方法

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

流れ

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

あとがき

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

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

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