So, the other day i made the images and the buildscripts Vhosts, i came to look at the standard Apache index pages, and I have to say, they are functional, but not very pretty. So, can we do something about it ?
Sure, let's try that. It's actually pretty simple, so here's a quick and dirty tutorial in making index pages for Apache2.
First we need to define a Apache VHost,
<VirtualHost HOST.HOSTER:443>
ServerAdmin webmaster@localhost
DocumentRoot /var/www/images
ErrorLog ${APACHE_LOG_DIR}/images_error.log
CustomLog ${APACHE_LOG_DIR}/images_access.log combined
<Directory /var/www/SOME_FOLDER>
Options Indexes FollowSymLinks MultiViews
AllowOverride All
IndexOptions FancyIndexing HTMLTable
Order allow,deny
allow from all
</Directory>
If you note, I defined a coupple of custom log files, that's not the standard Apache logs for this virtualhost, simply for easier reading of the logfiles. Take note that we set AllowOverride All, so we're able to use .htaccess files for overriding settings in our new virtualhost, we will need that in a moment.
Also note we turn on IndexOptions FancyIndexing and HTMLTable, sine we''l also be needing those in a moment.
That's it, we're done setting up the VHost. Now, we switch to the directory we defined, and get going on the real work, setting up the .htaccess file and making a couple of html pages for Apache.
# STRONG HTACCESS PROTECTION
<Files ~ "^.*\.([Hh][Tt][Aa])">
order allow,deny
deny from all
</Files>
# SET INDEX OPTIONS
IndexOptions IgnoreCase FancyIndexing FoldersFirst NameWidth=* DescriptionWidth=* SuppressHTMLPreamble
# SET DISPLAY ORDER
IndexOrderDefault Descending Name
# SPECIFY HEADER FILE
HeaderName header.html
# SPECIFY FOOTER FILE
ReadmeName footer.html
# IGNORE THESE FILES
IndexIgnore header.html footer.htmlFirst we protect the htaccess file itself, and set a couple of index options. Next we specify a header and a footer html file, and last we tell Apache to ignore those files in the directory listing, so they dont show up. That's it. Close the htaccess file for now, we're done with it. Now, we need to look at the header.html file.
1 <html>
2 <head>
3 <title>BROWSER TILLE BAR</title>
4 </head>
5 <body>
6 <h1>HEADER_GOES_HERE</h1>
7
8 <style type="text/css">
9 body {
10 background: #000000;
11 margin: 33px;
12 color: #FFFFFF;
13 }
14 h1 {
15 font: 2.0em Georgia, serif;
16 }
17 h1 a:hover, h1 a:active {
18 text-decoration: none;
19 }
20 a:link {
21 text-decoration: none;
22 color: #6D99DF;
23 }
24 a:visited {
25 text-decoration: none;
26 color: #000000;
27 }
28 a:hover, a:active {
29 text-decoration: underline;
30 color: maroon;
31 }
32 pre {
33 font: 0.9em/1.3em "Courier New", Courier;
34 margin: 3px 0;
35 color: #FFFFFF;
36 }
37 pre img {
38 display: inline;
39 }
40 img {
41 margin: 3px 0;
42 }
43 </style>
44 </head>In line 3 and 6 we set the title in the browser, and the title header in the page, above the directory listing. In line 10, we set the background colour. And last, in line 22, we set the link colour. W're done. Play around with these yourself, and see what you can come up with. It's pretty simple. Next we define a footer, so make a new page and call it footer.html.
1 <pre><em>Fresh Iso's for all :)<br />Get them while they're hot!</em></pre>
2 <pre><a href="https://YOR_WEBSITE" title="Home">WEBSITE_TITLE</a>
3 </body>
4 </html>That's it, save it, and upload all these files in the root of your new host directory, open a browser, and check if the changes are there. They should be :)