The Fireship PRO course platform frontend built with Svelte, Tailwind, Hugo, Firebase, & Flamethrower.

All static content is managed with Hugo in the content dir. You can easily fix typos by modifying the markdown directly in GitHub.

git clone https://github.com/<Username>/fireship.io

You can either build it from source, or install it from a package manager

There are two sources where you can install Hugo Extended, Homebrew and MacPorts

brew install hugo

sudo port install hugo

The options on Linux to install Hugo Extended are Snap and Homebrew

sudo snap install hugo

brew install hugo

You can install Hugo Extended on windows from Chocoloaty, Scoop, or Winget

choco install hugo-extended

scoop install hugo-extended

winget install Hugo.Hugo.Extended

npm install
npm start

Check it on on http://localhost:6969/.

Create a Svelte file in the app/components directory. It must have a custom element tag.

<svelte:options tag="hi-mom" />

<script>
    export let greeting: string;
</script>

<h1>Hi Mom! {greeting}</h1> 

Export the component from app/main.ts:

export * from './components/hi-mom.svelte';

Now use it in anywhere in your HTML or Markdown.

<hi-mom greeting="i made a web component"></hi-mom>

Note: A weird caveat with Svelte web components is that all styles must be encapsulated. You can use Tailwind, BUT only with @apply in the component. Global styles will not work.

• npm start: Main dev server. Runs everything you need.
• npm run dev: Runs components in isolation. Serves app/index.html as a playground for components.
• npm run hugo: Only runs static site.
• npm run build: Build for production