search
LoginSignup
10
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

Organization

Gatsby + GitHub Pages でポートフォリオページを無料でシュッと作る

エンジニアたるもの、自分のポートフォリオページは持っておきたいですよね。
Gatsby + GitHub Pages を利用したポートフォリオページ作成手順をまとめましたのでご活用ください。

こんなページをシュッと作れます。維持費もかかりません。
Image from Gyazo

GitHubでポートフォリオ用リポジトリ作成

まずはポートフォリオ用のリポジトリを作成していきます。

  • GitHub右上のメニューから 「New repository」をクリック

image.png

  • Repository name に <ユーザ名>.github.io を入力し、 「Initialize this repository with a README」にチェックつけて「Create repository」をクリック

image.png

  • リポジトリ作成完了。Clone with SSH をコピーしておきます

image.png

  • ターミナルで作成したリポジトリをチェックアウト
# <user>を置き換えて!!!
$ git clone git@github.com:<user>/<user>.github.io.git && cd <user>.github.io

Gatsbyで静的サイト作成

  • Gatsby CLI インストール
$ npm install -g gatsby-cli
$ gatsby new gatsby-simplefolio https://github.com/cobidev/gatsby-simplefolio
  • gatsby new が終わったらサイトのディレクトリへ移動
$ cd gatsby-simplefolio
  • 開発環境用サーバ起動
$ gatsby develop
  • http://localhost:8000/ へアクセスし、Gatsbyで作成した静的サイトを確認。早いですね。

image.png

作成した静的サイトを GitHub pages として公開

実は <user>.github.ioの命名規則でリポジトリを作成した時点で自動的にGitHub Pagesとして公開されています。
↓こんな感じ。READMEの内容が表示されてますね。
image.png

ページのカスタマイズをする前に、先ほどGatsbyで作成したページを一旦そのままGitHub Pagesとして公開してみます。

  • package.json にデプロイ用コマンド追加
gatsby-simplefolio/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に反映されます

image.png

カラーテーマ変更

  • サイト全体のカラーテーマを変更することができます

  • https://uigradients.com/ で好みの色を見つけましょう。

Image from Gyazo

  • 気に入ったグラディエーションのカラーコードを以下のファイルに反映すればOKです。
gatsby-simplefolio/src/style/abstracts/_variables.scss
// COLORS
$primary-color: #02aab0;
$secondary-color: #00cdac;

コンテンツ内容設定して完成!

  • 中身はただのReactです。タグ定義なんかも自由にカスタマイズしていきましょう!

Image from Gyazo

独自ドメインを設定

以降の手順は任意です。お金がかかるケースもあります :money_with_wings:

image.png

  • リポジトリのSettingsから、Custom domain に設定したいドメインを入力してSave
    image.png

  • CNAME というファイルが作成されます。設定ページからではなく手動でこのファイルを作成してもOKです。

image.png

  • これで、独自ドメインでポートフォリオページを表示できるようになります!

https://mishiwata1015.com/
※スマホ対応できてないです

image.png

参考

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
10
Help us understand the problem. What are the problem?