Do you want to edit one header or footer and see the change on all pages at once? This is precisely what
Server-Side Includes (SSI) does for you! If your website is hosted on a
VPS using
Apache or
Nginx, it will greatly simplify your life. Let's think of it in a very basic way.
What Is SSI?
SSI allows your server to automatically insert small pieces of
HTML in your web page before it is served to the user.
For example:
- You have one header file
- One footer file
And you insert them into every page without copying/pasting. Then, when you edit the
header file, your entire site updates automatically.
Why You Should Use SSI?
SSI is awesome! Because:
- Your code is simple
- You do not repeat yourself everywhere
- Updating is fast
- You can easily insert tiny bits of dynamic things (like dates)
It's basically a very
light CMS but don't want to have the complex setup of a
CMS framework.
Enabling SSI in Apache
Apache has built in
SSI support
Enabling SSI
Open your
site config file and ensure these options are set:
- Options +Includes
- AddType text/html .shtml
- AddOutputFilter INCLUDES .shtml
Then restart
Apache.
Your .shtml files will be able to process SSI.
Enabling SSI in Nginx
Nginx supports
SSI as well, but does it differently than
Apache.
We just need to turn on SSI in the
server block
- ssi on;
- ssi_silent_errors on;
We will then restart
Nginx.
Important: Nginx only processes
SSI in
HTML files, and will not process in
PHP files (unless you code additional rules)
Using SSI on Your HTML Page
Once you have enabled
SSI, you can include a header like this:
<!--#include virtual="/includes/header.html" -->
Now this file will be included in every page you include it in.
Other Uses for SSI
SSI works best for:
- Small static websites
- Documentation website
- Landing pages
- Small projects
Itβs a clean, quick way of keeping your site up to date.
Final Thoughts
If you have
SSI setup on your
VPS (Apache or Nginx), it can help you easily manage repeated elements like
header and
footer files. You just need to change one file, and the entire site changes.
SSI is easy, fast, and a great approach for small websites.