Contents Web Development... 2 Software... 2 Building a Web Server... 4

Transcription

1 Page 1 of 15 Contents Web Development... 2 Software... 2 Building a Web Server... 4 References... 4 Requirements... 4 Step 1 - Obtain Ubuntu... 4 Step 2 - Install Ubuntu... 5 Step 3 - Setup FTP... 7 Download and Install ProFTPd Server (Daemon)... 7 Download and Install GAdmin-ProFTPd GUI... 8 Configure and Activate the FTP Server... 8 Step 4 Setup HTTP... 9 Location of Your Website s Home Directory... 9 Step 5 Connecting Access Your Website Using Your Linux PC Accessing Your Website Using Your Windows PC Accessing Files on Your Linux PC from Your Windows PC Using FTP Step 6 - Going On-line References Step 7 - Get a Free Domain Install no-ip Dynamic Client Update on Linux PC Linux PC - Enable Remote Access... 15

2 Page 2 of 15 Web Development Nice set of web development tutorial from Khan Academy (link) HTML, CSS, Java and more syntax and tutorials at W3schools.com (link) Nice set of web development tutorials from Mozilla IRP MIEN web docs moz://a HTML Crash Course for Absolute Beginners (YouTube) (link). Software Text Editor BATON A hackable text editor for the 21st Century Install Color Picker package. Simple Local HTTP Server 'ea python Use this to host and test websites on your PC. Once installed, to get it running Windows key+r Run cmd Navigate to the directory that your example is inside, using the cd command Enter the command to start up the server in that directory: python -m http.server By default, this will run the contents of the directory on a local web server, on port You can go to this server by going to the URL localhost:8000 in your web browser. Here you'll see the contents of the directory listed click the HTML file you want to run.

3 Page 3 of 15 Web Hosting ATSPACE.COM See (link). WordPress Beginner a wpbeginner Coding Examples Bracketed Class.fact { border-top: 1px solid rgb(222, 222, 222); border-bottom: 1px solid rgb(222, 222, 222); padding-top: 6px; padding-bottom: 6px; } Web Page Validator Go to this (link).

4 Page 4 of 15 Building a Web Server Disclaimer: A novice assembled the following tutorial. I have tried to find reliable information, but I am a novice. Being a novice, I have tried to explain things for a novice. Being a novice, I have had to try things out to see how they work so, some of this has been tested. Before you begin, just be aware that you may get to the last step of this tutorial only to find that your Internet Service Provider (ISP) blocks the ports you need to bring your web server onto the Internet. You may need a business (vs. residential) account to do this. But you will have a web server that works on your local area network (LAN). References Instructables (link) Requirements A home network connected to the Internet via a router, modem, and your internet service provider (ISP) Administrator access to your home network s router. This access is usually via a web browser. You will need to know your router s IP address, username and password. The IP address is probably something like Your Windows PC with: o Internet access o Optical drive (DVD burner) unless you have a 2 GB USB stick o Software for burning iso file to DVD or USB stick (Windows 10 should have Windows Disc Image Burner) o KeePass installed o FileZilla Client installed from An old PC which you can afford to wipe and turn into your Linux PC with requirements as stipulated by the Linux operating system version. For this example, I am using the latest Ubuntu Desktop LTS (Long Term Support) version. The requirements are basic: o 2 GHz dual core processor or better o 2 GB system memory o 25 GB of free hard drive space o Either a DVD drive or a USB port for the installer media o Internet access is helpful (I think it is more than helpful. Furthermore, I recommend a direct cabled connection to the Internet via your router or network vs. Wi-Fi.) Cat5 or Cat6 cable to connect your Linux PC to the internet Blank DVD disc or 2 GB DVD stick Your Internet Service Provider (ISP)must not block the ports that you will need to host a web server. You can check your ports using the Port Check Tool Step 1 - Obtain Ubuntu Approximate Time: 20 minutes

5 Page 5 of 15 The Linux operating system is available as any number of open source derivations. This example will use Ubuntu form Ubuntu.com. Using your Windows PC, download Ubuntu Desktop from Ubuntu.com. Save it to your Downloads folder. Insert a blank DVD disk into your Windows PC s optical drive or blank USB stick into your Windows PC s USB port. Right-click on downloaded iso file and select Burn disk image. Name Date modified uhuntu rleckinn-amr164 icn 10/77/717 5:37 PM _ 1 u Mount 1175:16 PM b Burn disc image 17 4:40 PM rit r. et. Follow the instructions in the dialog box. i. Windows Disc Image Burner X Disc image file: ubuntu desktop-amd64.iso Disc burner: DVD R Drive (DO N/ Status To start burning the disc image, click Burn. Verify disc after burning Bum Cancel This will take about 5 minutes after which, the DVD disc will eject (if used instead of a USB stick). If using a DVD disc, label it. Step 2 - Install Ubuntu Approximate Time: 40 minutes On your Windows PC, in KeePass, create a key and label it Linux PC. In the User name field enter your first name in lower case. In the Password field, enter a password that you will use to

6 Page 6 of 15 access your Linux PC. Now save this. Edit Entry X Entry Advanced Properties Auto-Type History Linux PC Icon: User name: Password: Repeat: Quality: 54 bits 10 ch. URL: Get your old PC ready. We are going to turn it into your Linux PC. Connect it to the Internet with a Cat5 or Cat6 cable by plugging it directly into your network (probably directly to your router). If installing Linux from a DVD disc o Turn on Linux PC and open the optical drive o Insert DVD o Close optical drive o Power it off If installing Linux using a USB stick o Insert it into a USB port on your old PC Power on your old PC. While it is powering on, look for BIOS boot options. You may need to interrupt normal startup and force it boot from either your DVD disc or USB stick. For example, you may need to press or hold down the Esc key. Now the fun begins. Select to boot from either the DVD disc or USB stick. Follow all on-screen instructions, accepting defaults if you are uncertain. For Ubuntu version LTS when prompted o Choose to Install Ubuntu. o Check to download updates while installing Ubuntu o Check to install third-party software o Select to erase disk and install Ubuntu o Check to encrypt the new Ubuntu installation. Use the Password you saved in KeePass for your Linux PC. Use LVM will be automatically included. o Provide your name, username, and password. I recommend you just keep the default username and computer name. Use the Password you saved in KeePass for your Linux PC. o Select Require my password to log in. When installation is complete, remove the installation media and follow any remaining instructions.

7 Page 7 of 15 When prompted to unlock disk, use the password you saved to KeePass. Log in to Ubuntu. If there are any new updates, install them. If you have never used Ubuntu, take advantage of its Official documentation as well as all the other documentation available online. It is quite different from Windows. See Ubuntu Help and Support. Here are some simple tips Linux file names and commands are case sensitive. As you installed Ubuntu, you are the Linux PC (root) administrator. However, as is best practice, while you are logged in to Ubuntu, you are using it as a standard user. In Terminal (where you execute command line statements), the standard user prompt is something like: me@me-ay570aa-aba-a4316f:~s Where it is comprised of <your username>@<your Linux PC name>:~s When the prompt ends in ~S, you have standard privileges. If you need to execute a command that requires elevated (root or administrator) privileges (e.g. to install software), you will precede the command line statement with: sudo This stands for superuser do. Whenever you do this (at least once in each Terminal session), you will be asked for your password. Using sudo this way gives you elevated privileges for just the one command. Alternatively, you can give yourself persistently elevated privileges during the Terminal session. This is done by using sudo with the -s parameter: sudo -s In Terminal (where you execute command line statements), the superuser prompt now ends with: ~# BE CAREFUL if you see the ~# prompt. You have root privileges. To switch back to being yourself issue: sudo -su <your username> For keyboard shortcuts, press and hold the Super key (the Windows key) To take a screen shot, press the Print Screen key. To take a partial screen shot, press Shift-Print Screen. Step 3 - Setup FTP FTP (File Transfer Protocol) is a system used to upload and download files to and from a server. There are several choices for FTP servers (or daemons). This example will use the popular ProFTPd but here are others such as Pure-FTPD. ProFTPd happens to have several available graphical user interfaces (GUIs) which can assist with configuration otherwise configuration is via the Terminal command line statements. This example will use GAdmin-ProFTPd GUI for ProFTPd. Download and Install ProFTPd Server (Daemon) In Ubuntu Search, enter o Terminal and click on the Terminal icon At the ~$ Terminal prompt type: sudo apt-get install proftpd and press Enter

8 Page 8 of 15 Provide your Ubuntu password. When asked if you want to continue press y, Enter. If you see ProFTPd Configuration, accept standalone by pressing Enter. Configuration will proceed, and you will be returned to the Terminal prompt. Download and Install GAdmin-ProFTPd GUI In Ubuntu Search, enter o Terminal and click on the Terminal icon At the ~$ Terminal prompt type: sudo apt-get install gadmin-proftpd When asked if you want to continue press y, Enter. Configuration will proceed, and you will be returned to the Terminal prompt. You can close the Terminal. Configure and Activate the FTP Server Recommendations taken from (link). In Ubuntu Search, enter o Terminal and click on the Terminal icon At the ~$ Terminal prompt type: sudo rm /etc/proftpd/proftpd.conf This step will remove the configuration (if it is there) file so that you start from a clean slate. Click Activities or Search this computer icon (top left). Enter gadmin and press Enter. Click on the GPROFTPD icon to launch the application The first time you start gadmin-proftpd, you will need to configure a few settings. All default values should be used unless otherwise noted below: o Click on the Server tab o Server address: (listen to all network interfaces) o Server Name: Off o Admin your address o Click the Apply button To add a virtual user: o Click on the Users tab o Click the '+Add' button. All settings can remain with their default values except: Username: User1 Password: Enter a password (letters and numbers only 6 characters) Group: Admin Select your home folder Click Open Modify the directory permissions as needed Click the Apply button CAUTION: Each time you click the Apply button, the selected user changes back to the first user in the list and you will be looking at that accounts settings. To make review and/or make further changes, you will need to re-select the user.

9 Page 9 of 15 In the Configuration tab, APPEND the following lines AT THE END to fix an issue that prevents FTP clients such as Filezilla or WinSCP from connecting to the server: <IfModule mod_facts.c> FactsAdvertise off </IfModule> IMPORTANT: Once the server is configured, you may be prompted, when launching Gadmin-ProFTPd, to overwrite the current configuration with a suitable standard configuration. This is likely because you placed the above code before the end of the file. Be sure to click No or you will lose your current configuration. Click the "Activate" button and your server's status will change to "Activated". That means you're now ONLINE! (on your LAN) Step 4 Setup HTTP Now that we have enabled file transfer protocol, we need to activate HTTP, the ability to serve up web pages. To do this, do the following. In Ubuntu Search, enter o Terminal and click on the Terminal icon At the ~$ Terminal prompt type: sudo apt-get install apache2 and press Enter That s it. To test you HTTP server, in a web browser on your Linux PC, enter: localhost You should see that, It works! ubuntu Apache2 Ubuntu Default Page It works! This is the default welcome page used to test the correct operation of the Apache2 server after,) installation on Ubuntu systems. It is based on the equivalent page on Debian, from which the Ubuntu Apache packaging is derived. If you can read this page, it means that the Apache HTTP server installed at this site is working properly. You should replace this file (located at /var/www/html/index.html) before continuing to operate your HTTP server. If you are a normal user of this web site and don't know what this page is about, this probably means t, that the site is currently unavailable due to maintenance. If the problem persists, please contact the ) Location of Your Website s Home Directory Your website s home directory is /var/www. You will put your html files there.

10 Page 10 of 15 0 Recent html El var www html itr Home Desktop I index.html Step 5 Connecting You have created an FTP (file transfer protocol) and HTTP (web) server on your Linux PC. Now you want to be able to access these. Access Your Website Using Your Linux PC You can access your website on your Linux PC by opening a web browser on your Linux PC and entering the address: localhost Accessing Your Website Using Your Windows PC You can also access your website from your Windows PC if your Windows PC is on your home local area network (LAN). To do this, you need to identify the IP address of your Linux PC. IP (IPv4) Address for your Linux PC In Ubuntu Search, enter o Network and click on the Network icon This will display your Linux PC s IP (IPv4) address. It should be something like Write this down as you will need it for setting up your port forwarding, below. Open a browser on your Windows PC and enter this IP address. Your web site should open. Accessing Files on Your Linux PC from Your Windows PC Using FTP You can also transfer files to and from your Linux PC from your Windows PC using FTP and a file transfer protocol application like FileZilla. If you haven t already done so, download and install FileZilla on your Windows PC. Open FileZilla. In FileZilla In Ubuntu, click on the Files icon In your Home folder, create a folder called ftp (all lower case) Click into the ftp folder and create a folder called html (all lower case) Close Files On your Windows PC, open FileZilla In FileZilla, do the following In the upper left, click the Open Site Manager button Click: New Site

11 Page 11 of 15 On the General tab, configure settings as shown below, entering the username and password you set up for your FTP user. You should have saved this in Keepass. Site Manager Select Envy. S M y Sites General Host Protocol: Encryption: Advanced Transfer Settings Charset R IP File Transfer Protocol Use explicit FTP over TLS if available Port X vi Logon Type: User. Password: Normal userl V Background color: None V Comments: New Site New Bookmark Delete New Folder Rename Duplicate Connect Cancel L ok On the Advanced tab, configure settings as shown below. Your Default Local Directory can be set to anything you want on your Windows PC, but you may want to consider pointing this to your website development folder. Set the Default Remote Directory to your Linux PC s website

12 Page 12 of 15 home folder. Site Manager Select Entry: My Sites - womb General Advanced Transfer Settings Charset Server Type: Default (Autodetect) El Bypass proxy Default local directory: C:\Users\,,Dropbox\web-projects\test-s Browse..- Default remote directory: iftp/html Use synchronized browsing Directory comparison Adjust server timezone offset 0 Hours, 0 El Minutes New Site New Bookmark Delete New Folder Rename Duplicate Local site: C Users\nwjiv Dropbox \web-projects\test-site-01\ wsuse Outlook 8.. Photos Public Ltl Sandbox Videos 9 web-oroiects Et test-site-01 test-site-02 connect Remote site /ftp/html? Desktop? Documents? Downloads ftc html? Music Pictures 7 Public QK Cancel Click: Connect. You should be connected to your Linux PC via FTP. You should see something like the following Filename Filesize Filetype Last modified Filename Filesize Filetype Last modifi.. Permissi... L V Own css File folder 10/13/2017 3:1... images File folder 10/13/2017 6:0... scripts File folder 10/13/2017 4:4._ index.html 965 HTML File 10/13/2017 6:0.. Empty directory listing 1 file and 3 directories. Total size: 965 bytes Empty directory. Note that the html folder you are seeing on your Linux PC is not the folder that is hosting your website. That folder /var/www/html, is a root folder and you do not have privileges to it. However, you can access it if you bind it to a folder for which you do have privileges to, your folder named /ftp/html. We will do that next.

13 Page 13 of 15 Bind Root Files and Folders to Home To binding root files and folders to your home/ folder, do the following: In Ubuntu Search, enter o Terminal and click on the Terminal icon At the ~S Terminal prompt type the following and press Enter: sudo su You are now root user At the # Terminal prompt type the following and press Enter: mount --bind /var/www/html/ /home/me/ftp/html Where me is my username, you would substitute your username After this you will be able to see the needed files in your home directory and use them in your ftp client as if they were local files. If you need to make this configuration permanent, you can either add the mount command in some startup script or you can just include a line in /etc/fstab: /var/www/dev /home/ftp_user/www_dev none bind 0 0 See this link for more detail (link). Now go back to your Windows PC. Run FileZilla FTP client again and reconnect to your Linux PC. You should now see something like the following: Local site I CAUsers\nwjiv\ Dropbox \ web-projects \ test-site-01 \ -1 1 Outlook f3-1 Photos Eb-- jy Public al- 1 Sandbox Ep- 1 Videos El- 1 web-projects 153. test-site-01 test-site-02 Filename Filesize Filetype Last modified V Remote site: I /ftp/html = I I Desktop Documents Downloads ftp html Music Pictures Public Filename Filesize Filetype Last modifi... Permissi... Owm css File folder 10/13/2017 3:1... images File folder 10/13/2017 6:0... scripts File folder 10/13/2017 4:4... e index.html 965 HTML File 10/13/2017 6:0... e index.html 11,321 HTML File 10/29/ rw-r--r file and 3 directories. Total size: 965 bytes 1 file. Total size: 11,321 bytes Note that you can now see the index.html file which is really located in /var/www/html. Now you can see how you can build your website on your Windows PC and transfer the files to your Linux PC where they will be hosted on your Linux PC web server. Step 6 - Going On-line It s nice that you can access your Linux PC web server and files from your Windows PC on your home local area network (LAN). But, you want to be able to do so from the Internet. To do this you need to expose certain ports on your Linux PC to the Internet. This is called port forwarding and it is accomplished through settings you need to make on your home router. Each router can be a little bit

14 Page 14 of 15 different. This example will explain how to do this for a Linksys router. For other routers, check out this link (link). Access your router using a web browser on either your Windows PC or your Linux PC by entering the IP address for your router. It is typically Login in using your router s administrative username and password. Open the Security tab and set up port forwarding as shown below. Note that the Device IP# refers to your Linux PC s IP (IPv4) address which we obtained earlier, see (link). I 11\1/GV=" I '1-`, / Smart WI-rl Ann H I 1 - n7-. Sion Out Security View and change router settings Firewall DMZ Apps and Gaming DDNS I Single Port Forwarding I Port Range Forwarding I Port Range Triggering Application name External Port Internal Port Protocol Device!Pit Enabled VNC TCP True FTP Both True HTTP TCP True Edit/ Delete Edit/ Delete Edit/ Delete Add a new Single Port Forwarding Ok Cancel Apply Once you have saved these setting, your web server is online, unless, your ISP blocks the ports it needs to operate. These ports are: Application: VNC, External Port: 5800, Internal Port: 5900, Protocol: TCP Application: FTP, External Port: 21, Internal Port: 21, Protocol: Both (TCP and UDP) Application: HTTP, External Port: 80, Internal Port: 80, Protocol: TCP Additional ports may be required for gaming apps. If your ISP blocks the required ports, you can try negotiating with it or using a non-standard port. Check your port settings on CanYouSeeMe.org. References See PortForward.com (link)

15 Page 15 of 15 Step 7 - Get a Free Domain Install no-ip Dynamic Client Update on Linux PC See: Linux PC - Enable Remote Access With remote access, you'll be able to connect to your Linux PC remotely and control it. In Ubuntu Search, enter o Remote and click on the Desktop Sharing icon In the dialog box, make the following settings o Sharing Check: Allow other users to view your desktop Check: Allow other users to control your desktop o Security Uncheck: You must confirm each access to this machine Check to require the user to enter a password Provide a password. This password has limited character length. Record it using KeePass on your PC. o Show Notification Area Icon Select: Always Close the dialog box. Now you can access your PC from another PC.