Website Launch

Transcript

With our code on GitHub, we're nearly ready to launch our website. There's one final step that we need to do in code.

Here, I have open our gulpfile.js and the last time we did anything with this file was to be able to add our images directory. This time, we need to add a new script that will build our website.

We're at the end of the file where you can see that currently the only Gulp task that we have is the one watch task. And the watch task is what was responsible for launching a new browser tab when we use the command of npm start. Now, we need to add a command that only does the parts of compiling the various HTML, CSS and images without launching a browser window.

So we will create a new export of build and this will simply run our steps in order including our styles, HTML, and images.

// At the end of gulfile.js
exports.build = gulp.series(style, html, images);

Now to be able to use this build command, we'll go to our package.json and within this "script" section we'll add a build script and this will say gulp and define specifically that it should use that build script.

// Add to "scripts" below existing 'start`
// "start": "gulp", < add the comma
"build": "gulp build"

The reason we didn't have to say gulp watch on our original command is because we exported it as the default.

Now with terminal open, let's make sure that our command works by running npm run build.

And you'll see that it ran the gulp build command, processed our files, and created the dist directory.

Now after running the build command, it appears as though everything went okay, and we can see the dist folder has been created. But it's always good to double check and make sure everything appears as we expected because anything that ends up here is going to be what's on the live site.

So we want to make sure nothing's missing, and turns out our images did not get correctly passed in. Hmm. Let's see what could be the case.

It looks like we're missing and an asterisk (*) at the end of our src to say to gather all images in the img directory.

img: {
  // We added the * at the end of this line
  src: ["./src/img/*"],
},

So let's retry our build command now that we've made that change, and you can see the in the dist/img directory he images are now all populated.

The last thing before we commit our new changes to get up is to add in our .gitignore our dist directory. Now the reason for this is the site hosting company we'll use will recreate that distribution directory every time the build command is run, just like we saw happen here. There's also no reason to commit it to GitHub because we can recreate it at any time by running the build command.

// Add to .gitignore
dist

So now in GitHub Desktop, we see our changes to .gitignore, the gulpfile, and package.json.

So we'll go ahead and commit this as "Launch ready changes!" and then "Commit to master" and "Push to origin".

And once that process finishes, I'm going to refresh my page that I had open with our repository and we see our changes ready. So now it's time to move our website files onto a website host.

The host were going to use for this project is called natla Phi and the reason is they will be able to directly launch our site from our GitHub repository in just a few clicks.

So once you've visited their page at netlify.com, you'll want to click "Sign up" and then click "GitHub".

Now, I have quite a few sites already, but when you have a new account, you will still be given this option of "New site from git", and once again, we'll select GitHub.

There's a bit of authorization that happens to get logged in, and then if you do not see a list of your repositories, which should at least include your Unicorn Tours website, you may have to select "configure the app on GitHub" and from there you'll be able to choose how you want Netlify to connect to GitHub. Then you'll be able to select your repository from the list.

And Netlify has already discovered a few things about our site. It knows that we have only the master branch, and so that's what will deploy- in other words, launch - your website. And it has recognized that we're using Gulp, so it's already going to try to use gulp build, but we can change this to our npm run build script.

It's also recognized that our publish directory is going to be dist so we'll leave that as is and now we can "Deploy the site".

Yes, that means we're really going to launch our site with just the click of this button.

What makes that possible is that Netlify has created a subdomain using kind of a silly name. And so our first thing we want to do is change that to something more relevant to our exact site by going to "Site settings" and then "Change site name".

Now, if I delete this, you'll see that it changes this live preview of what our subdomain is going to be. Subdomain means it's a value that's prepended to netlify.app and this is what enables Netlify to instantly launch your new site.

We should make it something unique to our site, but also know that only one site can own a name at a time similar to usernames for accounts. So since we've already used unicorn space tours for this main Capstone course demo, you may have to append your initials.

And with that change, we'll visit the "Deploy" screen, and here we can see that our site was deployed to production and it's already through to published.

We can click to enter this item and see the full process of what Netlify did, which will look very similar in this section to what we saw in our own terminal for when it's running gulp build and processing our files.

So now on the main overview page, you see that this link is a live link with that new subdomain we created. So once we click this - and our site is now live at the subdomain that we created. You can actually visit this in your own browser.

It's good to check through and make sure that the whole site appears as we expect and - oh! Looks like we did find an error. We forgot to add the links to the tour packages buttons.

So back in our site we'll visit the index and find each of those buttons and update the link to /booking.html. And we'll copy this for each of the buttons in the tour packages section.

And then in GitHub Desktop, you can once again see those changes have been added. And we'll say "Add booking link to tour package cards" and once we commit and push to origin, on our Netlify page we'll visit the "Deploys" and we can already see that that's building because it has detected that there was changes off of the master branch in GitHub.

In just a few seconds, the build is complete and you receive the "Site is live!" message. And we can refresh our subdomain page and double check the links, and they're now working.

This highlights another small change that we need to make, which is enable functionality of our form so that people can actually submit their request to book a tour.

Netlify also gives us a very helpful function to enable form functionality by simply adding a handful of attributes on the form HTML tag, as you can see listed on this documentation page. So we will copy these attributes, and on our booking page find the form and paste them in.

The name value is up to you, the default here is contact. So we might say book. You will leave the method as post and this data-netlify="true" is the key which tells Netlify that we would like them to process any forms submissions for us.

So on save we'll one more time go back into GitHub Desktop and say "Enable forms", commit, push to origin, check for our new deploy, and wait for it to finish.

And then we'll refresh our booking page since we already had it open, then we can go ahead and fill out our form and select "Book my tour".

And Netlify has automatically created for us a "thank you" page. In the transcript is a link to the full forms documentation where you can learn how to customize this message.

They also provide a helpful "Back to our site" [link].

Let's go in to Netlify and find out where to see that form submission.

Along the navbar in Netlify is a "Forms" section, and you can see we now have an active form that's using that name value of book. And when we open this up we can see the form submission I just submitted.

With our form hooked up and working, our site is now complete.

Congratulations on building and launching your very first website! I hope you enjoyed learning how to build a website throughout the Foundations and Capstone courses. Best of luck in continuing your journey to learn how to be a web developer.