DEV Community

Marie H
Marie H

Posted on

3 1

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:
poorly drawn personal website

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!

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Top comments (0)

The Most Contextual AI Development Assistant

Pieces.app image

Our centralized storage agent works on-device, unifying various developer tools to proactively capture and enrich useful materials, streamline collaboration, and solve complex problems through a contextual understanding of your unique workflow.

👥 Ideal for solo developers, teams, and cross-company projects

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay