explaingit

fireship-io/fireship.io

3,763SvelteAudience · developerComplexity · 3/5Setup · moderate

TLDR

The full source code for the Fireship.io web development course website, combining Hugo for static content, Svelte web components for interactive elements, Tailwind for styling, and Firebase for authentication.

Mindmap

mindmap
  root((fireship.io))
    What it is
      Course platform source
      Public website code
      Contributor-friendly
    Tech stack
      Hugo static site
      Svelte components
      Tailwind CSS
      Firebase auth
    How to contribute
      Edit Markdown files
      Add Svelte components
      Run locally
    Setup
      Install Hugo and Node
      npm start
      Preview at localhost
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Fix typos or update course content by editing Markdown files directly on GitHub with no local setup required

USE CASE 2

Study a real-world hybrid Hugo and Svelte web component architecture for a content-heavy site

USE CASE 3

Add new interactive UI components using Svelte web components that work inside Markdown pages

USE CASE 4

Use as a reference architecture for building your own course platform or content site with Hugo and Svelte

Tech stack

SvelteHugoTailwind CSSFirebaseJavaScriptnpm

Getting it running

Difficulty · moderate Time to first run · 30min

Requires both Hugo and Node.js installed locally, simple content fixes can be made directly on GitHub without any setup.

No license information is mentioned in the repository's README.

In plain English

This is the source code for the Fireship.io website, a course platform that teaches web development and app-building topics. The public-facing site you visit at fireship.io is built from this codebase. The project combines several tools to produce the finished site. Hugo handles the static content, meaning blog posts, course pages, and other written material are stored as Markdown files in a content folder and converted to HTML at build time. The interactive parts of the page, such as buttons or custom widgets, are built with Svelte and compiled into web components, which are small self-contained pieces of UI that can be dropped anywhere in regular HTML or Markdown. Tailwind handles styling, and Firebase provides backend services like authentication. If you want to fix a typo or small text error, the README says you can edit the Markdown files directly on GitHub without running anything locally. For more involved changes, you install Hugo and Node, run npm start, and the site comes up at localhost:6969 where you can preview your work. Developers adding new interactive components create a Svelte file in the app/components directory, give it a custom HTML tag name, export it from the main entry file, and then use that tag anywhere in HTML or Markdown. One thing to know about this setup: because Svelte compiles components as web components here, styles must be written inside each component file rather than in global stylesheets. The README is brief and focused on contributor workflow. It does not describe the course content itself or the platform's business features in detail.

Copy-paste prompts

Prompt 1
How do I run the fireship.io site locally so I can preview my changes before submitting a pull request?
Prompt 2
Walk me through how to create a new Svelte web component for fireship.io and use its custom HTML tag inside a Markdown page.
Prompt 3
Why do styles have to be written inside each Svelte component file in this project instead of a global stylesheet?
Prompt 4
How does fireship.io use Firebase for authentication and how is that wired into the Hugo static site?
Prompt 5
Show me the folder structure of fireship.io and explain where blog posts, course pages, and Svelte components live.
Open on GitHub → Explain another repo

← fireship-io on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.