NUTMEGブログのこれまでとこれから
こんにちは。就活がひと段落しそうな修士1年ryota5884です。
今回は後輩への引き継ぎも兼ねて、このNUTMEGブログが生まれた背景や歴史、運営方法についてまとめてみようと思います。
せっかくだし就活についてのブログを書いてみようと思ったのですが、企業に記事内容のチェックを頼んだり結構大変そうだったのでまたの機会に。
NUTMEGブログの目的
2021年の夏、NUTMEGでは団体の成長に伴い、メンバー内で以下のような考え・要望を持つようになりました。
- メンバーが就職活動をする際、どのような団体なのか簡単に紹介できるようにしたい。
- 外部の人（新入生や他団体、企業の方etc）が団体に興味を持ったとき、団体の活動内容・雰囲気を知ってもらえるような場が欲しい。
- メンバーがアウトプットの練習をする場を作りたい。
2021年8月頃、当時のNUTMEG代表者から鶴の一声があり、上記のような状況を改善できるブログを作ろう！という運びになりました。
制作過程の昔話
当時、学部3年生だった私がブログの作成・運用を任されました。どのように作るか、どのように運用するかも任されたので結構大変だった記憶があります。「更新が簡単であれば何でもいい」みたいなざっくりとした指定だったような気がします。
学部1年の頃、修士2年の先輩から静的サイトジェネレーター「Hugo」の使い方を学んでおり、markdownで簡単に記事を作成できるサイトの作り方には心当たりがあったので、Hugoを使用して作ることに決めました。
Hugoとは ── The world’s fastest framework for building websites Hugo is one of the most popular open-source static site generators. With its amazing speed and flexibility, Hugo makes building websites fun again. 公式サイトより
英語が苦手な方向けに翻訳した記事も用意してあげました。優しいね。
ヒューゴとは ── ウェブサイトを構築するための世界最速のフレームワーク Hugoは、最も人気のあるオープンソースの静的サイト ジェネレーターの1つです。Hugoの驚くべきスピードと柔軟性により、Webサイトの構築が再び楽しくなります。
ヒューゴかもしれませんが、私は今後もフゴで通します。
後述しますが、Hugoは配布されているテーマを選んで、ちょちょっとカスタムするだけで簡単にサイトを作成できます。完全にHTML、CSSだけで編集できるわけではありませんが、独学で何とかできる程度のものです。
これから始めてみたい方は以下のサイトを見るだけで大体の問題は解決できます。このサイトはかなり上手にまとめられているので、私が引き継ぎもなく蒸発した場合がここを参考にしてください。
→静的サイトジェネレータ「Hugo」と技術文書公開向けテーマ「Docsy」でOSSサイトを作る
技術面はそんな感じですぐに大枠が決まりました。
しかし、ブログ完成後、文章の管理方法など運営の部分で悩むことに…。2021年の夏、HomepageチームのPM以外特に役職のなかった自分の試行錯誤が始まりました。
NUTMEG 流運用方法
試行錯誤の歴史については覚えてないので割愛。出来上がったものがこちらになります。
技術的な部分
ブログの作成に使用しているものは以下の通りです。
| 項目 | 使用したもの |
|---|---|
| 静的サイトジェネレーター | hugo |
| Hugoテーマ | liva-hugo |
| ブログ記事の作成・管理 | HackMD |
| 文章の校閲 | VScodeプラグインテキスト校正くん |
| デプロイ | GitHub pagesを経由したのちNUTMEGのURLで公開（あまり深く理解できてません。インフラチームありがとう！） |
運用的な部分
運用に関する部分では何も難しいことはしていません。長く続けるためにあまり厳格にはせず、できる限りゆるくすることを意識していました。
| 項目 | 内容 |
|---|---|
| 記事の更新 | NUTMEG定例MTでブログ発表後に投稿者が指名（テレフォンショッキング形式）暇な人がいなければスキップ |
| 著者名 | ペンネーム方式（本名出したくない人に配慮）。年1更新。書きたくない人は書かなくてOK。 |
| 記事のリジェクト | 基本なし。著作権的に問題がある画像を使用している場合は変更。時間があったら文章クオリティアップのために声をかけることも…。 |
| 記事の投稿 | 記事作成後なるはやで。日付の指定はなし。 |
| ネタがないときの対応 | HackMDにネタ帳を作ってストック。ネタを思いついた人が誰でも書き加えられるようにslackの#blogチャンネルに固定 |
具体的な更新作業
NUTMEG外の方にはあまり役に立たないかと思いますが、私が行う作業量の目安として具体的な更新作業をまとめます。
- コマンドプロンプトで’hugo new content post-yyyymmdd.md’と入力してblogリポジトリ内にmarkdownファイルを作成。
- 作成したmarkdownファイルにHackMDへ投稿された記事の内容をコピペ。 画像のリンクはHackMDで使われているものをそのままでOK（絶対パスの扱いになりデータ容量の削減、ダウンロードする手間の省略が可能に）。
- コピペした後文書校正プラグインなどを使って、簡単な誤字は修正。
- コマンドプロンプトで’hugo’と入力。新しい記事がHTML形式で生成される。
- GitHubにpushしたら自動的に更新！インフラエンジニアありがとう！
時間がかかるのは文章校正の部分です。ここに手間が掛からなければ5分程度で投稿は終了します。
昔は私自身、文章を書くのが上手いわけではなかったので他人の文章を添削することに気が引けてしまい、HackMDにあげられた文章をそのまま公開していました。そのようなやり方を初めて数ヶ月過ぎた頃、公開記事を見た先輩から「ある程度のクオリティに満たない物は修正しないと、著者のためにもならない」のような要旨のコメントをいただき、現在では上記のようなスタイルで多少の校正を行っています。
最後に
現時点でも運用はできていますが、まだまだ改善点は多いです。少し考えただけでも…
- 現状では更新できるメンバーが少ない
- メンバーページの更新が少し手間
- コードを添付したときのレイアウトが醜い
- 著者名から過去のブログ記事を参照できるページが未実装
- Productsページが古い
次の担当者が決まったら、恒常的な更新作業はお願いして改善してみたいなー。
終わり。