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!

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay