As the learning curve for out-of-the-box content management systems flattens out, hand-coded HTML pages are becoming something of a rare bird. With services like Facebook, WordPress, Tumblr, and a hundred others, there simply isn’t as much call for hand-coded, one-off web sites. However, they still have their place – either in sites like this one, where I like posting experiments in a variety of languages, or for more professional organizations, where HTML wireframes or interactive comps would be more useful than static Photoshop documents and Powerpoint presentations.
Therefore, I took it upon myself to figure out how to serve up individual, custom HTML pages from within the confines of this site, which is a custom installation of Drupal 7, hosted at Drupal Gardens, and served up as cloud-based Software-as-a Service.
It is quite simple, actually. First, you need to have a static HTML page, which either contains within it everything you need, or has links to the appropriate outside assets. These could be images, external stylesheets, Flash movies, or the like. So if you have something like this:
<!DOCTYPE html>
<html>
<head>
<title>Static HTML Page Demo</title>
<style>
* {margin:0;padding:0;}
body {background:#ffffff;}
p {font:12px/18px arial,sans-serif;color:#333333;}
</style>
<script type="text/javascript" src="/sites/mysite.drupalgardens.com/files/my-groovy-code.js"></script>
</head>
<body>
<p>Welcome to my wonderful website</p>
</body>
</html>
…in a file called, say, “static-html-page-example.html”. Then, in order to put it in a place where it is accessible to the world, you can do the following:
- Log into your Drupal Gardens website
- Click on “Configuration”
- In the “Media” box of the configuration page, click on “Media browser settings”
- In the “Allowed file extensions” text area, add html to the end. Be sure to use a space to separate it from the other extensions.
- Click “Save configuration”.
- In the upper bar of the content area, click on “content”
- When the main content page opens, click on the “MEDIA” tab on the right side of the page
- In the new screen, click “+ Add File”
- drag your HTML file onto the “add file” area (or browse to it and click “add”), then click “Start Upload”
- You will now see your file appear in the list of media assets for your library. Click on it.
- You should now see a page, the content of which is a link to your static HTML page. If you click that link, it will take you to that page. Click here to see how it works.
See? That was easy! Once you have your assets created, all you need to do is organize and upload.
You will only need to performs steps 1-5 once. After you add a file extension, it is there for good.
Since Drupal Gardens has constraints over and above a normal Drupal install, some allowances must be made. Here are a few things to watch out for:
- Every external asset in your static page – images, videos, Flash files, style sheets, etc., must also be uploaded to the Drupal Gardens media directory. The same process you used to serve up your static HTML file also applies for these assets. You shouldn’t need to add file extensions for images or videos, but you might for Flash (swf), and you will for Javascript (js) and style sheets (css).
- Since every asset is served from the files directory, you need to make sure you acount for this when you create the HTML page. The path to all of you assets will be
“/sites/mysite.drupalgardens.com/files/myAsset.css”. Be sure to add the leading slash.- Alternately, you could add a <base href=”/sites/mysite.drupalgardens.com/files/”/> element in the <head/> element of your static HTML file (information here). This would cut down on the amount of modification you would need to do when moving the static site from your computer to Drupal Gardens. You could simple add the tag to all of your HTML files right before you upload everything.
- Again, since all uploaded media, files, assets, etc. for your entire Drupal Gardens site are stored in a single directory, it is important to name all of your assets in such a way that it is easy to determine which asset goes with which project. I have found that using a prefix is a great way to keep things organized. Here are a couple of examples:
- “20120126-index.html”
- “20120126-image-0.jpg”
- “20120126-stylesheet.css”
- “clientname-index.html”
- “date-client-file-1.html”
There! The best of both worlds: A managed Drupal environment, and the ability to upload and serve custom, static HTML pages if and as the need arises.