gatsby-plugin-page-transitionsはv2対応してないのでビルドが通らない

gatsbyのページ遷移アニメーションをつけるプラグインgatsby-plugin-page-transitionsは廃止されたAPIを使用しているのでgatsby buildコマンドでのビルドが通りません。(gatsby developは通ります。)

Netlifyにもデプロイできないので使うのをやめました。ちなみにエラーメッセージは以下の通りです。

error 
Your plugins must export known APIs from their gatsby-browser.js.
The following exports aren't APIs. Perhaps you made a typo or your plugin is outdated?

See https://www.gatsbyjs.org/docs/browser-apis/ for the list of Gatsby Browser APIs

- The plugin "gatsby-plugin-page-transitions@1.0.7" is exporting a variable named "replaceHistory" which isn't an API.

Gatsbyで作ったサイトをGoogle Search Consoleに登録する

サイトをGoogle Search Console(サーチコンソール)に登録する場合、適切なGoogle Analyticsタグが入っていればすぐに登録できます。しかし、Gatsbyで制作したサイトにgatsby-plugin-google-analyticsでGoogle Analyticsのタグを入れている場合うまく登録できませんでした。

今回はGoogle Analyticsのタグを使わずにSearch Consoleに登録する方法を試してみました。

続きを読む

gatsby-plugin-sitemapを使う

Gatsby.jsでサイトマップを作成するプラグインgatsby-plugin-sitemapの設定方法です。

続きを読む

GitUpでuser.nameやuser.emailに関するエラーが発生する場合の対策

GitUpでCommitする際にuser.nameやuser.emailのエラーが出ることがあります。gitで名前やEmailを設定していないためです。以下のコマンドでこれらの値を設定できます。

続きを読む

WordPressでシンタックスハイライトするのにPrismを使う

元々プラグインでシンタックスハイライトさせていたのですが、動作が重かったり表示が一昔前っぽくなってしまうのでモダンな表示になるものを探していました。今回はPrismを使って記事中のコードのシンタックスハイライトをさせてみることにしました。Prismを使ったプラグインもあるようですが今回はプラグインを使わずテーマに組み込みました。

Prismで対応している言語のリストはこちらです。大抵の言語はカバーできています。 続きを読む

Gatsbyでfaviconを変更する方法

Gatsbyでページを作成するとデフォルトのfaviconが割り当てられているので、これを自作のfaviconに変更しました。

faviconはブラウザのタブなどに表示されるアイコンです。

続きを読む

gatsby-imageで画像を表示する方法

Gatsbyを使って画像を表示する方法です。dev.toに参考になる記事があったのでこちらをもとに設定しました。

続きを読む

githubにプッシュする際Permission denied (publickey)エラーが出る場合の対策

githubのリポジトリにpushする際に公開鍵に関するエラーが出てpushできなかったのでメモしておきます。

Pushing to git@github.com:ユーザー名/リポジトリ名.git
Permission denied (publickey).
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.

githubの公開鍵設定の項目を読んで以下の設定を試しました。

~/.ssh/config の設定を以下に設定するとpushできました。

Host *
 AddKeysToAgent yes
 UseKeychain yes
 IdentityFile ~/.ssh/id_rsa

私の場合はconfigの設定を自分でカスタマイズしていたのがエラーの原因になっていたようです。

Coreserverでwww付きURLをwwwなしのURLに301リダイレクトするための.htaccessの書き方

Coreserverでwww付きURLからwwwなしのURLのページに301リダイレクトする際の.htaccessファイルの書き方です。

下記のスクリプトを記述して.htaccessという名前で転送元のドメインのトップディレクトリに設置します。
example.comをご自身のURLに変更してください。

RewriteEngine On
RewriteCond %{HTTP_HOST} ^www\.example\.com$
RewriteRule ^(.*)$ http://expamle.com/$1 [R=301,L]

Internet Explorer 11でwidthを設定したTableの横幅が適用されない現象の対策

Internet Explorer 11でTableのwidthをCSSで設定しているにもかかわらず横幅が無視されてレイアウトが崩れる現象の対応策をメモしておきます。

TableタグのCSSプロパティーのtable-layoutをfixedにします。

/*Tableタグのクラスが.tableの場合*/
.table {
width: 1000px;
table-layout: fixed;
}