21

Getting Your Website Online

You have the HTML down. You have the CSS down. Your files are nice and organized. How do you show it to people?

Getting your website online requires two components you saw all the way back in Chapter 2: a domain and a server. Once you have those, there’s a clear process you’ll walk through to get your website online. Then you can send it to everyone you know!

Choosing Hosting and a Domain

The time has come for you to make some decisions. You need to purchase both a domain and web hosting for your website. When you purchase a plan from a hosting company, the company provides you with the technologies and services that you need for your website to be seen on the internet.

At the most basic level, your hosting provides you with a publicly accessible space on a server that stores and manages connections to your website. People will connect to your website via the domain.

There are lots of different hosting companies. Many specialize in specific types of websites, but any hosting you get will be able to serve up HTML and CSS. So how do you choose?

Evaluating hosting

When choosing the right hosting for your needs, there are a few ways to evaluate them. While there isn’t a “one-size-fits-all” hosting company, drawing up a list of your needs will help you narrow down the requirements a bit. So what do you look for?

  • Can you talk to a person? If you’re going to be setting up and supporting your own website, you should make sure the hosting company you go with provides good technical support! Great documentation and videos are fine, but chat and phone support are incredibly important as well.

  • Will there be automatic backups? This isn’t a deal breaker as far as choosing the plan, but it’s important to know whether you will need to make your own backups or if they handle that for you.

  • Will they help make your site secure? This can come in many forms, including site monitoring, free SSL (see the “Secure Domains” sidebar), protection from cyber attacks, and repairing your website if it’s hacked.

Pricing can also be a factor. You generally get what you pay for, and at this stage of the game, you probably don’t need anything too crazy, especially if you’re still honing your skills. There are two hosts I’d recommend:

  • Web Hosting for Students: If you need something really cheap to $25/year (FIGURE 21.1): webhostingforstudents.com/.

    The webpage of Web Hosting for Students (WH4S) is shown.

    Figure 21.1 Web Hosting for Students

  • SiteGround: Once you’re ready to publish your site to the world (also known as “going live”), you’ll need to move on from a basic service like Web Hosting for Students. SiteGround is versatile and works well for lots of types of sites (FIGURE 21.2). If you use the link from this book, you’ll get a special offer for your first year: casabona.org/go/siteground/.

    A screenshot of the Site Ground webpage is shown. It displays tabs for hosting, technology, about us, and affiliates at the top. The content pane displays Get Started buttons for Web Hosting, WordPress Hosting, and WooCoommerce Hosting.

    Figure 21.2 SiteGround

Choosing a domain

Usually, you can purchase domains from the same place you get your hosting, but it’s not always recommended in case one day you decide you want to change hosts.

Certain companies offer one free domain with an account, but if you’d like to purchase a domain separately, which I recommended, hover.com is a great service. They offer a number of different top-level domains (TLDs) from .com and .org to .io, .me, and .xyz.

Tips on choosing a domain name:

  • Make it unique and easy to remember. You want your domain to stand out, but not so much that it’s difficult to remember when someone tries to visit.

  • Make it easy to type and speak. A domain with a tricky name will send people to the wrong place or dissuade them from visiting at all. On that same token, try to avoid numbers and hyphens. They are very hard to speak (is the number typed out or is it the digit?), and hyphens are often forgotten about.

  • Try to acquire a name in the .com domain first. About 70 percent of domains use the TLD .com, even as the number of TLDs grows. That means that most people will have an easier time remembering a .com domain and will likely try that first.

  • Make it as short as possible. This goes back to making it easy to remember, speak, and type—joesbakery.com is easier to remember (and spell) than joesdowningtownbakery.com.

  • Avoid copyrighted names. Make sure you’re not using a copyrighted term in your domain. The last thing you want to do is change it because you’ve infringed someone’s copyright. An example is wordpress. According to the WordPress Foundation, who holds the copyright for WordPress, you cannot use wordpress in a domain name.

  • Be aware of word combinations. This sounds silly and somewhat juvenile, but you don’t want to accidentally create a vulgar domain.

  • Snag the matching social media if you can. Matching domain names with social media accounts takes away the guesswork for users.

Keep in mind that this is not a checklist. If you have the perfect domain but it uses a number, use the number. Since you can point two domains to the same website, grab it spelled out and with a digit. If a .com isn’t available, buy the .org instead.

The goal is to do the best you can, and most of all make it relevant to your website’s topic.

To register your domain:

  1. Visit hover.com.

  2. Use the search box to type in your domain idea (FIGURE 21.3).

    A screenshot of hover website is shown. The page has three tabs at the top, find a domain (selected), transfer, and renew. On selecting find a domain option, it displays a search box titled "Every great idea deserves a great domain name," which allows the user to find a domain.

    Figure 21.3 The search box on hover.com

    You can include or exclude a TLD. Hover will still show you a full list of available domains.

  3. Press Enter or click the search icon.

  4. You’ll be taken to a screen of available domains. Click the plus sign next to the one you want.

  5. Click the Shopping Cart button in the top right (FIGURE 21.4).

    A screenshot of the hover.com webpage displays a search box that is set to joeteacheshtml, and a shopping cart option that is set to 12.99 U.S dollars.

    Figure 21.4 The Shopping Cart button on hover.com

  6. Go through the checkout process and create your account!

Connecting your domain

Once you’ve purchased your domain, if you haven’t done it through your hosting company, you’ll need to point it to your host. This will vary based on both your host and your domain registrar.

Your host should provide instructions for changing what’s called the DNS, Domain Name System. You can think of it as a big lookup table (or address book), associating servers with domains.

In Video 21.2, you’ll see how to do it with Hover and SiteGround.

Pre-Launch Check

Before taking your site online, you’ll want to run through a quick checklist:

  1. Is your website folder organized the way you’d like it to be? You will upload it just that way, so double-check.

  2. Are all of your links, embeds, and references properly formatted? Make sure that if you’re linking to something in a child folder, it’s in the right place, and that all images and other media display properly.

  3. Are there any references to files that start with file: or C:? These are absolute links to the files on your computer, and they will not work for anyone other than you once they are uploaded, so make sure to change them to relative links.

It’s best to click through each page and make sure everything looks and works as you expect. Once you do that, you’re ready to upload your files to your server.

Making Your Site Live

With your hosting and domain purchased, it’s time to get your site online—sometimes referred to as deploying your site. To do that, you’ll need to use something called File Transfer Protocol, or FTP.

FTP is how you send files from your computer to the server. To do this, you’ll need an FTP program. A free (and widely used) one is FileZilla (FIGURE 21.5). You can download it at filezilla-project.org.

A screenshot of the FileZilla FTP application is shown.

Figure 21.5 FileZilla, a popular FTP program

Once you download that, you’ll see you need some information:

  • Host

    This might also be listed as host address, IP address, domain, or server address.

  • Username

  • Password

  • Port

    A port is a communication gateway in a computer (or other device) defined in software. Usually, individual ports allow for a specific network service to pass through. You can think of it as a docking bay or as a locker that you have the key to.

This information can be found through your hosting account. Look for a section of the documentation that includes “FTP” in the title.

Once you find that information, you’ll fill it into the appropriate fields in FileZilla. Then you’ll connect to your server. Once you connect, you’ll see two panels: on the left-hand side will be your computer; on the right, your server.

To send files to your server with FileZilla:

  1. Using the information from your hosting provider, fill in the host, username, password, and port.

  2. Click Quickconnect.

  3. Once the right panel populates, you’ll want to locate the public_html or www folder. This is where all web-accessible files will live.

    You might already be in that folder. You can use the Remote Site bar above the right panel to see where you are (FIGURE 21.6).

    The remote site box in FileZilla is shown. The remote site box displays the location of each file that is uploaded to the server. Below this, four folders are also shown.

    Figure 21.6 The Remote Site box in FileZilla will show you where you’re uploading files to on your server.

  4. In the panel on the left, make sure you’re displaying the contents of your website folder.

  5. Drag each file and folder in your website folder from the left panel to the right panel (FIGURE 21.7).

    A screenshot of the FileZilla FTP after uploading your site is shown.

    Figure 21.7 The state of FileZilla once you upload your site

    Remember not to just drag the website folder over. This will result in your website files being located in a child folder.

  6. Once the files upload, visit your domain with a browser. The files on your website should render properly and display as you designed them!

Testing Your Site

Now that your website is uploaded to the server, it’s time to give it a test. Use your browser to visit your site at the domain you purchased, click through all of the links, and make sure your images and other media are showing up properly.

Check each file

If you can, check the site on a computer other than your own to double-check that you didn’t leave any absolute links to files on your computer in the HTML documents. Those will still work for you (because they’re located on your computer), but they won’t work for anyone else.

The same goes for all links. You’ll want to make sure internal links are still going to your site, and that external links are reaching the intended destination.

Test in common browsers

You’ll learn more about testing in the next chapter, but for the purposes of making sure your freshly uploaded site is working properly, you’ll want to check in at least a few browsers, like Safari, Edge, Chrome, and Firefox.

As you’ve seen, browsers handle things differently, and checking your site in multiple browsers will increase the changes that you’ll find something that’s broken before your users do.

Wrapping Up

Congratulations! You did it! You’ve uploaded your site to a server and it’s now live. But your job is not done.

With all of the basics down, it’s time to dive into some advanced but important topics. And the first is testing your site for a multitude of issues, from broken HTML and CSS to device support.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset