12

Getting your website online

In the last chapter, we created a website together from scratch, through to a beautiful, useful encyclopaedia of our knowledge of web design. At the moment it is a hugely useful tool for you to use whenever you are on your computer, but what about when you are not at your computer, what if you were at a different machine, how would you access the website then? Websites belong online – it’s that simple – so let’s get your website up and on to the internet with the rest of them.

Domains and hosting

So, to get our site up and running, we need two things. We need a domain and a hosting service. For our simplistic needs at this stage, we can combine both of these with using a service like godaddy.com. At GoDaddy (or similar) you are able to buy the domain of your choice and then optionally set up a hosting package too. Hosting is simply paying for space on a server that will ‘host’ and ‘serve’ your website.

I will leave it to you to go ahead and choose your registrar, to register your domain and set up hosting, and then once you have, you should be given some information about accessing your hosting storage. Typically you will be given an FTP login. If you recall right from the very first chapter of this book, FTP is a method of exchanging files with a server. Once we have our FTP details, we can get our website online.

To do this we need to install and open an FTP client. For the purposes of this book, we will be using an application called FileZilla. It is a free software and exists across all modern platforms (macOS and Windows, etc).

Let’s open up FileZilla now and log in to our hosting service.

When you open up FileZilla you will be greeted with the screen shown in Figure 12.1.

12.1

What you are looking at on the left-hand side is a directory of your computer. Start by navigating through to where you have your website files located and enter that directory on the source tree. You should then see the list of files in the pane, as shown in Figure 12.2.

12.2

Once we have navigated to our folder, we can login with our FTP details. To do this you can simply use the ‘Quickconnect’ toolbar at the top (Figure 12.3).

12.3

Here you can enter the FTP details that you should have received from your registrar upon obtaining your domain and hosting.

Once we have entered our details and clicked ‘Quickconnect’, the right pane will update to show the folder structure of the server to which we have just connected.

Typically the details that you are provided from your hosting package will restrict your access to any folder other than the folder responsible for your website, so you will instantly be taken to the ‘web folder’. However, if you have a full server directory, you will want to navigate to the following folder /var/www/html. This is where the server will be looking for your website files.

Now we can simply select all of the files on the left, which make up our website, and drag and drop them over to the right-hand side, and thus, onto our server. And that’s pretty much it! Our website should now be ready to view at the chosen domain name, which will naturally redirect to the index.html file as the default homepage for our website.

Yes, it’s really that simple to get a website online. Surprising, right?

Just a quick note before we wrap up. If your site does not show up, you could have a permissions error. In this case you will need to select all of your files in the RIGHT pane and right-click on them, then go to ‘file permissions’. This will open up a new dialogue box. In here you will see a text box with some numbers in it. Type the number 755 and ensure the option ‘recurse into subdirectories’ is checked and set to ‘apply to all files and directories’. Click ok and wait for the permissions to be updated. This should fix this issue. It’s important to note that if you ever build more complex websites, with a back-end service, the deployment process is vastly different to this, so please do check the most appropriate permissions for your specific setup.

12.4

Conclusion

And there we have it – our website is online! Now, remember that every time we make a change to our website, we need to upload the new files to the server again in order to reflect our change on our website. This process will become second nature in no time at all. Let’s close this chapter out by paying attention to what we just achieved. We just published our first website together! This is a big moment – you have now created something of value and sent it out into the world where anyone can see it. Now imagine for a second the world of possibilities that have just opened up to you now that you understand how to build static websites. Well done again for your hard work and progress through this book. It’s not easy to get this far and you have made it out the other side and actually published your website. You should give yourself a big pat on the back and rest assured that you’re already following in the footsteps of many great developers by showing grit and determination to stick it out and learn three new languages all in the space of one book. That’s impressive stuff, right there. Well done!