My First Website (with Scratch)

Here are some really simple steps to get your block-based code from Scratch running as a static website (JavaScript, HTML, and CSS). This post is for my TEALS students, but can be used by anyone who's interested in block-based code!

This is what my personal website Scratch program looks like:

And here it is as a website!

Step 0: Learn and make

Start by making your project in Scratch! You could make a game or a personal website or anything you want. Follow this tutorial if you're just getting started.

You can make something as silly as my website or something more awesome, like this game. This was made by the user @moranee, who's profile says she's only 12 🤯

Step 1: Generate

All of this relies on the open source project forkphorus.

You can generate a website with forkphorus with the following steps:

1. Go to https://forkphorus.github.io/packager/
2. Change "Project ID" to your Scratch project's URL
3. Add a username (this can be anything, ex: "testuser")
4. [Optional] Click "Loading Screen Options" and change the loading screen text

Step 2: Run it locally

Click on your downloaded file, and it should pop up in the browser! If you right click and "Inspect", you'll see all the generated code.

Step 3: Host your website

Now that you have your Scratch program as HTML, you're ready to host it. A simple and cheap option to host your static website is through Azure Storage. Follow these simple instructions to do so. Any other static website hosting will also work great!