BasicSite-Home

BasicSite-Extras

1. Synchronizing the Site between the PC and the Server

Having successfully setup a webserver (Abyss) on the PC as well as completing the setup of the webserver (Nginx/Apache) on the Ubuntu server, the basic website from the PC can be uploaded to the Ubuntu server via FTP. Thereafter any changes made to the website on the PC can accordingly be uploaded to the server.

Step01: Connect to the Ubuntu Server via FTP (eg. FileZilla)
Connect to the server via a FTP client (eg.FileZilla)using the regular user (eg. sammy). Open the corresponding directories in Abyss and in the server (eg. example.com). Drag the two files 'index.html' and 'w3.css' into the server directory, replacing the older index.html file. Now the browser pointing to the server (eg. example.com) will reflect the same webpage as that of 'localhost' on the PC.

logon Filezilla

Tip#01: The instructions provided for a simple one page website where all files are placed in a single directory. Should there be a larger number of images, one may consider creating an 'image' directory (within both PC and server main directories).
Tip#02: While building the site - making change(eg. introducing another directory) yet some aspects are not appear correctly, it may be useful to re-assert both ownership and reading permissions for all files and sub-directories:
sammy@imega:/home$ sudo chown -R sammy:www-data example.com
sammy@imega:/home$ sudo chmod -R 766 example.com
Tip#03: Even in the 'single' html page website, one can have a navigation bar as to take the website visitor to different sections within the page, by setting the 'id' parameter with a name. Copy & Paste this text as to replace that in the existing index.html to have a look: index-section.txt

2. Adding an Email Contact Form

The simplest method is for one to simply add a "mailto" link with an email address, but such a link attracts alot of spam and this also wouldn't be very helpful to the growing numbers that visit websites via their smartphones. Below describes a better solution; that is to embed a contact form from one's website established in an iRedmail-based server. For the basic website environment, a PHP-based contact form will do. The following steps lead to a workable solution:

Step01: Create via iRedadmin (eg. https://example.com/iredadmin), a user's mailbox 'info' with one's domain (eg info@example.com - as per Codeproject's PHP-Contact-Us-Script requirement).

Step02: Ensure PHP files and forms work for the Basic Site

Do the first two steps in the Wordpress - Ensure PHP is Installed. This will ensure .php mail-form will run on the domain (eg.example.com).

Step03: Download the PHP Contact Script

Of the number of offerings, this writer found this script useful: PHP-Contact-Us-Script [CodeProject.com] For convenience, here is a ready-to-use copy 'Contact2Us'
Upload the zipped file into the website directory (eg./home/sammy/example.com).

Step04:

sammy@imega:cd example.com/
sammy@imega example.com/:unzip contact2us.zip
sammy@imega example.com/:rm index.html // if this file exits.
sammy@imega example.com/:nano index.html // 'Copy&Paste' this text: index.html

Step05: Open browser, the webpage should now offer a form to create a message, send and then check the user's mailbox 'info' with one's domain (eg info@example.com) via RoundCube mail (eg.https://example.com/mail). Note: The reply maybe in the 'spambox'.

Tip#04: The multi-sectional page, as featured in Tip#03 and the 'Contact' feature in these last steps can be easily integrated. Here's an example of the single index.html page with the PHP mail feature.
Tip#05: Most websites now required SSL certificate to avoid browser warnings. See SSL Certificate(s) for Websites to do this, via LetsEncrypt, free of charge.
Tip#06: Without making the DNS settings as expressed in iRedMail-Extras as well as those DNS/MTA+STS setting as expresed in iRedMail-Switch - Part:D, mail sent from this mail setup will usually end up in the recipient's spambox.
BasicSite-Home BasicSite-Part B
BasicSite-Backup BasicSite-Extras