Web Development Core Concepts - Create your first website


Welcome back to web technology core concepts at Learning Journal. In my earlier videos, I talked a lot about creating a single page website and bringing it on the Internet. There is no value in learning theory without doing something practical. So, let us take that myfirstpage.html page and bring it on to the Internet as your first website.
To do that, we need following things.

  1. Your first web page
  2. An Internet-connected Linux machine
  3. A simple web server software

Let’s talk about the above three requirements.

How to create a web page?

The first thing that you need is a web page, and you already have a myfirstpage.html file. I have listed the source code for that page here.

                                
    <!DOCTYPE html>
    <html lang="en">
                                    
    <head>
                                    
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <meta name="description" content="Apache Spark Foundation Course by Learning Journal.">        
        <title>Learning Journal - Spark Dataframe Basics </title>
        <!-- External CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" 
                integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
    </head>
                                    
    <body class="fixed-sn navy-blue-skin">
        <header>
                                    
        </header>
                                    
        <main>
            <div class="container mt-4 pt-4">
                <div class="row mb-2">
                    <div class="col-12">
                        <div class="embed-responsive embed-responsive-16by9 mb-4">
                            <iframe src="https://www.youtube.com/embed/REg1ACa47Q8" 
                                        title="Spark Dataframe Basics" class="embed-responsive-item"gesture="media"
                                        allow="encrypted-media"allowfullscreen></iframe>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <h1 class="h5-responsive text-center"> Dataframe Basics </h1>
                    </div>
                </div>
                <hr>
                <div class="row">
                    <p>Some text goes here!</p>
                </div>
            </div>
                                    
        </main>
        <!--SCRIPTS-->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"
                integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ"
                crossorigin="anonymous"></script>
    </body>
                                    
    </html>     
                            

You can copy the code and paste it into a text editor. That’s it. Save it as myfirstpage.html. Your web page is ready.
If you want, you can open the HTML file in your browser, and you will be able to see the content of your web page. However, this page resides on your local machine, and we want to bring it on to the internet. To achieve that, we need an Internet-connected Linux machine.

How to get a Linux Machine?

You might not have a Linux machine. But do not worry about that. I will help you to get a free Linux machine in Cloud.
We will be using Linux instead of windows for two reasons.

  1. Linux is a free and open source
  2. Majority of the real-life websites are running on Linux

There is not much value in learning web development on Windows platform because Windows is not very popular as a server-side operating system. Most of the websites are running on a Linux platform. So, the next question is this.
Where to get a Linux Machine? Do you know something about public clouds? Let me quickly introduce you to the cloud platforms.
There are three popular cloud platforms.

  1. Google Cloud Platform or GCP
  2. Microsoft Cloud Platform or Azure
  3. Amazon cloud platform or AWS

It takes a lot of time and knowledge to understand the purpose and the services offered by these cloud platforms. However, for now, you can think of them as infrastructure on rent. What does that mean? That means you can get a Linux Machine from one of these cloud platforms for a nominal rent on per hour basis.
However, all these cloud platforms offer a free plan for learners. That means you can get your Linux machine for no price at all. All you need to do is to register for a free plan and start using it.
I have separate videos to explain step by step process for registration and some basics of creating a Linux machine and using them.

  1. A free virtual machine in Google Cloud
  2. Free students account for Microsoft Azure

I recommend you watch those videos and create an account in one of these cloud platforms. Rest of the video assumes that you already have an account in one of these cloud platforms and you have created a Linux Virtual machine. If you had a Linux VM in any of these cloud platforms and assigned it a static IP address, you successfully fulfilled your second requirement. The next requirement is to install and configure a web server.


How to Install Web Server in Azure Cloud?

We will be using Apache HTTP web server. We are using Apache HTTP server for three reasons.

  1. Apache HTTP server is free and an open source web server
  2. It is available for Linux and Windows both
  3. It is the most popular and the most straightforward web server on the Internet

If you have created a Linux VM in Azure cloud, you can install and start your web server using following steps.

  1. Login to Azure portal and go to your dashboard.
  2. Select your virtual machine. If it is not already running, start it by clicking the start button and wait for your computer to start.
  3. Start a cloud shell. Now login to your Linux machine from the cloud shell using SSH command.
  4. Now execute the below command to install Apache HTTP web server.
                                    
    sudo yum install httpd       
                        

  1. Start the web server using below command.
                                    
    sudo service httpd start      
                        

Great! You installed a web server and successfully started it. Do you want to test it? Copy your public IP address and paste it in a browser window. You will see an Apache HTTP web server welcome page.

How to Install Web Server in Google Cloud?

If you have created a Linux VM in Google cloud, you can install and start your web server using following steps.

  1. Login to GCP console and go to your dashboard.
  2. Select your virtual machine. If it is not already running, start it by clicking the start button and wait for your computer to start.
  3. Connect to your VM using SSH.
  4. Execute the below command to install Apache HTTP web server.
                                    
    sudo yum install httpd       
                        
  1. Start the web server using below command.
                                    
    sudo service httpd start      
                        

Great! You installed a web server and successfully started it. Do you want to test it? Copy your public IP address and paste it in a browser window. You will see an Apache HTTP web server welcome page.

How to deploy your Website?

We have successfully achieved all the requirements to deploy our first website on the internet. However, before we implement our first website, let me introduce you to the website’s root directory.
I already talked about the primary purpose of the web server in an earlier video. The web server is responsible for returning a requested web page. Right? However, for easy management and some other security reasons, we restrict the web server to read the content of a specified directory. A web server cannot read and deliver content from outside a given directory. And that directory is the root directory of a website. So, all your web pages must exist inside the web server’s root directory. Right?
In case of our example, Apache HTTP web server has following default root directory for CentOS machine.
/var/www/html/
So, if you want to deploy your first HTML page, you must copy that page in the above directory. Let’s do that.
I need to copy myfirstpage.html to the Linux machine in the cloud. There are many ways to do that. However, we will use two-step processes using the WinSCP tool. Follow these steps.


  1. Download and Install WinSCP on your local windows machine.
  2. Start WinSCP and connect using the IP address of your Linux machine and your username/password.
  3. Drag and drop your file from your local computer to the remote device.

That’s it. You copied your webpage to the Linux machine. However, you copied it to your home directory. But we wanted to copy this file into the web server’s root directory. We cannot copy this file to the root directory because a normal user does not have permissions to create files in the web server’s root directory. So, we must use the sudo privileges to do that. Execute the below command to copy your webpage to the web server root directory.

                                    
    sudo cp myfirstpage.html /var/www/html/      
                        

Great! Deployment is complete. You can now test your website using URL.
http://40.114.67.142/myfirstpage.html
If you are trying to do that yourself, your Linux machine will have a different IP address. So, you should change the IP address in the above URL to the IP address of your machine. When you start it again, don’t forget to start your web server once again.
If you no longer need this Linux Machine, delete it.
See you again in the next video.
Thank you for watching Learning Journal. Keep Learning and Keep growing.


You will also like:


Anonymous Functions

Learn Scala Anonymous Functions with suitable examples.

Learning Journal

Referential Transparency

Referential Transparency is an easy method to verify the purity of a function.

Learning Journal

Apache Spark Introduction

What is Apache Spark and how it works? Learn Spark Architecture.

Learning Journal

What is a closure?

A closure is a function. Like any other Scala function, a Closure may be pure or impure.

Learning Journal

Pure Function benefits

Pure Functions are used heavily in functional programming. Learn Why?

Learning Journal