Original subtitles

(Jonas) Now. All right.

So the moment has finally come

where we can lunch our project

and deploy it to a live server on the internet.

So let me show you how we can do that

so that you can share your project

with all your friends

and tell them that you built this project by hand

with your new skills.

Now there are countless web hosting providers out there,

and maybe you already have some kind of shared web hosting

with some C panel going on.

And so if you have that,

then go ahead and deploy your website there.

Maybe you even know already how to use FTP,

and then you can do all that.

However, here in this lecture,

I will recommend a very, very nice

and free service called Netlify.

So let's write that here.

So netlify.com.

Now I'm not affiliated with Netlify in any way.

So they do not pay me to tell you

that this is the best service.

It simply is the one that I love to use,

and that I use all the time,

and to where I have all of my projects personally as well.

Okay.

So basically this is just a service that you can sign up for

and they will then host your website for free

up until a certain point.

So if you start to get more and more users,

or if the website is really big,

then at some point you will have to pay,

but the free plan is very, very generous.

And so that's why I love to recommend this application

and this service.

So I use it for myself also.

So if you're convinced about this,

then just go ahead and sign up right here.

Right.

And of course, I already do that.

So just pause the video here while you sign up.

And then once you're done, just come back here.

Now okay.

So hopefully you signed up for the service here

and then once you open up the application,

it should look something like this.

Now they actually changed the layout here all the time.

And so by the time you're watching this,

probably it will look different.

But what you need to do is to find some link

that says sites.

So right here, and then all the way at the end,

at least that's how it works now,

you find this field here.

So here is where you can drag and drop a site folder

and it will then get deployed.

Now the favorite option here

would be to use something called get,

so that is version control,

but for that, you would need to learn a lot more.

And so let's not do that

because we can also very simply

just drag and drop our folder here.

So let's do that again here.

And so, yeah, this is the folder here.

So the one that we have been working on,

and so this is the final coat of our website.

And in your case, you just,

wherever you are in your file system,

just take the folder that you have been working on

and then drag and drop it into this area.

All right. So it's uploading.

So that's taking some time and that's actually it.

So it has been deployed and it has this URL right here.

So when I click this now, then,

this is now actually a live version of this website,

living on the internet.

So congratulations for having now your very first site

deployed to the internet.

So great job. That's a really well done,

and I hope a great achievement for you.

Now the URL here,

is basically composed of these random words.

So let's change that.

So we can change that here at the site settings.

And again, by the time you're watching this,

it might be different,

but somewhere you will have to find some option

to change the site name.

So I just click here

and then we can basically change the URL.

So I can try Omnifood here,

which probably is already taken.

Exactly.

So let's say dash, my name.

So Omnifood dash Jonah's.

And yeah, that is still free.

And so now our website,

or at least my website is at omnifoodjonas.netlify.app.

So basically you'll have to sub domain on netlify.app.

Now, if you want it to have a real domain,

so not just this subdomain on netlify.app,

for example, if you wanted omnifood.com,

then you would have to purchase a domain for yourself,

and point that domain to this website.

And that you can do on something like GoDaddy or Hover.

So personally, I use this one, Hover.com.

And once again, they are not paying me to say this,

it is just where I have all of my domains.

All right.

Then you can point your domain here,

but that's a little bit out of the scope here.

So you can do that here at domain management,

and here then you will have all the instructions

for doing that.

All right.

But just to show the site to your friends or to your family,

this is more than enough,

because now you can actually take this link

and share it with your friends,

like on social media or some messaging apps.

Right?

And then they will be able of course,

to see your masterpiece

and you will be able to tell them

that you built this completely by hand.

Okay.

Now let's just inspect this here.

Because as I mentioned before,

I actually want to run the lighthouse test again.

So now we have it deployed on a real website.

And so now maybe that performance result

will be a little bit different.

So just run that here again,

but hopefully with the optimizations that we did,

we still will get a good result.

So in fact, we got 99.

So that's great.

That's almost perfect.

And the same here for accessibility

and here we did get perfect scores.

Now, of course,

this is not enough to say that our site is perfect.

So this is just an automated tool, but still,

it's nice to have these metrics here

with these great values.

Now let's just see here on the performance.

So, or first contentful paint is really small,

which is quite important.

Yeah. And here the issue is just the properly sized image.

So the gallery here,

they apparently might be a little bit smaller,

but that's,

well, the same thing here, but yeah.

Those are not going to save so much.

And as I said, I did not compress these

because I didn't want to waste too much time there.

All right.

Great.

Another thing that I wanted to mention

is that this actually comes with HTTPS.

So by default,

you get an HTTPC certificate

that Netlify will then basically update for you

every couple of months,

so that your site will stay secure forever.

All right. And so now we are basically done.

There's just one more thing that I want to do,

which is to use the power of Netlify

to now also make the form that we have on our website work.

So that's something that I said I would leave

for the end of the course.

And so now in the next lecture,

it is finally time to do that.