Turning a blog index into a static page for study purposes
Dynamic web-delivered content these days is delivered by using a dynamic HTML processing engine. The basic methodology is for a web presentation technology such as PHP or Rails or Django to make a query to a database, retrieve a certain amount of content or a certain request, and then to present that content on the web.
In order to debug or learn from web-delivered content, a good trick is to save a ‘snapshot’ of the dynamic page to a static page on a local web server where you can play with it. I searched to find a Kubrick themed page and found this page: http://managedtasks.com/wpthemes/blog/. Here’s an example of what it looked like.
Saving the dynamic page to a local web-served directory
I then saved their index page using wget
wget http://managedtasks.com/wpthemes/blog/
This saved an index.html file.
I visited the page and used View/Source to see their CSS file location ( Pic )
I then proceeded to wget that file:
wget http://managedtasks.com/wpthemes/blog/wp-content/themes/default/style.css
So there we have it index.html and style.css local to our system.
Customizing the downloaded files for local use
I changed these file names to be kubrick.html and kstyle.css from index.html and style.css respectively.
kubrick.html now needs to have its style file changed to be the local kstyle.css versus the remote style.css.
Open your editor and change the line that says:
<link rel="stylesheet" href="http://managedtasks.com/wpthemes/blog/wp-content/themes/default/style.css" type="text/css" media="screen" />
to
<link rel="stylesheet" href="kstyle.css" type="text/css" media="screen" />
Handling the image sources
Next, we need to make sure image data is moved into the CSS file. That is, we want all of our CSS data to be defined in an external source file and not inside the HTML itself within a style tag. So let’s do that.
In the source for kubrick.html we see:
body { background: url("http://managedtasks.com/wpthemes/ \
blog/wp-content/themes/default/images/kubrickbgcolor.jpg"); }
#page { background: url("http://managedtasks.com/wpthemes/ \
blog/wp-content/themes/default/images/kubrickbg.jpg") repeat-y top; border: none; }
#header { background: url("http://managedtasks.com/wpthemes/ \
blog/wp-content/themes/default/images/kubrickheader.jpg") no-repeat bottom center; }
#footer { background: url("http://managedtasks.com/wpthemes/ \
blog/wp-content/themes/default/images/kubrickfooter.jpg") no-repeat bottom; border: none;}
When a browser processes CSS rules it aggregates them in order in which it sees them. Thus a body {color: red} on line 22 of kstyle.css will be eclipsed by a body: { color: black} on line 123 of the same file. Similarly, if the rules do not eclipse they add. Thus if body {text-align: center} appeared on line 125 of this same hypothetical CSS file, the acting rule would be body { color: red; text-align:center }.
To keep the processing order roughly identical yet with the CSS rules all in one file, we will take the last CSS defininitions ( i.e. those defined in kstyle.html ) and make them the last lines of kstyle.css.
You may do so now using a text editor.
Being a good netizen: respect the bandwidth of others
These image calls are to someone else’s server and it’s not nice to keep draining their bandwidth. So we’re going to take the in-line rules, alter them to look for the image files locally, and take those altered rules and put them in kstyle.css.
Let’s get the default image set.
I took a pristine download of WordPress and put it in my working directory and un-archived it. I took the ‘images’ directory from the Kubrick theme and put it in the same directory as my kstyle.css and index.html files.
Note: This will work assuming you’re in the directory where kstyle.css and kubrick.html live
cp -r wordpress/wp-content/themes/default/images/ .
The rules just added to the end of kstyle.css in the previous step specify image files. Download these and put them into the images directory. You can use ‘wget’ again. You will overwrite the “default” images files. The reason is that the image files used on this site vary silghtly from the default set. So that you have no visible difference between your local copy and the real remote version, you need to download their image files.
Now I’m going to change the CSS to refer to my own local copy of these images. These statements belong in kstyle.css.
In summation:
BEFORE: In kubrick.html, in the style tag
body { background: \
url("http://managedtasks.com/wpthemes/blog/wp-content/themes/default/images/kubrickbgcolor.jpg"); }
#page { background: \
url("http://managedtasks.com/wpthemes/blog/wp-content/themes/default/images/kubrickbg.jpg") repeat-y top; border: \
none; }
#header { background: \
url("http://managedtasks.com/wpthemes/blog/wp-content/themes/default/images/kubrickheader.jpg") no-repeat \
bottom center; }
#footer { background: \
url("http://managedtasks.com/wpthemes/blog/wp-content/themes/default/images/kubrickfooter.jpg") no-repeat bottom; \
border: none;}
AFTER: In kstyle.css; the last 6 lines
body { background: url("images/kubrickbgcolor.jpg");}
#page { background: url("images/kubrickbg.jpg") repeat-y top; border: none; }
#header { background: url("images/kubrickheader.jpg") no-repeat bottom center; }
#footer { background: url("images/kubrickfooter.jpg") no-repeat bottom; border: none;}
One last nice thing to do
If you look in kublick.html, you’ll see that it references ‘icon_smile.gif’. This would be a call to the remote server. It’d be nice to change those calls to managedtasks.com’s server to use a local copy in your images directory of icon_smile.gif. Use the same technicque above. wget the image file, store it in your images directory, change the static URLs.
If you need to compare your results to mine, check out the “pre-built” local bundle on the parent page below.
With your own local file in place, you’re ready to start unraveling Kubrick.