Jekyll

2026 | Web development | Gihub/HTML

I wanted to build a minimal portfolio/repository to share my work and some files, so here are my notes on how I built this website using Github Jekyll with the help of ChatGPT.

Jekyll

Jekyll is a static site generator used by GitHub Pages that converts Markdown files into static HTML and CSS at build time. It requires no server or database, produces fully static output, and operates entirely at build time without any runtime processing.

Configurations

  1. Theme
    • Provides layouts and default CSS
    • This site uses the minima theme
  2. CSS / SCSS
    • assets/main.scss is the entry point
    • _custom.scss override theme files
      • Typography
      • Page layout
      • Navigation
      • Image grid
      • Headings
      • Header/footer
      • Code/Note/Table etc.
  3. Site configurations
    • _config.yml handles page title, top pages etc.
    • footer.html for adding footer links

  4. Structure

     .
 |-- _includes
 |   |-- footer.html
 |-- sass/
 |   |-- _custom.scss
 |-- assets/
 |   |-- main.scss
 |-- docs/
 |   |-- images/
 |   |   |-- lab/
 |   |   |-- projects/
 |   |-- projects/
 |   |   |-- prj_A.md
 |   |   |-- prj_B.md...
 |   |-- labs/
 |   |   |-- lab_A.md...
 |   |   |-- lab_B.md...
 |   |-- about.md
 |   |-- lab.md
 |   |-- projects.md
 |-- index.md
 |-- _config.yml

Workflow and rules

  1. Editing workflow
    • Create a new .md file in _projects/ or _lab/
    • Create a matching folder in images/projects/ or images/lab/
    • Add images to that folder
    • Use absolute paths in Markdown: ![cover](/images/projects/project-a/cover.jpg)
  2. Local preview: jekyll serve
  3. Link rules Recommended: [Project](/projects/project-a)
    • Use absolute paths
    • Do not include .md
  4. Page rules
    • Start with: 
        ---
  layout: default
  title: Jekyll (only for header navigation)
  ---

Example:

This is an H1 and appears very large. Maybe too large.

This is an H2. Sushi can be understood as a system defined by clear parameters—portion, proportion, sequence, and repetition.

This is an H3. The same rules that define a single piece of sushi can be applied repeatedly without changing their logic. Scale changes the quantity, not the structure.

This is an body. This site is open to the public as a repository for scalable, sushi-generating Grasshopper definitions. The recipes and definitions are open and reproducible. Raw materials are not included; users are responsible for sourcing their own tuna.

これは日本語です。

意図しない改行を防ぐため、長い英単語は避けてください。

このサイトは、スケーラブルな寿司生成のための Grasshopper 定義を共有する公開リポジトリです。レシピや定義は公開されていますが、原材料については各自でご用意ください。マグロは含まれていません。

这是中文。

Noto Sans JP 对中国的支持尚不完善。

寿司看似简单，但由比例、顺序和重复构成。正因为这些清晰的规则，寿司可以在保持结构不变的情况下不断扩展和复制。

https://hayashnaoki.github.io/

Embedded video without control

<iframe 
  src="https://player.vimeo.com/video/904894755?badge=0&autopause=0&player_id=0&app_id=58479&controls=0&autoplay=1&muted=1&loop=1" 
  width="100%" 
  height="auto" 
  style="aspect-ratio:1/1;" 
  frameborder="0" 
  allow="autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share" 
  referrerpolicy="strict-origin-when-cross-origin" 
  title="GH Lab | 2022_2023">
</iframe>
Name Descriptions Quantity
Rhino Sushi modeling software 1
Grasshopper Scalable sushi delivery solution 46

Inline code: code goes here
インラインコード: コードが通ります

def prepare_rice(rice_type="short_grain"):
    print(f"Washing and cooking {rice_type} rice...")
    return "fluffy_sushi_rice"

def slice_fish(fish="salmon", thickness="thin"):
    print(f"Slicing {fish} into {thickness} pieces.")
    return f"{fish}_slices"

def roll_maki(rice, fish, extras=None):
    extras = extras or ["nori"]
    print(f"Rolling maki with {rice}, {fish}, and {', '.join(extras)}.")
    return "maki_roll"

def add_wasabi(level="small"):
    print(f"Adding a {level} amount of wasabi.")
    return "wasabi_dab"

def plate_sushi(roll, garnish="pickled_ginger"):
    print(f"Plating {roll} with {garnish}.")
    return "finished_sushi_plate"

# Example flow (not real execution logic)
# これは日本語のコメントです
rice = prepare_rice()
fish = slice_fish("tuna")
roll = roll_maki(rice, fish, extras=["cucumber", "nori"])
wasabi = add_wasabi("medium")
plate = plate_sushi(roll)

print("Sushi ready to serve.")

Quotes:

  • Keep calm and eat sushi.
  • You had me at sushi.
  • Sushi makes miso happy.
  • Life is better with a sushi roll in hand.
  • Just roll with it.
  • Whatever the question, the answer is sushi.

Menu

  1. Rhino sushi
  2. Grasshopper sushi
    1. Kangaroo sushi
    2. Galapagos sushi
    3. Firefly sushi
    4. GhPython sushi

This is a note ({: .note}). Sushi is fundamentally scalable.

This is a warning ({: .warning}). Sushi is exponentially scalable.