It is common practice among webmasters to host media content separately in a subdomain. This will increase the parallel HTTP requests and help to improve the page loading speed. In such scenario the main domain will have your content management systems like WordPress installation with all required root directories. However, the subdomain on which the media files are stored will not have a landing page. Though you can serve images from the subdomain, it will show 403 access forbidden message when someone tries to access the home page.
In this article we will discuss how to create a landing page for a subdomain without installing any additional software. The basic assumption here is that your hosting server is PHP enabled like the one needed for WordPress.
Example Scenario
Let us take an example of this website:
- Our main site is accessible through www.webnots.com which uses WordPress installation.
- We serve all media files from img.webnots.com to serve static files faster.
What if someone try to view the subdomain https://img.webnots.com? Ideally it will show access forbidden error since it has no individual home page. This may not look professional, so we have a custom home page as shown below. We will explain how you can create such a home page for your site.
What Details to Show in Home Page?
The page what we use is a simple HTML page. Therefore, you can add any details using HTML tags. Here are some of the minimum details you should show on the page:
- A logo
- Short description to explain the page
- Link to main domain
- Search box for exploring content on the main site
This will inform visitor to check the main domain for more details.
Creating Subdomain
Login to your hosting account and create a subdomain under your main domain. The process will be different based on your hosting setup. Check our article on how to setup subdomain and install SSL in cPanel. Remember, simply creating a directory using FTP may not work as it will act as a subdirectory which you can access like “yoursite.com/subdirectory”. Setting up subdomain from your hosting account will create similar folder on your root directory. However, you can access the subdomain using “subdomain.yoursite.com”.
After creating subdomain, you have to configure your content management system to server media files from that subdomain. For example, WordPress by default uses “/wp-content/uploads/” folder for storing all media files. Check our article on how to change default WordPress media upload folder. If you other site builder tools, first make sure you have changed the media upload path to your subdomain.
How to Create a Landing Page for Subdomain?
The landing page or home page can easily be created by adding an index.php file inside the subdomain folder (inside img directory in our case). You can add any customized HTML code inside this index.php file to show the desired message to those who views the subdomain URL.
Step1 – Creating index.php File
In order to create a new file inside subdomain folder you need to have an access to your cPanel hosting account or FTP access to your hosting server. Access the subdomain folder and create a new file named “index.php” inside the folder.
Index.php is the file informing any PHP enabled web server to run the PHP scripts before sending the HTML response to the browser’s HTTP request. Now that you have added a PHP file the next step is to inform server what to do when someone request the subdomain URL.
Step2 – Adding HTML Inside index.php
This is a custom step and you can add any type of content inside index.php file which you want to show on the subdomain’s home page. Here we want to show some simple message and a search box as you can see in the home page of our subdomain. Add the below code inside index.php file and replace the highlighted parameters like title, URLs, etc. with your own.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Your Site Title Here</title>
<style>
body {
width:450px;
margin:5em auto;
background-color:#fefefe
}
form {
margin:2em 0
}
</style>
</head>
<body onload="document.search.s.focus()">
<p align="center"><img alt="" src="Your Logo URL Here…"></p>
<form action="Your Site URL" name="search" method="get">
<div style="text-align:center">
<input style="width: 320px; padding: 4px; font-size: 1em; margin-right: 5px" x-webkit-speech="" autocomplete="off" type="text" name="s" /><input type="submit" value="Search Your Site Name" style="font-size: 1em; padding: 4px 8px"/> </div></form>
<p><strong><em>You are on our images directory. You can search our main site using the above search form.</em></strong></p>
<p><strong><em>Our main site: <a href="Your Site URL" rel="nofollow"><strong><em></em></strong></a></em>
</strong></p>
<h2><strong><em><a href="Your Site URL" target="_blank" onclick="window.open(this.getAttribute('href'),'Your Site Title Here');return false;"
title=""><strong><em>WebNots</em></strong></a></em></strong></h2><strong><em><strong><em></em></strong></em></strong>
</body><style type="text/css"></style>
</html>Ensure to change the dummy text with your content and use correct single / double quotes for the code to work properly. You can also create index.php file on your local computer with the required HTML code inside and then upload the file on your subdomain using FTP.
Leave a Reply
Your email is safe with us.