Create Website – Make Website with Home Web Hosting & SSL
How to create a website, make website with home web hosting Hello, step by step tutorial shows you how to Create Website, and home web hosting for multiple websites make website with free domain name and free SSL Certificate, using Xampp server, and WordPress I divided tutorial into subheadings you can find all helpful links below in the description But I strongly recommend to follow tutorial step by step to achieve full result and get full functional website Every step in the video ends with a test, anyway feel free to ask me any question These are the main steps, to Create and host a website from your home computer Step 1 Set a static local IP address for your server Step 2, Install Xampp server, Configure and secure Xampp Step 3, Get free domain names Step 4, Change ‘localhost’ to a domain name, Setup virtual hosts on Xampp Step 5, Point domain name to your server IP address, port forward your router Step 6, Create simple PHP page, and connect to MySQL database, using PHP Step 7, Download and install WordPress, manual WordPress installation with high security Step 8, Get free SSL certificate and install SSL certificate on Xampp Server Step 9, Redirect HTTP to HTTPS OK before we start lets download helpful tools Notepad ++, it is free, fast, and cool file editor As I mentioned, you can find all helpful links below in the description Next lets download and install, Opera web browser its comes with free VPN, so we can test our website from different network Enable VPN on Opera Web Browser Go to Operas settings In Advanced tab Select Privacy & security Scroll down and find VPN Tick the button to enable the VPN Done, now you can see a blue VPN badge on the left side of the address bar my IP address has been replaced with a virtual one you can change virtual location at any time OK, let’s start Step 1 Set a static local IP address for your server Right click on computer icon and open network and Internet settings Go to Ethernet Under Related settings click on Change adapter options Go to your local adapter properties Find and open Internet Protocol Version 4 (TCP/IPv4) Now, we need to find network configuration Open (CMD) command prompt and type ipconfig /all Hit Enter This is all info what we need IP Address, Subnet Mask, Default Gateway and DNS server Select Use the following IP address enter your new IP address, Subnet mask, and Default gateway that corresponds with your network setup Also type DNS server IP address thats all, Lets check it OK, IP address has been changed successfully So, this is my server IP address Step 2, Install Xampp server, Configure and secure Xampp OK, lets download and install xampp server We got a Warning So, just make sure, that User Account Control (UAC) is disabled on your system Type msconfig in the search field, to open System configuration Go to tools tab select Change UAC Settings and click launch make sure its turned off if not, drag the slider down to Never notify and click OK then you can ignore the message Here, just clear the components you do not want to install for Server leave Apache and MySQL for Program Languages just leave, PHP and phpmyadmin If you need to install another component, its up to you You can change the path, but Its better to leave Xampp installation folder by default It takes some time, so I will speed up the installation process OK, its very Important, to allow access for apache http server and also for mysqld to communicate through windows firewall So, if you will get this message, make sure to check both networks Private and Public and click allow access If not, you need to add it manually OK lets see, how to allow apps to communicate through windows firewall Open Windows Firewall Go to allow an app or feature through windows defender firewall As you see, Apache HTTP server is already in the list If not, you should add both apps manually httpd and mysqld both file formats are executable Here is the path for both apps OK, let’s do it Click on Change settings Click allow another app and browse an app which you want to add here is httpd file, but to make sure its executable, we need to change some options Open Windows file explorer and click on View Go to Options and click on Change folder and search options Choose View tab And uncheck box for, hide extensions for known file types OK, now we can see the file type OK, I already have this file in the list So let me quickly add a second one Click on Network types to choose both networks Select the file and click add Done, both files added, if you are using any antivirus firewall you should do the same for it OK, lets configure and secure Xampp server Start Apache and mysql and test Xampp server Open your web browser and type localhost Works fine You can also find all PHP info here lets test HTTPS OK, the web browser blocks https access, its ok for now because we havent install the valid SSL certificate yet OK, let me quickly explain what is http and https If we go in Xampp control panel and open config service and port settings we can see apache ports Main port 80 And SSL Port 443 the HTTP works on Port Number 80 the HTTPS works on Port Number 443 (HTTP) Hypertext Transfer Protocol is Unsecured information exchange protocol (HTTPS) Hypertext Transfer Protocol Secure is Secured information exchange protocol HTTP and HTTPS are protocols being used to transport information over the Internet OK lets secure Xampp server Open web browser and type localhost/phpmyadmin Go to User accounts Here, you can find all users First of all, delete unwanted users By default, the MySQL database provided by XAMPP contains 2 users, root and pma Root is the super user, with all privileges, and highest access rights The pma user is used by the phpMyAdmin application So we should set passwords for both users to secure database access Go to Edit privileges Then click on Change password Type your password twice and click Go make sure your password is strong, it must contain Symbols, Numbers, Lowercase and Uppercase Characters So, go back to User accounts, and do the same for all users Then when you try to access the phpmyadmin page, you will get the following errors So, lets fix it Go to phpmyadmin folder open config.inc.php file with Notepad Under the Authentication type and info make this changes change config to cookie here, enter the same password, which we just created for the root user Scroll down and find, User for advanced features And enter the same password which we created for the PMA user Then scroll up, and find blowfish_secret replace Xampp, with something else Enter any string, which has to be not less than 32 characters It may contain numbers and special characters OK, save the file, and try to access phpmyadmin page Enter your user name and password and click go OK, all errors are fixed Lets check User accounts As you see, passwords are set for all users Make sure you remember the root password we will use it later to install WordPress OK, lets, secure phpmyadmin, change slug and allow or restrict remote access to phpmyadmin Open httpd-xampp.conf file with notepad Press Ctrl+F on your keyboard and Search for phpmyadmin Along the Alias, replace phpmyadmin, with something else Save the file and restart Xampp server Then try to access phpmyadmin page Object not found, because we change it to mmkphp So, lets try with new slug Works fine OK now lets try to access phpmyadmin page remotely Access forbidden So, if you want to allow special user to access php my admin page remotely you need to know the user’s IP address Go back to your server, Open httpd-xampp.conf file under Alias, find Require local add Require IP and IP address of remote computer, that you want to allow You can do this with both private and public IP addresses Save the file and restart Xampp OK, lets check it OK, you can also allow access for all, by replacing Require local to following lines, but its security risk So, I do not recommend it Step 3, Get free domain names In this step just showing, how to get subdomain and domain name for free from different websites First website is noip.com for sub domain and second website is freenom.com for domain I am going to Create Websites, and home web hosting for multiple websites So I need two domains, but, of course, you can register two domains on one of them, its up to you OK, Let me quickly register domains for my websites OK ones you register and sign in Go to Dashboard In Hostname section, type your hostname its will be your website name in domain section, under free domains, choose a domain name And click on add hostname button OK your domain name has been created So, this is my first domain After 30 days I just need to update it OK, let me quickly register second domain on freenom I recommend to get free domain from Freenom website Type your website name and check availability Get one of these domains, they all are free Click on Use DNS Along IP addresses you have to enter your public IP address we can also choose the period, how long we need free domain Ok, then just continue your account registration Done, this is my second domain Step 4, Change ‘localhost’ to a Domain Name, Setup virtual hosts on Xampp Once you type localhost in your web browser This would bring you a web page that lists XAMPP related details So, how it works Under XAMPP root directory, there is a folder called htdocs htdocs is the document root directory, that is stored on your host’s server and that is designated for holding web pages When someone looks at your web site, this is the location they will be accessing So, thats where you should put your web site related stuff For each web site you create OK, delete default files from htdocs folder and create new folders for your domains Lets index both domains The index page is the URL or local file that automatically loads when a web browser starts In a standard website the index file is usually the page that your domain URL points to In other words, Index is the main or home page of a website or an app the index file extensions, have to be PHP or HTML, depends on which language code is used You can find download links of all helpful codes below in the description We will talk about the details of this code later OK, let’s add a temporary index page for a WordPress website also OK, now we need to redirect a static local IP address to domain name Open hosts file with notepad Type your localhost, loop-back IP address Then, press Tab key on keyboard and type your domain name Do the same with servers local IP address and repeat step for second domain Save hosts file the notepad may ask you to relaunch it in administrator mode just click yes and save it again lets check what we have OK, now we have to create the virtual hosts for each domain Open httpd-vhosts.conf file with notepad Delete everything in the file and add the following code remind you, that you can find download links of all helpful codes below in the description OK, let me quickly explain this code We have two parts of code First part of code is for http And second is for https OK first line is VirtualHost with port 80 Most web servers use port 80 as their default port If your Internet Service Provider blocks port 80, you can find tutorial how to change port in Xampp on my channel or link below in the description DocumentRoot: The folder where files of a site will exist In our case, these are two folders that we created in the htdocs folder and named them domain names ServerName: It is the URL for our virtual host The ErrorLog directive sets the name of the file to which the server will log any errors it encounters The CustomLog directive is used to log requests to the server Directory: It is the directory of our virtual host In second part for https VirtualHost use secure port 443 These four lines are used for SSL certificate As you see I comment it by putting hash-mark in front of the lines To disable any configuration instruction or add your own comments just include a hash-mark at the start of each line To enable one of these configuration instructions all you have to do is remove the hash-mark So, we activate it later, when we install the SSL certificate For now, we just need to replace YourDomain to our domain name press control + F on your keyboard Type YourDomain in a search bar Click on find next Then select replace tab And replace all selected YourDomain, to your domain name Let me quickly do the same for second website OK, I need to copy the code for the second website again and enter my second domain name instead of YourDomain done, save the file Restart Xampp server and lets check what we have First website is OK Lets check second website second website okay also Step 5, Point domain name to your server IP address, Port Forward Your Router If you remember we configure opera web browser to use VPN So, let’s try to access our website from outside, using VPN As you see, we cant reach the website So, to fix this, we need to forward port 80, and port 443 As I mentioned port 80 is for http and port 443 is for https OK, first of all, you need to access your router Open command prompt, type ipconfig find Default Gateway IP address copy and paste it into your web browser If you dont know default user name and password of your router you can find it on this website: portforward.com Click on router passwords Scroll down and find your router model, mine is ZTE Scroll down and you will find default Username and password list of your model If Default username and password doesnt work You may need to reset router, to default settings Here is a step by step guide Also you can find guide, how to correctly forward port for your router Ok, let me quickly forward ports Open ports are used, to allow a connection in to your home network from the Internet Done! Lets check it Port 80 is open successfully Lets check port 443 Port 443 is open successfully Lets visit websites now First one is ok As you see, we successfully published both websites So, now everyone with internet, can access both websites To make sure lets test websites from another computer This is my second virtual machine, with different network I will use my android hotspot Step 6, Create simple PHP page, and Connect to MySQL Database, using PHP Ok, we have already created a PHP page, this is our index page OK, let me quickly explain this code A PHP file normally contains HTML tags, and some PHP scripting code Here is an example of a simple PHP file with a PHP script that uses a built-in PHP function “echo”, to output the text “Hello World!” on a web page The declaration defines this document to be HTML5 The element is the root element of an HTML page The
element contains the visible page content Theelement defines a large heading OK, lets Connect index PHP page to MySQL Database, using PHP code Open web browser and go to phpmyadmin Create a new MySQL database for your website name your new database choose collation to utf8_general_ci Ok, Database has been created then add the db_connection.php file to your website folder remind you, that you can find download links of all helpful codes below in the description Open db_connection.php file with Notepad OK, let me quickly explain this code We should fill up this part of code with database credentials This is just comment PHP has two types of comments Single Line Comment and multiple Line Comment To do a single line comment type hash-mark or double forward slash at the start of each line and all text to the right will be ignored by PHP interpreter The multiple line PHP comment begins with /* and ends with */ So all code between is ignored OK, this part of code creates connection to database using this credentials, which we should fill up And this part of code, which is commented for now, is checking connection OK, let’s fill in the database credentials dbname will be the name of your database, which we have created dbuser will be the username i.e.Root dbpass will be the password, which is the same that you used to access your phpmyadmin dbhost will be the host, where your server is running, i.e. localhost save the db_connection.php file So, now we should use, include function to copy all source code from db_connection file, into the index.php file Open index.php file on the top of your code, add this line, to include db_connection.php file In other words, The Include function is used to put data of one PHP file into another PHP file Save the index.php file and lets check it If you have not get any warning, it means that your connection with the database is successful But to make sure, we can check database connection using source code from db_connection file, which is counting database tables So, to make this code working, we have to uncomment it Delete multi-line comment marks and save the file We got a message, there are no tables That’s right, we don’t have tables in our database So, let me quickly create tables in database Ok, this is the first table, let’s create the second Second table is ready So, now we have two tables into our database Works fine, we successfully connected to the MySQL database, using PHP code Step 7, Download and install WordPress, manual WordPress installation with high security Open web browser, and download WordPress, you can also find download link below in the description Right click on WordPress folder and extract it Before WordPress unzip, lets modify XAMPP server settings By default, WordPress and hosting servers limit the file upload size because of technical reasons e.g., If you need to upload files, that are larger than the pre-set limit you can get an error, and the operation may fail this limitation also applies, when you want to upload a theme or plugin directly from the WordPress Admin Dashboard So, in order to avoid this problem, it is recommended to increase Max Upload File Size, and Memory limit For that we need to modify PHP.ini file Open PHP.ini file with notepad Increase max upload file size Search for upload_max_filesize and adjust it by your needs 64 MB is ok for me, anyway we can change it at any time OK, now lets Increase PHP memory limit Search for memory_limit” and adjust it by your needs This defines how much memory is allocated for PHP This number should be equal or higher than the upload_max_filesize 256 MB should be enough After this changes you must save the file and restart Xampp server OK, lets create new user account and database for WordPress website Open web browser and go to phpmyadmin First, lets create new user account for WordPress website Go to User accounts and click on Add user account Then fill up Login information User name, leave text field, and Add user name Hostname, change to local Type your password twice make sure your password is strong, it must contain Symbols, Numbers, Lowercase and Uppercase Characters Global privileges, Check all So, we grant to the new user the rights of the administrator Hit go, to save changes the new user with admin rights has been created OK, now lets create a new database for WordPress website In database list, click new name your new database choose collation to utf8_general_ci Hit create, to create website database Database has been created OK, copy all files from WordPress folder into your website directory We can delete temporary index file from WordPress website folder Paste all WordPress default files here Then we need to connect WordPress website to database Open the wp-config-sample.php file with notepad fill in the database credentials Database name, will be the name of your database, which we have created Username, will be the username, which we have created Password, will be the password, which we set for the NEW user the same, that you use to access your phpmyadmin OK, for security reasons We should Generate and add unique Authentication Keys and Salts Copy and paste the following link into your web browser Generate new keys by refreshing the web page And replace your new keys with existing one And the last, to Improve Security, we have to Change WordPress database table prefix You can only change it to letters, numbers and underscores Just add some numbers and letters Thats all, Save the file as wp-config-php Open your web browser and go to your website If you filled out your database credentials correctly, you have to see this page Choose the language and click continue Enter your website information and hit install WordPress Done, WordPress website has been created Step 8, Get free SSL Certificate and install SSL Certificate on Xampp Server Ok, if we visit our websites, we can see that the connection to the website is not secure Lets try to visit website with https So, the website cant be reached OK, lets install free SSL Certificates on our websites You can find the link to this website below in the description Enter the domain name, of your website in this field, to secure it Keep in mind, that the World Wide Web version does not work on subdomains Then click on create Free SSL certificate button OK, we have three choices to get a free SSL certificate First, Automatic FTP Verification Second, Manual Verification And third, Manual Verification with DNS I’ll show you all three methods Lets start with, Automatic FTP Verification So, this is easiest method, if you have FTP server installed You can find a link to the tutorial, on how to install and configure an FTP server on Xampp, below in the description Or you can skip this method and get an SSL certificate with manual verification OK, start FTP Server Go to the SSL for free Website and click on Automatic FTP Verification button Enter your FTP server credentials in the following fields And click on Download Free SSL Certificate button Wait a few seconds, until the SSL certificate is generated SSL certificates have been created successfully So, we can download it OK, I will cancel it and show you second method, with full installation on Xammp server Enter your domain name and click on Create Free SSL certificate button Go to Manual Verification Click on Manually Verify Domain button Then go to your website folder OK, lets do it step by step Download the verification file Create a folder in your domain named “.well-known” OK, Windows Explorer does not allow you to create folders with a dot in front So, lets try create folder with command prompt Type cd and path to your domain folder Hit enter then type mkdir and the name of the folder you want to create Hit enter Thats all, folder has been created OK, Create another folder in “.well-known” named “acme-challenge” Then add the downloaded verification file to the “acme-challenge” folder OK, we have verification file in the right place Then verify uploaded file by visiting the following link in your browser But make sure that you do it from outside your network So, use the Opera web browser and make sure that VPN is on If you see only verification code and nothing else, like this one it means that you did everything well and your domain was successfully verified You can double check, by viewing page source, and make sure there is only verification code on the page OK, go back to the SSL website Click on Download SSL Certificate button to generate SSL certificates SSL certificates have been created successfully So, we can download it OK, lets install SSL certificate on Xampp server Open virtual hosts file with notepad These paths show, where the existing certificates are located So, we just need to replace them OK, Open certificate folder lets start from the first certificate We need to create folder named SSL cab OK, move the ca bundle cert to this folder Second and third we already have these folders so just replace the certs when you finish replacing certificates, to make it work, you have to uncomment this part of code OK, Save the file, restart Xampp server, and check your website As you see connection to this website is secure now, with valid Certificate OK, lets get SSL certificate using third method, Manual Verification with DNS And after Ill show you how to redirect http to https Let’s try a third method with a different domain Go to the SSL for free Website Enter your domain name, and click on Create Free SSL Certificate button Click on Manual Verification with DNS Then Manually verify domain Go into the DNS management page that your domain use OK, now we need to create DNS records Just follow the steps Done, save changes Records added successfully OK, then we need to verify DNS records by going to the following links If you set TTL to 300, you must wait 300 seconds, before records will get updated So, Ill skip 5 minutes After verification, click on Download SSL Certificate button to generate SSL certificates SSL certificates have been created successfully Download all SSL Certificate files OK, lets install SSL certificate for second website Go to the following path And create certificate folder for second domain Then move all certificates to this folder Now we need to connect the certificate folder to the domain Open virtual hosts file with notepad change all following paths to the certificate folder, which we have created for the second domain at the end of the path, just type backslash and use the down or up arrow to select the desired file once you change paths, you have to uncomment this part of code, to make it work OK, Save the file, restart Xampp server, and check your website Works fine Redirect HTTP to HTTPS After an SSL certificate is installed, a secure connection HTTPS is not forced by default Normally, when visitors type a domain name in a browser, they get on unencrypted http-pages we can redirect http to https, so visitors will automatically get on encrypted pages Ok lets redirect http to https using .htaccess file Go to your domain folder Create new text document file Add the following code to the file remind you, that you can find download links of all useful codes below in the description replace example.com with your domain name save file as .htaccess .htaccess file has been created successfully restart Xampp server, and check your website done, works fine As you see, when you enter only the domain name, it is automatically redirected to https Ok, now let’s redirect the WordPress website to https Open the WordPress domain folder The .htaccess file should be there because it is automatically generated if not, you already know how to create it So, just open it with notepad And add the code to the beginning of the file replace example.com with your domain name Save the file, restart Xampp server, and check your website Works fine The tutorial how to create website make website with home web hosting was successfully completed
