6 posts tagged with gatsbyjs

  • GatsbyにTransitionをつけてみた

    このブログのページ遷移にTransitionをつけてみました。 色々やってみましたが、カクつくので だけにしました。 やり方は後日。

  • [要注意]Bulma 0.5.2で突如cssnextのvariablesが入った

    このサイトでは CSSフレームワークの Bulma: a modern CSS framework based on Flexbox を使用しているのですが、先日リリースされた 0.5.2 にアップデートしたところ、 というWARNINGが大量に出るようになりました。gatsbyの仕様でブラウザ側にも赤い文字で 派手に表示されるのでとてもウルサイ。 問題のコード cssnextの変数(variables)である がありますね。 cssnextの現在の仕様は に variables...

  • GatsbyでGoogle Analyticsを設定する

    これは簡単でした。 もうREADME通りなのですが、 gatsby - plugin - google - analytics をインストールします。 次に に設定を追記します。 これだけで適用されます。簡単。ちなみに、ローカルでの稼働時(developモード) にはAnalyticsのコードは挿入されず、ビルドすることでAnalyticsが有効なコード が出力されます。ここがわからなくて最初「ん?」となりましたが、S3にデプロイ したら有効になりました。

  • GatsbyにコードハイライトのPrismを導入する

    プラグイン を入れます。 インストール 設定 を編集。 のオプションに追記します。 オプションの はコードブロックの言語指定時のクラス名の頭につく文字列です。 例えば ` ` ` js だったら になります。 css 追記 公式にも書いていますが Gatsbyでは行単位のハイライトにPrismの機能を使っていないので、スタイルの追記が必要に なります。以下のような(色などは自分で変える)スタイルを追加します。 行番号の出し方がわかりませんでした。

  • GatsbyでBulmaを使う

    GatsbyでBulmaを使います。他のsassベースのフレームワークも同じ手順でいけると思います。 gatsby-plugin-postcss-sass を導入する gatsby-config.js Bulmaをインストールする 現時点で v0.5.1 ですね scssファイルを作成 色々やり方はあると思いますが、 というファイルに以下の記述をしました (拡張子がcssだとsassとして認識されないので注意) は各種sass/scssの変数定義です。この書き方は Bulma...

  • ブログをGatsbyに移行しました - とりあえず動かすところまで

    ブログをGatsbyに移行しました。 やったことまとめ starterを使いました とりあえず starter の見た目のままです を確認すると結構バージョンが上がっているのでアップデートしちゃいます(要注意) この記事を書いている時点で以下のようにバージョンが上がりました。 記事を追加するためのコマンドも入れます。これは Gatsby...

All tags