How I setup Apache for slackware.nl

Someone asked how I achieved the refreshed look & feel on slackware.nl and download.liveslak.org with the fancier directory listings and a graph of the current network bandwidth usage at the bottom.

It’s not so difficult but if you are new at setting up a web site mainly oriented at content delivery and have not worked with dynamic page generation using server-side includes (SSI), it may be useful to have some kind of reference.

So I decided to write up a short explanation on how I configured Apache httpd for the above two web sites. We’ll just imagine that you want to serve a slackware-current mirror from http://darkstar.home.arpa/slackware/slackware-current/

Bandwidth usage graph

Let’s first look what I did to generate that graph of the network bandwidth usage. Actually I stole the idea from slackware.uk where I noticed it for the first time. I had no idea what kind of tool Tadgy was using there, so I applied my Google-fu and found bwbar, a nifty little program written by H. Peter Anvin. I applied a few patches to the source code and built a Slackware package for it and installed this on my online server.
Next step is to decide where bwbar should write its bandwith usage data so that my Apache webserver can display that data. For the sake of this instruction, let’s assume a completely default unmodified httpd configuration. This means, web content goes into “/srv/httpd/htdocs/”. My customizations will also go into “/srv/httpd/” but I want to keep those files outside the htdocs directory. That’s just me, I want to keep content and presentation separated.
Further down, you will see that I use “Alias” statements in the httpd configuration to bind these directories into the htdocs content area (the so-called DocumentRoot).

I chose “/srv/httpd/pres/” as the location where the web server will find its presentation data. I want the ‘apache’ user to own that directory so that it can write the bwbar output there:

# mkdir /srv/httpd/pres
# chown apache /srv/httpd/pres

Then a commandline added to “/etc/rc.d/rc.local” will start bwbar during boot-up (as the apache user) and make it generate and refresh a graph (ubar.png) and accompanying text (ubar.txt) every 60 seconds:

# Start bandwidth reporting:
/bin/su - apache -s /bin/bash -c "/usr/bin/bwbar \
--output \
--directory /srv/httpd/pres \
--text-file ubar.txt \
--png-file ubar.png \
--width 600 --height 4 --border 1 \
--interval 60 \
--Mbps \
eth0 1000 & "

Once this commandline executes, you’ll notice it starts writing in “/srv/httpd/pres/”. It will keep running in the background and refresh the bandwidth usage data every 60 seconds.

Apache httpd.conf

Apache httpd configuration files are found below “/etc/httpd/”. Again, assuming a completely out-of-the-box installation, the following lines get added to the bottom of “/etc/httpd/httpd.conf”

# Use your own hostname here of course:
ServerName darkstar.home.arpa:80

# Load the module that enables server-side includes (SSI):
LoadModule include_module lib64/httpd/modules/mod_include.so

# We only actually need SSI inside the 'presentation' directory:
<Directory "/srv/httpd/pres/">
    # Make your .html page executable if you want httpd to parse it for SSI:
    XBitHack on
    Options +Includes
</Directory>

# This is where we will host our slackware-current mirror.
# We want every web page there to have a fancy header and footer,
# and the actual directory content inbetween:
<Directory "/srv/httpd/htdocs/slackware/">
    HeaderName /pres/HEADER.html
    ReadmeName /pres/FOOTER.html
</Directory>

# Our CSS files are outside the DocumentRoot so we need to bind them in:
Alias /css/ "/srv/httpd/css/"

<Location /css>
    Options -Indexes
    Require all granted
</Location>

# Our header, footer and bandwidth usage files are outside the DocumentRoot,
# so we need to bind them in:
Alias /pres/ "/srv/httpd/pres/"

<Location /pres>
    Options -Indexes +Includes
    Require all granted
</Location>

# Our icon files are outside the DocumentRoot so we need to bind them in:
Alias /icons/ "/srv/httpd/icons/"

<Directory "/srv/httpd/icons">
    Options Indexes MultiViews
    AllowOverride None
    Require all granted
</Directory>

# And then we add a whole bunch of icons to represent the content we may serve:
AddIconByEncoding (CMP,/icons/compressed.gif) x-compress x-gzip

AddIconByType (TXT,/icons/text.gif) text/*
AddIconByType (IMG,/icons/image2.gif) image/*
AddIconByType (SND,/icons/sound2.gif) audio/*
AddIconByType (VID,/icons/movie.gif) video/*

AddIcon /icons/binary.gif .bin .exe
AddIcon /icons/binhex.gif .hqx
AddIcon /icons/tar.gif .tar
AddIcon /icons/world2.gif .wrl .wrl.gz .vrml .vrm .iv
AddIcon /icons/compressed.gif .Z .z .tgz .gz .zip
AddIcon /icons/a.gif .ps .ai .eps
AddIcon /icons/layout.gif .html .shtml .htm .pdf
AddIcon /icons/text.gif .txt
AddIcon /icons/c.gif .c
AddIcon /icons/p.gif .pl .py
AddIcon /icons/f.gif .for
AddIcon /icons/dvi.gif .dvi
AddIcon /icons/uuencoded.gif .uu
AddIcon /icons/script.gif .conf .sh .shar .csh .ksh .tcl
AddIcon /icons/tex.gif .tex
AddIcon /icons/bomb.gif core

AddIcon /icons/back.gif ..
AddIcon /icons/hand.right.gif README
AddIcon /icons/folder.gif ^^DIRECTORY^^
AddIcon /icons/blank.gif ^^BLANKICON^^

DefaultIcon /icons/unknown.gif

# Here is where it starts getting interesting.
# This 'IndexOptions' statement will already improve the look and feel of a directory index a lot:
IndexOptions FancyIndexing HTMLTable VersionSort NameWidth=*

# Some stuff we don't want to be visible to our visitors:
IndexIgnore .??* *~ *# HEADER* README.html RCS CVS *,v *,t favicon.ico

# And we want to spice up the index pages with some custom CSS (Cascading Style Sheets):
IndexStyleSheet /css/index.css

# Add a bit of metadata to our index pages to help people find them using online search;
IndexHeadInsert " \
<meta name=\"description\" content=\"Alien BOB's Slackware Linux mirror site.\"> \
<meta name=\"keywords\" content=\"Slackware,Slackware,Slackware Linux,alienBOB,alien\">"

Cascading Style Sheet (CSS)

This is some nice CSS which I found at https://www.apachelounge.com/viewtopic.php?p=21764 . Create a separate css directory to match the httpd.conf snippet above:

# mkdir /srv/httpd/css
# vi /srv/httpd/css/index.css

And add the following content into that index.css file:

body {
    background:#ffffff;
}

table {
    margin:10px auto;
    width:1000px;
    background:#edeeff;
    padding:20px;
    -moz-border-radius: 15px;
    border-radius: 15px;
}
table tr td {
    padding:2px;
}

h1#indextitle {
    margin:20px auto;
    width:990px;
    color:#001133;
    background:#edeeff;
    padding:20px;
    -moz-border-radius: 15px;
    border-radius: 15px;
}

h1#indextitle {
    font-size:20px;
    font-family: "Segoe UI", "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, sans serif;
}

tr.indexhead {
    font-size:16px;
    font-family: "Segoe UI", "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, sans serif;
}
tr.even {
    background:#fffff7; /* */
}
tr.odd {
    background:#edeeff; /* */
}

tr.indexbreakrow th hr {
    border:0;
    height:1px;
    background:black;
}

th.indexcolname {
    text-align:left;
}
th.indexcolname a:link,
th.indexcolname a:visited {
    color:#323B40;
    text-decoration:none;
}
th.indexcolname a:hover {
    color:#a81818;
    text-decoration:none;
}

th.indexcollastmod {
    text-align:center;
}
th.indexcollastmod a:link,
th.indexcollastmod a:visited {
    color:#323B40;
    text-decoration:none;
}
th.indexcollastmod a:hover {
    color:#a81818;text-decoration:none;
}

th.indexcolsize {
    text-align:right;
    padding-right:20px;
}
th.indexcolsize a:link,
th.indexcolsize a:visited {
    color:#323B40;
    text-decoration:none;
}
th.indexcolsize a:hover {
    color:#a81818;
    text-decoration:none;
}

th.indexcoldesc {
    text-align:left;
}
th.indexcoldesc a:link,
th.indexcoldesc a:visited {
    color:#323B40;text-decoration:none;
}
th.indexcoldesc a:hover {
    color:#a81818;
    text-decoration:none;
}

td.indexcolicon {
    text-align:center;
}

td.indexcolname {
    font-family:verdana;
    font-size:14px;
}
td.indexcolname a:link,
td.indexcolname a:visited {
    color:#323B40;
    text-decoration:none;
}
td.indexcolname a:hover {
    color:#a81818;
    text-decoration:none;
}

td.indexcollastmod {
    font-family: "Segoe UI", "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, sans serif;
    font-size:12px;
    text-align:center;
}
td.indexcolsize {
    font-family: "Segoe UI", "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, sans serif;
    font-size:12px;
    text-align:right;
    padding-right:20px;
}
td.indexcoldesc {
    font-family: "Segoe UI", "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, sans serif;
    font-size:12px;
    text-align:left;
    padding-right:20px;
}

Page header and footer

The HTML in the pageheader shows a descriptive text and ensures that the page content is nicely centered in the browser window.

Add the following to “/srv/httpd/pres/HEADER.txt”:

<hr width="100%">
  <center>
    <table>
      <tr>
        <td align="left">
        Welcome to SLACKWARE.NL!<br>
        This mirror service is provided by Alien BOB
        </td>
      </tr>
    </table>

The HTML in the footer uses server side includes, which gives the pages their dynamic nature; when the HTML is parsed, the actual bandwidth usage data is included on the spot.

Add this to “/srv/httpd/pres/FOOTER.html”:

<center>
<br>
<img src="/pres/ubar.png" title="<!--#include virtual='/pres/ubar.txt' -->" alt="<!--#include virtual='/pres/ubar.txt' -->" width=80% height=10 border=0>
<br>
<!--#include virtual="/pres/ubar.txt" -->
</center>

And then make this file executable (!) which tells Apache httpd to parse the HTML for SSI (that’s what that XBitHack statement was for):

# chmod +x /srv/httpd/pres/FOOTER.html

Add content

Create the directory “/srv/httpd/htdocs/slackware” and download a “slackware-current” mirror into that directory.

Tetst your config

The commmand “apachectl configtest” will show you any issues with your httpd.conf that need to be resolved before you can start the web server.

Start the web server

Make the rc script executable so that Apache httpd will start on every boot, and then start it manually this time:

# chmod +x /etc/rc.d/rc.httpd
# /etc/rc.d/rc.httpd start

Finally, go have a look at your new Slackware mirror site at http://darkstar.home.arpa/slackware/slackware-current/ !

Let me know if anything is not clear, or if the file content above was not copied correctly.
Have fun! Eric

10 thoughts on “How I setup Apache for slackware.nl

  1. Thanks Eric.

    I am in my own learning curve installing my slackware server in a cloud provider (Linode). I got my domain to apply your article regarding https letsencrypt (pending). I am now installing COPS (calibre) following your article (I got a db error I am checking now). I will try this article later.

    I enjoy reading your articles and your scripts, many thanks for sharing in a professional way your slackware knowledge!. Not just copy and paste commands, your context information is a key element in your articles.

    I have learned lots of things. Thanks Eric. I just want to let you know it!. Please keep the line of apache articles, they are very useful.

    Regards


  2. Pingback: Links 21/5/2021: LibreELEC (Matrix) 10.0 Beta 3 and PostgreSQL 14 Beta 1 | Techrights


  3. Fantastic write up Eric 🙂

    Thank you for sharing with the community. There’s plenty of cookbook style tuts for Debian and Arch, so this write up serves to not only highlight what you’ve done with a particular site, but what others can run with from a foundational perspective that choose to run Slackware -current.

    Kindest regards,

    Bradley

    .


  4. Dear Eric,
    As a follower of (amongst other things) your live CDs I check https://slackware.uk/people/alien-slacklive/latest/ daily — at the time the .uk mirror was faster than your .nl one. On that site the ISOs seem to be stuck at 2021-03-11. This somewhat awkward because I use your ISOs primarily for bleeding edge confirmations of things I see in my non-full Current64 instances.
    In the first paragraph of your Apache tutorial at hand you mention https://slackware.nl/ . Following slackware-live/ > latest/ also gives the same 2021-03-11 stuck date.
    You also mention https://download.liveslak.org/ . Following latest also gives that 2103-11-11 stuck date. However the “Welcome to LIVESLACK.ORG!” text contains an interesting paragraph:
    “Also worth while: After every update of Slackware-current’s ChangeLog.txt a Slackware Live ISO will automatically be generated based on the latest & greatest. You can download and run this Live ISO image if you want to test or debug the bleeding edge of Slackware. Get it from slackware.nl!”.
    This slackware.nl link leads to https://slackware.nl/slackware/slackware-live/slackware64-current-live/ where the slackware64-live-current.iso is dated 2021-05-20!
    Do you regard the foundable 2021-03-11 ISO as the “stable” one and the somewhat hidden 2021-05-20 ISO as a bleeding edge one?
    Regards, Dick


    1. This is where you will find a Slackware Live ISO that gets re-generated every time when there’s an update to the ChangeLog.txt of slackware-current: https://slackware.nl/slackware/slackware-live/slackware64-current-live/
      This is prominently mentioned on https://download.liveslak.org/

      The “latest” you are pointing to in the beginning, is my complete set of ISOs for all variants. Here, “latest” does not refer to the Slackware status but to the liveslak version!


  5. Not sure if is connected but I get ERR_SSL_VERSION_OR_CIPHER_MISMATCH trying to access slackware.nl. Using Google Chrome Version 90.0.4430.72 (Official Build) (64-bit).on Slackware 14.2. download.liveslak.org works fine. Using ca-certificates-20210308.
    Any ideas please.
    David



      1. Sorry about that. Turns out that my ISP’s parental controls block that site. Can’t think why. Anyway, I added an exception rule and all is ok now.



Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.