Publish your project as a website!

Info

In the original Leopard demo video, I published my website using Netlify. Since then, I've found that Vercel is actually a better choice for most people, so that's what we'll use here.

1
Register for a Github account

If you don't already have a Github account, head to github.com and register.

Info

Github is a free service that stores text-based code, and it's used to sign in to both CodeSandbox and Vercel.

2
Sign in to CodeSandbox

If you haven't already, sign in to CodeSandbox using your Github account.

Click the blue sign in button in the top right of CodeSandbox

3
In your project, create a file called package.json

Create a file named package.json

4
Replace the content of package.json with the following

Be sure to save your changes!

package.json
{
  "scripts": {
    "build": "cp -R . ../public && mv ../public public"
  }
}

This build script tells Vercel how to deploy your code.

5
Open the "Deployment" tab in the CodeSandbox sidebar

Click the deployment tab in CodeSandbox

If you haven't made any changes to the code, there will be a "Fork Sandbox" button that you need to click before moving on.

6
Sign in to Vercel

Click the sign in button inside CodeSandbox to sign in with Vercel

Follow the sign-in process using your Github account. When prompted, click the "Authorize" button to connect CodeSandbox to Vercel.

7
Click "Deploy with Vercel", then "Deploy Sandbox"

Click the button titled "Deploy with Vercel"Click the button titled "Deploy Sandbox"

Congratulations! Your project has been deployed.

8
View your deployment

Click anywhere outside the popup box to close it. Then, click "Visit Site" to view your deployment.

Click the Visit Site button

9
Change your domain name

The randomly-generated domain name probably isn't what you want. To change it, head to the Vercel dashboard at vercel.com/dashboard.

Then, click on the name of your project.

Click on the name of your project to open it

Click on the "Settings" tab.

Go to the settings tab

Open the "Domains" page and click "Edit" on your curent domain.

Click on domains, then edit

Change your domain name to something better, then click "Save".

Edit the domain name, preserving .vercel.app, then click Save

Finally, click on your new domain name to check it out!

Visit your domain!

Info

It's also possible to choose a domain that does not end in.vercel.app.

Vercel provides the following endings for free:

  • your-chosen-name.vercel.app
  • your-chosen-name.now.sh

If you want something else, like a .com or .dev domain, you'll need to pay money — usually about $12/year. I recommend using Google Domains because they're cheap and honest. (Other domain providers might try to increase prices without telling you. Be careful!)

For more information, check out the Vercel documentation.