GatsbyJS– category –
-
GatsbyJS
【GatsbyJS製ブログ】Gatsbyの勉強法
このブログでは結構Gatsby関係の記事を書いていて、情報発信をしています。 もちろん自分でもGatsby製ブログの運営をしています! ですが、Gatsbyは日本語の情報が少なく、勉強がしにくいんですよね…。 この記事では、私がどのようにGatsbyを勉強してきた... -
GatsbyJS
【GatsbyJS製ブログ】これだけ!GatsbyにおけるSEO設定一覧!
ブログをやっている人が「SEO」と聞くと、キーワード選定や、見出しタグにキーワードを入れ込んだり、という「検索上位獲得のための手法」が思い浮かびます。 ですが、とりあえずそういう「検索上位獲得のコツ」は置いておきます。 そもそも、そのキーワー... -
GatsbyJS
【GatsbyJS製ブログ】gatsby-plugin-manifestでPWA化
PWA…Progressive Web Apps 「なんのこっちゃ!?」と思う人もいるかもしれませんが、要はWebページをスマホ向けのモバイルアプリのように使えるようになる仕組みです。 キャッシュ機能が働いてオフラインでもWebページを見ることができたり、ホーム画面へ... -
GatsbyJS
【GatsbyJS製ブログ】リッチな内部リンクを作る(useStaticQuery使用)
内部リンクを上手く貼ることは結構重要な作業です。 Googleのクローラーが回遊しやすくなったり、ページ同士の関連性が深まることで評価が上がったり、なにより訪問者の滞在時間の増加に繋がります。 WordPressではテーマによって、内部リンクを枠付きだっ... -
GatsbyJS
【GatsbyJS製ブログ】画像の扱い方(gatsby-plugin-image使用例も)
Gatsbyのウリの一つとして「画像の最適化」があります。 上手く画像指定してあげれば自動的にwebp形式で適切なサイズの表示をしてくれます。 しかし、この画像の最適化はGatsbyの鬼門でもあります。特に動的な画像指定はGraphQLも併用しなければいけないの... -
GatsbyJS
【GatsbyJS製ブログ】Gatsbyでブログを立ち上げるまで
「Gatsby製ブログ」の記事が増えてきたので、まとめておきたいと思います。 実際にGatsbyを使って立ち上げているブログもあわせて見ていただけると嬉しいです。 基本編 インストール、とりあえず立ち上げ、構造把握 特にこの記事で説明している、Gatsby製... -
GatsbyJS
【GatsbyJS製ブログ】Google マップをAPIなしでブログに埋め込む
皆さんはGoogle マップをブログに使っていますか? ブログの種類にもよりますが、マップを使う場面も出てくると思います。 この記事ではGoogle マップをAPIなしでブログに埋め込む方法を説明します。 ちなみに、ここで紹介する方法は全て無料の方法です(... -
GatsbyJS
【GatsbyJS製ブログ】Youtubeの埋め込み(レスポンシブ対応も)
ブログを書いていて「ここにあのYoutubeを埋め込みたい!」もしくは「自分の作ったYoutubeを紹介したい!」ということがあると思います。ちなみに実際Youtubeの埋め込みをしている記事がコチラです。 ということで、今回はGatsbyでつくったブログ記事にYou... -
GatsbyJS
【GatsbyJS製ブログ】パフォーマンス改善
Gatsbyでブログを立ち上げて運営し始めてから、色々とカスタムも加えていきました。 GoogleMapやYoutubeを埋め込んだり、アドセンスやアフィリエイトを埋め込んだり…おかげさまで、なんとなくブログっぽくはなってきました。 そんなある日「そういえば、Ga... -
GatsbyJS
【GatsbyJS製ブログ】MDXを使えるようにする!あと書き方とか!
GatsbyでWebサイトを作るようなときは無理にマークダウン形式(.md)を使う必要はないかな、と思うのですが、ブログであればマークダウン形式で記事をガシガシ書いていく方がいいと思います。 ただ、マークダウンは結構できることが限定的、というかカスタ...