このサイトを今年度も引継ぐ場合、編集方法が小難しいと思うので書き残しておきます。一応、去年の記事の続きになっています。ウェブサイト構築の導線になれば幸いです。

サンドボックス版のクローンサイトを作っていますので、実際にそちらで試してみてください。検索エンジンのクローラーには引っ掛かりません。

サイトのデザインを変更する

HTMLとCSSを理解すれば、容易に編集できます。

まず、GitHub上で下記のファイルを探します。

SandboxSPCWeb/src/pages/index.js

次に、コンポーネントクラスを探します。

class BlogIndex extends React.Component {

編集に必要なのは、その下のrender()関数です。render()関数はJSXを返します。

return()で囲った部分がJSXです。JSXは基本的にHTMLで書けます。

スタイルシートはSCSSで定義しています。SCSSはCSSと同じ文法を使います。ファイルは下記の位置にあります。

SandboxSPCWeb/src/styles/common.scss

変更した内容は、数分後、サンドボックス版のウェブサイトに反映されます。本サイトの編集も同様の手順で行えます。

補足になりますが、データベースから何か新しく定義したデータを抽出したい場合、コンポーネントクラスの下に書いてあるクエリを編集します。

export const pageQuery = graphql\`

詳しくは本家のマニュアルを参考にしてください。

GatsbyJS製サイトの編集は基本的にこれだけです。他のページも同様です。たとえばこのページのような、個別記事用のデザインを編集したい場合は、下記のファイルを参照します。中身の構造は同じです。

SandboxSPCWeb/src/templates/post.js

新しい機能を追加する

ここからはコマンドライン上での操作になります。

まず、Bash on Windowsで以下のコマンドを一行ずつ打ち込んで、GatsbyJSのローカル開発環境を作ります。

sudo apt update
sudo apt install nodejs
sudo apt install npm
npm install -g gatsby-cli

次のようなコマンドで、GitHub上のリポジトリをダウンロードします。

git clone https://github.com/ShigaPC/SandboxSPCWeb.git

新しく導入したいプラグインをインストールします。GatsbyJSの開発者が意欲的に大量のプラグインを公開してくれています。ここでは、アクセス解析用にGoogle Analyticsのプラグインを導入します。

cd SandboxSPCWeb
npm install --save gatsby-plugin-google-analytics

各プラグインのマニュアルに従って設定を終えたら、git commitします。

git add .
git commit -m ‘Google Analyticsを追加’

サンドボックス版のウェブサイトにアクセスして、変更が反映されているか確認してください。

サーバーの設定を変更する

Netlifyのホスティングサービスを使用します。ドメインの各種設定はここから行います。

変更が反映されない場合、デプロイに失敗している可能性があるので、Netlifyにログインして再試行してください。