個人的なIT関連の作業メモや調べた結果や設定内容などの備忘録的なブログです。

目次

開発メモてきな

Gatsbyjsでポートフォリオサイト作った

Gatsbyjsでポートフォリオサイト作った

ちょちょいと簡単にできるやろと思って始めてみたら、正味10日ほどかかってしまった。。

準備

いきなりインストールで躓く。
mpnでインストールだといろいろ警告がでるのでyarnでインストールした。

チュートリアルを試す

インストールからチュートリアル完了まで2日ほどかかった。
へぇ、便利そうやなという感想。

Gatsby公式チュートリアル

ダミーサイトの作成

ポートフォリオを名乗っているが実質Webサイト練習したものを画像にして載せるものなのでまずはダミーのWebを作成。
画像を作るので実質2日近くかかってしまった。

サイト作成

真似したいサイトを見本にレイアウトを作成する。
間違ってないはずなのにうまく行かない場合は

yarn run clean
yarn run develop

キャッシュのせいで最新の状態にならなくてうまくいっていないように見える時があった。
他つまったところ

CSS苦労

gatsby-plugin-imageやreact-modalを使って楽をしようとしたら、CSSの指定に苦労した。

gatsbyで直接classをつけられるのはオーバーレイコンポーネントとコンテンツコンポーネントこちらはまだわかりやすい。
React-Modalのスタイル

問題はgatsby-plugin-image
gatsby-plugin-iamge
className指定はラッパー(div)、目的のimgタグにはimgClassNameで指定。
しかもコンポーネントに渡すpropsに含まれているスタイル要素が一番強いので指定しないでCSS側で記述してもコンポーネント側のデフォルトが優先されるという。
(例：object-fit, objevt-position, widthとか)

SEO用の設定うまくいかなくて苦戦

SEOまわりで2日位かかった。
なんか最新はreact-helmet-async使ったほうが良さそうな感じだったけどうまくいかなくて、結局SSGするのだからasyncである必要ないと妥協してreact-helmetにした。
ポイント？として、proptypesの定義しないとエラーになるからちゃんと書くこと。
OGPの画像を固定にしようとしたら、通常の画面に出てこないものなので生成されずハマった。
暫定措置として、対象の画像をimport及び変数格納で画像生成するように小細工した。
以下にSEO用のコンポーネントを残す。headタグのところはうまく動いていないので後日対応予定。

import * as React from 'react'
import PropTypes from 'prop-types'
import { Helmet } from 'react-helmet'
import { useLocation } from "@reach/router"
import { useStaticQuery, graphql } from 'gatsby'
import ogpImage from '../pages/static_images/ogp_image.png'

const Seo = ({ title, description, lang = 'ja', article = false }) => {

  const { pathname } = useLocation()
    const data = useStaticQuery(graphql`
    query {
      site {
        siteMetadata {
          siteUrl
          image
          defaultTitle: title
          defaultDescription: description
        }
      }
    }
  `)
  const metaTitle = title || data.site.siteMetadata.defaultTitle
  const metaDescription = description || data.site.siteMetadata.defaultDescription
  const pageTitle = title? title: 'TOP page'
  console.log(article)
  return (
    <Helmet
      htmlAttributes={{lang}} 
      title={metaTitle}
    >
      <head prefix="og: http://ogp.me/ns#" />
      <meta name="description" content={metaDescription} />

      <meta property="og:site_name" content={data.site.siteMetadata.defaultTitle} />
      <meta property="og:title" content={pageTitle} />
      <meta property="og:description" content={metaDescription} />
      <meta property="og:url" content={`${data.site.siteMetadata.siteUrl}${pathname}`} />
      <meta property="og:image" content={`${data.site.siteMetadata.siteUrl}${ogpImage}`} />
      <meta property="og:type" content={article? 'article':'website'} />

      <meta name="twitter:card" content="summary_large_image" />
    </Helmet>
  )
}

export default Seo

Seo.propTypes = {
  title: PropTypes.string,
  description: PropTypes.string,
  image: PropTypes.string,
  article: PropTypes.bool,
}

Seo.defaultProps = {
  title: null,
  description: null,
  image: null,
  article: false
}

Google Analytics

gatsby-plugin-google-gtagを使うことによって、UA-…の従来のユニバーサルなんとかとG-…のgtagの両方登録できる。

デプロイ

公開先をNetlifyにした。理由は

GitHub PagesでもAWSのS3でも良かったんだけど、いくつかのサービスを経験するため今回のGatsbyで作ったポートフォリオサイトはNetlifyで運用することにした。
GitHubと連携してpushしたらNetlify側でビルドできる便利と思ったいたけど何度やってもビルド失敗するので最終的に手元でビルドしてNetlify-CLIでデプロイすることにした。
この方法だとNetlifyでビルドコストがかからないというメリットがある。
暇ができたらGitHub Actionを使ってデプロイできないか試すのもありかも。

終わり

今後は定期的にサンプルサイトを増やしたり、デザインを改良したりしていきたい。