Where to place css file for perl cgi script?

Question

I am currently using Apache Server to run my script with the URL :

http://MY_IP/cgi-bin/example.cgi/

which works fine.

However, I'm not sure where to put my .css file. I read that it doesn't belong in the cgi-bin directory.

This is what I have in my 000-default.conf file.

ServerAdmin webmaster@localhost
DocumentRoot /var/www/html

ScriptAlias /cgi-bin/ /usr/lib/cgi-bin/
<Directory "/usr/lib/cgi-bin">


AllowOverride None


Options +ExecCGI -MultiViews +SymLinksIfOwnerMatch


Order allow,deny


Allow from all


</Directory>

I have tried placing it in here and used:

<link rel="stylesheet" type="text/css" href="/var/www/html/login.css"/>

but to no avail.

Could someone please help me out with this?

Thank you.

Answer 1

Although it is always a matter of personal preference, a lot of people create directories under their root directory for javascript, css, images, etc. -- so any static pages would be in /var/www/html , and assets are in subdirectories, such as /var/www/html/css , /var/www/html/javascript , /var/www/html/images , and so on.

In your static html pages (in /var/www/html ), you can reference these using relative links, eg <link rel="stylesheet" href="css/style.css"> , <script src="javascript/my-script.js"> or absolute links, eg <link rel="stylesheet" href="http://MY_IP/css/style.css"> . For pages on your server but not in /var/www/html , using /css/style.css is the appropriate form of the relative link, as / is equivalent to the local directory /var/www/html (that is what setting DocumentRoot in Apache does), so /css accesses the local directory /var/www/html/css .

You can also use the <base> tag in the page head to set a base href for all your relative links:

<base href="http://MY_IP">

Then any relative links (eg href="css/style.css" ) will automatically be interpreted as (eg) http://MY_IP/css/style.css .

Answer 2

Looks like you put it in the right place. It's just the href that you've got wrong.

Your Apache config contains this line

DocumentRoot /var/www/html

This means the the root of your web site is at /var/www/html . So a URL that looks at the root of your web site will translate to a file in that directory.

The href attribute is a URL, not a file path. Therefore, if you put your login.css in this directory, then the correct link would be:

<link rel="stylesheet" type="text/css" href="/login.css" />

But many people would put their CSS files in a subdirectory called /css/ (which maps to /var/www/html/css on your filesystem). If you do that, then the correct link becomes.

<link rel="stylesheet" type="text/css" href="/css/login.css" />