How to build a dynamic multi-page website with a FREE Bootstrap 5 template.
If you are looking for a simple dynamic multi-page framework as HTML.
You are someone who already knows php/html and has web hosting like cPanel with mod-rewrite available.
Download any FREE Bootstrap 5 template... like this one from BootstrapMade.com and we can create pages using their existing SECTIONS of html code.
We will create a directory/folder for our pages and also for our meta data. Yes...we will store meta Title, Description and Keywords for each page for our SEO efforts.
Using our HTML editor we will add some code to our index page to tell the page to load the correct content.
That's it! we are ready to make our multi-page website.
Introduction
I'm not about to give you tutorials about how to code but you may need to understand the basic fundamentals of html. For this website I just want to show the way for designers and website owners to build information websites fast.
I'm so over Wordpress, it's over bloated and just not so necessary for simple information websites. With the advent of "Twitter" Bootstrap styling and the abundance of Bootstrap made templates available for download it's great to go back to basics and easily manage html files via FTP or cPanel Web Hosting.
The Template Files
For this example I have downloaded the FREE 'Presento' Bootstrap 5 Template from the top template makers https://www.bootstrapmade.com and I will show you how to quickly make a dynamic multi page website that you can also download and use for your own projects. If it works for you let me know. Be sure to purchase the PRO license if you intend to remove their copyright. There's no affiliate program so I am not making any money for referrals.
Page Files
When you look at the template code it's mostly simple html sections between the main content tags:
<!-- ======= Portfolio Section ======= -->
<section id="portfolio" class="portfolio">
There's no need to go about writing new code... let's just separate the sections such as 'Portfolio','Team','FAQ',Pricing' and 'Testimonials' and cut and paste the code to a clean page and save it as a php file in a directory called 'pages'.
Yes we will convert all the files to php files so that we can insert and run a little bit of php code called an 'include'.
Mod Rewrite
So if we quickly prepare the framework of our php files we should rename the index.html to index.php we drop a .htaccess file in the root of our main directory and give it a couple of lines of code to tell the server to show the visitors that our files are html files. We are going to disguise some ugly address bar code i.e. index.php?go=portfolio to portfolio.html for SEO reasons.
RewriteRule ^index\.html$ index.php [L]
RewriteRule ^([^/.]+)\.html$ index.php?go=$1 [NC,L]
Php Switch Statement
Next we will include a simple php switch statement to it's own file and to it's own directory called 'inc'. This is going to replace our content when we make a call from our navigation links within our template ...especially from the header navbar.
This php include will be placed in the index.php file where we will expect our pages to be presented.
NOTE: The same principle is in place to present Meta Data for each page. You will find it in the downloaded files.
Page Links
Finally, we should write our links as .html to all our new internal pages throughout the template. So when we choose a page link e.g team.html we want to present the 'Team' page within the MAIN template tags as out page content. This way we can transform the one page template into a multi-page manageable website of many many pages.
Some things to understand. We now have a main template with a common 'header' and 'footer' with dynamic 'content' in the body. If we want to have different headers and footers we can serve whole .php pages from the root directory and if we want to reference them as .html write each page in the .htaccess like this: RewriteRule ^blog\.html$ blog.php [L]
Furthermore ...when referencing the home page and sections deep down the page e.g. the Contact Us section write your 'href' links as index.html#contact and the visitor will be directed right back to your home page and automatically scrolled to the contact section. You'll see every example in the downloaded files. Simply download the zip and extract into your server directory and it should run immediately. If you have a restricted server and mod-rewrite is not enabled.....or god forbid you don't have php installed. There are other solutions.
Next I will be building a similar Dynamic Bootstrap Multi Page Template but this time referencing pages from a mySql Database with a simple Administration that will allow page creation and editing with the powerful datatables editor. If you find my information valuable and want to be notified when I release new projects. Please subscribe to my newsletter below. Enjoy.....cyberGord
