11.

Launching your website (deployment)

11.1 The three main components needed for a website to go live

● Deploying or going live involves three main components

▪ Code base (html, css, img, js) = In your website's case, this is the template you
buy and customize

▪ Server = this is a remotely located computer where you put your code on to be
accessed by the public. You will need to rent a server and You will need to transfer
your code base to the server.

● Visit this website to rent server: https://www.hostinger.com/

▪ Domain name = Domain is a name/address of the server (computer) that has your
website code. A domain name is the letters and numbers that form a website
address on the internet that can be used to locate the computer that has your HTML
code. A detailed explanation is provided later in this note.

11.2 How do we set up a hosting server?

● What is a hosting server?

▪ A server is a computer that stores, sends, and receives data. In essence, it "serves"
something else and exists to provide services. It is simply a computer with server
software installed.

▪ The job of a server computer is to wait for a request and send the proper response
up on request. Imagine you need to eat some food, you will need to go the fridge
to get it, so the fridge will be your server to store all the food (files) inside, while
you are the client that wants to get food (information) to consume.

▪ There are different kinds of servers, their difference is determined based on the
kind of software installed on them. Let’s look at some of the kinds of servers and
the software installed on them:

● Web server is a computer or collection of computers used to deliver web

pages and other content to multiple users. Its main job is to establish a
connection between a server and the browsers of website visitors. A web
 server receives your request to access a web page. It runs a few security
checks on your HTTP request and takes you to the web page. A few
renowned web servers are Apache, Node.js, IIS, Nginx and Microsoft web
server.

● Application server is a server where applications can run. Examples of

application servers include PHP and HAVA.

● Mail server’s basic function is to store and sort e-mails. Mail server is our
real-life post office, the server will handle e-mails going out and coming
in. Examples of mail servers include Webmail (Web-Based Email) Servers
and POP3 Servers.

● Domain name server is in charge of storing a database of different domain

names, network names, Internet hosts, DNS records and other related data.
The server will translate a domain name into its respective IP address,
example when you type google.com, it will translate to IP address 8.8.4.4
which computer can understand.

● Database servers is a computer system that provides clients to retrieve data

stored centrally. It is usually done by executing a query using a query
language specific to the database. For example, Oracle, Microsoft SQL,
MySQL, MongooDB are examples of database server software.

11.3 Why is it not recommended to host your own website?

● Self-hosting not recommended because:

▪ You need to maintain it consistently. For example, you need to keep on top of
software updates.

▪ It is more expensive.

▪ It can create security risks and your website will be more vulnerable for hacking.

▪ It is less reliable when it comes to options for dealing with service outage or
downtime. Your computer needs to be on and connected to the internet 24/7 .

● If self-hosting is not a good idea, what should you do? The Alternative is to choose a
hosting server that best fits your need, compare the pricing and rent.
11.4 How to choose the best web hosting plan according to your need

● There are various reliable companies providing hosting service. These companies have
different hosting plans and below, you will see the most common server type or server
plans.

▪ Shared server: Multiple users share the same server/computer, and the server is
administered by the host provider. If a hacker has access to one website, it leaves
other websites on the server vulnerable as well.

▪ VPS (Virtual Private Server): Multiple users using the same server computer but
in a way that they have dedicated access to the portion of the server they use. Even
if the computer is one, it runs multiple operating systems. In VPS, you are
responsible for administering the server.

▪ Dedicated server: here, your website has one dedicated server/computer,

however, you are responsible for administering your dedicated server.

▪ Cloud hosting: A cluster of computers working together to host your site. Cloud
hosting makes applications and websites accessible using cloud resources. Unlike
traditional hosting, solutions are not deployed on a single server. Instead, a network
of connected virtual and physical cloud servers hosts the application or website,
ensuring greater flexibility and scalability. The host company manages the cloud.
Your files get moved from place to place as needed. But your access credentials
remain the same.

● Resource available to you when renting a server include

▪ Disk space

▪ Bandwidth (for simple sites with very little number of visitors, a 2 to 3 GB/sec of
bandwidth per month is good enough)
 ▪ Price for renting server

▪ Reliability and speed of access (Uptime/ the total duration for which a server is
fully functional and running)

▪ Technical support

▪ Free SSL (SSL is a security protocol that creates an encrypted link between a web
server and a web browser. Companies and organizations need to add SSL
certificates to their websites to secure online transactions and keep customer
information private and secure.)

▪ Control Panel (web server control panel is an online interface that allows you to
control different aspects of your web server.)

▪ Features to create FTP account using your hosting server account

● For smaller sites like your resume website and restaurant sites, the cheapest hosting service
should be good enough.

● If you are hosting a site with high traffic to it, VPS or dedicated servers with higher
bandwidth limits might be the best options.

● If reliability is top priority, cloud hosting is the best option

● Recommended video to watch to choose the best hosting server:

▪ https://www.youtube.com/watch?v=4COpHzXAwlU

● For your portfolio website, we recommend that you rent hosting service from Hostinger
(https://www.hostinger.com/)

11.5 Accessing and exchanging website files with your hosting server

● Usually, the computer that you use to host your website and the one you use for
development are different computers. They are also often located in different
locations. Therefore, you need a way to transfer your website files to the remotely
located server computer. The way we normally do this is by using an FTP client.

● FTP client (definition): Just like a browser is a software written by following the
HTTP protocol to help us send and receive HTTP messages, An FTP client is also
 a software that follows the FTP protocol and helps us upload, download, and
manage files from our computer to the server.

● Recommended FTP clients to use:

▪ Cyberduck (download cyberdeck here: https://cyberduck.io/),we

recommend that you use Cyberduck for this course, but it is also possible to
use anyone of these applications.

▪ FileZilla

▪ WinSCP

▪ Transmit

● For further explanation on how to use CyberDuck, watch the following video.
Please note that software and applications get updated and there might be features
you see in the videos we recommend but are no more available. Watching the
videos, we recommend will give you the general gesture on the software. You are
always encouraged to research on your own.

▪ https://www.youtube.com/watch?v=UYDWOvyzoAQ&ab_

● Transferring your website files to the server computer

▪ This is just a straightforward step of copying all the files to the server.

▪ Make sure your index.html file is in the root directory of your hosting
server.

● Root directory is the publicly accessible base folder of our host

server. This is the directory where your web server software is
configured to look for the index file.

● It is for this reason we name our entry html page as index.html.

● There is a class demo on how to transfer your website files to the server.

11.6 How to connect a domain name to your server (demo)

● Launching your website/deployment:

▪ Traditionally, what is referred as launching a website is the last step of

redirecting the domain name to the hosting server address.

▪ As a developer, deployment is the whole process of preparing your hosting

environment, putting all the necessary files on the server and connecting
your domain with the server

● What is a domain name?

▪ A domain name is a name/address of the server (computer) that has your

website code. A domain name is the letters and numbers that form a website
address on the internet that can be used to locate the computer that has your
HTML code. Domain names are limited and registered by an international
organization called ICANN.

▪ Every device that is connected to the internet has a unique number assigned
to them by a global authority known as IANA (Internet Assigned Numbers
Authority). Giving this number has its own rules that is mainly dependent
on the geographical location. Ex: 46.17.175.65. But these numbers are not
human friendly to remember. For that reason, ICANN manages the
assigning of a human friendly name to the IP addresses. This human friendly
name is what we call a domain name.

▪ There are many domain name agents who are licensed by ICANN to sell
domain names. What these agents do is, they check if the name you are
trying to register is taken or not. If available, they send your request to
ICANN to officially register the name on your behalf. Remember, a domain
name is a name given to an IP address. Initially these agents register an IP
address that they own to the name. Then they provide you a way to change
the IP address later. Example of how changing of the IP address into your
domain name:

● 46.17.175.65 => evangadi.com

 ● Evangadi Server: 71.127.44.345 => evangadi.com

● ICANN has licensed Godaddy and Google domain to give domain

name

o IP address 46.17.175.65 => evangadi.com ($12)

● DNS Configuration Area => IP address 71.127.44.345 =>

evangadi.com

● How do you buy a domain name? There are some reliable companies who
provide a very efficient way to manage your domain. Google Domains and
GoDaddy are the most known ones. We recommend that you buy domain name for
your website from Google Domains because whenever you visit a website, your
computer performs a Domain Name System (DNS) lookup. Websites integrated
with Google Domains use the same DNS servers as Google so that your domain
can connect quickly and reliably to your website. Buying a domain name is as
simple as following these two steps:

▪ Step 1: Visit https://domains.google/ to buy your domain name.

● You will need to login to your Gmail account

▪ Step 2: Check if the domain name you want to buy is available or not
already taken

● When you buy the domain name it is better to go with a “.com”.

● Make sure the domain name you choose is related to the purpose
your website has. In your portfolio website case, it is advised that you use
your first and last name as your website’s domain name.

▪ Step 3: Pay the agent company to register it with ICANN. You now own
the domain name after this

▪ Step 4: DNS configuration (once you purchase your domain name, make
sure to change the DNS to point to the server computer that you will rent.)
 ● Get the IP address of your host server. You can get this from your
hosting provider

● Add the IP address as an "A" record on your DNS configuration

area. An A record is short for Address record, and it maps from an
IP address to a domain name. Unless you change this, the domain
registrar is the one that manages your DNS too . Simply put, you
add the IP address of the host server in your Google Domain’s DNS
so that your domain name goes to the IP address of the server
computer.

● Additional setups

o Configure CNAME record: CNAME stands for canonical

name and is used to create an alias from one hostname to
another. Ex: www.domain.com is different from
domain.com. For both www.domain.com and domain.com
to work to access our website, we need to add the
www.domain.com one as a CNAME

o Configure mail exchanger records: Allows you to control

the delivery of mail for a given domain. You need to direct
email from your domain to the Google Workspace servers.
It's like registering your new address with the post office
when you move so that they deliver your mail to the right
place.

Note:
for Setting up Hostinger, transferring website files to your server , and Launching your website
(watch class demo video respectively).