Gatsby + GitHub Pages でポートフォリオページを無料でシュッと作る
エンジニアたるもの、自分のポートフォリオページは持っておきたいですよね。
Gatsby + GitHub Pages を利用したポートフォリオページ作成手順をまとめましたのでご活用ください。
GitHubでポートフォリオ用リポジトリ作成
まずはポートフォリオ用のリポジトリを作成していきます。
- GitHub右上のメニューから 「New repository」をクリック
- Repository name に
<ユーザ名>.github.io
を入力し、 「Initialize this repository with a README」にチェックつけて「Create repository」をクリック
- リポジトリ作成完了。Clone with SSH をコピーしておきます
- ターミナルで作成したリポジトリをチェックアウト
# <user>を置き換えて!!!
$ git clone [email protected]:<user>/<user>.github.io.git && cd <user>.github.io
Gatsbyで静的サイト作成
- Gatsby CLI インストール
$ npm install -g gatsby-cli
- Gatsby Starterを使ってサイト作成
- 今回はgatsby-simplefolioを使います。
$ gatsby new gatsby-simplefolio https://github.com/cobidev/gatsby-simplefolio
- gatsby new が終わったらサイトのディレクトリへ移動
$ cd gatsby-simplefolio
- 開発環境用サーバ起動
$ gatsby develop
-
http://localhost:8000/ へアクセスし、Gatsbyで作成した静的サイトを確認。早いですね。
$ npm install -g gatsby-cli
- 今回はgatsby-simplefolioを使います。
$ gatsby new gatsby-simplefolio https://github.com/cobidev/gatsby-simplefolio
$ cd gatsby-simplefolio
$ gatsby develop
作成した静的サイトを GitHub pages として公開
実は <user>.github.io
の命名規則でリポジトリを作成した時点で自動的にGitHub Pagesとして公開されています。
↓こんな感じ。READMEの内容が表示されてますね。
ページのカスタマイズをする前に、先ほどGatsbyで作成したページを一旦そのままGitHub Pagesとして公開してみます。
-
package.json
にデプロイ用コマンド追加
"start": "npm run develop",
"serve": "gatsby serve",
"clean": "gatsby clean",
- "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
+ "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1",
+ "deploy": "gatsby build && cp -pvr public/* ../ && git add ../ && git commit -m 'Deploy to production' && git push"
},
- デプロイコマンド実行
$ yarn run deploy
- しばらくすると GitHub Pagesに反映されます
カラーテーマ変更
サイト全体のカラーテーマを変更することができます
https://uigradients.com/ で好みの色を見つけましょう。
サイト全体のカラーテーマを変更することができます
https://uigradients.com/ で好みの色を見つけましょう。
- 気に入ったグラディエーションのカラーコードを以下のファイルに反映すればOKです。
// COLORS
$primary-color: #02aab0;
$secondary-color: #00cdac;
コンテンツ内容設定して完成!
- 中身はただのReactです。タグ定義なんかも自由にカスタマイズしていきましょう!
独自ドメインを設定
以降の手順は任意です。お金がかかるケースもあります
-
ドメインを取得する
- お好きなところでどうぞ
-
GitHub Pages サイトのカスタムドメインを管理する - GitHub Docsを参考に、DNSプロバイダでレコード作成
- ↓はAWSのR53でAレコードを設定した例
CNAME
というファイルが作成されます。設定ページからではなく手動でこのファイルを作成してもOKです。
- これで、独自ドメインでポートフォリオページを表示できるようになります!
https://mishiwata1015.com/
※スマホ対応できてないです
参考
- GitHub Pages について - GitHub Docs
- Quick Start | GatsbyJS
-
Starter Library | GatsbyJS
- Gatsbyにはブログ用など様々な用途のStarterがあります。こちらから検索してみるだけで面白いです
- https://docs.github.com/ja/github/working-with-github-pages/managing-a-custom-domain-for-your-github-pages-site#configuring-an-apex-domain
- Gatsbyにはブログ用など様々な用途のStarterがあります。こちらから検索してみるだけで面白いです
Author And Source
この問題について(Gatsby + GitHub Pages でポートフォリオページを無料でシュッと作る), 我々は、より多くの情報をここで見つけました https://qiita.com/mishiwata1015/items/ac65efbabb4400fd95bf著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .