Content-Length: 312905 | pFad | http://b.hatena.ne.jp/sat0ma014/GatsbyJS/
Creating Tags Pages for Blog Posts | Gatsby
Creating tag pages for your blog post is a way to let visitors browse related content. To add tags to your blog posts, you will first want to have your site set up to turn your markdown pages into blog posts. To get your blog pages set up, see the tutorial on Gatsby’s data layer and Adding Markdown Pages. The process will essentially look like this: Add tags to your markdown filesWrite a query to
Gatsbyにタグ機能、カテゴリ機能をつける（基礎編） - Qiita
はじめに 本記事は https://tech-blog.yoshikiohashi.dev/posts/start-gatsby-blog-add-tags のクロスポスト記事になります。 この記事はGatsbyというヘッドレスCMS技術で構成されています。今回は「エンジニア初心者でもできる」を前提に以下の構成で記事を作成していこうと思います。 Gatsby始めるまで GatsbyにShare機能、OGPタグをつける タグ機能、カテゴリ機能をつける（基礎編） タグ機能、カテゴリ機能をつける（応用編） GatsbyにTableOfContents（目次）をつける DarkModeをつける 内容 今回はWordPressのタグ機能、カテゴリ機能に当たる部分を実装していきます。標準で実装されてないの？！って突っ込みはあるかと思いますが、そうです。標準のテンプレートでは実装されておりません。なので
Gatsbyプラグイン45選 - Qiita
なにこれ React.js製の静的サイトジェネレーター Gatsbyは、プラグインを使って簡単に機能拡張できる仕組みを持っています。公式プラグインとコミュニティ提供のものをあわせると、なんと502個もあるそうです。今回はその中でも、おすすめ45個をユースケース別にご紹介します。 ※ 本記事はブログの転記です。Qiitaで使えない機能（コードブロックの指定行強調表示など）の表示結果はスクリーンキャプチャにしています。HTMLでの表示結果を見たい場合はブログをご覧ください。 ユースケース別目次 ※クリックすると説明セクションにとべます。 マークダウン系 コードブロックでシンタックスハイライトする コードブロックにタイトルを追加する 見出しにGitHub風ホバーリンクをつける 絵文字を使う Graphvizでグラフを描画する 数式を使う コードブロックにJavaSriptファイルなどを埋め込む
Gatsbyプラグイン45選 | Gatsby Starter Qiita
なにこれ React.js製の静的サイトジェネレーター Gatsbyは、プラグインを使って簡単に機能拡張できる仕組みを持っています。公式プラグインとコミュニティ提供のものをあわせると、なんと502個もあるそうです。今回はその中でも、おすすめ45個をユースケース別にご紹介します。 ※ 本記事はブログの転記です。Qiitaで使えない機能（コードブロックの指定行強調表示など）の表示結果はスクリーンキャプチャにしています。HTMLでの表示結果を見たい場合はブログをご覧ください。 ユースケース別目次 ※クリックすると説明セクションにとべます。 マークダウン系 コードブロックでシンタックスハイライトする コードブロックにタイトルを追加する 見出しにGitHub風ホバーリンクをつける 絵文字を使う Graphvizでグラフを描画する 数式を使う コードブロックにJavaSriptファイルなどを埋め込む
SPA（Gatsby）を使い、Google OptimizeでA/Bテストをする方法 - Qiita
Google Optimizeの準備をする オプティマイズスニペットと、アンチフリッカースニペットを、gatsby-ssr.jsに記載して、Google Optimizeを使う準備をします。 Gatsbyならプラグインがありますが、Optimizeから警告が出たので、直接コードを埋め込みます。 import React from 'react'; export const onRenderBody = ({ setHeadComponents }) => { if (process.env.NODE_ENV === `production`) { setHeadComponents([ // オプティマイズスニペット <script async src="https://www.googletagmanager.com/gtag/js?id=UA-........."></script>,
Gatsby, TypeScript, Emotion, Tailwind, MDXでブログを作っている - Qiita
Gatsby, TypeScript, Emotion, Tailwind, MDXでブログを作っているTypeScriptMDXemotiongatsbytailwindcss この記事はGatsby.js Advent Calendar 2019 23日目の記事です。 2時間ぐらい納期過ぎました。すみません。 次の記事は@kazuooooo さんの まるで名刺のようなポートフォリオサイトを作れるCardfolio!を公開しました！ です。 これは フロントエンド職に就きたいのでReact, TypeScriptの勉強にGatsbyでブログを作ってみた記事です。 ブログがどんな感じで作られてるのか、ライブラリ, プラグイン, ツールの紹介も交えながらかんたんに解説していきます。 動いてる実物はここから見れます。ソースはここです。 使うもの Gatsby TypeScript スタイリング
GatsbyJSで作っているブログでリッチなリンクを貼れるようにした
モチベーションアプリやサービスを紹介する際にURLだけだと味気がないので、OGPの情報を拾ってきて、リンク先のタイトルや画像が表示されるようにしたかったnoteとかでよく見るやつできあがったもの Bear - プライベートメモ Bearは、ライター／弁護士／シェフ／教師／エンジニア／学生や保護者などのさまざまなユーザーによって利用されている自由なメモアプリです。 Bearは、素早い整理機能・編集ツール・エクスポート機能を備えているため、素早く書いてどこでも共有することができます。また、暗号化によってプライバシーを保護します。 2017 Apple デザインアワード 2016 年 App Store アプリオブ・ザ・イヤー 「Bear は、私が一番気に入っている執筆アプリ」- Kit Eaton, New York Times 柔軟かつシンプルなツールで*自由に書きましょう* Bear
GatsbyJS + GhostでJamstackなブログを作成する - hiro08gh
こんにちはかみむらです。個人的な肌感で、Jamstackアーキテクチャーの構成でWEBサイトを公開する企業が増えてきた気がします。最近では日本製Headless CMS「microCMS」も登場して、だいぶ日本でも採用しやすい環境が整ってきました。 私もJamstackアーキテクチャー推しな一人なので、現在色々な構成で試作をしています。 Webサイト高速化のための 静的サイトジェネレーター活用入門 (Compass Booksシリーズ) 作者:エビスコム発売日: 2020/06/01メディア: Kindle版 今回は、Ghostのブログ記事に触発されて、GatsbyJS + Ghostの構成をローカルで動かしてみます。GhostはNode.js製のヘッドレスCMSで、オープンソースで公開されています。Ghostの環境はDockerで準備します。 ghost.org Jamstackアーキテ
GatsbyとNetlifyで簡単にブログを作成 - Qiita
概要 Gatsbyのスターターと、Netlifyを使用して誰でも5分で爆速ブログを作成する方法を紹介します。 記事内ではこちらのブログをデプロイまで行います。 Gatsbyとは？ Gatsbyに関してはこの方の記事でとても良く説明されています。 Reactベース静的サイトジェネレータGatsbyの真の力をお見せします - Qiita Gatsbyのインストール Gatsbyがインストールされていない場合は以下のコマンドでインストールしましょう。 ブログの作成 以下のコマンドでブログを作成します。 my-blogの部分でブログの名前を指定します。 https://github.com/gatsbyjs/gatsby-starter-blogの箇所は使用するスターターを指定します。 こちらから好きなデザインを選ぶ事が可能です。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Fetched URL: http://b.hatena.ne.jp/sat0ma014/GatsbyJS/
Alternative Proxies:
[Gatsbyで構築] サブディレクトリで公開する簡単な方法 | ushiyaDevLog![[Gatsbyで構築] サブディレクトリで公開する簡単な方法 | ushiyaDevLog](https://images.weserv.nl/?url=https%3A%2F%2Fcdn-ak-scissors.b.st-hatena.com%2Fimage%2Fsquare%2F66b20746f2c05c292f0d9b2355c01414a81575e1%2Fheight%3D288%3Bversion%3D1%3Bwidth%3D512%2Fhttps%253A%252F%252Fblog.ushiya.net%252Fwp-content%252Fuploads%252F2020%252F01%252FGatsby_Monogram.png&q=12&output=webp&max-age=110)
GatsbyJSでTypeScriptを使う方法
GitHub - geocine/gatsby-source-dev: Gatsby source plugin that fetches user articles from Dev.to
gatsby-source-dev | Gatsby
GitHub - catnose99/CatKnows: Personal blog powered by Gatsby.js.
Gatsbyを最速で理解するためのチュートリアル - Qiita
GatsbyJSで作っているブログで gatsby-remark-component を使うのを止めて、 gatsby-plugin-mdx を導入した