Contents

（メンバー向け）NITRoのHPの作成方法

   Jul 30, 2025     2 min read

HPを運用してもらうための説明を記述します．

このリポジトリをクローンしてください．

git clone git@github.com:RRL-NITRo/RRL-NITRo.github.io.git
ページ名URL説明
Homehttps://rrl-nitro.github.io/トップページ
About Ushttps://rrl-nitro.github.io/tabs/about.html.NITRoの紹介
Projectshttps://rrl-nitro.github.io/tabs/projects.html出場した大会，参加したプロジェクトのまとめ
Bloghttps://rrl-nitro.github.io/tabs/blog.html開発日誌等，自由に投稿したい．
Linkshttps://rrl-nitro.github.io/tabs/links.htmlソーシャルアカウント，オープンソースプロジェクトのリンク集

Blogの投稿方法

開発日誌を投稿する際の手順を説明します．

  1. _posts フォルダに新しいファイルを作成します．
    • ファイル名は YYYY-MM-DD-タイトル.markdown の形式で作成してください．
    • 例: 2025-07-30-my-first-post.markdown
  2. 作成したファイルに以下のテンプレートをコピー＆ペーストします．
---
# multilingual page pair id, this must pair with translations of this page. (This name must be unique)
lng_pair: id_autogeneratedsamplecontent_1
title: タイトルを入力
author: "kotaro" # 投稿者名を入力
category: formembers #カテゴリ名を入力　どれか一つにする.使われているのは，formembers, blog, announcements
tags: [development,kotaro] # タグを入力
# thumbnail image for post
img: ":post_pic1.jpg" #サムネイル画像
# comments_disable: true # コメントを無効にする場合はこの行を有効にしてください
# publish date #公開時間
date: 2025-07-30 14:25:53 +0900 

# optional
# please use the "image_viewer_on" below to enable image viewer for individual pages or posts (_posts/ or [language]/_posts folders).
# image viewer can be enabled or disabled for all posts using the "image_viewer_posts: true" setting in _data/conf/main.yml.
image_viewer_on: true
# please use the "image_lazy_loader_on" below to enable image lazy loader for individual pages or posts (_posts/ or [language]/_posts folders).
# image lazy loader can be enabled or disabled for all posts using the "image_lazy_loader_posts: true" setting in _data/conf/main.yml.
#image_lazy_loader_on: true
# exclude from on site search
#on_site_search_exclude: true
# exclude from search engines
#search_engine_exclude: true
# to disable this page, simply set published: false or delete this file
#published: false　#公開しない場合はこの行を有効にしてください
---
  1. タイトル、投稿者名、カテゴリ、タグ、サムネイル画像を適宜変更してください。
  2. 投稿内容を記述します。—以下に，Markdown形式で書くことができます。Markdownの書き方はこちらを参照してください。
  3. ファイルを保存し、GitHubにプッシュします。
  4. プッシュ後、GitHub Actionsが自動的にサイトをビルドし、更新された内容が反映されます．

Projectsの投稿方法

  1. _data/content/projects/en.yml ファイルを開き，変更を加える．Categoryを使うことで，分類を行う．

Aboutの編集方法

  1. _tabs/about.md ファイルを開きます。

画像の挿入

画像は，/assets/img以下のフォルダに保存されている． 画像の挿入は，VSCodeよりもWebブラウザで行う方が楽．

タブページの追加

まだわからない．

メンバーの追加

  1. _includes/custom/about-members.html ファイルを開きます。
  2. <div class="col-md-3 about-img"> の中に新しいメンバーの情報を追加します。

例:

<div class="col-md-3 about-img">
  <img src="/assets/img/about/member/new_member.jpg" alt="New Member" class="img-fluid">
  <h3>New Member</h3>
  <p>Role: Developer</p>
  <p>Bio: Brief description about the new member.</p>
</div>
  1. 画像ファイルは /assets/img/about/member/ フォルダに保存してください。
  2. 変更を保存し、GitHubにプッシュします。