自己紹介
むちゃんです。
関西を拠点に活動しているフロントエンドエンジニア目指しています。
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是非フォロー待っています❗️