技術ブログ（KOTABLOG)のリポジトリ

技術ブログ開発の経緯

以前は、長野県立大学のグローバル教養ゼミの紹介兼情報発信用ホームページ（下に詳細記述）として作成したが、活動及び作成プロジェクトが終了し、新たな目的のサイトを作成したかったため。

目的

• 開発者自身のプログラミング学習及び個人開発サービスのアウトプットを行うこと
• オリジナルのブログを作成し、サイトの運用を通して、運用方法や SEO の学習を行うこと

投稿内容

• 個人開発サービスの作成にあたって実装が困難な機能やつまずいた箇所のアウトプット
• 個人開発サービス作成で利用した便利なライブラリやツールの紹介
• VScode や Git などの開発用ツールの Tips
• プロダクト設計の手法やデザインの Tips

実装した機能

• 投稿記事一覧の表示
• 各記事の詳細ページ閲覧
• 投稿記事のカテゴリー別表示、カテゴリーページ
• アーカイブ
• コンテンツ更新時にビルドを実行
• プロフィールページの追加

技術構成

技術分野	ツール・言語名
デザイン	Figma
フロントエンド	React(Next.js)/TypeScript
バックエンド	microCMS(HeadlessCMS)
スタイリング	CSS modules(SCSS)
リンター/フォーマッター	ESlint/Prettier
ホスティング	Vercel

今後新たに実装する機能

• プレビュー機能
• SNS シェア機能
• 検索機能
• ページネーション
• PWA 化
• SEO の強化

このリポジトリの以前の用途

長野県立大学 グローバル教養ゼミ（萱津ゼミ）の紹介・情報発信用ホームページ

制作の目的

• 自分たちが今まで学習してきたプログラミング言語などの技術を、実践を通して、アウトプットするため。（さらなるスキルアップ）
• HP 制作と公開を通して、萱津ゼミの活動内容を多くの学生に認知してもらうための情報発信

閲覧して欲しかったターゲット

• 長野県立大学の学生

ゼミサイトで実装した機能

• トップ、メンバー、活動内容などの複数ページの閲覧
• 投稿型（現在は外部の CMS に移行）のブログ記事作成
• 投稿記事一覧の表示
• 各記事の詳細ページ閲覧
• Teams との連携による、問い合わせフォーム
• Google Map API による大学の位置情報を地図で表示
• 投稿記事のカテゴリー別表示
• アーカイブ（作成予定）

ゼミサイトの技術構成

技術分野	ツール・言語名
デザイン	Figma
フロントエンド	React(Next.js)/TypeScript
バックエンド	Node.js (ファイルシステム)
スタイリング	CSS modules(SCSS)
ホスティング	Vercel