YP Training Block Training

We're gonna deploy a site to the internet in less than 30 minutes! :D

For this guide I'm assuming you have a basic knowledge of development and node & npm installed.

Step 1

Create a Cloudflare account at https://dash.cloudflare.com/signup (it's free)

Don't forget to accept the confirmation email.

Step 2

Create a folder to store our website. Open the folder in your favorite text editor/IDE (I'm using VSCode).

Step 3

Open a terminal and run

npm install -g wrangler

After that, run

wrangler login

And login with your Cloudflare account

Step 4

Using the IDE, create a new file called index.html in your project folder. For the contents, you can do anything you like, but you can also use this example as a starting point:

<!doctype html>
            <html lang="en">
            <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <title>YP Demo</title>
            <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
            </head>
            <body>
            <h1>Hello, world!</h1>
            <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
            </body>
        </html>

As a sidenote: you can do anything you like with our static page: add extra .css files, add images, add javascript. Be creative! Though keep the time in mind ;)

Step 5

You can test your website by running (within the project folder)

wrangler pages dev . --local

Step 6

Open a terminal in our project folder and create a new Wrangler project by running

wrangler pages project create

The name you choose will also be the website adres (cloudflare subdomain) that your website will be able on and hence has to be unique. It doesn't really matter that much for this training, choose something you like.

It'll also ask you about the git branch. Since this is a barebones example without git, it doesn't matter and you can accept the default option (production).

Step 7

Now we're gonna deploy to the internet! Run

wrangler pages deploy .

If everything went well, it will show you a web adress where you can find your website. The first deploy might take a couple of minutes to show up, so be a little patient :)

Congratulations! You have now published your website to the internet and everyone can see it :D If you want to make further changes to your website, you only have to run the deploy command from step 6 and your changes will show up online in no-time.