Gatsbyを利用したポートフォリオ

GatsbyJS + TailwindCSSを利用したポートフォリオサイト。GatsbyJSの学習サンプルとして用意したもの入門サイトになります。

🚀 Quick start

1. gatsby-starter-portfolioプロジェクトの作成.

   Gatsby CLIを利用して、githubリポジトリからGatsbyJSのプロジェクトを作成します。

   $ gatsby new gatsby-starter-portfolio https://github.com/nakanakamu0828/gatsby-starter-portfolio

2. developmentモードでの起動

   $ cd gatsby-starter-portfolio
   $ gatsby develop

3. ブラウザにて起動確認!

   http://localhost:8000でブラウザの表示を確認してください。

環境変数（.env）

$ cat <<EOF > .env
GOOGLE_ANALYTICS_TRACKING_ID=
IFRAMELY_API_KEY=
EOF

環境変数名	説明
GOOGLE_ANALYTICS_TRACKING_ID	Googleアナリティクス トラッキングID
IFRAMELY_API_KEY	iframelyのAPI Key - 外部コンテンツのembedに利用

利用しているプラグイン/ライブラリ

GatsbyJSのプラグイン

• gatsby-plugin-react-helmet : react-helmetを利用してmetaタグを生成する
• gatsby-transformer-sharp : 画像読み込みでImageSharpノードを生成する
• gatsby-plugin-sharp : 画像圧縮ライブラリのSharpを使えるようにする
• gatsby-plugin-postcss : PostCSSを利用する為のライブラリ。TailwindCSSを利用するために追加
• gatsby-plugin-sitemap : sitemap.xmlを生成する
• gatsby-plugin-styled-components : styled-componentを利用する
• gatsby-source-filesystem : プロジェクト内に作成されたmarkdownファイルを読み込むAPI
• gatsby-transformer-remark : markdownをremarkを利用してHTMLに変換する
• gatsby-remark-images : markdownの画像を表示する
• gatsby-remark-external-links : 外部リンクは target="_blank" rel="nofollow, noopener, noreferrer"を設定する
• gatsby-remark-autolink-headers : 見出しにid属性をつける
• gatsby-remark-toc : markdownから目次を生成する
• gatsby-remark-prismjs: コードハイライトとしてprismjsを利用
• gatsby-remark-component : markdown内でReactのComponentを利用
• gatsby-plugin-alias-imports : import宣言のaliasとして利用。

import '@components/navbar'
↓
import '../../components/navbar.js'

• gatsby-plugin-netlify : Netlifyの_redirecsファイルを生成するのに利用しています
• gatsby-plugin-env-variables : 環境変数を利用する場合に使います

それ以外のライブラリ

• TailwindCSS : デザインのベースはTailwindCSSでマークアップしています
• react-inview-monitor : inview(画面内に要素が表示された)時にアニメーションを行う

💫 Deploy