ロゴ ロゴ

新入生歓迎用のページを作ってみたよ(Svelteはいいぞ外伝)

まえがき

今年の新歓ブログリレーも無事公開し，一安心しています．どうもウグイスです．

新歓ブログリレーでも言いましたが，新入生の皆様おめでとうございます．

さて，今回は新歓関連でやったこととして，新歓ページ用のリポジトリの作成と，デプロイの自動化をやってみたので，それの備忘録というか，紹介でもしようかと思います．

動機

以前までは，私の同期が作ってくれていたのを使っていました．私の同期ということは当然卒業して，今は働いているわけです．

で，さすがに卒業した人もずっと維持しているわけにはいかないので，落としますと連絡が来ました．

とりあえず，今のWebシステム内で適当に作ったのを乗っけていたのですが，せっかくなら新しく作ろうとなりました．

というわけで，ちょうどSvelteを触っていたので，勉強がてらちょっと整備してみるかというわけで，私が担当することにしました．

概要

今回の新歓ページの作成では，私が勉強したかったのでSvelte kitを採用しました．

公開方法ですが，静的サイト生成(SSG)を使って静的ファイルの配信で行うことにしました．

一応，電算が使っているVPSを使って，サブでサーバ立てて，ルーティングいじって… とかもできなくはないですが，VPSの管理コストが増えるのは良くないかなと思いました．(引継ぎコストとかいろいろ)

SSGを使うので，選択肢は，VPSに置いてnginxとかでルーティングの設定をしてもらうか，github.ioとかなと思います．前者は更新したい時にVPSの管理をしている人に作業をしてもらう必要があり，管理者の負担が大きいため，なしとなりました．

結果，github.ioで公開となりました．

これなら，引継ぎや共同編集もGithubのリポジトリをいじればよくて，いろいろ都合がいいです．VPSと違って消しゴムされる心配もないです．

でまあ，github.io使うなら，当然GithubActionsを使ってデプロイの自動化までできるようにしたらカンペキジャンといった感じです．

まとめると，Svelte kitを使ってページを作成，github.ioで公開，デプロイもActionsを使って自動化．となります．

簡単な紹介

とりあえず，以下のリンクがリポジトリです．

https://github.com/uguisu64/den3newComer

github.ioで公開する以上．Publicにする必要があるので，堂々公開．

今回は，ページ遷移の無い単純なシングルページアプリとして作成しました．

私はCSSわからないマンなので，とりあえず，ざっくりGPT君に作らせて，svelte kitに突っ込んで，調整した感じです．

質問文：

以下のような内容を含んだ新歓ページを作りたいです．いい感じにHTMLとCSSに変換してもらえますか？モダンな感じで青とか水色を基調にしてほしい

電子計算機研究会は

情報系の技術に興味を持った

芝浦工業大学の学生が運営する

大学公認サークルです

[Our Twitter Account](https://x.com/sit_densan "Our Twitter Account")

### Zoom説明会日程

2025年度の説明会日程はまだ決定していません．

電算はいつでも新入部員を歓迎します．メールで連絡いただければ，対応いたします．

電算公式メールアドレス：den3.shibaura@gmail.com

### 部員の活動内容

#### IoT制作

マイコンやSBCを使った制作物を作っている部員がいます．

#### 機械学習系

LLMとかを使って遊んだり，最新技術を追っている部員がいます．

#### ゲーム制作

Unityを使ったりしてゲームを作っている部員がいます．

大宮祭や芝浦祭で展示しています．興味があれば見に来てください．

#### Web系

簡単なサーバアプリを作成したり，ブログの保守とかをやっている部員がいます．

#### その他

スマホアプリを少し作れたり，絵をかけたりする部員もいます．

回答：

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>電子計算機研究会 - 新歓ページ</title>
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap" rel="stylesheet">
  <style>
    body {
      font-family: 'Noto Sans JP', sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f4faff;
      color: #333;
    }

    header {
      background-color: #007BFF;
      padding: 2rem;
      text-align: center;
      color: white;
    }

    h1 {
      margin-bottom: 0.5rem;
      font-size: 2rem;
    }

    .container {
      max-width: 800px;
      margin: auto;
      padding: 2rem;
    }

    section {
      background-color: white;
      padding: 1.5rem;
      margin-bottom: 1.5rem;
      border-radius: 12px;
      box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }

    a {
      color: #007BFF;
      text-decoration: none;
      transition: color 0.2s;
    }

    a:hover {
      color: #0056b3;
      text-decoration: underline;
    }

    .email-box {
      background-color: #e3f2fd;
      padding: 1rem;
      border-radius: 8px;
      text-align: center;
      margin-top: 1rem;
      word-break: break-all;
    }

    h2 {
      border-left: 5px solid #007BFF;
      padding-left: 0.5rem;
      margin-bottom: 1rem;
    }

    ul {
      line-height: 1.8;
    }
  </style>
</head>
<body>

<header>
  <h1>電子計算機研究会</h1>
  <p>芝浦工業大学公認サークル</p>
</header>

<div class="container">

  <section>
    <p>
      電子計算機研究会は情報系の技術に興味を持った芝浦工業大学の学生が運営する大学公認サークルです。
    </p>
    <p><a href="https://x.com/sit_densan" target="_blank">▶︎ 電算公式Twitterアカウント</a></p>
  </section>

  <section>
    <h2>Zoom説明会日程</h2>
    <p>2025年度の説明会日程はまだ決定していません。</p>
    <p>電算はいつでも新入部員を歓迎します。メールで連絡いただければ、対応いたします。</p>
    <div class="email-box">電算公式メールアドレス：<br><strong>den3.shibaura@gmail.com</strong></div>
  </section>

  <section>
    <h2>部員の活動内容</h2>

    <h3>IoT制作</h3>
    <ul>
      <li>マイコンやSBCを使った制作物を作っている部員がいます。</li>
    </ul>

    <h3>機械学習系</h3>
    <ul>
      <li>LLMなどを使って遊んだり、最新技術を追っている部員がいます。</li>
    </ul>

    <h3>ゲーム制作</h3>
    <ul>
      <li>Unityを使ったゲーム制作をしています。大宮祭や芝浦祭で展示しています。興味があれば見に来てください。</li>
    </ul>

    <h3>Web系</h3>
    <ul>
      <li>簡単なサーバアプリを作成したり、ブログの保守をしている部員がいます。</li>
    </ul>

    <h3>その他</h3>
    <ul>
      <li>スマホアプリ制作、イラスト制作などをしている部員もいます。</li>
    </ul>

  </section>

</div>

</body>
</html>

まあこれで表示するとそこそこいい感じのものができてました．

あとはちょっとセクションごとにファイルを切り分けて，動きを多少追加，内容を拡充して，完成です．

内容追加に関しては，各活動について，より詳細な情報を追加しました．

動きの追加に関しては，新歓Zoomの日程切り替えと，各グループの内容を切り替えることができるようにしました．ここにわざわざコードは載せないですが，簡単にかけるのでSvelteはいいなと感じます．

公開について

公式のSSGのページに割と直な情報がありました．そこを参考にしたらすぐにできました．やり方があるのかわからないんですが，Githubのページでちょっといじらないといけなかったのが面倒くさかったです．

https://svelte.jp/docs/kit/adapter-static

でGithub.ioで公開したのが以下のような感じ

https://uguisu64.github.io/den3newComer/

で，Webページ内に埋め込みで公開がいいのかなと思い．以下のような感じで公開しました．

http://den3.net/%e6%96%b0%e6%ad%93%e3%83%9a%e3%83%bc%e3%82%b8/

あとがき

というわけで，新歓ページ作ったよという報告となります．

今回のことで，割と簡単にデプロイできることが分かったので，サークルで企画するときとか，個人でも作ってみてもいいかもねと思いました．

というわけで以上．ご精読ありがとうございました．ウグイスでした．

コメント入力

関連サイト