サークルのウェブサイトを作った話

はじめに

東北工業大学ソフトウェア技術研究会アドベントカレンダーの記事です。（やってみたかった）

こんにちは。ソフトウェア技術研究会3年のlag129です！
今回は、サークルのウェブサイトを作成したときの話を書いていきたいと思います。
サークルの活動を学内外へ発信するため、SNSと同時にサイトを使って発信していきたいと思い作成しました。
自分たちが考えていた、ウェブサイトに求める要件は以下のとおりでした。

• 求める要件
• ブログサイトが作れる！
  • 自前のサーバを持たない！
  • 簡単にカスタマイズできる！

できたもの

このサイトです！

ブログ機能を付けつつも、自分たちで簡単にカスタマイズできるフレームワークとして、ReactベースのGatsbyを採用しました。
デプロイ先としてCloudflare Pagesを使用し、GitHubに記事（マークダウンファイル）を投稿すると自動でデプロイが行われるようになっています。

Gatsbyとは？

Gatsbyは、ReactやGraphQLを使って静的ブログサイトを生成するフレームワークです。

ブログの記事をマークダウンファイルにして、フォルダに配置するだけで自動でページが生成されます。
コミュニティプラグインを導入することで、画像の読み込みやRSS配信機能を追加することができます。

サイトの作成

以前作成したまま放置していた、Jekyll製のサイトを置き換える形で始めました。
まずは、gatsby-starter-defaultのテンプレートをもとに、マークダウンを読み込んで表示するサイトを作成しました。

プラグイン

プラグインはnpm installで導入できます。
画像系やコンテンツ系など様々なプラグインを導入しましたが、その中の一部を紹介します。

gatsby-plugin-twitter

X(Twitter)の埋め込みを貼るためのプラグインです。
マークダウンファイル内にHTMLタグを貼ることで、自動で埋め込みに変換してくれます。

gatsby-plugin-feed

RSSを配信をするためのプラグインです。
gatsby-config.js内でqueryやfeedsを記述することで、RSSの配信ファイルを自動で作成し、配置してくれます。

しかし、プラグインの使い方を詳しく書いている記事が少なく、手探りでの作業だったので実装までに時間がかかってしまいました。

最終的には、以下の形式にすることで動作させることができました。

デプロイとその後...

Gastby側のコードがある程度完成してから、GitHubのリポジトリとCloudflare Pagesを連携して、自動でデプロイするように設定しました。
Cloudflare Pagesでデプロイすることで、ウェブのアナリティクスが見れたり、プルリクエストを送ると自動で動作確認をしてくれるなど、いろいろな恩恵を受けることができます。

Gatsbyに移行しようと思い立ってから、2週間程度でデプロイまで出来て、スムーズに移行することができました。 また、途中まではJavaScriptでコードを書いていたのですが、後輩がTypeScriptへ書き換えてくれました！感謝！！

今後の目標

• デザインを見やすくする
  • 本文のコンテンツのサイズを変える
• モバイルへの対応
  • レスポンシブデザインに対応できてない...。

今後も、少しずつアップデートしながら運用していきたいと思います。

おわり

Gatsbyを使って、サークルのウェブサイトを作成し、どのような感じで運用しているかを書いてみました。 Gatsbyに関してはまだ理解できていない部分も多く、ところどころ曖昧な表現になっているのは、ご容赦していただけると幸いです。

今後もこのサークルでは、アドベントカレンダーなど外部へ発信する機会を作っていきたいと思います。 ご覧いただきありがとうございました！