Index File Priorities and Static Pages

When accessing directories on web hosting environments, there's a default order that files are located and loaded. Based on that order, you could see different results depending on what files are present.

Default File Priority

Inside your Pagely environment, this is the order in which directory index files will be loaded:

1. index.html
2. index.php

This means that if your WordPress site has an index.html file within your site's main directory, it will be the file that's delivered to visitors instead of the index.php, loading your static page instead of WordPress.

Static Pages Using Index Files

If your home page doesn't have dynamic elements that would require server-side work, it's a great idea to place your home page here as a static HTML file.

Since the index.html file would take higher priority over the index.php file, this would cause your home page to be delivered directly to the visitor without any extra work from server.

Using static HTML files for your static content is a great option for keeping resource usage low and delivering the fastest possible page load times.

How to Use Static Files for Quicker Sites

Do you have content on your site that doesn't change? Here's how to create a static HTML copy of your home page to make it faster than ever before.

Note: As with any changes to your site, it's always best to test your changes on a staging/development environment before deploying them to production. Please also note that if the page uses server-side code to generate dynamic content such as comments, those changes won't be reflected when using a static page.

Creating a Static Home Page

1. Get a copy of your home page. You can do this in most browsers by going to File > Save As and saving it as HTML.
2. If needed, rename the file to index.html.
3. Finally, use SFTP to upload the file to your site's main directory (~/sites/example.com).

Since index.html has a higher priority than index.php, the index.html file will be loaded when visiting your home page. Of course, if you make changes to your home page, you'll need to re-create this file for your changes to take effect.

Creating Individual Static Pages

If you want to create static versions of other pages on your site, the process is largely the same, but you'll need to create a few extra directories. This will also vary based on your WordPress site's permalink structure, so you'll need to do a bit of extra preparation as well.

Note: Like we mentioned before, always test these things on a staging/development environment first. Also note that static HTML files won't be able to update dynamic content from the server side such as comments, edits made in the WordPress admin, etc.

Let's assume you want to make a static version of example.com/my-static-page/:

1. Create a static HTML version of the page. You can do this the same as in the previous section by navigating to the page in your browser and saving the page as HTML. Be sure to name it index.html.
2. Next, use SFTP to create a new directory on your site with the same path as the URL that you want to make static. In our example, this would be a directory named my-static-page.
3. Upload your index.html file to your new directory.

When a user enters the URL into their browser (example.com/my-static-page), the server will check for a directory in the path. Since you created one (my-static-page), it will look for an index file inside it (index.html). Now that it also exists, it'll be delivered to the visitor without any additional server-side processing.