NetlifyにGatsbyjsを使って無料でサイトを構築する。March 18, 2022Github Pagesの他にも無料で静的サイトを公開できるサービスがあると知り、試しに使ってみました。 無料で公開できるサービスは Vercel Cloudflare Netlify が有名みたい 今回はこの中でNetlifyを使います 環境 Mac OS Big Sur 11.5.2 nodejs v16.14.0 vscode 1.65.1 事前準備 Github…続きを読む →
サーバー不要Gatsbyプロジェクトで商品を売る方法。stripeの決済機能実装。March 17, 2022環境 macOS Big Sur 11.5.2 nodejs v16.14.0 yarn 1.22.17 事前準備 gatsbyプロジェクト作成 stripeのアカウント登録 stripeアカウントを登録し の右下にある 公開可能キー シークレットキー をgatsby-starter-netlify-cms…続きを読む →
gatsby-starter-blogでブログ記事一覧をレスポンシブ対応するMarch 17, 2022PCの場合はこんな感じ スマホは mui関連の使用パッケージ 今回はmaterial-uiのv5を使用 以前と比べて表記などが多少変わっている インストールしているパッケージは以下になる "@emotion/react": "^11.8.1", "@emotion/styled": "^11.8.1", "@mui/icons-material": "^5.4.4", "@mui…続きを読む →
gatsby-starter-blogのブログ投稿記事にsns共有ボタン設置March 16, 2022パッケージインストール 必要なのはというもの 実装 共有ボタンを設置するのは投稿記事にする src/templates/blog-post.jsを編集していく 追加する部分は生地とフッターの間に、 graphqlのsiteMetadataにsiteUrl項目 ShareSnsコンポーネントは 表示させると OGP設定 OGP(Open Graph Protocol)とは OGPとは「Open…続きを読む →
gatsby-starter-blogのブログ投稿記事にサムネイル画像を設定するMarch 15, 2022編集するファイル 投稿記事のmarkdownファイル 投稿記事一覧を表示させるファイル src/components/blogs.js 上から一つずつ見ていきます 投稿記事のmarkdownファイル 設定項目に欄を追加する markdownファイルと同じディレクトリに今回は1.pngという画像を置く 投稿記事一覧を表示しているファイル src/pages/index.js src…続きを読む →
gatsby-starter-blogのブログ投稿記事に目次を追加March 14, 2022必要なパッケージ gatsby-transformer-remark こちらは初めからインストール済み gatsby-remark-autolink-headers でパッケージインストール 修正するソースコード gatsby-transformer-remarkのプラグインに を追加することによって、目次欄をクリックしてその欄までスクロールされるようになる。 ＊上の項目はgatsby…続きを読む →
material-ui v4 → v5で変わったことMarch 13, 2022import先変更、createThemeの中のpalette.type → palette.mode makeStylesが非推奨になった 以前 ↓ makeStyles から styled ↓ const classes = useStyles() className={classes.header} を書く必要がなくなった続きを読む →
gatsby-starter-blogに追加したタグの見た目を整える。material-uiのchipコンポーネントMarch 12, 2022編集前の見た目は 主な変更点は、tags.mapの中のの部分をmaterial-uiのコンポーネントに変えた 細部の調整はmaterial-uiのmakeStylesを使用 変更後は見やすくすっきりしました続きを読む →
gatsby-starter-blogのプロジェクトにページネーションをつけるMarch 10, 2022gatsby-starter-blogを使用しています でプラグインを追加 gatsby-node.jsを編集 index.jsをtemplatesフォルダへ移動する src/templates/index.jsを編集 componentフォルダにpagination.jsを追加 Material-uiを使うためあらかじめパッケージをインストール gatsby-config.jsに追加 src…続きを読む →
Githubにpushして更新するとGithub Pagesのカスタムドメインが外れてしまうMarch 09, 2022でページを更新するとGithub PagesのCustom domainの欄が空白になってしまう 調べた結果、 カスタムドメインを入力してSaveを押すとCNAMEというファイルがGithub Pagesに反映されているリポジトリに生成される。これを更新する時に含めなければいけなかった CNAMEはカスタムドメイン名だけが書かれたファイル なので.github/workflow/gh…続きを読む →
