だいぶ前に、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の選択
インストール
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
起動後は以下のサイトが立ち上がります。1gatsby develop
Gatsby Material Starter
[1] デモサイトへのリンクです。
gatsby-material-starter の設定変更、カスタマイズ
gatsby-material-starter の 設定を少し変更します。
実施したのは、以下4点で順に記載していきます。
- 自分が使用する github.io に合わせて、
"./data/SiteConfig.js"を編集する。 - レイアウト、色を変える。
- 個人的に不要な components を削除する。
- 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. 個人的に不要な components を削除する。 で記載しますが、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}`}>削除する箇所は、Discus の comment 表示欄です。以下記述を削除します。<div className={`md-grid md-cell--12 post-page-contents mobile-fix ${postOverlapClass}`}>
<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 上に以下のような記載を行いましたが、それだと上手く表示できませんでした。2
Gatsby Material Starter
[2] ページTop に遷移する動作となります。
[Grid Layout](/resources/html/grid_export.html)
markdown から html を生成する際に a タグに対して行なっている処理に問題があるように思われます。
<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
.DS_Store が含まれます。 他 OS の場合は削除して問題ないです。 rsync は、
--delete をつけてますので、同期を取ると、ディレクトリ、ファイルが削除されます。 初回、動作確認時は、
n オプションを指定することをお勧めします。
今後実施したいこと
gatsby を 使用して、github page を構築しました。以下リンクになります。
kemsakurai.github.io
document を 見ていると、plugin がいろいろあったので、導入した、Vagr9K/gatsby-material-starter: A blog starter with Material design in mind for GatsbyJS. は default で plugin を多数使っている感がありますが、使われているものを試していこうかと思います。
以上です。
コメント