ホームページをリニューアルしました

2020/5/18 15:35:15

こんにちは．今年度からホームページ担当になったsksatです．

タイトルの通り，リニューアルのお知らせです．

これに伴い，ホームページのURLがhttp://corerocket.lolipop.jpから，https://corerocket.netに変わります．

これまで，http://corerocket.lolipop.jpをご利用いただきありがとうございました．

旧ホームページは移行期間(終了未定)のうちは運用を継続して行います．

以前のホームページからの主な変更点は以下のようなものです．

  • 独自ドメイン化
  • WordPressの廃止
  • ブログの追加

独自ドメイン化

これまではロリポップのレンタルサーバ上でホームページを運用していたため，その初期ドメインであるcorerocket.lolipop.jpを使用していました． ですが，今回のリニューアルでは全面的な刷新を行ったため，新ホームページではロリポップのレンタルサーバを使用していません． そのため，ドメインの変更が発生しました．

新ホームページのドメインについては，今回のリニューアルより前にwikiの導入のために登録されたドメインであるcorerocket.netを使用しました． これによりドメイン更新費用はかかりますが， 特定のレンタルサーバ・サービスなどに依存しないURLでホームページを運用することができるようになりました． また，今回のようにホームページの式年遷宮[要出典]が発生してもドメインの設定を変更するだけで対応が可能になります．

WordPressの廃止

旧ホームページはレンタルサーバ上でWordPressを使用して運用していました． WordPressはPHPで動作するブログ/CMSソフトウェアです． これを使用することで，動的にページを生成するホームページを作ることや，複数人でブログなどのコンテンツを管理することができます． これはとても便利かつ簡単に扱うことができるため，インターネット上の全ウェブサイトの3割以上がWordPressを使っているとの調査もあります．

ですが，旧ホームページでは動的なコンテンツやブログを提供しておらず，特にWordPressを使用する必要はありませんでした． そのため，今回のリニューアルではWordPressを廃止しました．

具体的には，hugoを使って静的サイトを生成し，Netlifyにデプロイするようにしました．

hugo

hugoはGo1で書かれた高速な静的サイトジェネレータです． 静的サイトというのは，ユーザがアクセスしたタイミングでページを動的に生成するWordPressのようなものと対比されるもので，事前にHTMLを全て生成しておき，それをサーバ上に配置しておくことを指します．

静的サイトジェネレータはMarkdown2のような， 可読性の高い単純なフォーマットからHTMLを生成します． 実際に，このページもMarkdownから生成しています．

今回の場合，ソースファイルは以下のようなディレクトリ構造になっています． この最上位のディレクトリでhugoを実行すると， docs/以下にHTMLなどの全てのファイルが生成されています． このdocs/以下の生成されたファイルをサーバにアップロードすればいいというわけです．

.
├── config.toml
├── content
│   ├── about.md
│   ├── activity.md
│   ├── blog
│   │   └── ホームページをリニューアルしました.md
│   ├── contact.md
│   ├── notice.md
│   ├── privacy.md
│   ├── recruit.md
│   ├── rocket.md
│   └── sponsor.md
├── layouts
│   ├── _default
│   ├── index.html
│   ├── partials
│   └── shortcodes
├── netlify.toml
├── static
│   ├── admin
│   ├── css
│   └── img
└── themes
    └── universal

これらのソースファイルは記事を含めGitで管理しており， GitHub上のリポジトリにアップロードしています．

hugoにはデザインなどをテーマとして切り出しておける仕組みがあります． このテーマは多くがオープンなライセンスでGitHubで公開されており， hugoの公式サイトで検索することができます．

今回はUniversalというテーマを使用しました．

Netlify

実際に配信するファイルが生成できたので， あとはこれらのファイルをホスティングする場所が必要です． そこで，今回はNetlifyというサービスを使用しました．

Netlifyは静的サイトのホスティングなどに特化したサービスです． Netlifyでは何種類かの静的サイトジェネレータを使用することができ， ソースファイルのビルドからデプロイまでを自動で行ってくれます． 今回はソースファイルをGitHubに配置し，NetlifyをGitHubと連携させたので， 以下の図のようなシーケンスでデプロイが行われるようになりました．

まず，設定変更やページの追加などをローカルリポジトリで行い，GitHubにpushします． すると，pushをトリガーにしてNetlifyでデプロイが自動的に開始されます． このデプロイはリポジトリ中のnetlify.tomlの設定に従って行われます．

ブログの追加

さらに，今回のリニューアルではホームページにブログを新設しました． この記事は最初のブログ記事でもあります． ブログといっても，hugoを使っているのでcontent/blog/以下にMarkdownで記述した記事を配置してGitHubにpushするだけです．

ですが，ブログを追加するにあたり問題がありました． 一般的なCOREのメンバーはMarkdownやGit，GitHubといった記事の執筆・デプロイに必要なスキルが無いのです． そもそもGitやGitHubをCOREに導入したのは去年の僕であり， まだ多くのメンバーがこのような概念に馴染みがないのは仕方ありません．

Markdownのみであれば，標準的なものはそこまで難しいものではないですし， GROWIによるwikiが導入されたことで， CORE内でMarkdownを使うことができる機会も増えてきています．

では，Git/GitHubについてはどうでしょうか． 実は，去年8月の能代宇宙イベントから， いくつかのロケット電装のプログラムをGit/GitHubを使って開発しています．

年月打上実験リポジトリ
2019/08第15回能代宇宙イベントASAHI
2019/11第16回伊豆大島共同打上実験あまつかぜ
2020/03第17回伊豆大島共同打上実験桃太郎

とはいえ，現時点ではGit/GitHubがCOREに浸透しているとは言えません． そもそも使う機会があるのは電装班員のみですし，その電装班内での教育体制も整っていません3．

そこで，今回はNetlify CMSも導入しました．

Netlify CMS

通常，CMS4といえば，WordPressのようなウェブコンテンツを管理するための動的なシステムのことです． CMSを使うことで，ブラウザから画像をアップロードしたり， WYSIWYG5エディタで直感的に記事を編集したりといったことができます． Gitの学習をする必要も，ローカルに執筆環境を用意する必要もありません．

CMSのようなものを組み込むことができればいいのですが， 今回のような静的サイトはHTMLやCSSをそのまま配信しているため，それは難しいです． しかし，Netlifyでは，Netlify CMSを使うことで，まさに静的サイトにCMSを組み込むことが可能になります．

Netlify CMSにはWordPressのように，ブラウザから直感的に記事を編集できるエディタがあります． そして，WYSIWYGとまではいかないものの，すぐ横にリアルタイムプレビューが表示されるため， とても簡単に記事を編集することができます．

このエディタはMarkdownにも対応しているため，そのままhugoが処理することができます．

問題となるのはこのエディタで編集した内容をどうやって保存するかですが， これもGit/GitHubと結び付いています． git-gatewayという機能を使い，GitHubと連携することで，このエディタで保存ボタンを押すと自動的に変更がcommitされpushされるのです． もちろん，あとはNetlify CMSを使わない場合と同じく，自動的にデプロイが行われます．

さらに，Editorial Workflowという機能を使うことで， 記事の下書きやレビューを行った後に本番のデプロイを行うことができるようになります． これはGitHubリポジトリ上のPull Requestとして表現されるため，GitHubでの管理との相性も良いです． また，NetlifyにはPull Requestのソースファイルをプレビューとしてデプロイする機能があるため， デプロイ後の様子の確認をマージ前に行うことができます．

これにより，あまり知識が無くても簡単にブログ記事の執筆・校閲が可能になりました．

  1. Googleが開発しているプログラミング言語のひとつ． Golangなどの表記もある． 静的型付け型言語であり，軽量な並列処理を行うことができるgoroutineや， 複数の環境でもシングルバイナリを出力できるといった特徴がある． マスコットのGopherのキモさはLispエイリアンやD言語くんといい勝負(著者評)． ↩︎

  2. 文書をプレーンテキストで記述するための可読性の高い記法のひとつ． 元々はHTMLを生成するためのものだが，現在は様々なコンバータを使って様々なフォーマットに変換することもできる． ただし，コンバータと同様に方言も大量にあるので，別のコンバータを使う度にその違いの多さに驚かされるということはとてもよくある． ↩︎

  3. 新入生も入ってきましたし，これに関しては今後どうにかしていきたいですね… ↩︎

  4. Content Management Systemの略． ↩︎

  5. What You See Is What You Getの略． WYSIWYGエディタでは，編集中の入力画面と最終的な出力結果がほぼ同じように表示される． Wordのように，文字列を選択して太字ボタンを押すとそのままその文字列が太くなる． ↩︎

検索