Instructor: Now alright, so the moment has finally come
where we can launch 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 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'll have to pay.
But the free plan is very, very generous.
And so that's why I love to recommend this application
and the 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 change 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 side folder
and it will then get deployed.
Now, the favorite option here would be to
use something called git.
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 code 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.
Alright, 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 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 - my name, so omnifood-jonas.
And yeah, that is still free.
And so now our website,
or at least my website is@omnifoodjonas.netlify.app.
So basically you have this subdomain on netlify.app.
Now, if you wanted 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're not paying me to say this.
It is just where I have all of my domains, alright?
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.
Alright?
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 our 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.
Alright, great.
Another thing that I wanted to mention is
that this actually comes with HTTPS.
So by default you get an HTTP C certificate
that Netlify will then basically update for you every couple
of month so that your site will stay secure forever.
Alright?
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.