# 20240216_NUTMEGブログのこれまでとこれから
(例：20210901_LT会を開催しました)
###### tags: `ブログ記事`

- [x] 公開（ブログ公開担当者がいじるやつ）

太字斜体で書いてある内容を埋めて行ってください．
文章，画像は太字斜体の下の行に入れてください．
最初に書く時はREADMEを読んだら読むといいと思います．

<br>

## 表示されない情報
***書いた人の名前(自己紹介文と同じ名前)***
{
r.kobayashi
}

***記事の簡単な説明(検索した時にタイトルの下に出てくる文章)***
{
こんにちは。

就活がひと段落しそうな修士1年r.kobayashiです。

せっかくだし就活について一つ書いてみようかと思ったのですが、企業に記事内容のチェックを頼んだり結構大変そうだったのでまたの機会に。

今回は後輩への引き継ぎも兼ねて、このNUTMEGブログが生まれた背景や歴史、運営方法についてまとめてみようと思います。
}

<br>

## 表示される部分
***サムネイル画像***
{

}

***カテゴリ***
以下の中から該当しそうなカテゴリを選択してください
※一つだけ選択してください
- [ ] 対外活動
- [ ] 活動の様子
- [ ] メンバーの趣味
- [ ] NUTMEG Advent Calendar 2023

***タグ***
以下の中から該当しそうなカテゴリを選択してください．当てはまる物がない場合は適宜追加してください.
言語
- [ ] HTML
- [ ] CSS
- [ ] Python
- [ ] Go
- [ ] Ruby
- [ ] JavaScript
- [ ] TypeScript
- [ ] Dart
- [ ] Rust
- [ ] Kotlin
- [ ] Swift

フレームワーク・ライブラリ
- [ ] Ruby on rails
- [ ] Vue.js
- [ ] Nuxt.js
- [ ] React.js
- [ ] Next.js
- [ ] Gin
- [ ] Flluter

ツール
- [ ] GitHub
- [ ] ターミナル
- [ ] WSL
- [ ] Ubuntu
- [ ] Docker
- [ ] Raspberry Pi
- [ ] Figma
- [x] Hugo

分野
- [x] チームづくり
- [ ] フロントエンド
- [ ] バックエンド
- [ ] インフラ
- [ ] Web-design
- [ ] API関係

---

***以下に本文を記載してください***

こんにちは。

就活がひと段落しそうな修士1年r.kobayashiです。

せっかくだし就活について一つ書いてみようかと思ったのですが、企業に記事内容のチェックを頼んだり結構大変そうだったのでまたの機会に。

今回は後輩への引き継ぎも兼ねて、この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.
[公式サイト](https://gohugo.io/)より

TOEIC400点以下？日本語に翻訳したやつも用意してあげるよ。
> ヒューゴのロゴ
ウェブサイトを構築するための世界最速のフレームワーク
Hugo は、最も人気のあるオープンソースの静的サイト ジェネレーターの 1 つです。Hugo の驚くべきスピードと柔軟性により、Web サイトの構築が再び楽しくなります。

ヒューゴかもしれませんが、私は今後もフゴで通します。

後述しますが、Hugoは配布されているテーマを選んで、ちょちょっとカスタムするだけで簡単にサイトを作成できます。完全にHTML、CSSだけで編集できるわけではありませんが、独学で何とかできる程度のものです。

これから始めてみたい方は以下のサイトを見るだけで大体の問題は解決できます。このサイトはかなり上手にまとめられているので、私が引き継ぎもなく蒸発した場合がここを参考にしてください。

→[静的サイトジェネレータ「Hugo」と技術文書公開向けテーマ「Docsy」でOSSサイトを作る](https://knowledge.sakura.ad.jp/22908/)

技術面はそんな感じですぐに大枠が決まりました。

しかし、ブログ完成後、文章の管理方法など運営の部分で悩むことに…。2021年の夏、HomepageチームのPM以外特に役職のなかった自分の試行錯誤が始まりました。

## NUTMEG 流運用方法

試行錯誤の歴史については覚えてないので割愛。出来上がったものがこちらになります。

### 技術的なところ
↓↓↓見やすい表（心の目で見て）↓↓↓

使用したもの

主幹技術 hugo

使用Hugoテーマ [liva-hugo](https://github.com/gethugothemes/liva-hugo)

ブログ記事の作成・管理 HackMD

文章の校閲 VScodeプラグイン [テキスト校正くん](https://marketplace.visualstudio.com/items?itemName=ICS.japanese-proofreading)

### 運用なところ

↓↓↓見やすい表（心の目で見て）↓↓↓

**記事の更新** NUTMEG定例MTでブログ発表後に投稿者が指名（テレフォンショッキング形式）暇な人いなかったらスキップ

**著者名** ペンネーム方式（本名出したくない人に配慮）。年1更新。書きたくない人は書かなくてOK。

**記事のリジェクト** 基本なし。著作権的に問題がある画像を使用している場合は変更。時間があったら文章クオリティアップのために声をかけることも…。

**記事の投稿** 記事作成後なるはやで。日付の指定はなし。

**ネタがないときの対応** HackMDにネタ帳を作ってストック

### 具体的な更新手順

1. コマンドプロンプトで'hugo new content post-yyyymmdd.md'と入力
blogリポジトリ内にmarkdownファイルを作成
2. 作成したmarkdownファイルにHackMDに投稿された記事の内容をコピペ。
画像のリンクはHackMDで使われているものをそのままでOK（絶対パスの扱いになりデータ容量の削減、ダウンロードする手間の省略が可能に）
3. コピペした後文書校正プラグインなどを使って、簡単な誤字は修正
4. コマンドプロンプトで'hugo'と入力。新しい記事がHTML形式で生成される
5. Githubにpushしたら自動的に更新！インフラエンジニアありがとう！

## 最後に

最近も運用できていますが、至らぬ点も多いです。

- 小林しか更新できない…
- メンバーページの更新がだるい…
- codeを添付したときのレイアウトが醜い…
- 著者名から過去のブログ記事を参照できるページが未実装（やろうと思えばすぐできる）
- Productsページが古い

次の担当者が決まったら、恒常的な更新作業はお願いして改善してみたいなー。

終わり。