Github Page を gatsby で構築する

だいぶ前に、Github Page にライブラリの紹介ページを作ったのですが、特に使われることもなく、メンテすることもなく放置でしたので、その後作ったものも含めて、ページを再構築してみようと思いました。

ページの構築には、何かしらstatic site generator を使ってみようと思い、gatsbyjs/gatsby: ⚛️📄🚀 Blazing fast static site generator for React という、React が使われている static site generator を使ってみましたので、その結果を記載します。

前提

環境情報

以下、使用した gatsby、node.js 関連の version 情報になります。
* node.js

% node -v
v8.4.0

• npm

  % npm -V
  npm@5.3.0 /usr/local/lib/node_modules/npm
  

• gatsby

  % gatsby -V
  1.1.7
  

公開先のdomain、deploy方法等

• 自分のgithub.io に User site として公開する。

• gastby を含む、html 生成前のコンテンツは bitbucket で管理、公開用のコンテンツ類は github.io リボジトリで管理する。

参考

macosx 設定メモ rsync 編 - Qiita
React.js製の静的サイトジェネレーターGatsbyを使ってみた – Snaplog
React.js製の静的サイトジェネレーターGatsbyに移行した - Qiita
ブログをGatsbyに移行しました - とりあえず動かすところまで | tmnm.tech
Deploying Gatsby | GatsbyJS

目次

• インストール、Startersの選択

• gatsby-material-starter の設定変更、カスタマイズ

• 今後実施したいこと

インストール、Startersの選択

インストール

GatsbyJS に沿って進めます。

• コマンドラインツールのインストール
  

  npm install --global gatsby-cli
  

• サイト作成
  確かに結構時間がかかりました。
  

  gatsby new gatsby-site
  ---------------------------------------
  added 1381 packages in 42.49s
  ---------------------------------------
  

• ローカルサーバ の起動
  作成した site ディレクトリに移動します。
  

  cd gatsby-site
  

  ローカルサーバ を起動します。
  

  gatsby develop
  ---------------------------------------
   I  Your site is running at http://localhost:8000
   I  Your graphql debugger is running at http://localhost:8000/___graphql
   --------------------------------------
  

  http://localhost:8080 にアクセスすると画面が立ち上がります。

Starters の選択

いくつか Starters が用意されています。
material デザインの以下のテーマがいい感じに思えましたので、こちらを使用していきます。

Vagr9K/gatsby-material-starter: A blog starter with Material design in mind for GatsbyJS.

他の Starters については、Gatsby Starters | GatsbyJS のリンクから辿れます。

• Starter ベースのサイト作成
  

  gatsby new YourProjectName https://github.com/Vagr9K/gatsby-material-starter
  

• ローカルサーバ の起動
  site ディレクトリに移動します。
  

  cd YourProjectName
  

  ローカルサーバ を起動します。
  

  gatsby develop
  

  起動後は以下のサイトが立ち上がります。¹
  Gatsby Material Starter
  [1] デモサイトへのリンクです。

gatsby-material-starter の設定変更、カスタマイズ

gatsby-material-starter の 設定を少し変更します。
実施したのは、以下4点で順に記載していきます。

1. 自分が使用する github.io に合わせて、"./data/SiteConfig.js" を編集する。
2. レイアウト、色を変える。
3. 個人的に不要な components を削除する。
4. robots.txt の修正

1. 自分が使用する github.io に合わせて、"./data/SiteConfig.js" を編集する。

SiteConfig.js

各種設定が、"./data/SiteConfig.js" に記載されています。
デフォルトの記載内容は以下の通りです。

module.exports = {
 blogPostDir: 'sample-posts', // Blog 投稿の配置先ディレクトリ content 配下のディレクトリを指定する
 siteTitle: 'Gatsby Material Starter', // サイトタイトル
 siteTitleAlt: 'GatsbyJS Material Starter', // meta タグに出力するサイトタイトル
 siteLogo: '/logos/logo-1024.png', // meta タグ、JSON-LD 内 に出力するlogo 画像を指定
 siteUrl: 'https://vagr9k.github.io', // サイトのURLを指定する
 pathPrefix: '/gatsby-material-starter', // サイトの URL に付与する prefix 、ドメイン直下の場合は、"/" でOK 
 siteDescription: 'A GatsbyJS stater with Material design in mind.', // サイトのDescription を指定
 siteRss: '/rss.xml', // rss.xml のパスを指定する
 siteFBAppID: '1825356251115265', // Facebook の Appliaction ID。 これも headerタグで使われる。
 siteGATrackingID: 'UA-47311644-4', // GA の Tracking ID   
 disqusShortname: 'https-vagr9k-github-io-gatsby-material-starter', // Disqus の shortname.
 postDefaultCategoryID: 'Tech', // 投稿のデフォルトカテゴリ
 userName: 'Material User', // ユーザ名
 userTwitter: '', // Optionally renders "Follow Me" in the UserInfo segment.
 userLocation: 'North Pole, Earth', // ユーザの所在地を指定。
 userAvatar: 'https://api.adorable.io/avatars/150/test.png', // ユーザのプロフィール画像を指定する
 userDescription: "Yeah, I like animals better than people sometimes... Especially dogs. Dogs are the best. Every time you come home, they act like they haven't seen you in a year. And the good thing about dogs... is they got different dogs for different people.", // ユーザの紹介文 を記載。 Aboutページで使われる。
 // ナビゲーションバーに表示する SNS リンクに設定するURLを設定する
 userLinks: [
   {
     label: 'GitHub',
     url: 'https://github.com/Vagr9K/gatsby-material-starter',
     iconClassName: 'fa fa-github',
   },
   {
     label: 'Twitter',
     url: 'https://twitter.com/Vagr9K',
     iconClassName: 'fa fa-twitter',
   },
   {
     label: 'Email',
     url: 'mailto:vagr9k@gmail.com',
     iconClassName: 'fa fa-envelope',
   },
 ],
 copyright: 'Copyright © 2017. Material User', // Footer と RSSに記載するコピーライト表示

};

• GAのアカウント設定、Tracking ID の発行
• Facebook の App ID の発行
• サイトロゴの準備
• アバター画像の設定

3. 個人的に<wbr>不要な<wbr> components を<wbr>削除する。<wbr> で記載しますが、Discus のコメントを使用しなかったので、disqusShortname を削除しました。

gatsby-config.js の SiteConfig.js読み込み記述

初期設定から、大きく変更する必要がない場合は、gatsby-config.js は特に編集することはないかと思います。
SiteConfig.js と、gatsby-config.js の関係がわからなかったので、gatsby-config.js を眺めていたのですが、先頭で、SiteConfig.js のimport をしています。

const config = require("./data/SiteConfig");

2. レイアウト、テーマの色を変える。

レイアウトと、テーマの色を少し変更します。

Home のレイアウト変更

デフォルトだと、1行 1投稿 で、各投稿の説明文、カテゴリ等が表示されます。
これを1行、2投稿にし、各投稿の説明文、カテゴリの表示を削除します。

対象ファイルは、gatsby-material-starter/PostPreview.jsx at master · Vagr9K/gatsby-material-starter です。
以下を修正します。

• 1行、2投稿にする。
  横幅についてclassNameで、<card key="{postInfo.path}" raise classname="md-grid md-cell md-cell--12"> と指定されています。
  <card key="{postInfo.path}" raise classname="md-grid md-cell md-cell--6"> に変更します。

• 説明文、カテゴリの削除
  CardTitle、CardText タグを削除します。
  

          <CardTitle
            expander={expand}
            avatar={<Avatar icon={<FontIcon iconClassName="fa fa-calendar" />} />}
            title={`Published on ${postInfo.date}`}
            subtitle={`${postInfo.timeToRead} min read`}
          />
  
          <CardText expandable={expand}>
            {postInfo.excerpt}
            <PostTags tags={postInfo.tags} />
          </CardText>
  

テーマの色を変える

色の定義は、Theming に記載されている通りで、src/layouts/theme.scss を修正して変更することができます。
以下、変更後の scss ファイルで、md-blue-grey系の色だと、default のリンクの色と被ってリンクが見えなくなってしまったので、link の 色を変更しています。

@import '~react-md/src/scss/react-md';
$md-primary-color: $md-blue-grey-800;
$md-secondary-color: $md-blue-grey-300;
$md-tertiary-color: $md-grey-50;

.main-container,
.darker-background {
    background-color: $md-tertiary-color;
}

a:link {
    color: $md-secondary-color;
    text-decoration: none;
}
a:visited {
    color: $md-blue-600;
}
a:hover {
    color: $md-blue-900;
}
a:active {
    color: $md-blue-300;
}

3. 個人的に不要な components を削除する。

Discus は使わなかったので、Discus 関連の記載と components を削除しました。

• Discus 関連の記載 の削除
  対象は、gatsby-material-starter/post.jsx at master · Vagr9K/gatsby-material-starter です。
  以下、変更削除します。
  まず、変更点ですが、ここにも横幅の指定箇所がありますので、md-cell--9 指定を md-cell--12 に変更します。
  

  <div className={`md-grid md-cell--9 post-page-contents mobile-fix ${postOverlapClass}`}>
  

  <div className={`md-grid md-cell--12 post-page-contents mobile-fix ${postOverlapClass}`}>
  

  削除する箇所は、Discus の comment 表示欄です。以下記述を削除します。
  

  <Disqus postNode={postNode} expanded={expanded} />
  

4. robots.txt の修正

robots.txt の内容を設置する domain に合わせて修正します。
gatsby-material-starter/robots.txt at master · Vagr9K/gatsby-material-starter

User-agent: *
Disallow: */tags/
Disallow: */categories/

sitemap: https://kemsakurai.github.io/sitemap.xml

その他、サイト&コンテンツ作成時に気づいたこと、実施したこと

その他、サイト、コンテンツ作成時に気づいたことを記載します。

Google Search Console の所有権の確認

Google Search Console の 設定時に、所有権の確認用の HTML を配置しますが、 チェックイン後は結構長い時間認識されません。
気長に待つことをお勧めいたします。

Markdown にlink記載する際、同一ドメインの且つ、gastby の管理外だと上手く遷移ができない

github.io の page リソースとして、gastby の管理対象外の、htmlを追加しました。
kemsakurai.github.io/resources/html at master · kemsakurai/kemsakurai.github.io

htmlのリンクとして、markdown 上に以下のような記載を行いましたが、それだと上手く表示できませんでした。²
Gatsby Material Starter
[2] ページTop に遷移する動作となります。

[Grid Layout](/resources/html/grid_export.html)

<a href="/resources/html/grid_export.html" rel="noreferrer noopener" target="_blank">Grid Layout</a>

Bitbucket から、Github Page へのデプロイ

ここは、もっといいやり方がある、または command が用意されていそうにも思いますが、コマンド等がよくわからず、
rsync で local の Bitbucket の repository の コピーから、 Github repository の コピーを行う スクリプトを作成しました。

#!/bin/sh

# github io のディレクトリ
GITHUB_IO_DIR="your_local_github.io_dir"

rsync -av --delete \
--exclude maven \
--exclude .git \
--exclude .DS_Store \
--exclude .gitignore \
--exclude resources \
--exclude cooperation \
--exclude google5056b155210a3bd8.html \
public/ $GITHUB_IO_DIR

今後実施したいこと

gatsby を 使用して、github page を構築しました。以下リンクになります。
kemsakurai.github.io document を 見ていると、plugin がいろいろあったので、導入した、Vagr9K/gatsby-material-starter: A blog starter with Material design in mind for GatsbyJS. は default で plugin を多数使っている感がありますが、使われているものを試していこうかと思います。

以上です。