tag:crieit.net,2005:https://crieit.net/tags/%E3%83%96%E3%83%AD%E3%82%AC%E3%83%BC%E5%90%91%E3%81%91Gatsby%E8%AC%9B%E5%BA%A7/feed
「ブロガー向けGatsby講座」の記事 - Crieit
Crieitでタグ「ブロガー向けGatsby講座」に投稿された最近の記事
2019-02-09T11:28:59+09:00
https://crieit.net/tags/%E3%83%96%E3%83%AD%E3%82%AC%E3%83%BC%E5%90%91%E3%81%91Gatsby%E8%AC%9B%E5%BA%A7/feed
tag:crieit.net,2005:PublicArticle/14789
2019-02-09T11:28:59+09:00
2019-02-09T11:28:59+09:00
https://crieit.net/posts/GatsbyJs-Sitemap
GatsbyJsでSitemapを使う
<h2 id="GatsbyJSでgatsby-plugin-sitemapを使う"><a href="#GatsbyJS%E3%81%A7gatsby-plugin-sitemap%E3%82%92%E4%BD%BF%E3%81%86">GatsbyJSでgatsby-plugin-sitemapを使う</a></h2>
<p>GatsbyJSでGoogleにSiteMapを作成して登録したかったのでプラグインgatsby-plugin-sitemapを実装してみた。</p>
<h2 id="GatsbyJSでgatsby-plugin-sitemapの使い方"><a href="#GatsbyJS%E3%81%A7gatsby-plugin-sitemap%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9">GatsbyJSでgatsby-plugin-sitemapの使い方</a></h2>
<ul>
<li>インストール</li>
<li>Gatsby-config.jsのセッティング</li>
<li>サンプルコード</li>
</ul>
<h2 id="Styled Componentsのインストール"><a href="#Styled+Components%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB">Styled Componentsのインストール</a></h2>
<p>npmコマンドでインストールします。</p>
<pre><code>npm install --save gatsby-plugin-sitemap
</code></pre>
<h2 id="Gatsby-config.jsのセッティング"><a href="#Gatsby-config.js%E3%81%AE%E3%82%BB%E3%83%83%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0">Gatsby-config.jsのセッティング</a></h2>
<p>Gatsby Config.jsを以下のようにします。</p>
<pre><code>module.exports = {
siteMetadata: {
siteUrl: `https://www.example.com`,
},
plugins: [`gatsby-plugin-sitemap`],
}
</code></pre>
<h2 id="動作確認"><a href="#%E5%8B%95%E4%BD%9C%E7%A2%BA%E8%AA%8D">動作確認</a></h2>
<pre><code>gatsby build
</code></pre>
<p>で確認すると</p>
<p>Publicフォルダを確認してみるとsitemap.xmlが出来ている。</p>
<p>サーチコンソールからサイトマップを追加してみるとエラーゼロで完成している。</p>
aocory
tag:crieit.net,2005:PublicArticle/14788
2019-02-08T18:05:29+09:00
2019-02-08T22:41:17+09:00
https://crieit.net/posts/GatsbyJS-Styled-Components
GatsbyJSでStyled Componentsを使う
<h2 id="GatsbyJSでStyled Componentsを使う"><a href="#GatsbyJS%E3%81%A7Styled+Components%E3%82%92%E4%BD%BF%E3%81%86">GatsbyJSでStyled Componentsを使う</a></h2>
<p>GatsbyJSでCSSモジュールを用いたスタイリングもいいが、CSSinJSで書いたほうが便利そうということでStyled Componentsを使ってみた。</p>
<h2 id="GatsbyJSでStyled Componentsの使い方"><a href="#GatsbyJS%E3%81%A7Styled+Components%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9">GatsbyJSでStyled Componentsの使い方</a></h2>
<ul>
<li>インストール</li>
<li>Gatsby-config.jsのセッティング</li>
<li>サンプルコード</li>
</ul>
<h2 id="Styled Componentsのインストール"><a href="#Styled+Components%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB">Styled Componentsのインストール</a></h2>
<p>npmコマンドでインストールします。</p>
<pre><code>npm install --save gatsby-plugin-styled-components styled-components babel-plugin-styled-components
</code></pre>
<h2 id="Gatsby-config.jsのセッティング"><a href="#Gatsby-config.js%E3%81%AE%E3%82%BB%E3%83%83%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0">Gatsby-config.jsのセッティング</a></h2>
<p>Gatsby Config.jsを以下のようにします。</p>
<pre><code>module.exports = {
plugins: [`gatsby-plugin-styled-components`],
}
</code></pre>
<h2 id="書き直す"><a href="#%E6%9B%B8%E3%81%8D%E7%9B%B4%E3%81%99">書き直す</a></h2>
<p>index.jsはこのように書き直せます。</p>
<pre><code>import React from 'react'
import { Link } from 'gatsby'
import styled from 'styled-components'
import Layout from '../components/layout'
import Image from '../components/image'
const ImgWrapper = styled.div`
max-width: 300px;
margin-bottom: 1.45rem;
`
const IndexPage = () => (
<Layout>
<h1>Hi people</h1>
<p>Welcome to your new Gatsby site.</p>
<p>Now go build something great.</p>
<ImgWrapper>
<Image />
</ImgWrapper>
<Link to="/page-2/">Go to page 2</Link>
</Layout>
)
export default IndexPage
</code></pre>
<p>header.jsは、このように書き直すことができます。</p>
<pre><code>import React from 'react'
import { Link } from 'gatsby'
import styled from 'styled-components'
const HeaderWrapper = styled.div`
background: rebeccapurple;
margin-bottom: 1.45rem;
`
const Headline = styled.div`
margin: 0 auto;
max-width: 960;
padding: 1.45rem 1.0875rem;
h1 {
margin: 0;
}
`
const StyledLink = styled(Link)`
color: white;
textdecoration: none;
`
const Header = ({ siteTitle }) => (
<HeaderWrapper>
<Headline>
<h1>
<StyledLink to="/">{siteTitle}</StyledLink>
</h1>
</Headline>
</HeaderWrapper>
)
export default Header
</code></pre>
<h3 id="使ってみた感想"><a href="#%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%81%9F%E6%84%9F%E6%83%B3">使ってみた感想</a></h3>
<p>かなりStyled Components便利!一長一短ありますが、スコープ効いて名前が長くならないのはいいですね。</p>
aocory
tag:crieit.net,2005:PublicArticle/14781
2019-02-05T18:18:45+09:00
2019-02-05T18:18:45+09:00
https://crieit.net/posts/GatsbyJs-Font-Typeface
GatsbyJsでFontを変更するTypeface編
<h2 id="GatsbyJSでFontを変更したい"><a href="#GatsbyJS%E3%81%A7Font%E3%82%92%E5%A4%89%E6%9B%B4%E3%81%97%E3%81%9F%E3%81%84">GatsbyJSでFontを変更したい</a></h2>
<p>以前、gatsby-plugin-typographyで対応する方法を検討した。<br />
しかし、Noto Sans JPなどのフォントを使う時はGoogleフォントを読み込んでしまい、パフォーマンスが落ちるのが気になった。</p>
<h2 id="Typefaceを使う"><a href="#Typeface%E3%82%92%E4%BD%BF%E3%81%86">Typefaceを使う</a></h2>
<p>そこで、Gtasbyでは最近Typefaceを推奨している。<br />
npmでインストールしてimportで読み込む仕組みでこっちのほうが早いらしい。<br />
早速使ってみた。</p>
<ul>
<li>Typefaceのインストール</li>
<li>Layout.jsにインポート</li>
<li>css設定</li>
</ul>
<h3 id="Typefaceのインストール"><a href="#Typeface%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB">Typefaceのインストール</a></h3>
<p>今回はlatoというFontをインストールしてみる。</p>
<pre><code>npm install --save typeface-lato
</code></pre>
<h3 id="Layout.jsにインポート"><a href="#Layout.js%E3%81%AB%E3%82%A4%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%88">Layout.jsにインポート</a></h3>
<p>インストール出来たらLayout.jsにインポートする</p>
<pre><code>import 'typeface-lato'
</code></pre>
<p>これだけではFontは動かないCSSの設定が必要になる。</p>
<h3 id="CSSに記載"><a href="#CSS%E3%81%AB%E8%A8%98%E8%BC%89">CSSに記載</a></h3>
<p>CSSに記載する。</p>
<pre><code> { font-family: Lato }
</code></pre>
<p>これで動く。</p>
aocory
tag:crieit.net,2005:PublicArticle/14778
2019-02-04T08:55:55+09:00
2019-02-04T08:55:55+09:00
https://crieit.net/posts/GatsbyJs-Webpack
GatsbyJsでWebpackバンドルサイズを確認する
<h2 id="GatsbyJsでWebpackバンドルサイズを確認する"><a href="#GatsbyJs%E3%81%A7Webpack%E3%83%90%E3%83%B3%E3%83%89%E3%83%AB%E3%82%B5%E3%82%A4%E3%82%BA%E3%82%92%E7%A2%BA%E8%AA%8D%E3%81%99%E3%82%8B">GatsbyJsでWebpackバンドルサイズを確認する</a></h2>
<p>当たり前だがAdSenseを入れるとサイト遅くなった。<br />
原因を探るため我々はGatsbyJsを良い感じにしてくれているWebPackの奥地に向かった。と言えば簡単なのだが<br />
WebPackは魔境だ。僕みたいな素人が触っても火傷するだけ。ということでパッケージを探した。</p>
<h2 id="gatsby-plugin-webpack-bundle-analyzerを使う"><a href="#gatsby-plugin-webpack-bundle-analyzer%E3%82%92%E4%BD%BF%E3%81%86">gatsby-plugin-webpack-bundle-analyzerを使う</a></h2>
<p>gatsby-plugin-webpack-bundle-analyzerというプラグインが便利そうだ。<br />
+ gatsby-plugin-webpack-bundle-analyzerのインストール<br />
+ gatsby-config.jsの設定<br />
+ 確認</p>
<h2 id="gatsby-plugin-webpack-bundle-analyzerのインストール"><a href="#gatsby-plugin-webpack-bundle-analyzer%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB">gatsby-plugin-webpack-bundle-analyzerのインストール</a></h2>
<pre><code>npm install --save gatsby-plugin-webpack-bundle-analyzer
</code></pre>
<h2 id="gatsby-config.jsの設定"><a href="#gatsby-config.js%E3%81%AE%E8%A8%AD%E5%AE%9A">gatsby-config.jsの設定</a></h2>
<p>gatsby-config.jsの設定を追加してやる</p>
<pre><code>plugins: [
'gatsby-plugin-webpack-bundle-analyzer',
]
</code></pre>
<h2 id="確認"><a href="#%E7%A2%BA%E8%AA%8D">確認</a></h2>
<pre><code>gatsby develop
</code></pre>
<p>で自動的にブラウザに表示される。<br />
ただ、毎回起動されるのはウザいので使わないときはコメントアウト推奨。</p>
aocory
tag:crieit.net,2005:PublicArticle/14774
2019-01-31T16:14:42+09:00
2019-01-31T16:14:42+09:00
https://crieit.net/posts/GatsbyJS-Static
GatsbyJSでStaticにファイルを置く
<h2 id="Staticファイルを置きたい"><a href="#Static%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E7%BD%AE%E3%81%8D%E3%81%9F%E3%81%84">Staticファイルを置きたい</a></h2>
<p>Gatsbyはイメージファイルなどは自動で圧縮してくれるし、リサイズもしてくれるデキるやつです。<br />
しかし、PWAにサイトをしたり、ソーシャルアイコンのイメージ画像を扱う時は/img/logo.pngなどのようにファイルを扱いたいです。そこでやり方を調べました。</p>
<h2 id="GatsbyJSでStaticにファイルを置く方法"><a href="#GatsbyJS%E3%81%A7Static%E3%81%AB%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E7%BD%AE%E3%81%8F%E6%96%B9%E6%B3%95">GatsbyJSでStaticにファイルを置く方法</a></h2>
<ul>
<li>rootディリクトリにstaticフォルダーを作成</li>
<li>staticにファイルを置く</li>
<li>withPrefixを読み込むコンポーネントに記載</li>
<li>gatsby-config.jsに変更</li>
</ul>
<h2 id="rootディリクトリにstaticフォルダーを作成"><a href="#root%E3%83%87%E3%82%A3%E3%83%AA%E3%82%AF%E3%83%88%E3%83%AA%E3%81%ABstatic%E3%83%95%E3%82%A9%E3%83%AB%E3%83%80%E3%83%BC%E3%82%92%E4%BD%9C%E6%88%90">rootディリクトリにstaticフォルダーを作成</a></h2>
<p>/blog/static/imgを作成します。</p>
<h2 id="staticにファイルを置く"><a href="#static%E3%81%AB%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E7%BD%AE%E3%81%8F">staticにファイルを置く</a></h2>
<p>/static/img/logo.pngを今回は作成します。</p>
<h2 id="withPrefixを読み込むコンポーネントに記載"><a href="#withPrefix%E3%82%92%E8%AA%AD%E3%81%BF%E8%BE%BC%E3%82%80%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%81%AB%E8%A8%98%E8%BC%89">withPrefixを読み込むコンポーネントに記載</a></h2>
<p>staticファイルを読み込むにはwithPrefixの記載が必要です。</p>
<pre><code>import { withPrefix } from 'gatsby'
render() {
return <img src={withPrefix('/img/logo.png')} alt="Logo" />;
}
</code></pre>
<h2 id="gatsby-config.jsに変更"><a href="#gatsby-config.js%E3%81%AB%E5%A4%89%E6%9B%B4">gatsby-config.jsに変更</a></h2>
<pre><code>module.exports = {
pathPrefix: `/img`,
}
</code></pre>
<p>注意"/img/"と記載してはいけません。</p>
<h2 id="確認"><a href="#%E7%A2%BA%E8%AA%8D">確認</a></h2>
<p><img src="https://frosty-wozniak-d3bb12.netlify.com/img/logo.png" alt="logo.png" /><br />
できた!</p>
aocory
tag:crieit.net,2005:PublicArticle/14761
2019-01-30T11:24:33+09:00
2019-01-30T11:24:33+09:00
https://crieit.net/posts/GatsbyJS-Google-AdSense
GatsbyJSにGoogle AdSenseを導入する
<h2 id="GatsbyJSにAdSenseを導入する。"><a href="#GatsbyJS%E3%81%ABAdSense%E3%82%92%E5%B0%8E%E5%85%A5%E3%81%99%E3%82%8B%E3%80%82">GatsbyJSにAdSenseを導入する。</a></h2>
<p>ブログをやる以上ドメイン代金くらいは稼ぎたい。そこでGoogle AdSenseをGatsbyに導入する。</p>
<h2 id="やったこと"><a href="#%E3%82%84%E3%81%A3%E3%81%9F%E3%81%93%E3%81%A8">やったこと</a></h2>
<ul>
<li>react-adsenseの導入</li>
<li>html.jsの作成</li>
<li>コンポーネントを作成</li>
<li>アップロードして確認</li>
</ul>
<h2 id="react-adsenseの導入"><a href="#react-adsense%E3%81%AE%E5%B0%8E%E5%85%A5">react-adsenseの導入</a></h2>
<p>GatsbyでGoogleAdSenseを導入するときはreact-adsenseが便利です。</p>
<pre><code>npm install --save react-adsense
</code></pre>
<h2 id="html.jsの作成"><a href="#html.js%E3%81%AE%E4%BD%9C%E6%88%90">html.jsの作成</a></h2>
<p>GatsbyJSでは<code><script></code>タグをヘッダーに入れる場合はhtml.jsを作成し入れる必要がある。<br />
/.cache/default-html.jsを/src/html.jsにコピーする。</p>
<pre><code>cp .cache/default-html.js src/html.js
</code></pre>
<h2 id="コンポーネントを作成"><a href="#%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%82%92%E4%BD%9C%E6%88%90">コンポーネントを作成</a></h2>
<p>再利用することを見越してコンポーネントを作成する。<br />
/components/Ad/index.js</p>
<pre><code>import React from "react";
import AdSense from 'react-adsense'
const Ad = () => (
<div>
<AdSense.Google
client="ca-pub-数字"
slot="数字"
format="rectangle"
/>
</div>
)
export default Ad;
</code></pre>
<h2 id="確認"><a href="#%E7%A2%BA%E8%AA%8D">確認</a></h2>
<p><a href="https://crieit.now.sh/upload_images/b9ea838a8b4e1eaf357182ed160879ea5c510aaf03e03.jpg" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/b9ea838a8b4e1eaf357182ed160879ea5c510aaf03e03.jpg?mw=700" alt="024-1.jpg" /></a></p>
aocory
tag:crieit.net,2005:PublicArticle/14757
2019-01-28T23:45:36+09:00
2019-01-28T23:45:36+09:00
https://crieit.net/posts/GatsbyJS-Google-Analytics
GatsbyJSにGoogle Analyticsを導入する
<h2 id="GatsbyJSにGoogle Analyticsを導入する"><a href="#GatsbyJS%E3%81%ABGoogle+Analytics%E3%82%92%E5%B0%8E%E5%85%A5%E3%81%99%E3%82%8B">GatsbyJSにGoogle Analyticsを導入する</a></h2>
<p>Google Analyticsを導入するにはどうすればいいのか?<br />
Gatsbyならgatsby-plugin-google-analyticsで簡単に実装できます。</p>
<h2 id="やったこと"><a href="#%E3%82%84%E3%81%A3%E3%81%9F%E3%81%93%E3%81%A8">やったこと</a></h2>
<ul>
<li>gatsby-plugin-google-analyticsインストール</li>
<li>gatsby-config.jsを設定</li>
<li>siteConfig.jsを設定</li>
</ul>
<h2 id="gatsby-plugin-google-analytics"><a href="#gatsby-plugin-google-analytics">gatsby-plugin-google-analytics</a></h2>
<p>まずは、gatsby-plugin-google-analyticsをnpmでインストールします。</p>
<pre><code>npm install --save gatsby-plugin-google-analytics
</code></pre>
<h2 id="gatsby-config.js"><a href="#gatsby-config.js">gatsby-config.js</a></h2>
<p>次にgatsby-config.jsを設定します。<br />
/data/siteConfig.jsにデータはまとめて管理する仕様にしているのでsiteConfig.jsをちゃんと読み込むようにしましょう。</p>
<pre><code>const config = require("./data/siteConfig");
module.exports = {
plugins: [
{
resolve: "gatsby-plugin-google-analytics",
options: {
trackingId: config.googleAnalyticsID
}
},
],
}
</code></pre>
<h2 id="siteConfig.js"><a href="#siteConfig.js">siteConfig.js</a></h2>
<p>siteConfig.jsは以下のように設定します。</p>
<pre><code>googleAnalyticsID: "UA-XXXXXXX-X", // GA tracking ID.
</code></pre>
<h2 id="GoogleAnalyticsを確認する。"><a href="#GoogleAnalytics%E3%82%92%E7%A2%BA%E8%AA%8D%E3%81%99%E3%82%8B%E3%80%82">GoogleAnalyticsを確認する。</a></h2>
<p><a target="_blank" rel="nofollow noopener" href="https://analytics.google.com/">Google Analytics</a>で確認してみましょう。</p>
aocory
tag:crieit.net,2005:PublicArticle/14754
2019-01-28T15:53:21+09:00
2019-01-28T22:47:45+09:00
https://crieit.net/posts/GatsbyJS-5c4ea6e13be5d
GatsbyJSにソーシャルボタンを追加する
<h2 id="GatsbyJSにソーシャルボタンを追加する"><a href="#GatsbyJS%E3%81%AB%E3%82%BD%E3%83%BC%E3%82%B7%E3%83%A3%E3%83%AB%E3%83%9C%E3%82%BF%E3%83%B3%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B">GatsbyJSにソーシャルボタンを追加する</a></h2>
<p>ソーシャルボタンを追加したい!と思ったのでGatsbyJSで追加しました。</p>
<h2 id="やったこと"><a href="#%E3%82%84%E3%81%A3%E3%81%9F%E3%81%93%E3%81%A8">やったこと</a></h2>
<ul>
<li>react-share導入</li>
<li>シェアボタンコンポーネントの作成</li>
<li>SiteConfigの追加</li>
<li>テンプレートの変更</li>
</ul>
<h1 id="react-shareの導入"><a href="#react-share%E3%81%AE%E5%B0%8E%E5%85%A5">react-shareの導入</a></h1>
<p>react-shareは、react向けの便利なライブラリです。<br />
対応しているSNSは、<br />
+ Facebook<br />
+ Twitter<br />
+ Telegram<br />
+ Google+<br />
+ Whatsapp<br />
+ LinkedIn<br />
+ Pinterest<br />
+ VK<br />
+ Odnoklassniki<br />
+ Reddit<br />
+ Tumblr<br />
+ Mail.Ru<br />
+ LiveJournal<br />
+ Viber<br />
+ Workplace<br />
+ Line<br />
+ Weibo<br />
+ email<br />
と非常に多いです。</p>
<pre><code>npm install react-share --save
</code></pre>
<h2 id="シェアボタンコンポーネントの作成"><a href="#%E3%82%B7%E3%82%A7%E3%82%A2%E3%83%9C%E3%82%BF%E3%83%B3%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%81%AE%E4%BD%9C%E6%88%90">シェアボタンコンポーネントの作成</a></h2>
<p>/component/Share/index.jsをつくります。</p>
<pre><code>import React, { Component } from "react";
import {
FacebookShareButton,
TwitterShareButton,
FacebookIcon,
TwitterIcon,
LineShareButton,
LineIcon
} from "react-share";
import urljoin from "url-join";
import config from "../../../data/SiteConfig";
import "./SocialLinks.css";
class Share extends Component {
render() {
const { postNode, postPath, mobile } = this.props;
const post = postNode.frontmatter;
const url = urljoin(config.siteUrl, postPath);
const iconSize = mobile ? 36 : 48;
return (
<div className="social-links">
<TwitterShareButton url={url} title={post.title}>
<TwitterIcon round size={iconSize} />
</TwitterShareButton>
<FacebookShareButton url={url} quote={postNode.excerpt}>
<FacebookIcon round size={iconSize} />
</FacebookShareButton>
<LineShareButton url={url} quote={postNode.excerpt}>
<LineIcon round size={iconSize} />
</LineShareButton>
</div>
);
}
}
export default Share;
</code></pre>
<h1 id="SiteConfigの追加"><a href="#SiteConfig%E3%81%AE%E8%BF%BD%E5%8A%A0">SiteConfigの追加</a></h1>
<p>続いてsiteConfig.jsの変更を行います。<br />
siteUrlを追記</p>
<pre><code>const siteConfig = {
siteUrl: "https://corylog.com",
}
module.exports = siteConfig;
</code></pre>
<h2 id="テンプレートの変更"><a href="#%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%81%AE%E5%A4%89%E6%9B%B4">テンプレートの変更</a></h2>
<pre><code>import React from 'react'
import { Link, graphql } from 'gatsby'
import Layout from '../components/Layout'
import SEO from '../components/seo'
import rehypeReact from "rehype-react"
import Sample from "../components/Sample"
import Share from '../components/Share';
const renderAst = new rehypeReact({
createElement: React.createElement,
components: { "sample": Sample }
}).Compiler
class BlogPostTemplate extends React.Component {
render() {
const { slug } = this.props.pageContext;
const post = this.props.data.markdownRemark
const siteTitle = this.props.data.site.siteMetadata.title
const { previous, next } = this.props.pageContext
return (
<Layout location={this.props.location} title={siteTitle}>
<SEO title={post.frontmatter.title} description={post.excerpt} />
<h1>{post.frontmatter.title}</h1>
<p>
{post.frontmatter.date}
</p>
<div>{renderAst(post.htmlAst)}</div>
<hr/>
<ul>
<li>
{previous && (
<Link to={previous.fields.slug} rel="prev">
← {previous.frontmatter.title}
</Link>
)}
</li>
<li>
{next && (
<Link to={next.fields.slug} rel="next">
{next.frontmatter.title} →
</Link>
)}
</li>
</ul>
<Share postPath={slug} postNode={post} />
</Layout>
)
}
}
export default BlogPostTemplate
export const pageQuery = graphql`
query BlogPostBySlug($slug: String!) {
site {
siteMetadata {
title
author
}
}
markdownRemark(fields: { slug: { eq: $slug } }) {
id
excerpt(pruneLength: 160)
htmlAst
frontmatter {
title
date(formatString: "MMMM DD, YYYY")
}
}
}
`
</code></pre>
<h2 id="動作確認"><a href="#%E5%8B%95%E4%BD%9C%E7%A2%BA%E8%AA%8D">動作確認</a></h2>
<p><a href="https://crieit.now.sh/upload_images/8f404993f6a55ca8c18a74d4b85dbe9d5c4f07f89632e.jpg" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/8f404993f6a55ca8c18a74d4b85dbe9d5c4f07f89632e.jpg?mw=700" alt="022-1.jpg" /></a></p>
aocory
tag:crieit.net,2005:PublicArticle/14753
2019-01-28T10:58:03+09:00
2019-01-28T10:58:03+09:00
https://crieit.net/posts/GatsbyJS-5c4e61ab0c09d
GatsbyJSに画像付きカードメニューを作成する
<h2 id="GatsbyJSに画像付きカードメニューを作成する"><a href="#GatsbyJS%E3%81%AB%E7%94%BB%E5%83%8F%E4%BB%98%E3%81%8D%E3%82%AB%E3%83%BC%E3%83%89%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B">GatsbyJSに画像付きカードメニューを作成する</a></h2>
<p>時代は、画像付き投稿一覧だよね?(個人の感想です。)<br />
ということで実装してみた。</p>
<h2 id="やったこと"><a href="#%E3%82%84%E3%81%A3%E3%81%9F%E3%81%93%E3%81%A8">やったこと</a></h2>
<ul>
<li>postlistコンポーネントの変更</li>
<li>coverImageコンポーネントの実装</li>
<li>markdownにカバーイメージを追加</li>
</ul>
<h2 id="postlistを以下の様に変更した。"><a href="#postlist%E3%82%92%E4%BB%A5%E4%B8%8B%E3%81%AE%E6%A7%98%E3%81%AB%E5%A4%89%E6%9B%B4%E3%81%97%E3%81%9F%E3%80%82">postlistを以下の様に変更した。</a></h2>
<pre><code class="js">import React from "react";
import PropTypes from 'prop-types';
import CoverImage from '../../components/CoverImage'
import './postlist.css'
class Postlist extends React.Component {
getPostList() {
const postList = [];
this.props.postEdges.forEach(postEdge => {
postList.push({
title: postEdge.node.frontmatter.title,
date: postEdge.node.frontmatter.date,
cover: postEdge.node.frontmatter.coverImage,
excerpt: postEdge.node.excerpt,
});
});
return postList;
}
render() {
const postList = this.getPostList();
return (
<div className="grid">
{postList.map( post => (
<div key={post.id} className="griditem">
<div className="coverImage">
<CoverImage filename={post.cover}></CoverImage>
</div>
<span>
{post.title}<br/>
{post.date}
</span>
</div>
))}
</div>
);
}
}
export default Postlist;
</code></pre>
<p>そして、カードデザインを実装する</p>
<pre><code class="css">.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(336px, 1fr));
grid-gap: 16px;
align-items: stretch;
}
.griditem {
max-width: 336px;
border: 1px solid #ccc;
box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.3);
}
.griditem > img {
max-width: 100%;
}
.text {
padding: 0 20px 20px;
}
.text > button {
background: gray;
border: 0;
color: white;
padding: 10px;
width: 100%;
}
</code></pre>
<p>カードデザインの幅を336pxに設定しているのには実は理由があって、将来GoogleAdSenseを違和感なくフィットさせることに挑戦したいので、この幅で設定した。</p>
<h2 id="coverImageコンポーネントの実装"><a href="#coverImage%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%81%AE%E5%AE%9F%E8%A3%85">coverImageコンポーネントの実装</a></h2>
<pre><code class="js">import React from 'react'
import { StaticQuery, graphql } from 'gatsby'
import Img from 'gatsby-image'
import "./coverimage.css"
const Image = (props) => (
<StaticQuery
query={graphql`
query {
images: allFile {
edges {
node {
relativePath
name
childImageSharp {
fluid(maxWidth: 336, maxHeight: 280){
...GatsbyImageSharpFluid
}
}
}
}
}
}
`}
render={(data) => {
const image = data.images.edges.find(n => {
return n.node.relativePath.includes(props.filename);
});
if (!image) { return null; }
const imagefluid = image.node.childImageSharp.fluid;
return (
<Img
alt={props.alt}
sizes={imagefluid}
/>
);
<span>}</span><span>}</span>
/>
)
export default Image
</code></pre>
<p>こちらもAdSenseを見越して336×280の画像を生成出来るように実装しておく。</p>
<p>page/index.jsのGraphQLも変更しておく</p>
<pre><code class="js">export const query = graphql`
query {
allMarkdownRemark(filter: {frontmatter: {pagetype: {ne: "category"<span>}</span><span>}</span>}) {
totalCount
edges {
node {
id
frontmatter {
title
date(formatString: "DD MMMM, YYYY")
category
coverImage
}
excerpt
}
}
}
}
`
</code></pre>
<p>できた!<br />
<a href="https://crieit.now.sh/upload_images/51f79a78e7e68e3fdf65b2c5196325095c4e610720365.JPG" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/51f79a78e7e68e3fdf65b2c5196325095c4e610720365.JPG?mw=700" alt="021-2.JPG" /></a></p>
aocory
tag:crieit.net,2005:PublicArticle/14751
2019-01-27T15:40:08+09:00
2019-01-27T22:24:49+09:00
https://crieit.net/posts/GatsbyJS-5c4d52488575f
GatsbyJSにドロワーメニューを追加する
<h2 id="ドロワーメニューを追加したい。"><a href="#%E3%83%89%E3%83%AD%E3%83%AF%E3%83%BC%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%97%E3%81%9F%E3%81%84%E3%80%82">ドロワーメニューを追加したい。</a></h2>
<p>カテゴリーをドロワーメニューで表示したい欲が出てきたので実装する。<br />
しかし、ドロワーを1から書くにはJSの理解レベルが足りない。<br />
そこで今回はMaterialUIに泣きついた。</p>
<h2 id="やったこと"><a href="#%E3%82%84%E3%81%A3%E3%81%9F%E3%81%93%E3%81%A8">やったこと</a></h2>
<ul>
<li>Material-UIのインストール</li>
<li>Headerを実装</li>
<li>categorylistを作成</li>
</ul>
<h2 id="Material-UIのインストール"><a href="#Material-UI%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB">Material-UIのインストール</a></h2>
<pre><code>npm install --save @material-ui/core
npm install --save @material-ui/icons
</code></pre>
<h2 id="Headerを実装"><a href="#Header%E3%82%92%E5%AE%9F%E8%A3%85">Headerを実装</a></h2>
<pre><code class="js">import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import Drawer from '@material-ui/core/Drawer';
import { Link } from 'gatsby';
const styles = {
list: {
width: 250,
},
root: {
flexGrow: 1,
},
menuButton: {
marginLeft: -12,
marginRight: 20,
},
};
class Header extends Component {
state = {
left: false,
};
toggleDrawer = (side, open) => () => {
this.setState({
[side]: open,
});
};
render () {
const { classes } = this.props;
const sideList = (
<div className={classes.list}>
<List>
<Link to="/">
<ListItem button>
<ListItemText primary="Home" />
</ListItem>
</Link>
<Link to="/about">
<ListItem button>
<ListItemText primary="About" />
</ListItem>
</Link>
</List>
</div>
);
return (
<div className={classes.root}>
<AppBar position="relative" color="inherit">
<Toolbar>
<IconButton className={classes.menuButton} color="inherit" aria-label="Menu" onClick={this.toggleDrawer('left', true)}>
<MenuIcon />
</IconButton>
<Drawer open={this.state.left} onClose={this.toggleDrawer('left', false)}>
<div
tabIndex={0}
role="button"
onClick={this.toggleDrawer('left', false)}
onKeyDown={this.toggleDrawer('left', false)}
>
{sideList}
</div>
</Drawer>
<strong>
<Link to="/" style=<span>{</span><span>{</span> boxShadow: 'none', textDecoration: 'none', color: 'inherit', fontFamily: 'Montserrat, sans-serif', <span>}</span><span>}</span>>Post Bank Extra</Link>
</strong>
</Toolbar>
</AppBar>
</div>
);
}
}
Header.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(Header);
</code></pre>
<p>これにあとは自分のカテゴリーリストを載せる。</p>
<h2 id="カテゴリーリストの実装"><a href="#%E3%82%AB%E3%83%86%E3%82%B4%E3%83%AA%E3%83%BC%E3%83%AA%E3%82%B9%E3%83%88%E3%81%AE%E5%AE%9F%E8%A3%85">カテゴリーリストの実装</a></h2>
<pre><code class="js">import React from 'react'
import { StaticQuery, graphql } from 'gatsby'
import ListItem from '@material-ui/core/ListItem';
import Button from '@material-ui/core/Button';
import ListItemText from '@material-ui/core/ListItemText';
const CategoryLists = () => (
<StaticQuery
query={graphql`
query{
allMarkdownRemark(filter: {frontmatter: {pagetype: {eq: "category"<span>}</span><span>}</span>}) {
edges{
node{
frontmatter{
categoryslug
categoryname
}
}
}
}
}
`}
render={(data) => {
const posts = data.allMarkdownRemark.edges
return (
<div>
{posts.map(({ node }) => {
return (
<ListItem button key={node.frontmatter.categoryslug}>
<ListItemText primary={node.frontmatter.categoryname}></ListItemText>
</ListItem>
)
})}
</div>
);
<span>}</span><span>}</span>
/>
)
export default CategoryLists
</code></pre>
<p>そして組み込む</p>
<pre><code class="js">import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import Drawer from '@material-ui/core/Drawer';
import { Link } from 'gatsby';
import CategoryLists from '../categorylists';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faHome,faUtensils,faQuestion} from '@fortawesome/free-solid-svg-icons'
const styles = {
list: {
width: 250,
},
root: {
flexGrow: 1,
},
menuButton: {
marginLeft: -12,
marginRight: 20,
},
};
class Header extends Component {
state = {
left: false,
};
toggleDrawer = (side, open) => () => {
this.setState({
[side]: open,
});
};
render () {
const { classes } = this.props;
const sideList = (
<div className={classes.list}>
<List>
<Link to="/">
<ListItem button>
<FontAwesomeIcon icon={faHome} />
<ListItemText primary="Home" />
</ListItem>
</Link>
<CategoryLists />
<Link to="/about">
<ListItem button>
<FontAwesomeIcon icon={faQuestion} />
<ListItemText primary="About" />
</ListItem>
</Link>
</List>
</div>
);
return (
<div className={classes.root}>
<AppBar position="relative" color="inherit">
<Toolbar>
<IconButton className={classes.menuButton} color="inherit" aria-label="Menu" onClick={this.toggleDrawer('left', true)}>
<MenuIcon />
</IconButton>
<Drawer open={this.state.left} onClose={this.toggleDrawer('left', false)}>
<div
tabIndex={0}
role="button"
onClick={this.toggleDrawer('left', false)}
onKeyDown={this.toggleDrawer('left', false)}
>
{sideList}
</div>
</Drawer>
<strong>
<Link to="/" style=<span>{</span><span>{</span> boxShadow: 'none', textDecoration: 'none', color: 'inherit', fontFamily: 'Montserrat, sans-serif', <span>}</span><span>}</span>>corydoras</Link>
</strong>
</Toolbar>
</AppBar>
</div>
);
}
}
Header.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(Header);
</code></pre>
<p>StaticQueryで実装。便利。</p>
<h2 id="実働"><a href="#%E5%AE%9F%E5%83%8D">実働</a></h2>
<p><a href="https://crieit.now.sh/upload_images/843d1ca1b8d9ab40db45ba8903d134505c4d51ea79aa4.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/843d1ca1b8d9ab40db45ba8903d134505c4d51ea79aa4.png?mw=700" alt="020-1.png" /></a><br />
よし!動いた!</p>
<h2 id="出来なかったこと"><a href="#%E5%87%BA%E6%9D%A5%E3%81%AA%E3%81%8B%E3%81%A3%E3%81%9F%E3%81%93%E3%81%A8">出来なかったこと</a></h2>
<p>frontmatterにicon設定してリストレンダリングしようとしましたができませんでした。</p>
aocory
tag:crieit.net,2005:PublicArticle/14750
2019-01-26T23:33:55+09:00
2019-01-26T23:43:44+09:00
https://crieit.net/posts/GatsbyJS-5c4c6fd367e88
GatsbyJSでカテゴリー機能を実装する
<h2 id="カテゴリーページにもっと自由を"><a href="#%E3%82%AB%E3%83%86%E3%82%B4%E3%83%AA%E3%83%BC%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%AB%E3%82%82%E3%81%A3%E3%81%A8%E8%87%AA%E7%94%B1%E3%82%92">カテゴリーページにもっと自由を</a></h2>
<p>カテゴリー一覧を作っていきたい。<br />
GatsbyのStarterではGraphQLのGroup機能を使ってやっている人が多い。<br />
今回はMarkdownを使ってある程度自由にカスタマイズできるように実装していきたい。<br />
それには理由があって、僕のサイトの作り方だとカテゴリーページが上がる傾向にある。そこでユーザーを離脱させない工夫としてカテゴリーをmarkdownで自由にカスタマイズできるようにしておきたい。</p>
<h2 id="作っていくもの"><a href="#%E4%BD%9C%E3%81%A3%E3%81%A6%E3%81%84%E3%81%8F%E3%82%82%E3%81%AE">作っていくもの</a></h2>
<ul>
<li>categoriesフォルダ</li>
<li>gatsby-node.js</li>
<li>/templete/categorypage.js</li>
<li>/components/categoryPostlist/</li>
</ul>
<p>こんだけで実装できそうだ。<br />
まず、/contents/categoies/food.mdと<br />
/contents/categories/drink.mdを作成。</p>
<pre><code>---
pagetype: "category"
categoryname: "食べ物"
categoryslug: "food"
---
</code></pre>
<p>と</p>
<pre><code>---
pagetype: "category"
categoryname: "飲み物"
categoryslug: "drink"
---
</code></pre>
<p>YAMLで上記のように記載する。<br />
カスタマイズしたければMarkdownで加工すればいいようにする。</p>
<h2 id="gatsby-node.js"><a href="#gatsby-node.js">gatsby-node.js</a></h2>
<p>続いてgatsby-node.jsを書いていく前にGraphQLでどこにフィルターをかけるかを見てみる。</p>
<pre><code>{
allMarkdownRemark(filter: {frontmatter: {pagetype: {eq: "category"<span>}</span><span>}</span>}) {
edges {
node {
id
}
}
}
}
</code></pre>
<p>こんな感じでフィルターかけるのが簡単そう。<br />
同じところから引っ張る場合エラーが出るのでそれぞれ名前を付ける</p>
<pre><code>{
blogposts: allMarkdownRemark(sort: {fields: [frontmatter___date], order: DESC}, limit: 1000) {
edges {
node {
fields {
slug
}
frontmatter {
title
}
}
}
}
categories: allMarkdownRemark(filter: {frontmatter: {pagetype: {eq: "category"<span>}</span><span>}</span>}) {
edges {
node {
frontmatter {
categoryslug
}
}
}
}
}
</code></pre>
<p>最終的には</p>
<pre><code>const path = require(`path`)
const { createFilePath } = require(`gatsby-source-filesystem`)
exports.createPages = ({ graphql, actions }) => {
const { createPage } = actions
return new Promise((resolve, reject) => {
const blogPost = path.resolve(`./src/templates/blog-post.js`)
const categoryPage = path.resolve(`./src/templates/categorypage.js`)
resolve(
graphql(
`
{
blogposts: allMarkdownRemark(sort: {fields: [frontmatter___date], order: DESC}, limit: 1000) {
edges {
node {
fields {
slug
}
frontmatter {
title
}
}
}
}
categories: allMarkdownRemark(filter: {frontmatter: {pagetype: {eq: "category"<span>}</span><span>}</span>}) {
edges {
node {
frontmatter {
categoryslug
}
}
}
}
}
`
).then(result => {
if (result.errors) {
console.log(result.errors)
reject(result.errors)
}
// Create blog posts pages.
const posts = result.data.blogposts.edges
const categories = result.data.categories.edges
posts.forEach((post, index) => {
const previous =
index === posts.length - 1 ? null : posts[index + 1].node
const next = index === 0 ? null : posts[index - 1].node
createPage({
path: post.node.fields.slug,
component: blogPost,
context: {
slug: post.node.fields.slug,
previous,
next,
},
})
})
categories.forEach((category) => {
createPage({
path: `/category/${(category.node.frontmatter.categoryslug)}`,
component: categoryPage,
context: {
slug: category.node.frontmatter.categoryslug,
<span>}</span><span>}</span>)
})
})
)
})
}
exports.onCreateNode = ({ node, actions, getNode }) => {
const { createNodeField } = actions
if (node.internal.type === `MarkdownRemark`) {
const value = createFilePath({ node, getNode })
createNodeField({
name: `slug`,
node,
value,
})
}
}
</code></pre>
<p>こうなった。<br />
次は、テンプレを作る</p>
<pre><code>import rehypeReact from "rehype-react"
import Sample from "../components/Sample"
import Categoryposts from "../components/categoryposts"
const renderAst = new rehypeReact({
createElement: React.createElement,
components: { "sample": Sample }
}).Compiler
class CategoryPageTemplate extends React.Component {
render() {
const post = this.props.data.markdownRemark
const siteTitle = this.props.data.site.siteMetadata.title
return (
<Layout location={this.props.location} title={siteTitle}>
<SEO title={post.frontmatter.categoryname} />
<h1>{post.frontmatter.categoryname}</h1>
<div>{renderAst(post.htmlAst)}</div>
<hr/>
<Categoryposts category={post.frontmatter.categoryslug} />
</Layout>
)
}
}
export default CategoryPageTemplate
export const pageQuery = graphql`
query CategoryPageBySlug ($slug: String!){
site {
siteMetadata {
title
author
}
}
markdownRemark (frontmatter:{categoryslug:{ eq: $slug<span>}</span><span>}</span>)
{
htmlAst
frontmatter {
categoryname
categoryslug
}
}
}
`
</code></pre>
<p>最終的にこうなった。<br />
そして、categorylistを作る。<br />
/src/components/categoryposts/index.js</p>
<pre><code>import React from 'react'
import { StaticQuery, graphql } from 'gatsby'
const CategoryPosts = (props) => (
<StaticQuery
query={graphql`
query{
allMarkdownRemark{
edges{
node{
frontmatter{
pagetype
category
title
date
}
excerpt
}
}
}
}
`}
render={(data) => {
const postlists = data.allMarkdownRemark.edges
const posts = postlists.filter((category)=>{
return (category.node.frontmatter.category === props.category)
})
return (
<div>
{posts.map(({ node }) => {
return (
<div key={node.frontmatter.title}>
<p>{node.frontmatter.date}</p>
<p dangerouslySetInnerHTML=<span>{</span><span>{</span> __html: node.excerpt <span>}</span><span>}</span> />
</div>
)
})}
</div>
);
<span>}</span><span>}</span>
/>
)
export default CategoryPosts
</code></pre>
<p>ポイントはStaticQueryを使って全部取得してからフィルタリングしているところ。<br />
コンポーネントでGraphQLを使用する場合、普通のクエリではと動かない仕様になっている。<br />
<a href="https://crieit.now.sh/upload_images/2371759b8c5aa1d5cae8dfe692bf6f1d5c4c6fc398ae5.jpg" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/2371759b8c5aa1d5cae8dfe692bf6f1d5c4c6fc398ae5.jpg?mw=700" alt="019-1.jpg" /></a><br />
上手く表示できた!</p>
aocory
tag:crieit.net,2005:PublicArticle/14747
2019-01-25T08:46:16+09:00
2019-01-25T08:46:16+09:00
https://crieit.net/posts/GatsbyJS-Mrakdown
GatsbyJSでMrakdown内でコンポーネントを使う
<h2 id="GatsbyJSでMrakdown内でコンポーネントを使う"><a href="#GatsbyJS%E3%81%A7Mrakdown%E5%86%85%E3%81%A7%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%82%92%E4%BD%BF%E3%81%86">GatsbyJSでMrakdown内でコンポーネントを使う</a></h2>
<p>Markdown内でReactコンポーネントを使いたい欲求が出てきたので実装してみる。</p>
<h2 id="Gatsby Remark Componentを使う"><a href="#Gatsby+Remark+Component%E3%82%92%E4%BD%BF%E3%81%86">Gatsby Remark Componentを使う</a></h2>
<p>こういうReactコンポーネントを使う場合は、Gatsby Remark Componentを使う。</p>
<h2 id="gatsby-remark-responsive-iframeをインストール"><a href="#gatsby-remark-responsive-iframe%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB">gatsby-remark-responsive-iframeをインストール</a></h2>
<p><code>npm install --save gatsby-remark-component</code><br />
<code>npm install --save rehype-react</code></p>
<h2 id="gatsby-config.jsmの設定"><a href="#gatsby-config.jsm%E3%81%AE%E8%A8%AD%E5%AE%9A">gatsby-config.jsmの設定</a></h2>
<pre><code>plugins: [
{
resolve: "gatsby-transformer-remark",
options: {
plugins: ["gatsby-remark-component"]
}
}
]
</code></pre>
<h2 id="実際の動作確認"><a href="#%E5%AE%9F%E9%9A%9B%E3%81%AE%E5%8B%95%E4%BD%9C%E7%A2%BA%E8%AA%8D">実際の動作確認</a></h2>
<p>とりあえず簡単なコンポーネントを作ってみる。<br />
/components/Sample.js</p>
<pre><code>import React from 'react'
const Sample = () => (
<div>
<p>これはコンポーネントです。</p>
</div>
)
export default Sample
</code></pre>
<p>blog-post.jsを変更する。<br />
読み込みを追加</p>
<pre><code>import rehypeReact from "rehype-react"
import Sample from "../components/SampleSample"
</code></pre>
<p>そして、コンポーネントを使えるように設定する。注意点としては小文字にしなければいけない。</p>
<pre><code>const renderAst = new rehypeReact({
createElement: React.createElement,
components: { "sample": Sample },
}).Compiler
</code></pre>
<pre><code><div dangerouslySetInnerHTML=<span>{</span><span>{</span> __html: post.html <span>}</span><span>}</span> />
</code></pre>
<p>を</p>
<pre><code>{
renderAst(post.htmlAst)
}
</code></pre>
<p>に変更する。<br />
あとGraphQLクエリのHTMLをhtmlastに変更する。</p>
<pre><code># ...
markdownRemark(fields: { slug: { eq: $slug } }) {
htmlAst
}
# ...
</code></pre>
<p>そしてマークダウンファイル内に</p>
<pre><code><sample></sample>
</code></pre>
<p>と書く。</p>
<pre><code><sample />
</code></pre>
<p>書きたいがこれでは動かない。注意。<br />
<a href="https://crieit.now.sh/upload_images/ea33ef801970aef5e88a93cffd5577915c4a4ced27c6f.JPG" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/ea33ef801970aef5e88a93cffd5577915c4a4ced27c6f.JPG?mw=700" alt="018-1.JPG" /></a><br />
出来た!<br />
お疲れ様でした。</p>
<h2 id="ハマったところ"><a href="#%E3%83%8F%E3%83%9E%E3%81%A3%E3%81%9F%E3%81%A8%E3%81%93%E3%82%8D">ハマったところ</a></h2>
<p>公式がimport {Sample} form ../という書き方していたのでそこでハマった。</p>
aocory
tag:crieit.net,2005:PublicArticle/14746
2019-01-24T17:23:19+09:00
2019-01-24T17:23:19+09:00
https://crieit.net/posts/GatsbyJS-iframe
GatsbyJSでiframeタグを使う
<h2 id="GatsbyJSでiframeタグを使う"><a href="#GatsbyJS%E3%81%A7iframe%E3%82%BF%E3%82%B0%E3%82%92%E4%BD%BF%E3%81%86">GatsbyJSでiframeタグを使う</a></h2>
<p>ちょっと書評の仕事が来たのでこのブログを書いた。<br />
その時、Amazonリンクを書評だから貼ってしまおう!と言うことで実装した。</p>
<h2 id="gatsby-remark-responsive-iframeを使う"><a href="#gatsby-remark-responsive-iframe%E3%82%92%E4%BD%BF%E3%81%86">gatsby-remark-responsive-iframeを使う</a></h2>
<p>こういうiframeタグを使う場合は、gatsby-remark-responsive-iframeを使う。</p>
<h2 id="gatsby-remark-responsive-iframeをインストール"><a href="#gatsby-remark-responsive-iframe%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB">gatsby-remark-responsive-iframeをインストール</a></h2>
<p><code>npm install --save gatsby-remark-responsive-iframe</code></p>
<h2 id="gatsby-config.jsmの設定"><a href="#gatsby-config.jsm%E3%81%AE%E8%A8%AD%E5%AE%9A">gatsby-config.jsmの設定</a></h2>
<pre><code>plugins: [
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [`gatsby-remark-responsive-iframe`],
},
},
]
</code></pre>
<h2 id="実際の動作確認"><a href="#%E5%AE%9F%E9%9A%9B%E3%81%AE%E5%8B%95%E4%BD%9C%E7%A2%BA%E8%AA%8D">実際の動作確認</a></h2>
<p>それではAmazonリンクをiframeで入れてみよう。<br />
widthとheightを入れないと動かないので注意が必要。<br />
<a href="https://crieit.now.sh/upload_images/d4d462fbb8100c0429371e86634903955c4975e57d642.jpg" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/d4d462fbb8100c0429371e86634903955c4975e57d642.jpg?mw=700" alt="017-1.jpg" /></a></p>
<p>出来た!</p>
aocory
tag:crieit.net,2005:PublicArticle/14744
2019-01-23T22:35:14+09:00
2019-01-23T22:35:14+09:00
https://crieit.net/posts/GatsbyJS-Markdown-5c486d9261f96
GatsbyJSでMarkdownで画像を表示する
<h2 id="GatsbyJSでMarkdownで画像を表示する"><a href="#GatsbyJS%E3%81%A7Markdown%E3%81%A7%E7%94%BB%E5%83%8F%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B">GatsbyJSでMarkdownで画像を表示する</a></h2>
<p>Markdownファイルは、</p>
<pre><code>![画像の説明](イメージファイルのパス)
</code></pre>
<p>という形で画像を挿入することができますが、実はそのままだと今くいきません。そこでgatsby-remark-imagesを使用します。</p>
<h2 id="gatsby-remark-imagesのインストール"><a href="#gatsby-remark-images%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB">gatsby-remark-imagesのインストール</a></h2>
<p>npmコマンド一つで終わります。</p>
<pre><code>npm install --save gatsby-remark-images gatsby-plugin-sharp
</code></pre>
<h2 id="gatsby-remark-imagesの設定"><a href="#gatsby-remark-images%E3%81%AE%E8%A8%AD%E5%AE%9A">gatsby-remark-imagesの設定</a></h2>
<p>gatsby-remark-imagesは、gatsby-transformer-remarkのプラグインですので、gatsby-config.jsの中で書く部位が少し異なります。<br />
<code>gatsby-config.js
plugins: [
`gatsby-plugin-sharp`,
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
{
resolve: `gatsby-remark-images`,
options: {
// It's important to specify the maxWidth (in pixels) of
// the content container as this plugin uses this as the
// base for generating different widths of each image.
maxWidth: 590,
},
},
],
},
},
]</code></p>
<h2 id="動作確認"><a href="#%E5%8B%95%E4%BD%9C%E7%A2%BA%E8%AA%8D">動作確認</a></h2>
<p>それでは、確認してみましょう。<br />
<a href="https://crieit.now.sh/upload_images/1c85302484d390ae45b121bce4445eb65c486d6a1b9b5.jpg" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/1c85302484d390ae45b121bce4445eb65c486d6a1b9b5.jpg?mw=700" alt="016-1.jpg" /></a><br />
ちゃんと表示されていますね。<br />
お疲れさまでした。</p>
aocory
tag:crieit.net,2005:PublicArticle/14743
2019-01-23T12:14:47+09:00
2019-01-23T12:14:47+09:00
https://crieit.net/posts/GatsbyJS-5c47dc27d18c5
GatsbyJSでフォントを変更する
<h2 id="GatsbyJSでフォントをあてる"><a href="#GatsbyJS%E3%81%A7%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%82%92%E3%81%82%E3%81%A6%E3%82%8B">GatsbyJSでフォントをあてる</a></h2>
<p>ブログの見た目と読みやすさを追求するならやはりフォントにも多少はこだわりたい。<br />
GatsbyJSには、<a target="_blank" rel="nofollow noopener" href="https://kyleamathews.github.io/typography.js/">Typography.js</a>を用いたやり方が公式チュートリアルには記載されている。(本当はtypefaceでやるやり方が最近のGatsby流なのですが、上手く動かなかったのでこちらで実装。)</p>
<h2 id="GatsbyJSに Typography pluginを入れる"><a href="#GatsbyJS%E3%81%AB+Typography+plugin%E3%82%92%E5%85%A5%E3%82%8C%E3%82%8B">GatsbyJSに Typography pluginを入れる</a></h2>
<p><code>npm install gatsby-plugin-typography react-typography typography --save</code></p>
<h2 id="gatsby-config.jsをセッティング"><a href="#gatsby-config.js%E3%82%92%E3%82%BB%E3%83%83%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0">gatsby-config.jsをセッティング</a></h2>
<p>gatsby-config.jsを以下の様にセッティングする</p>
<pre><code>module.exports = {
siteMetadata: {
title: 'Gatsby Default Starter',
},
plugins: [
{
resolve: `gatsby-plugin-typography`,
options: {
pathToConfigModule: `src/utils/typography`,
}
}
],
}
</code></pre>
<h2 id="typography.jsを作成する"><a href="#typography.js%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B">typography.jsを作成する</a></h2>
<p>src/utils/フォルダを作成し、typography.jsをそのフォルダに入れる。</p>
<pre><code>import Typography from "typography"
const typography = new Typography({
baseFontSize: "18px",
baseLineHeight: 1.666,
headerFontFamily: [
"Avenir Next",
"Helvetica Neue",
"Segoe UI",
"Helvetica",
"Arial",
"sans-serif",
],
bodyFontFamily: ["Georgia", "serif"],
})
export default typography
</code></pre>
<h2 id="layouts.cssを全部消す。"><a href="#layouts.css%E3%82%92%E5%85%A8%E9%83%A8%E6%B6%88%E3%81%99%E3%80%82">layouts.cssを全部消す。</a></h2>
<p>layouts.cssには色々なCSSがまだ入っているので全部消してみる。<br />
すると以下の様になる。<br />
<a href="https://crieit.now.sh/upload_images/6ea3d1de2e0a325b5f749ee7b9e829e85c47dbb1b5ff8.jpg" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/6ea3d1de2e0a325b5f749ee7b9e829e85c47dbb1b5ff8.jpg?mw=700" alt="015-1.jpg" /></a><br />
これがインストールとセッティングが終わるとこうなる。<br />
<a href="https://crieit.now.sh/upload_images/2bf4a9731c1868abf11db68869177e205c47dbc3ee86b.jpg" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/2bf4a9731c1868abf11db68869177e205c47dbc3ee86b.jpg?mw=700" alt="015-2.jpg" /></a><br />
これでフォント問題も解決しました。</p>
aocory
tag:crieit.net,2005:PublicArticle/14742
2019-01-23T09:17:18+09:00
2019-01-23T09:17:18+09:00
https://crieit.net/posts/GatsbyJS-fontawesome
GatsbyJSでfontawesomeを使う
<h2 id="ブログのUI開発に必要なやつ"><a href="#%E3%83%96%E3%83%AD%E3%82%B0%E3%81%AEUI%E9%96%8B%E7%99%BA%E3%81%AB%E5%BF%85%E8%A6%81%E3%81%AA%E3%82%84%E3%81%A4">ブログのUI開発に必要なやつ</a></h2>
<p>ブログのUI開発にアイコンは、ユーザーの学習コストを下げるという意味で無くてはならないモノだと思っていてその実装をGatsbyではどうするか?について調べた。</p>
<h2 id="結論fontawesomeを採用した。"><a href="#%E7%B5%90%E8%AB%96fontawesome%E3%82%92%E6%8E%A1%E7%94%A8%E3%81%97%E3%81%9F%E3%80%82">結論fontawesomeを採用した。</a></h2>
<ul>
<li><a target="_blank" rel="nofollow noopener" href="https://github.com/react-icons/react-icons">react-icons</a></li>
<li><a target="_blank" rel="nofollow noopener" href="https://github.com/FortAwesome/react-fontawesome">react-fontawesome</a></li>
<li><a target="_blank" rel="nofollow noopener" href="https://github.com/andreypopp/react-fa">react-fa</a><br />
実装アイコン数はreact-iconsが最も多くGithubのスター数も多い。しかし、個人で作る上で必要なアイコンはそこまで多くない。あとfontawesomeのバージョンが4系だった(最新は5系)ので5系に対応しているreact-fontawesomeを実装していくことにする。</li>
</ul>
<h2 id="GatsbyJSにインストール"><a href="#GatsbyJS%E3%81%AB%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB">GatsbyJSにインストール</a></h2>
<pre><code>$ npm i --save @fortawesome/fontawesome-svg-core
$ npm i --save @fortawesome/free-solid-svg-icons
$ npm i --save @fortawesome/react-fontawesome
</code></pre>
<p>これでOK。fortawesomeはスペルミスじゃないので安心して欲しい。<br />
gatsbyのプラグインじゃないのでgatsby-config.jsはの変更不要。</p>
<h2 id="fontawesomeを早速使ってみる"><a href="#fontawesome%E3%82%92%E6%97%A9%E9%80%9F%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%8B">fontawesomeを早速使ってみる</a></h2>
<p>index.jsを修正し動作確認をする。</p>
<pre><code>import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'
</code></pre>
<p>ここの部分でフォントを読み込む。fontawesomeは、直接CDNで読み込んでやるとサイズが大きくGoogleの計測ツールで見るとPageSpeedが著しく下がる。このコンポーネントだと使うフォントだけを抜き出してサブセットを作って書き出してくれる。最高。Layoutに入れ込んでしまえば管理楽になりそう。<br />
あとは、適当な位置にタグを入れて確認しよう。</p>
<pre><code><FontAwesomeIcon icon={faCoffee} />
</code></pre>
<p><a href="https://crieit.now.sh/upload_images/7e487cd8811144020c4443b5fdc3424c5c47b251e9db6.jpg" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/7e487cd8811144020c4443b5fdc3424c5c47b251e9db6.jpg?mw=700" alt="0141.jpg" /></a><br />
GatsbyJSでfontawesomeを上手く表示できた!<br />
これでイケそうだ。</p>
aocory
tag:crieit.net,2005:PublicArticle/14739
2019-01-22T08:36:53+09:00
2019-01-22T08:36:53+09:00
https://crieit.net/posts/GatsbyJS-Markdown-5c465795f18c3
GatsbyJSでMarkdownの記事を表示させよう
<h2 id="GatsbyJSでMarkdownの記事を表示させよう"><a href="#GatsbyJS%E3%81%A7Markdown%E3%81%AE%E8%A8%98%E4%BA%8B%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%95%E3%81%9B%E3%82%88%E3%81%86">GatsbyJSでMarkdownの記事を表示させよう</a></h2>
<p>Markdownファイルをそのまま表示させることは出来ません。<br />
そこで、Markdownファイルを表示するページを動的に生成する必要があります。<br />
Gatsbyでそのようなことをする場合はgatsby-node.jsを使います。<br />
やることは2つです。<br />
+ onCreateNode<br />
+ createPage<br />
onCreateNodeでslugを動的に生成します。(xxx.com/my1stpost/のmy1stpostにあたる部分)<br />
そのslugを元にtempleteファイルを作成し、createPageでpageを生成します。</p>
<h2 id="gatsby-node.js"><a href="#gatsby-node.js">gatsby-node.js</a></h2>
<pre><code>const path = require(`path`)
const { createFilePath } = require(`gatsby-source-filesystem`)
exports.createPages = ({ graphql, actions }) => {
const { createPage } = actions
return new Promise((resolve, reject) => {
const blogPost = path.resolve(`./src/templates/blog-post.js`)
// graphqlからデータの取得
resolve(
graphql(
`
{
allMarkdownRemark(
sort: { fields: [frontmatter___date], order: DESC }
limit: 1000
) {
edges {
node {
fields {
slug
}
frontmatter {
title
}
}
}
}
}
`
).then(result => {
if (result.errors) {
console.log(result.errors)
reject(result.errors)
}
// 投稿ページの生成
const posts = result.data.allMarkdownRemark.edges
posts.forEach((post, index) => {
const previous =
index === posts.length - 1 ? null : posts[index + 1].node
const next = index === 0 ? null : posts[index - 1].node
createPage({
path: post.node.fields.slug,
component: blogPost,
context: {
slug: post.node.fields.slug,
previous,
next,
},
})
})
})
)
})
}
// slugの生成
exports.onCreateNode = ({ node, actions, getNode }) => {
const { createNodeField } = actions
if (node.internal.type === `MarkdownRemark`) {
const value = createFilePath({ node, getNode })
createNodeField({
name: `slug`,
node,
value,
})
}
}
</code></pre>
<p>次にblog-post.jsを作っていきます。</p>
<pre><code>import React from 'react'
import { Link, graphql } from 'gatsby'
import Layout from '../components/Layout'
import SEO from '../components/seo'
class BlogPostTemplate extends React.Component {
render() {
const post = this.props.data.markdownRemark
const siteTitle = this.props.data.site.siteMetadata.title
const { previous, next } = this.props.pageContext
return (
<Layout location={this.props.location} title={siteTitle}>
<SEO title={post.frontmatter.title} description={post.excerpt} />
<h1>{post.frontmatter.title}</h1>
<p>
{post.frontmatter.date}
</p>
<div dangerouslySetInnerHTML=<span>{</span><span>{</span> __html: post.html <span>}</span><span>}</span> />
<hr/>
<ul>
<li>
{previous && (
<Link to={previous.fields.slug} rel="prev">
← {previous.frontmatter.title}
</Link>
)}
</li>
<li>
{next && (
<Link to={next.fields.slug} rel="next">
{next.frontmatter.title} →
</Link>
)}
</li>
</ul>
</Layout>
)
}
}
export default BlogPostTemplate
export const pageQuery = graphql`
query BlogPostBySlug($slug: String!) {
site {
siteMetadata {
title
author
}
}
markdownRemark(fields: { slug: { eq: $slug } }) {
id
excerpt(pruneLength: 160)
html
frontmatter {
title
date(formatString: "MMMM DD, YYYY")
}
}
}
`
</code></pre>
<p>これで準備が出来ました。</p>
<h2 id="確認作業"><a href="#%E7%A2%BA%E8%AA%8D%E4%BD%9C%E6%A5%AD">確認作業</a></h2>
<p>それでは確認作業をしてみましょう。<br />
<code>gatsby develop</code>でサーバーを立ち上げ<br />
<code>http://localhost:8000/a</code>にアクセスしてみましょう。<br />
<a href="https://crieit.now.sh/upload_images/cae4883c933fdf71d219e166f5abeec35c465767715ee.jpg" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/cae4883c933fdf71d219e166f5abeec35c465767715ee.jpg?mw=700" alt="013.jpg" /></a><br />
404と表示されますが上記のようにディレクトリが分かれているのがわかります。ちゃんと/my1stpost/があります。<br />
早速、アクセスしてみましょう!<br />
<a href="https://crieit.now.sh/upload_images/ac6d362013e534c167c6333b6a3c25135c46578d1f79e.jpg" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/ac6d362013e534c167c6333b6a3c25135c46578d1f79e.jpg?mw=700" alt="0131.jpg" /></a><br />
ちゃんと表示されていますね!お疲れ様でした。</p>
aocory
tag:crieit.net,2005:PublicArticle/14737
2019-01-21T21:59:53+09:00
2019-01-21T21:59:53+09:00
https://crieit.net/posts/GatsbyJS-Markdown
GatsbyJSでMarkdownで記事の一覧を表示させよう
<h1 id="GatsbyJSでMarkdownで記事の一覧を表示させよう"><a href="#GatsbyJS%E3%81%A7Markdown%E3%81%A7%E8%A8%98%E4%BA%8B%E3%81%AE%E4%B8%80%E8%A6%A7%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%95%E3%81%9B%E3%82%88%E3%81%86">GatsbyJSでMarkdownで記事の一覧を表示させよう</a></h1>
<p>今回は、GatsbyJSで記事一覧を表示させていこうと思います。</p>
<h1 id="gatsby-transformer-remarkをインストール"><a href="#gatsby-transformer-remark%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB">gatsby-transformer-remarkをインストール</a></h1>
<p>gatsby-transformer-remarkをインストールします。<br />
<code>npm install --save gatsby-transformer-remark</code></p>
<h1 id="congig.jsを設定"><a href="#congig.js%E3%82%92%E8%A8%AD%E5%AE%9A">congig.jsを設定</a></h1>
<p>/gatsby-config.jsに以下を追加します。<br />
/src/になるべくコード以外のモノはおくと後々苦労するので下記のように設定します。</p>
<pre><code>{
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/contents/posts`,
name: `posts`,
},
},
{
resolve: `gatsby-transformer-remark`,
options: {
// CommonMark mode (default: true)
commonmark: true,
// Footnotes mode (default: true)
footnotes: true,
// Pedantic mode (default: true)
pedantic: true,
// GitHub Flavored Markdown mode (default: true)
gfm: true,
// Plugins configs
plugins: [],
},
},
</code></pre>
<p>するとgatsby-config.jsは以下の様になります。</p>
<pre><code>module.exports = {
siteMetadata: {
title: `Gatsby Default Starter`,
description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
author: `@gatsbyjs`,
},
plugins: [
`gatsby-plugin-react-helmet`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/contents/images`,
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/contents/posts`,
name: `posts`,
},
},
`gatsby-transformer-sharp`,
{
resolve: `gatsby-transformer-remark`,
options: {
// CommonMark mode (default: true)
commonmark: true,
// Footnotes mode (default: true)
footnotes: true,
// Pedantic mode (default: true)
pedantic: true,
// GitHub Flavored Markdown mode (default: true)
gfm: true,
// Plugins configs
plugins: [],
},
},
`gatsby-plugin-sharp`,
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `gatsby-starter-default`,
short_name: `starter`,
start_url: `/`,
background_color: `#663399`,
theme_color: `#663399`,
display: `minimal-ui`,
icon: `contents/images/gatsby-icon.png`, // This path is relative to the root of the site.
},
},
// this (optional) plugin enables Progressive Web App + Offline functionality
// To learn more, visit: https://gatsby.app/offline
// 'gatsby-plugin-offline',
],
}
</code></pre>
<p>次にサンプルデータとしてMarkdownファイルを用意します。<br />
posts以下に記事ごとにフォルダを作成しindex.mdで管理する方法がぐちゃぐちゃしないので、今回はその手法を採用しました。<br />
/contents/posts/my1stpost/index.md</p>
<pre><code>---
title: "My 1st Post"
date: "2019-01-21"
---
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</code></pre>
<p>一覧表示ですのでもう一つファイルを作成します。<br />
/contents/posts/my2ndpost/index.md</p>
<pre><code>---
title: "My 2nd Post"
date: "2019-01-22"
---
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</code></pre>
<p>そして、一覧を表示させるために以下の様にコードを書きます。<br />
/src/pages/index.js</p>
<pre><code>import React from 'react'
import { Link } from 'gatsby'
import Layout from '../components/layout'
import Image from '../components/image'
import SEO from '../components/seo'
export default ({ data }) => {
return (
<Layout>
<div>
<h1>MyBlog</h1>
<h4>{data.allMarkdownRemark.totalCount} Posts</h4>
{data.allMarkdownRemark.edges.map(({ node }) => (
<div key={node.id}>
<span>
{node.frontmatter.title}{" "}
— {node.frontmatter.date}
</span>
<p>{node.excerpt}</p>
</div>
))}
</div>
</Layout>
)
}
export const query = graphql`
query {
allMarkdownRemark {
totalCount
edges {
node {
id
frontmatter {
title
date(formatString: "DD MMMM, YYYY")
}
excerpt
}
}
}
}
`
</code></pre>
<p><a href="https://crieit.now.sh/upload_images/ab5effbeab53c8f613ff7e2b1c814d7b5c45c11bb9aec.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/ab5effbeab53c8f613ff7e2b1c814d7b5c45c11bb9aec.png?mw=700" alt="011-1.png" /></a><br />
このように表示されれば成功です。<br />
お疲れ様でした。</p>
aocory
tag:crieit.net,2005:PublicArticle/14735
2019-01-21T11:14:52+09:00
2019-01-21T11:14:52+09:00
https://crieit.net/posts/GatsbyJS-gatsby-source-filesystem
GatsbyJSのgatsby-source-filesystemを使う
<h2 id="Gatsbyの強力すぎる管理能力"><a href="#Gatsby%E3%81%AE%E5%BC%B7%E5%8A%9B%E3%81%99%E3%81%8E%E3%82%8B%E7%AE%A1%E7%90%86%E8%83%BD%E5%8A%9B">Gatsbyの強力すぎる管理能力</a></h2>
<p>GatsbyJSには、gatsby-source-filesystemというライブラリがあります。<br />
これの凄いところは色々なソースファイルをGraphQLでまとめてに管理できるところです。<br />
ソースファイルとしては<br />
+ Qiita<br />
+ Wordpress<br />
+ Netlify CMS<br />
+ AirtTable<br />
+ CSV<br />
+ Markdown<br />
+ Excel</p>
<p>とか色々なモノを同じように扱えます。<br />
これが最高に便利でイケています。<br />
僕は、/src/フォルダ以下にはコード以外のモノを入れたくないと思う病ですので<br />
今回は、imageのソースファイルを/contents/images/に変更したいと思います。</p>
<h2 id="gatsby-source-filesystemのインストール(不要)"><a href="#gatsby-source-filesystem%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%EF%BC%88%E4%B8%8D%E8%A6%81%EF%BC%89">gatsby-source-filesystemのインストール(不要)</a></h2>
<p>この章は基本的にgatsby-source-filesystemはdefalt starterに入っているので必要ありません。</p>
<pre><code>npm install --save gatsby-source-filesystem
</code></pre>
<p>これでgatsby-source-filesystemがインストールされました。<br />
次にconfigをいじっていきます。</p>
<h2 id="gatsby-config.jsの設定"><a href="#gatsby-config.js%E3%81%AE%E8%A8%AD%E5%AE%9A">gatsby-config.jsの設定</a></h2>
<p>gatsby-config.jsはこのようになっていると思います。</p>
<pre><code>module.exports = {
siteMetadata: {
title: `Gatsby Default Starter`,
description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
author: `@gatsbyjs`,
},
plugins: [
`gatsby-plugin-react-helmet`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images`,
},
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `gatsby-starter-default`,
short_name: `starter`,
start_url: `/`,
background_color: `#663399`,
theme_color: `#663399`,
display: `minimal-ui`,
icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
},
},
// this (optional) plugin enables Progressive Web App + Offline functionality
// To learn more, visit: https://gatsby.app/offline
// 'gatsby-plugin-offline',
],
}
</code></pre>
<p>ここの</p>
<pre><code> {
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images`,
},
},
</code></pre>
<p>ここがimageのgatsby-source-filesystemの設定です。<br />
ここを</p>
<pre><code> {
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/contents/images`,
},
},
</code></pre>
<p>にかえてimageフォルダをcontentsフォルダにコピーしてみましょう。<br />
そしてgatsby developとコマンドを打ってみましょう。エラーが出ます。</p>
<pre><code>Error: icon (src/images/gatsby-icon.png) does not exist as defined in gatsby-config.js. Make sure the file exists rela tive to the root of the site.
</code></pre>
<p>これは</p>
<pre><code>resolve: `gatsby-plugin-manifest`,
options: {
name: `gatsby-starter-default`,
short_name: `starter`,
start_url: `/`,
background_color: `#663399`,
theme_color: `#663399`,
display: `minimal-ui`,
icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
},
</code></pre>
<p>のiconが悪さをしています。</p>
<pre><code>resolve: `gatsby-plugin-manifest`,
options: {
name: `gatsby-starter-default`,
short_name: `starter`,
start_url: `/`,
background_color: `#663399`,
theme_color: `#663399`,
display: `minimal-ui`,
icon: `contents/images/gatsby-icon.png`, // This path is relative to the root of the site.
},
</code></pre>
<p>に修正してみましょう。<br />
バッチリ出来ましたね。</p>
aocory
tag:crieit.net,2005:PublicArticle/14734
2019-01-21T10:17:27+09:00
2019-01-21T10:17:27+09:00
https://crieit.net/posts/GatsbyJS-Netlify
GatsbyJSのサイトをデプロイする。Netlifyにデプロイする
<h2 id="Netlifyデプロイです。"><a href="#Netlify%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4%E3%81%A7%E3%81%99%E3%80%82">Netlifyデプロイです。</a></h2>
<p>いよいよ、Netlifyにデプロイです。</p>
<h2 id="Netlifyとは?"><a href="#Netlify%E3%81%A8%E3%81%AF%EF%BC%9F">Netlifyとは?</a></h2>
<p>Netlifyは静的なサイトを超高速で提供できるWebサービスです。<br />
<a href="https://crieit.now.sh/upload_images/5239f8d585584e0ae919b20966702ba55c451cc06fd91.jpg" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/5239f8d585584e0ae919b20966702ba55c451cc06fd91.jpg?mw=700" alt="0091.jpg" /></a><br />
Netlifyはパフォーマンスに対してかなり力を入れてるように見えます。<br />
具体的には以下の特徴が<br />
+ 完全にスケーラブルなサーバー<br />
+ グローバルなCDN(日本拠点あり)<br />
+ SPA向けのプリレンダリング<br />
+ 完全無料のSSL<br />
+ HTTP 2.0プロトコル対応</p>
<p>簡単にまとめると最強の静的サイトホスティングサービスです。<br />
しかも、普通の規模のサイトであれば無料枠で十分対応できます。<br />
つまり、ワードプレスみたいにエックスサーバーなどのサーバーサービスに上納金を納めなくて言い。最高です。</p>
<h2 id="Netlifyの登録方法"><a href="#Netlify%E3%81%AE%E7%99%BB%E9%8C%B2%E6%96%B9%E6%B3%95">Netlifyの登録方法</a></h2>
<p><a href="https://crieit.now.sh/upload_images/5239f8d585584e0ae919b20966702ba55c451cd320553.jpg" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/5239f8d585584e0ae919b20966702ba55c451cd320553.jpg?mw=700" alt="0091.jpg" /></a><br />
右上のSign UPをクリックします。<br />
<a href="https://crieit.now.sh/upload_images/30828953189b28fb5d2b9122f53306095c451cdf9898e.JPG" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/30828953189b28fb5d2b9122f53306095c451cdf9898e.JPG?mw=700" alt="0092.JPG" /></a><br />
一番上のGitHubを選択します。<br />
<a href="https://crieit.now.sh/upload_images/5139e2fc2f726486c3d3d00ff78440775c451ced925bb.jpg" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/5139e2fc2f726486c3d3d00ff78440775c451ced925bb.jpg?mw=700" alt="0093.jpg" /></a><br />
右上の New site from gitを記載します。<br />
<a href="https://crieit.now.sh/upload_images/ccbd002ee383e03acba0b1bea0479d595c451d01072a7.jpg" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/ccbd002ee383e03acba0b1bea0479d595c451d01072a7.jpg?mw=700" alt="0094.jpg" /></a><br />
右のGitHubを選択します。<br />
<a href="https://crieit.now.sh/upload_images/77fa8a48012e037e075ce85586892c765c451d0dc1fb5.jpg" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/77fa8a48012e037e075ce85586892c765c451d0dc1fb5.jpg?mw=700" alt="0095.jpg" /></a><br />
Myblogのレポジトリを選択します。<br />
<a href="https://crieit.now.sh/upload_images/8fc45ae5f9cda3f1fa8522a7864052535c451d19ec103.jpg" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/8fc45ae5f9cda3f1fa8522a7864052535c451d19ec103.jpg?mw=700" alt="0096.jpg" /></a><br />
この画面は特に設定無しで大丈夫です。このままDeploy siteをクリックしましょう。<br />
<a href="https://crieit.now.sh/upload_images/90f119b48584de0a5a43ac9f841a24745c451d42b4375.jpg" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/90f119b48584de0a5a43ac9f841a24745c451d42b4375.jpg?mw=700" alt="0097.jpg" /></a><br />
この画面は数分放置していると<br />
<a href="https://crieit.now.sh/upload_images/d0e1e056523b9a50f3d76817dc282a7e5c451d4e7f7a5.jpg" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/d0e1e056523b9a50f3d76817dc282a7e5c451d4e7f7a5.jpg?mw=700" alt="0098.jpg" /></a><br />
こうなります。そうしたらサイトのアドレスをクリックしてサイトを確認しましょう。<br />
問題なく表示されていたら成功です。<br />
お疲れ様でした。</p>
<h2 id="お願い"><a href="#%E3%81%8A%E9%A1%98%E3%81%84">お願い</a></h2>
<p>頑張って勉強しながら書いています。間違いなどがあればご指摘いただけたらうれしいです。</p>
aocory