humancrafted.co/re/Website

Website

Overview

This website was built with the help of Claude Code, and inspired by Steph Ango’s use of Obsidian and Jekyll to create a markdown-based static site hosted on GitHub Pages.

Technology Stack

Core Framework

  • Jekyll - Static site generator with GitHub Pages compatibility
  • GitHub Pages - Free hosting with automatic builds on push to main branch

Content Management

  • Obsidian - Primary markdown editor for content creation
  • Custom Obsidian Plugin - Converts [wiki-links](/wiki-links/) to Jekyll-compatible URLs
  • Git - Version control with detailed commit history

Development Tools

  • Claude Code and Cowork - AI-powered development assistant for implementation, edits, and content prototyping.
  • Figma - Design prototyping, reference and specifications. Collaborating with Claude using the Figma MCP
  • Umami - Privacy-first, cookieless analytics, loaded in production only

Design System

The site’s colors, typography, spacing, and components are documented in the Design System note — the single source of truth shared across humancrafted.co and sub-brand tools. In short: IBM Plex Mono for text and IBM Plex Sans for the wordmark and calls to action, a warm paper/ink palette with a yellow brand accent, and a wavy-underline pattern for every interactive link.

Project Thumbnail Creation

  1. Fusion 360 Drawing: Create technical drawing and export as DXF
  2. Fusion 360 Render: Simple render to export PNG with shadow
  3. Adobe Illustrator: Clean up vector illustration and composite with shadow
  4. Final Format: SVG for crisp display at any size with automatic dark mode conversion

Development Details

Jekyll Collections Structure

  • _projects/ - Portfolio items with image galleries and lightbox functionality
  • _docs/ - Documentation pages including tools, processes, and notes
  • _posts/ - Blog-style content (if needed)

Custom Features

Reference Sections

  • Two-column layout: a section label beside an auto-populated, comma-separated list
  • Pulls live from Jekyll collections (projects, notes, tools, posts)
  • Manual item lists with optional links and configurable limits
  • Used on the More page and the Design System note

Obsidian Integration Plugin

  • Seamless conversion of [page-name](/page-name/) links
  • Support for display text: [Display Text](/page/)
  • Image embedding with ![[image.ext]] syntax
  • Works across all collections and pages

Key Decisions

Why Jekyll?

  • GitHub Pages compatibility for free hosting
  • Simple markdown-based content management
  • Ruby ecosystem with extensive plugins
  • Static generation for fast performance

Why Obsidian?

  • Natural wiki-style linking
  • Visual graph view for content relationships
  • Local-first with cloud sync options
  • Markdown preview while writing

Why Custom Plugin?

  • Maintains natural Obsidian workflow
  • Automatic URL conversion without manual editing
  • Supports both pages and collections
  • Preserves link functionality in both environments

Resources

Documentation

Let's co/lab