uni-3 log

    Search by

    サイトの構成を更新した(hugo->gatsbyjs, netlify->vercel)時の作業メモ

    サイト生成をhugoからgatsbyへ、ホスティングをnetlyfyからvercelにした

    gatsby導入などの作業メモを残しておく

    2018/12くらいにhugoで作成したので、おおよそ2年での更新と相成った

    vercel

    deploy&custom domain

    githubアカウントでログイン

    frameworkにgatsby.jsを選択できたので、githubのリポジトリを指定してframeworkを選ぶだけでpushしたら自動デプロイするようになった

    カスタムドメインはproject settingsのdomainsより、サブドメインを追加する

    google domainを利用しているので、カスタムリソースレコードにて以下画面に出てきたvercelのCNAMEを設定した。しばらく待ったら、反映された

    vercel domain

    SSLもLet’s Encryptで発行、設定してくれる

    netlifyの設定は削除した

    参考

    gatsbyのカスタム周り

    gatsby-starter-blogで生成し、カスタムしていった

    typescript

    yarn add gatsby-plugin-typescript

    graphql周りの型の生成には

    gatsby-plugin-graphql-codegen を導入

    ルートディレクトリにgatsby-types.tsが生成される

    >postのtypeを適用した例
    import {
      MarkdownRemark,
    } from "../../graphql-types"
    ...
    
    type Props = {
      post: MarkdownRemark
    }
    // postはdata.allMarkdownRemark.edgesをmapで受け取っている
    const Header: React.FC<Props> = ({ post }) => {
      return (
        <header>
          <h1>{post.frontmatter.title}</h1>
        </header>
      )
    }

    参考

    styled componentにする

    Styled Components | Gatsbyを実行

    yarn add gatsby-plugin-styled-components styled-components babel-plugin-styled-components

    gatsby-config.jsに追加

    gatsby-config.js
    module.exports = {
      plugins: [`gatsby-plugin-styled-components`],
    }

    typescriptで使うために

    yarn add @type/styled-components

    参考

    scss導入

    gatsby-plugin-sassを使った

    .scssを作成してcomponentにてimport "xxx.scss"などとして使う

    typescriptとかコード周り

    reactのtype

    componentとかelementとか雰囲気で使ってたので調べた

    各typeを辿っていってみた

    >React.FCを例に
    • React.FC

    functional componentは React.FCを使う。genericsの中身<>にはPropsを定義する

    <>内に型をいれればpropsに展開される

    type FC<P = {}> = FunctionComponent<P>;
    
    interface FunctionComponent<P = {}> {
            (props: PropsWithChildren<P>, context?: any): ReactElement<any, any> | null;
        propTypes?: WeakValidationMap<P>;
        contextTypes?: ValidationMap<any>;
        defaultProps?: Partial<P>;
        displayName?: string;
    }

    返り値は↓になる

    (props: PropsWithChildren<P>, context?: any): ReactElement<any, any> | null;
    • PropsWithChildren

    childrenは渡した型+ReactNodeとして定義される (propsを定義して渡せば、それが型になる) childrenはreact componentにおける子コンポーネント

    type PropsWithChildren<P> = P & { children?: ReactNode };
    • ReactNode

    色々入る

    type ReactNode = ReactChild | ReactFragment | ReactPortal | boolean | null | undefined;
    • ReactChild以下
    type ReactChild = ReactElement | ReactText;
    
    interface ReactNodeArray extends Array<ReactNode> {}
    type ReactFragment = {} | ReactNodeArray;
    
    interface ReactPortal extends ReactElement {
        key: Key | null;
        children: ReactNode;
    }
    
    interface ReactElement<P = any, T extends string | JSXElementConstructor<any> = string | JSXElementConstructor<any>> {
        type: T;
        props: P;
        key: Key | null;
    }
    
    type ReactText = string | number;

    typeとかkeyとかReactNodeがはいっている

    これはchild部分に変数、react element(component)、ReactNodeArray(複数のReactNode)が入ることを意味している

    <Parent>
      {child}
    </Parent>

    参考

    propsを拡張する

    定義したpropsと、gatsbyのpropsを渡したいとき

    import { PageProps, Link, graphql, useStaticQuery } from "gatsby"
    
    ...
    
    type Props = PageProps & {
      title: string,
    }
    
    ...

    参考

    2021, Built with Gatsby. This site uses Google Analytics.