title: Why isn't my Server Side Includes (SSI) working?
body: <p>I'm making a website, that is on a Amazon EC2 Instance with Apache, I'm trying to get SSI to work/be enabled, I've uploaded the .htaccess file and the file I want to be included, etc. But the SSI is still not working.  Why doesn't my SSI work?</p>
  
  <p>All of the files I uploaded are located at <code>/var/www/html</code>, if that helps!</p>
  
  <p>My .htaccess file has <code>AddType text/html .shtml
  AddOutputFilter INCLUDES .shtml</code> in it.</p>
  
  <p>My include command in my index.html file: <code>&lt;!--#include file="main_nav.shtml" --&gt;</code>.</p>
  
  <hr>
  
  <p>The main_nav.shtml:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!--Main Nav--&gt;
  &lt;header&gt;
   &lt;nav&gt;
    &lt;div class="main_nav"&gt;
    &lt;a id="second_nav_bar" href=""&gt;Contact Me!&lt;/a&gt;
    &lt;a id="second_nav_bar" href=""&gt;About Me&lt;/a&gt;
    &lt;a id="second_nav_bar" href=""&gt;Search my site&lt;/a&gt;
  
  
   &lt;!--
    &lt;div id="searchbox_div"&gt;
     &lt;form action="" id="searchbox"&gt;
      &lt;input id="search_input" type="search" name="searchmysite" placeholder="Search my Site!"&gt;
      &lt;input type="submit" value="Search!"&gt;
     &lt;/form&gt;
    &lt;/div&gt;
   --&gt;
  
  
    &lt;/div&gt;
    
    &lt;div id="logo"&gt;
     &lt;h1 id="logo_jeff"&gt;JEFF&lt;/h1&gt;
     &lt;h1 id="logo_arries"&gt;ARRIES&lt;/h1&gt;
     &lt;h1 id="logo_website"&gt;WEBSITE&lt;/h1&gt;
    &lt;/div&gt;
    
    &lt;div id="main_nav"&gt;
     &lt;ul&gt;
      &lt;li&gt;&lt;a class="main_nav" href=""&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;Blog&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;Trips&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;Politics&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;Pictures&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;Videos&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;Computer&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;Misc&lt;/a&gt;&lt;/li&gt;
     &lt;/ul&gt;
    &lt;/div&gt;
   &lt;/nav&gt;
  &lt;/header&gt;
  
  &lt;!-- End Main Nav--&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here's my files on my computer (not serving the files) (just to give a visual of what my server looks like, see below):
  <a href="https://i.stack.imgur.com/gAQp2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gAQp2.png" alt="enter image description here"></a></p>
  
  <p>And here's a terminal screenshot of my Amazon EC2 server (serving the files), showing the files and structure (see above):
  <a href="https://i.stack.imgur.com/A6MKl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/A6MKl.png" alt="enter image description here"></a></p>
  
  <hr>
  
  <p><strong>FYI. My website is at <a href="http://www.jeffarries.com" rel="nofollow noreferrer">jeffarries.com</a> if you want to view it live.</strong></p>
  
  <p><strong>If you need any further information, feel free to ask!</strong></p>
  
  <hr>
  
  <p>Update:
  <a href="https://i.stack.imgur.com/UdHCw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UdHCw.png" alt="Terminal"></a></p>
  
  <hr>
  
  <p>Update 2:</p>
  
  <p>Main_nav.shtml:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!--#include file="main_nav.shtml" --&gt;
  
  &lt;!--Main Nav--&gt;
  &lt;header&gt;
   &lt;nav&gt;
    &lt;div class="main_nav"&gt;
    &lt;a id="second_nav_bar" href=""&gt;Contact Me!&lt;/a&gt;
    &lt;a id="second_nav_bar" href=""&gt;About Me&lt;/a&gt;
    &lt;a id="second_nav_bar" href=""&gt;Search my site&lt;/a&gt;
  
  
   &lt;!--
    &lt;div id="searchbox_div"&gt;
     &lt;form action="" id="searchbox"&gt;
      &lt;input id="search_input" type="search" name="searchmysite" placeholder="Search my Site!"&gt;
      &lt;input type="submit" value="Search!"&gt;
     &lt;/form&gt;
    &lt;/div&gt;
   --&gt;
  
  
    &lt;/div&gt;
    
    &lt;div id="logo"&gt;
     &lt;h1 id="logo_jeff"&gt;JEFF&lt;/h1&gt;
     &lt;h1 id="logo_arries"&gt;ARRIES&lt;/h1&gt;
     &lt;h1 id="logo_website"&gt;WEBSITE&lt;/h1&gt;
    &lt;/div&gt;
    
    &lt;div id="main_nav"&gt;
     &lt;ul&gt;
      &lt;li&gt;&lt;a class="main_nav" href=""&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;Blog&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;Trips&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;Politics&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;Pictures&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;Videos&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;Computer&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;Misc&lt;/a&gt;&lt;/li&gt;
     &lt;/ul&gt;
    &lt;/div&gt;
   &lt;/nav&gt;
  &lt;/header&gt;
  
  &lt;!-- End Main Nav--&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>index.shtml:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;head&gt;
  &lt;title&gt;Home | Jeff's Website&lt;/title&gt;
  
  &lt;link href="styles/main_navigation.css" type="text/css" rel="stylesheet" /&gt;
  &lt;link href="styles/body.css" type="text/css" rel="stylesheet" /&gt;
  &lt;link href="styles/main_content.css" type="text/css" rel="stylesheet" /&gt;
  
  
  &lt;!-- Icon code --&gt;
  &lt;link rel="apple-touch-icon-precomposed" sizes="57x57" href="/website_icons/apple-touch-icon-57x57.png" /&gt;
  &lt;link rel="apple-touch-icon-precomposed" sizes="114x114" href="/website_icons/apple-touch-icon-114x114.png" /&gt;
  &lt;link rel="apple-touch-icon-precomposed" sizes="72x72" href="/website_icons/apple-touch-icon-72x72.png" /&gt;
  &lt;link rel="apple-touch-icon-precomposed" sizes="144x144" href="/website_icons/apple-touch-icon-144x144.png" /&gt;
  &lt;link rel="apple-touch-icon-precomposed" sizes="60x60" href="/website_icons/apple-touch-icon-60x60.png" /&gt;
  &lt;link rel="apple-touch-icon-precomposed" sizes="120x120" href="/website_icons/apple-touch-icon-120x120.png" /&gt;
  &lt;link rel="apple-touch-icon-precomposed" sizes="76x76" href="/website_icons/apple-touch-icon-76x76.png" /&gt;
  &lt;link rel="apple-touch-icon-precomposed" sizes="152x152" href="/website_icons/apple-touch-icon-152x152.png" /&gt;
  &lt;link rel="icon" type="image/png" href="/website_icons/favicon-196x196.png" sizes="196x196" /&gt;
  &lt;link rel="icon" type="image/png" href="/website_icons/favicon-96x96.png" sizes="96x96" /&gt;
  &lt;link rel="icon" type="image/png" href="/website_icons/favicon-32x32.png" sizes="32x32" /&gt;
  &lt;link rel="icon" type="image/png" href="/website_icons/favicon-16x16.png" sizes="16x16" /&gt;
  &lt;link rel="icon" type="image/png" href="/website_icons/favicon-128.png" sizes="128x128" /&gt;
  &lt;meta name="application-name" content="&amp;nbsp;"/&gt;
  &lt;meta name="msapplication-TileColor" content="#FFFFFF" /&gt;
  &lt;meta name="msapplication-TileImage" content="/website_icons/mstile-144x144.png" /&gt;
  &lt;meta name="msapplication-square70x70logo" content="/website_icons/mstile-70x70.png" /&gt;
  &lt;meta name="msapplication-square150x150logo" content="/website_icons/mstile-150x150.png" /&gt;
  &lt;meta name="msapplication-wide310x150logo" content="/website_icons/mstile-310x150.png" /&gt;
  &lt;meta name="msapplication-square310x310logo" content="/website_icons/mstile-310x310.png" /&gt;
  &lt;!-- End Icon code --&gt;
  
  
  
  &lt;!-- Chatrify Script--&gt;
  &lt;script type='text/javascript'&gt;
      var __ac = {};
      __ac.uid = "08c261285ca9db6acdaf945deef7cd7b";
      __ac.server = "secure.chatrify.com";
  
      (function() {
        var ac = document.createElement('script'); 
        ac.type = 'text/javascript'; 
        ac.async = true;
        ac.src = 'https://cdn.chatrify.com/go.js';
        var s = document.getElementsByTagName('script')[0]; 
        s.parentNode.insertBefore(ac, s);
      })();
   &lt;/script&gt;
  
  
  &lt;/head&gt;
  
  
  &lt;body&gt;
   
   
  &lt;!--#include file="main_nav.shtml" --&gt;
  
  
  
  &lt;!-- Landing Beta Pop Up box --&gt;
  
  &lt;div id="popup_div"&gt;
   &lt;div id="popup_beta"&gt;
    &lt;p id="popup_main_header"&gt;Welcome to my website!&lt;/p&gt;
    &lt;p id="popup_main_content"&gt;My site is currently under construction. &amp;nbsp; I'm trying to get everything ready, working and online as soon as possible. &amp;nbsp;But for the time being, there may be broken/grayed out links and random stuff that doesn't work properly. Thank you for your patience!&lt;/p&gt;
    
    &lt;a id="got_it_button"href="#" onclick="toggle_visibility('popup_div');"&gt;Got it!&lt;/a&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;!-- End Landing Beta Pop Up box --&gt;
  
  &lt;!-- Pop Up Email Form--&gt;
  &lt;div id="popup_email_form_div"&gt;
   &lt;div id="popup_email_form_div_content"&gt;
    &lt;p&gt;Contact Form&lt;/p&gt;
    &lt;form method="post" action=""&gt;&lt;/form&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;!-- End Pop Up Email Form--&gt;
  
  
  
  &lt;!--Welcome to jeff's website--&gt;
  
  &lt;div&gt;
   &lt;h2 id="welcome"&gt;Welcome to my Website!&lt;/h1&gt;
   
   &lt;a href="#here_you_can_learn"&gt;
   &lt;img src="pictures/down_arrow.png" id="down_arrow"/&gt;
   &lt;/a&gt;
  &lt;/div&gt;
  
  &lt;!-- End Welcome to Jeff's website--&gt;
  
  &lt;!--right side nav--&gt;
  
  &lt;aside&gt;
   &lt;p&gt;this is aside&lt;/p&gt;
  
  &lt;/aside&gt;
  
  
  &lt;!--Main Content--&gt;
  
  &lt;div id="main_content"&gt;
   &lt;h2 id="here_you_can_learn"&gt;Here you can learn about me and my adventures!&lt;/h2&gt;
  
  &lt;!--Most Frequently visited pages: on left side of page--&gt;
   &lt;div id="most_frequent"&gt;
    &lt;p class="heading"&gt;Most frequently visted pages!&lt;/p&gt;
    
    
    
    &lt;a href="" class="show_more_link"&gt;&lt;p class="show_more"&gt;Show More&lt;/p&gt;&lt;/a&gt;
  
   &lt;/div&gt;
   
  &lt;!--Recent Activity: on the right side of page--&gt;
   &lt;div id="recent_activity"&gt;
    &lt;p class="heading"&gt;Recent Activity&lt;/p&gt;
  
  
    &lt;p class="content"&gt;test&lt;/p&gt;
  
  
    &lt;a href="" class="show_more_link"&gt;&lt;p class="show_more"&gt;Show More&lt;/p&gt;&lt;/a&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  
  
  
  &lt;script type="text/javascript"&gt;
  
      function toggle_visibility(id) {
         var e = document.getElementById(id);
         if(e.style.display = 'block')
            e.style.display = 'none';
         else
            e.style.display = 'block';
      }
  
  &lt;/script&gt;
  
  
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Screenshot of what my finder window looks like now: (not serving the files, but the same as the server)</p>
  
  <p><a href="https://i.stack.imgur.com/KOLRH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KOLRH.png" alt="Finder"></a></p>