目次
⚠ 注意： Gatsby V2の頃の情報です。gatsby-starter-novelaは作者のGithubリポジトリから消えました。
🏠 公式
GitHub - narative/gatsby-theme-novela: Welcome to Novela, the simplest way to start publishing with Gatsby.
リンク切れ
📥 インストール
インストールから初期設定は基本的に公式のREADMEに沿ってやればOK。
私は yarn を使っているのでスターターキットを git clone の方でインストールしました。スターターキットかテーマのみかでリポジトリのURLが異なるので注意。私はハマりました。
git clone https://github.com/narative/gatsby-starter-novela.git novela
cd novela
yarn
ノードモジュールのインストールが済んだら試しに開発サーバーを起動してみます。
yarn dev
他のテーマやスターターキットは大抵 yarn develop なのですが、足並みをそろえる気はなさそうですね。まあ、コマンドが短くなるから良しとしましょう。
はい、ブラウザでも問題なく表示されてますね。
つづいてビルドの確認。
yarn serve では動かないので yarn gatsby serve となります。なんだかな〜。
yarn build
yarn gatsby serve
問題なさそうですね。
では初期設定に移ります。
⚙ 初期設定
👤 著者を追加
公式READMEによると下記のようなフォルダー構成になっているはずですが。。。
novela
└── content
└── authors
├── avatars
│ └── brotzky-avatar.jpg
└── authors.yml
私がインストールしたスターターキットではこうなってました。
novela
└── content
└── authors
└── authors
├── avatars
│ └── dennis-brotzky.jpg
│ └── thiago-costa.png
├── dennis-brotzky.yml
└── thiago-costa.yml
モヤモヤとした気持ちを抱えたまま、自分のアバター画像とymlファイルを追加します。ymlファイルはデニスさんのをコピーして編集しました。
name:には半角スペースを含めてもOK。日本語を入れる場合はslug:を半角英数字で設定します。
どうやら featured: true にした人はトップページに載るもよう。公式READMEによると1人設定しておけばいいので、デニスさんは false にしておきました。後で用済みになったらデニスさんとティアゴさんには消えてもらいます 😎
gatsby-starter-novelaは複数人で執筆できる設計になってるんですねぇ。
🌐 サイトメタデータの設定
gatsby-config.js のダミーデータを自分のサイト情報に書き換えるだけです。
私が使いたいサイトにはほとんど対応してないくせして social: 必須になってます。
いっぽう嬉しいことに hero.heading: で ”​” が使用でき、スマホ表示の時に改行可能な位置を指定できます。どのスターターキットだったかは忘れましたが、以前ほかのスターターキットで試したときは出来なかったんですよねぇ。今回は「RABZOMBIE」と「.com」の間で改行できるようにしました。
🛠 Theme UIのカスタマイズ
Theme UI対応なのでカラーリングやフォントの変更ぐらいならCSSを編集する必要はありません。
src/gatsby-plugin-theme-ui/index.js を（無ければ新規作成して）編集します。
例）
import novelaTheme from '@narative/gatsby-theme-novela/src/gatsby-plugin-theme-ui';
export default {
...novelaTheme,
initialColorMode: `dark`,
colors: {
...novelaTheme.colors,
primary: '#221100',
secondary: '#665544',
background: '#f5f4f2',
accent: '#6166DC',
articleText: 'rgba(34, 17, 0, 0.8)',
track: 'rgba(34, 17, 0, 0.3)',
progress: "#221100",
horizongalRule: 'rgba(34, 17, 0, 0.15)',
modes: {
...novelaTheme.colors.modes,
dark: {
...novelaTheme.colors.modes.dark,
primary: '#fafafa',
secondary: '#fafafa',
accent: '#6166DC',
background: '#121110',
gradient:
"linear-gradient(180deg, #121110 0%, rgba(98, 81, 66, 0.36) 100%)",
articleText: 'rgba(255, 255, 255, 0.7)',
progress: '#fafafa',
},
},
},
fonts: {
...novelaTheme.fonts,
serif: '"Noto Serif CJK JP", "Noto Serif JP", Serif',
sansSerif: '"Noto Sans CJK JP", "Noto Sans JP", sans-serif,"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
monospace: 'Ricty, monospace',
},
};
とりあえずこんな感じ。
Novela のデフォルト値はここに載っているので、参考にすると良いでしょう。
🇯🇵 “Noto Sans JP”と”Noto Serif JP”のインストール
Theme UIで指定した”Noto Sans JP”と”Noto Serif JP”を使うためにフォントをインストールします。
yarn add fontsource-noto-sans-jp fontsource-noto-serif-jp
インストールできたらフォントを読み込む設定をします。
🇯🇵 “Noto Sans JP”と”Noto Serif JP”を読み込む
gatsby-browser.js に（無ければ新規作成して）以下の内容を追記します。
import "fontsource-noto-sans-jp"
import "fontsource-noto-sans-jp/700-normal.css"
import "fontsource-noto-serif-jp/700.css"
一部の太さ・斜体だけ読み込むことによってダウンロード量を削減してます。
💡 インストールした”Noto Sans JP”の前に”Noto Sans CJK JP”をTheme UIのフォント設定で指定しているのは一部の環境で高速化を狙ったものです。“Noto Sans JP”と”Noto Sans CJK JP”はほぼ同一のフォントです。AndoroidやChromeOS、一部のLinuxデスクトップでは “Noto Sans CJK JP”がプリインストールされてますよね。その場合はローカルから読み込むように指定するとフォントのダウンロードが発生しないぶん高速化を期待できるのです。
🇯🇵 HTMLの言語指定を日本語に変更
デフォルトでは<html lang="en">となっています。しかもgatsby-config.jsとかでチョチョイと簡単に変更できるようにはできてません。「英語にあらずんば言語にあらず」と言わんばかりです。仕方ないのでシャドーイングして lang="ja" に変更します。
src/@narative/gatsby-theme-novela/components/SEO/SEO.tsx を作成して、リンク先のコードをコピー＆ペースト。htmlAttributes={{ lang: 'en' }} となっている箇所を htmlAttributes={{ lang: 'ja' }} に書き換えます。
これで日本語にできたのですが、ひとつ問題発生です。Visual studio codeに問題点を指摘されました。
型 '{ name: string; value: string; }' の引数を型 '{ charset: string; 'http-equiv'?: undefined; content?: undefined; itemprop?: undefined; name?: undefined; property?: undefined; } | { 'http-equiv': string; content: string; charset?: undefined; itemprop?: undefined; name?: undefined; property?: undefined; } | { ...; } | { ...; } | { ...; }' のパラメーターに割り当てることはできません。
オブジェクト リテラルは既知のプロパティのみ指定できます。'value' は型 '{ name: string; content: any; charset?: undefined; 'http-equiv'?: undefined; itemprop?: undefined; property?: undefined; }' に存在しません。
型 '{ name: string; value: string; }' の引数を型 '{ charset: string; 'http-equiv'?: undefined; content?: undefined; itemprop?: undefined; name?: undefined; property?: undefined; } | { 'http-equiv': string; content: string; charset?: undefined; itemprop?: undefined; name?: undefined; property?: undefined; } | { ...; } | { ...; } | { ...; }' のパラメーターに割り当てることはできません。
オブジェクト リテラルは既知のプロパティのみ指定できます。'value' は型 '{ name: string; content: any; charset?: undefined; 'http-equiv'?: undefined; itemprop?: undefined; property?: undefined; }' に存在しません。
JSX 要素クラスは 'props' プロパティを含まないため、属性をサポートしません。
'Helmet' を JSX コンポーネントとして使用することはできません。
そのインスタンスの型 'HelmetWrapper' は、有効な JSX 要素ではありません。
型 'HelmetWrapper' には 型 'ElementClass' からの次のプロパティがありません: context, setState, forceUpdate, props、2 など。
気になってコピー元のファイルを開いてみるとされに多くの問題点を指摘されてます。
開発サーバーやビルドはちゃんと動作しているようなのですが、なんとも気持ち悪い。。。
🖼 ロゴ画像の差し替え
公式に書いてあるとおりロゴのコンポーネントをシャドーイングします。Inkscapeで作って「最適化SVG」として出力、テキストエディターで開いてコードをコピー＆ペーストしました。
以上を済ませたらいよいよ自分のブログとして使用できるようになりました。
✍ 記事を追加
最低1人の著者を設定してあれば記事を追加できます。記事は .md または .mdx 形式で書くことができ、content/posts 以下に配置します。階層を深くしてもテーマオプションで設定しない限りURLはドメイン直下となります。
たとえば”content/posts/2020/11/example.mdx”に記事をおいてもURLはhttps://example.dom/exampleになります。
ちなみに、フロントマターでslug: /subdirectory/exampleと指定したらURLはhttps://example.dom/subdirectoryexampleになりました。思ってたんと違う。。。/
ともあれ、この機能のためにgatsby-starter-novelaを使うと言っても過言ではないくらい重要視してます。というのも記事を管理する都合上、年単位でフォルダー分けしたいんです。でも、URLはドメイン直下にしたい。なんてワガママが通るのがgatsby-starter-novela。
同様の機能をもったgatsby-advanced-starterは早々に壊してしまったので、今度こそは無事に使い倒したいですね。
💡 Tips
フロントマターで secret: true を設定したページには <meta name="robots" content="noindex"> が付くようになりました。これはありがたい。
secret posts should have noindex metadata · Issue #363 · narative/gatsby-theme-novela · GitHub
🏁 まとめ
gatsby-starter-novelaを使ったらWordPressと同程度の手間暇でブログが作れました。
まだまだ荒削りなのでしょう、ところどころ「なんで？」って思う場面もありました。しかし今後追加される機能なども予告されており、期待が高まります。テーマであればアップデートの適用が可能だというので。
最後まで読んでいただき、ありがとうございます m(_ _)m