※Gatsby Cloudはサービスを終了しました。移行先のNetlifyにて、ほぼ同様の手順でビルドができます。
半年放置したら全部忘れた
あながち冗談でもなく、ようこんなもん作れたな…と頭を抱えています。 とりあえずサイトのコピーが作れるか試してみるか…
(画像が多くなったのでページ分けます)
サイトのコピー
まずはGithubに登録。
諸々の設定をして、ウェルカムウィンドウ的なところまで来ました。
あ、importってある。ここでいいのかな?
このサイトのリポジトリのURLを入れてみます。(Your old repositoryではないけど)
できちゃった…
とりあえずこれで良しとしましょう。(ページの右、Contributorsに謎のアカウントがいますが、Github Desktopの謎仕様で最初の頃コミットしてたことになってた私です)
続いてGatsby Cloudに登録。
Add a site → Githubを選んで…
実は先にGatsby Cloudの登録をしてしまっていた関係でちょっと飛びましたが、連携的なものをするとなんやかんやでこんな感じに自分のリポジトリが出てきます。
サイトのURLとかを設定。
ようわからんけどたぶんこのままでOK。
これで準備は完了、自動でビルドが始まります。
なんか勝手にやり直しが発生するので実際は10分ほどかかってるけど、無事にビルド完了!
同じ内容のサイトが生まれました!あとはGithubのソースをいじるだけ!
ローカルの開発環境はまあ、調べてできそうならって感じで…。
ちょっと年度の文字とか参加者情報とかいじるだけなら、最悪Githubのサイト上でなんとかなるんじゃないかと思います。
(追記: この後ノートPCで作業したくなったので試したところ、普通にnode.jsをインストール→npmでyarnとgatsby-cliをインストール→クローンしたリポジトリでnpm install→ (package-lock.jsonが勝手に更新されるので念のため元に戻す→) gatsby develop、で上手くいきました。思ってたより簡単だった)
(追記2: web上でエディタを開ける機能が去年から始まってたみたいですね。もちろんビルドのプレビューはできないけど、複数のファイルを編集したり削除・追加したいときには便利(さらに追: このおまけページとか消す必要があるので…))
サイト情報の書き換え
というわけでいじってみましょう。
/src/componentsのheader.js及びlayout.jsが、各ページに共通で表示される要素です。まずはheader.jsの2022を2023に変更してみましょう。
鉛筆マークから…
ここを変更。(済)
説明は適宜入力して(しなくてもいい)、Commit change。
1文字しか変更していないというのに、即座にビルドが始まります。サービスに余計な負荷をかけていこう!
はやい
スマホで表示したときのタイトルが2023に変わりました!(そこ?)(スマホでの見え方はChromeならF12 → Ctrl + Shift + Mで確認できます)
そういえばタイトルとかは別のとこをいじんなきゃいけないのでした。
/gatsby-config.jsで、諸々の2022を2023に変えましょう。検索して見逃しのないように。あっなぜか2021になってるとこある…
layout.jsも更新して、こうなりました。(gatsby-config.js含め、ツイッターIDや各リンクは変えてません。流用の際はご注意。メールアドレスは一応最低限のスパム対策でデシマルコード化しています)
他の各ページ(/src/pages)にも色々と更新要素があるかと思いますので、よくチェックしてみてください。(ページのリンクは一度は全部踏んでみよう)
追記: 結構大事な見逃しがありました。layout.jsの一番下、©の部分、「{new Date().getFullYear()}」は現在の年を返してしまうので、ここも適宜修正してください。
ただここの年号、そもそもは著作権表示に伴う発行年や更新年を指すやつなのでこういう書き方になっていて…、正確な記述にしようと思うと開催年度も別で書き入れて下のようになってしまうので、まあお好みで…
後半では特殊な仕様のページの扱いと、その他細かいことを書きます。
(また追記: あと申し訳ないけど、このあとがきページ達とsrc/components/images/omakeの説明用画像の削除も忘れずに…サイト内でここへのリンクは更新情報(後述)にしかないので最悪そこを消すだけでも大丈夫)
←運営感想トップに戻る