What is the purpose of making websites? Why do businesses have websites?

To have a published presence on the World Wide Web! 

If it weren’t for publishing, there isn’t a lot of purpose to what we spent an entire semester learning. In this presentation we will learn both how websites are published to a domain and also how to publish your website to Github pages. When applying for a job as a Web Developer employers will want to see your published websites.

Final Project Publishing Options

Publishing your Website Project is a requirement for class. You have two options for hosting:

Option 1: Publish to Github.io (most students choose this option)

• With Github Pages, you can publish an HTML website to a Github url. 
• If you are pursuing a programming degree, having a presence on Github will help you get your first job. 
• The url to your website would be something like https://smetoxen.github.io/animals/
• It’s free!

Option 2: Publish to a domain name you purchase

• A true FTP experience
• Must purchase a domain
• The URL to your website would be the domain name you purchased. 
• Hosting package is free and valued at @$100 per year. The free hosting is from my reseller plan on Hostgator and comes with a cpanel. The primary limitation is the amount of space I can provide for you.

Purchasing a Domain Name

Your domain is your address on the World Wide Web. The cost is low at around $12 – $16 per year. You may want to purchase and hold your name (eg. susanmetoxen.com), so no one else can purchase it. 

• Hover.com: Most TLD Choices and great reputation. Free privacy services. If you need help, you can chat with Hover.
• Domains.google.com: Cheaper than Hover but still has free privacy. They attempt to sell additional services, so be wary and ONLY purchase the domain. No service is available. 

If you purchase a domain name from another registrar, make sure the registrar has free privacy services and the annual renewal cost is less than $18 per year. 

How to purchase a domain name

Go to Hover.com or one of the other options and enter your first choice. If it isn’t available, consider the alternatives.

• Include a middle name or initial
• Look for an appropriate TLD, like .ninja or .io

Purchasing a domain name is optional. If you purchase a domain name, send me an email at susan.metoxen@saintpaul.edu  so I can set up your hosting.

Optional: Read my blog post about choosing a domain: Purchasing a domain name 

Website Hosting

Two Ongoing Costs of Websites

1. Domain Name: $12 – $16 per year. 

2. Website Hosting: $100 – $150 for shared hosting a year.  (I provide this for free for my students and clients.)

Of course, for people that don’t know HTML and CSS like you, there would be web development costs. 

Domain + Hosting

To publish a website you need a domain name (like “webdevstudents.com”) and website hosting. Purchasing the domain name is separate from purchasing the hosting. 

Some hosting companies sell both domains and hosting, and some of those companies attempt to link the two together. It is better to keep the hosting and domain purchases separate. Even if purchased together initially, they can always be separated. 

Some of my clients purchase both the hosting and the domains from the same place for the convenience of having invoices from one place. They overpay for both the hosting and the domains. 

What is Website Hosting?

In order for the world to see your website, you must move your files from your computer to a website server.  Hosting is purchased from website hosting companies. Here is a link to where you can see a list of hosting companies: https://www.codeinwp.com/blog/largest-web-hosting-companies/

You send your website files to the hosting server via FTP (File Transfer Protocol). When your website visitor puts in the domain name for a website, they are sent to the hosting server. 

Nameservers

How is a domain name linked to the website hosting? For example, if I type SaintPaul.edu in the browser, how does the browser know where the website files are hosted?

Domain Nameservers aka DNS! The DNS links the domain to the website hosting server. There is a separate set of servers that connect the domains to the hosting. These servers are different than the servers that host the websites. The photo below may help to explain it:

When your website visitor types in your domain name, the inquiry goes first to the DNS servers, represented by the light pink boxes. These servers then direct your website visitor to the right website hosting server.

If you purchased a domain, sign in to your domain registrar and navigate to where you change the nameservers.

Note: The DNS must propagate through the DNS servers. It can take up to 48 hours, but usually happens in a few minutes.

FTP (File Transfer Protocol)

Before we talk about FTP, we need to learn a couple new terms:

Local Files: these are files on your computer.

Remote Files: these are files on the hosting server.

The process of moving the files from your computer to the hosting server is called File Transfer Protocol, or FTP. For FTP, commonly used software is Dreamweaver, Cyberduck, or Filezilla. 

For class we will use Filezilla. If you are publishing to a website domain, download Filezilla on to your own computer.

https://filezilla-project.org/download.php?type=client

If you purchased a domain name, I will send you the credentials you need to FTP. 

Add your IP (or FTP address) to the host, your username and password. The port is 21, which is the default. The screen in Filezilla looks like this:

If you do it correctly, you will see the Directory listing of “/” successful.  You are now connected to your server! 

Now that you are connected, you can FTP your local files to the hosting server. In the screenshot below, you can see the local files on the left side and the hosting server files on the right side.

Your computer files are on the left. Navigate to the website you want to publish.

Your server files are on the right. Upload your website to the public_html folder. Make sure your index.html file is at the root of public_html and the rest of the files are in the same place relative to where they are on your computer. You can either drag the files from left to right or right click your website files and upload them. 

Github Pages

If you choose the Github hosting option, your url would be: username.github.io  or username.github.io/project name.

Github.io is a place developers share code. Many developer have a GitHub account, where they share examples of their code with others and work together on projects. 

Github uses Git, which is built for version control

All large companies will have a mechanism for version control of their software. Some use GitHub, others may use Atlassian BitBucket or GitLab.

• Developers checkout code when they work on it
• When new code is approved it is added into the companies code base. 

Learning git is outside of the scope of class. However, git is a very desirable skill when looking for a first programming job.  Learn more here: 

https://www.tutorialspoint.com/git/

Lab Assignment: Publish your website to Github Pages

For Lab 14, you will either publish your website to Github or to a website domain. Most students publish to Github. Follow the instructions EXACTLY. If you miss a step and it doesn’t work, it may be easier to start over. 

Note: There is not a separate slideshow or document for this lab, except for the Github hosting instructions. 

Demonstration Video: Publishing to Github Pages

Written Instructions: Github Publishing

Follow these instructions carefully: Read Instructions for CSCI1450

What to do if your images don’t show up

When many students first publish to Github or to their hosting server, the images do not appear. This happens more often on students using Windows. The reason for this is that when you are using Windows the browser is not case sensitive. But in publishing it is case sensitive.

1. Make sure your images are named EXACTLY the same in the src (eg. src=”images/logo.jpg and in the images folder. By coding convention, image names are all lower case with the dash between words. For your final project, you must use all lower-case file and folder names.

2. Check to make sure that your images are in the images folder, and that the images folder is at the same level as the index.html file. Otherwise, the browser cannot find them.  If this doesn’t make sense, read this blog post. Understanding how websites work together with files and folder is critical to web development and to all programming. 

https://whitebuffalowebsites.com/website-files-and-folders-explaining-the-magic/