Building a website

Details
Last Updated: Thursday, 19 October 2023 16:49
Published: Tuesday, 05 May 2020 16:34
Hits: 2933

Building a website:

Best way to learn building a website is to build as much as you can on a linux laptop. This will allow us to see all pieces of it.

1. APACHE:  Install a webserver program on your laptop. Webserver program like Apache is the preferred program. It makes your computer behave as a webserver. Details for this were in previous section. If you do not want to setup your server yet, you can always rent a server for $2-$3 per month. Details later.

2. HTML/CSS: After a webserver pgm is installed, you will need to learn HTML which is the language that all pages on internet are written in. To help with laying out the page, another language called CSS is used. Both HTML and CSS are what you need to have a basic introduction to. Nowadays higher level web scripting languages like php, python, perl, etc are used to generate HTML and CSS code, so no one writes them manually. But you will still need to know a little bit of HTML and CSS to know what to dump out. Latest standard on HTML is HTML5 and on CSS is CSS3. You will want to learn these latest versions too.

3. PHP/JAVASCRIPT: Once you have learned the basics of HTML and CSS, you will realize that it requires a lot of coding to get even basic things done. You can build a whole website directly coding in HTML, but it would be nice to have some scripts to do stuff. These scripting languages are also known "web programming languages". These are 2 kind of scripting languages that you will need to know.

  • CLIENT SIDE: One is javascript that runs locally on your machine. All browsers are equipped to support javascript, and since javascript runs on user's local machine, it's very convenient. But the problem with javascript is twofold: 1.First is that any user can see the code. 2. Second issue is that it runs on the client machine, so it can only do limited things that don't require interaction with the server.
  • SERVER SIDE: To take care of these issues, there are scripting languages that run on the server side. php, python, perl, etc are few examples of such languages. php is very popular language, and whole websites are coded in php. php runs on your server, so any script called by php code runs on your server, and the code is not visible to the user.

4. MySQL: Next comes database programming languages as Mysql, etc. These are needed if you have any data at all on your website. You can live without database languages, but it's wise to keep all the data on your website in this one big file called database file, which you can access via database programming language. Database are absolutely necessary once your your datasize grows, as they are very efficient and secure. Support is provided to interact with databases in all web languages as php, python, etc. So, you just need to learn how to interact with databases, and most of the times that will suffice.

5. WEB FRAMEWORK: Writing pgms in se5. WEB FRAMEWORK:rver scripting languages and interacting with databases is not easy. So, web frameworks have been developed, which are even higher level setup, that take care of a lot of things for you. they give you a framework, and you use that framework functions/methods to do anything. So, you have to learn this too, if you want to do real serious website business for living. If your websites are not massive, you can live without web frameworks. I haven't used frameworks yet (except Flask that I see my son using), so I've no idea of when to start using them.

Summary:

So, in nutshell, you will need to know HTML and CSS to build any website. You may then want to learn any one client side programming language (as javascript), or server side programming language (as php or python). Python is increasingly being preferred over php for server side programming. You need to learn one database language too as mysql. Then if you are really thinking of dumping a unicorn (i.e a billion dollar website), you will want to learn web framework.

The above stack of Linux, Apache, MySQL and PHP is also known as LAMP. The LAMP stack which is the foundation for Linux hosted websites consists of Linux, Apache, MySQL and PHP (LAMP) software stack. The Four Layers of a LAMP Stack Linux based web servers consist of four software components. This is very popular term used in web development.

This is a very good link from mozilla for learning web development:

https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web

On this page, follow links for html, css, javascript, web forms and server side website programming (Django web framework). This will suffice for building any website. You will need to learn php and python too, for which I've separate sections.

STEPS:

This link explains how to setup a dedicated webserver in ubuntu. We are not setting up a dedicated server, but using our regular home laptop to also work as a webserver. So, we can skipsteps 1 to 4, and start with step 5.

UBUNTU Web server: https://code.tutsplus.com/tutorials/how-to-setup-a-dedicated-web-server-for-free--net-2043

These are our final steps:

1. Install Apache: Install Webserver Apache as explained in previous section. Make sure it's working (by typing localhost in your browser. It should show apache2 page)

2. Install php+MySQL: Now install php and mysql too as we may use it in our website. Below cmd installs all 3 parts of LAMP stack on Linux:

sudo apt install apache2 php5-mysql libapache2-mod-php5 mysql-server => This installs Apache, MySql and Php. If you have already installed apache, just type "sudo apt install php5-mysql libapache2-mod-php5 mysql-server"

Few points:

  • During MySQL setup, it asks for a root password. You should use a strong password (Never leave this field blank)
  • Change following settings in /etc/apache2/apache2.conf:
    • Scroll down (down arrow) to where it says "ServerTokens Full" and change it to read "ServerTokens Prod"
    • Now, scroll down a little further and change "ServerSignature On" to "ServerSignature Off"
  • Change php setting too:
    • /etc/php5/apache2/php.ini: Change "expose_php = On" to "expose_php = Off"
  • May need to restart apache2 sever for these changes to take place. Or just restart your machine.

3. Private Website name: Our main file, index.html is /var/www/html/index.htm. We are able to access this folder by typing "localhost" in browser. Now, we need to assign a name to our website. The later half of this link details on how to get names for multiple websites on same server: UBUNTU:  https://www.linux.com/learn/apache-ubuntu-linux-beginners. Here are the steps:

  • We goto file /etc/apache2/sites-available.conf, and add the name of our site:
    1. sudo emacs /etc/apache2/sites-available.conf => This opens the file for edit using emacs editor, Enter the password when prompted
    2. ServerName mywebtest.com  => Add this line. You are really uncommenting this already existing line, and change the name to some random name you want your site to take.
  • Now goto /etc/hosts file to map this name to loopback address 127.0.0.1
    1. sudo emacs /etc/hosts => This opens the file for edit using emacs editor, Enter the password when prompted
    2. 127.0.0.1 mywebtest.com => By adding this line, we are mapping mywebtest.com to goto address 127.0.0.1, which is sayinng "look for this website name" on this local server. Since our localserver has this name, it serves us the default ubuntu page.NOTE: Even if our website was named yahoo.com, that would work, as that domain name will ne looped back to your website due to this entry in /etc/hosts file.

4. Multiple websites: Now we may want to add another website to our server. When you buy a hosting plan, you will notice that these providers host multiple websites on same server. How do they do that? Well, apache supports having multiple websites on same machine. The concept behind it is simple. TCP/IP packets not only have the IP address of the server in their header packet, but also the name of the website. so, once the packet is delivered to the destined IP address, Apache parses the header to look for website name, and then takes to the appropriate dir for that website. Here's how you do it:

  1.  

5. Router settings: Our website so far has been working on local computer. If we want outside people to see our website, it's not yet visible to them. To make it happen, we have to make some changes to our router settings. Reason is all routers are configured to block all outside traffic from passing to devices connected to it's private n/w. The only exception it makes is when the request for any data is initiated by a computer in it's private n/w. Then, the router allows that request to goto outside world, waits for a response that matches with the request, and then passes that response to one of the computer on it's private n/w that requested it. Everything else is blocked, since otherwise a lot of unwanted traffic may get to your laptop, possibly harming your laptop.

Different routers have different private ip addr. My ATT router has private ip addr 192.168.1.254, so I type 192.168.1.254 or http://192.168.1.254 in my browser. That opens the router login page that allows me to make changes to the router internals. One of the first things to change is to allow outside traffic to be passed by the router to our home computer, on which we are going to install the server. This is done by allowing "port forwarding" or "DMZ pinhole" or "IP passthrough" or "some other name" on your router's firewall settings. No matter what router it is, it's always some setting in "firewall" that does the trick. In short, our router's public address is mapped to this laptop's private address.

Here are the steps:

  • Type address of router in Browser: For myy ATT router, its: http://192.168.1.254. Log into your router using your router passwor
    • On latest ATT router (2021) => Goto Firewall->IP Passthrough. Choose "Allocation mode" as "default server", and "Default Server Internal Address" as "<name of your server laptop>". It will show the correct IP address. Click Save.
    • On previous ATT router (2018) => Goto settings->firewall->applications, pinholes and DMZ. It will say something like "Allow device application traffic to pass through firewall". Here we choose the "<name of your server laptop>" to which we want the traffic to be passed to, and then choose what kind of traffic to pass. We should choose application as "http server", so that only http traffic (i.e traffic for http port which is port 80) is passed to the computer. We can choose to allow all kind of traffic to pass to our computer, but that would be very unsecure. Since we are only going to install http server on our computer, we'll just choose "http server" or "https server" application only.
  • Now get the public IP address of your router. Multiple ways to do it:
    • Just type "what is my IP address" and any search engine will show it. Or goto https://www.whatismyip.com to look it up.
    • Look in your router settings. It should be somewhere on device info, etc. On my latest ATT router, I can find it under remote access: https://99.110.138.246. This should match the one from search result above.
    • Use Unix cmds to figure it out. FIXME = Find out which cmds
  • Now type the public IP address of your router in your browser (i.e http://99.110.138.246) from some outside computer (or use VPN) and see if you can access your default "UBUNTU" page hosted at "<name of your server laptop>". This may not appear immediately (the site may keep on timing out). It may take a couple of hours for your site to show up. Not sure why? Maybe due to the address taking time to propagate to other routers and their routg table. NOTE: the address is http:// and not htps:// (as https:// points to router page and not your server page).

6. Public website name: Once router settings are done, get a website name on noip.com. Just open www.noip.com website, and get upto 3 domain names ending with one of the suffixes they provide. I chose ddns.net as a suffix for my website names. You will see that it will map these names to your router address, as it knows the router address. NOTE: the account on noip.com is free, but you will need to keep renewing the names every 30 days. If you don't renew every 30 days, they will cancel those names and put it in the free pool for others to grab. So, keep an eye on their email every 25 days or so. Or, login to their website before the end of 30 days, click on "modify" and it will renew the domain name.

Now access those newly assigned website names from  some vpn connection, and see if it can be accessed. For ex, if you chose your site name as mycrapsite.ddns.net, enter the name "mycrapsite.ddns.net", and see if it brings up the page. similarly try it for other sites you have hosted on your laptop, and mapped via noip.com. If you can access all these websites, your are done.

7. Remove local loopback entries: Remove your entries from /etc/hosts for your multiple websites as you don't need them anymore. That way, those websites will now be fetched by looking at the routing table of router, and not be looped back on your laptop itself. This step is optional, Even if you keep these entries in /etc/hosts, it doesn't affect anything for external computers.

At this point, your websites are ready to rock and roll. Just make sure to keep your laptop running, or else your sites will go offline.

Congrats on the achievement !!!

Sample website: Wordpress

The best way to learn how to build websites, is to look through the code of any open source web publishing software. The best one to learn is wordpress software. Here's by going through the code, you can learn how are the world's biggest websites built on php code. I'll soon include a section on learning wordpress code.

To start learning, the best option is to install a copy of wordpress software on your local computer. There are lot of artcles on internet on how to do it. Here's one such link:

https://www.usessionbuddy.com/post/How-to-Install-and-Setup-WordPress-on-Linux/

What I've explained until this point is based on Linux machine. However, if you are not very comfortable installing wordpress on linux machine, you can do it on windoes too. XAMPP is the application you need if you have windows XP installed on your local computer, to install websites locally on your computer. Here is a good link for installing it on windows XP. Just follow the instructions and you will be done in no time. I installed i myself in less than 5 minutes. Once you have installed it, go ahead and install wordpress on it, as explained on the link above. Now you can access your website by entering this link in your browser - http://localhost/wordpress-3.0/wordpress/. NOTE: this is going to be a local website only (as we haven't done the setup for making these sites public on windows OS)

We'll learn this assuming you have a windows laptop, since it's mostly about getting a feel of how websites are designed, not going in detail.

Third party web server providers:

So far, we have setup our own laptop as webserver. However the problem with this is that firstly your website will be accessible only as long as your computer is up and running. Secondly, your computer may be exposed to viruses or malware (won't happen if you are careful about security). Also, the bandwidth from your internet connection may not be enough to support too many viewers accessing your website. So, for setting up any commercial website, we'll look outside..

The easiest option is to pay a web hosting company a monthly fee, and then can host the website for you. Their servers runs 24 hours, so your website will never be offline. They provide you enough space and enough bandwidth (depending on your monthly plan) to support all your needs. This website is hosted on hostinger servers. Choose Linux server if you want to learn anything in life, as Linux is open source. Once you have chosen a server and have started a website on a server, you can upload any files on the server, and they will be visible on your website. However, if you have any errors on your files or any of the scripts that you are uploading, you will be able to know them, only by going on those files or scripts through your browser. It would be convenient if you could maintain a local copy of your website on your computer's hard drive. This is where, XAMPP really comes in handy, so that you can test your website locally.

Uploading your website: When you are ready to upload your website from your local computer to a webserver, you can use this great tutorial that I found at The Theme Foundry

Best value Hosting providers: Most of the times, you will get a promotional offer for a year or more for hosting your website, which would be around $2-$3 per month. After that you will be switched to standard rate which would be around $10/month, which is a lot to pay. I recommend switching hosting providers, after your promotional rate is over. I've used various web hosting providers as godaddy.com, ipage.com, hostinger.com, etc. Since godaddy got sold in 2012, it has become very expensive as they do not allow any coupons to be used, and are very rigid with their pricing. I got tired of them and finally switched from $12/month at godaddy to $2/month at ipage and then at $2/month at hostinger. hostinger is by far the best and cheapest hosting provider of all. Their initial plan lets you have multiple sites for only $100 or so for 4 years (you can use a cashback website as topcashback.com to get a lot of cashback too). After the first 4 years, their renewal rates are also low at just $2-$3 a month.

Switching hosting providers: very easy. for couple of minutes of your time, you can keep changing providers, and still pay $2-$3 per month for getting hosting services. You can just keep on switching between 2 or 3 providers, and everytime you return to the same provider, they will again offer you "new customer" promotional offer, since you will be treated as a "new customer". Choose a plan for the longest duration available as you do not want to be switching providers every year or two. As I said earlier, with hostinger.com, you may not need to switch providers, as their renewal rates are still low (as of 2021).