Modest Home on the Web

By zhaoway

Introduction

We will build a small homepage site without server side scripts. This is suitable for people who do not run their own web servers or have no priviledge to use server side facilities. We will use JavaScript and Lex to simulate some effects of template files to ease the maintaining tasks. We will use Makefile to automate the uploading, and use CSS to provide fancy formatting effects. We will use only standard HTML in our main content file, thus provide a good chance for any browsers to surf our web site easily.

The weird choice of using Lex to present a template effect is because I want to pretend that I am a guru. And gurus often use complicated or even brain damaged tools to fulfil simple and sometime stupid tasks. Of course, if I am a true guru, I'd rather write a similar tool by myself from scratch using LISP or C. But since I am only pretending I am one, so forget about it.

HTML and CSS

There is a wonderful Debian package which provides great documentation on standard CSS and HTML practice. That is wdg-html-reference package. If you are serious into HTML 4 and CSS, then you'd better apt-get into that package, and read the documents there. They're easy to follow. Only remember one thing though, a good understanding on CSS does NOT mean that you should use every possible effects on your homepage. A good taste is more important than a good technique. At the end of this article, I presented some example files, you could keep them handy when reading through.

I will not duplicate those excellent documentation on HTML and CSS here, and there are many more high quality documents outside on the web and in the bookstore. Even better, you could use your browser's "View Source" menu item to sneak in every webpage that you're interested to learn from. I will provide you one advice though, that is you should keep it simple, keep your homepage simple unless you have a big team of webmasters and webmistress work for you, or you have a lot and a lot of free time to work on your homepage.

Simple does not necessarily mean ugly, sometime simple is considered beauty, expecially when the CSS is available to nearly everyone now. So your best practice (pretending that I am an expert. heh) is to use standard HTML in your content file, and use the HTML tags as logically as you can.

For example, you may want to use <i> to empasize a sentence or a word, DON'T, use <em> instead. Then use CSS to provide the desired effects. That's the whole point. And not to forget to appreciate the Mozilla web browser which is nearly the most standard compliant one out there. (Hint, use it to test your webpage!)

Using JavaScript

Why using JavaScript? Since we are only building a modest homepage, we won't need those fancy features, not to mention those annoying pop-ups. The reason we are using JavaScript is that it could present us some template like features which could ease our task maintaining big bunch of webpages. Modest homepage does NOT mean that we cannot put many files there. ;)

For example, if we want to present a navigation menu for our webpage, we will have to copy and paste our menu paragraph in HTML into every content file (as mentioned above, we do not have enough priviledges to use any server side facilities.), and what if we want to change the style used for our menu? That's a big nightmare to adjust each webpages for that.

Instead we could write our menu in a JavaScript, and include the following in each of our webpages:

<script type="text/javascript" src="header.js" charset="iso-8859-1"> </script>

When we want to add an item to our menu, we only need to change the header.js file, then viola, every webpages are changed accordingly.

The syntax of JavaScript is very easy to learn, by reading some examples, you could get nearly the whole idea. Since we are using JavaScript to present navigation menus, we could even ease the task of generating menus by hand too. Go check out the example header.js at the end of this article.

Using Lex

Lex is presented in the Debian package flex. It is a GNU tool. What lex do is to scan the input file, and whenever a regular expression is met, execute some C code. So we can use it to scan our templates then generate the HTML files. Lex could turn your dull project of maitaining a stupid personal homepage into an exciting C programming journey. Isn't it wonderful?

Lex is a scanner generator, which means, we use lex to generate our scanner, then using our scanner to scan our template files to generate HTML files. How could lex generate a scanner? It does this by reading a rules file written by us. Basically, we design some set of rules, then using this rules in our content files. And we write a rules file for Lex, then we use lex to read our rules file and generate a scanner, then we use the scanner to scan our content file to get the desired HTML file. And, it's very simple! Gurus R Us!

What makes a rule? A rule is made of two parts. The first part is a regular expression (regex) similar to that you found in perl or egrep. The second part is a small part of C code. Whenever a regex is found met, then the C code will be executed. The following is a sample rule from our example rules file:

\"header\" {
  if (flag_lex == 1 && flag_key == 1 && current_key == HERE)
    {
      fprintf(yyout,
	      "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.0//EN\""
	      "\"http://www.w3.org/TR/REC-html40/strict.dtd\">"
	      "<html><head><title>{zhaoway} %s</title>"
	      "<link rel=\"stylesheet\" href=\"style.css\" type=\"text/css\">"
	      "<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\">"
	      "<meta name=\"description\" content=%s>"
	      "<meta name=\"keywords\" content=%s></head><body>"
	      "<script type=\"text/javascript\" src=\"header.js\" charset=\"iso-8859-1\">"
	      "</script>\n",
	      keys[TITLE], keys[DESCRIPTION], keys[KEYWORDS]
	      );

      flag_key = 0;
    }
  else ECHO;
}

The above code means that, when "header" is appeared in the input file, and some conditions are satisfied, then we will replace it with a big bunch of HTML codes. The corresonding example content file is as the following:

<lex title="home page" description="zhaoway's homepage." />
<lex keywords="zhaoway, personal, homepage, diary, curriculum, vitae, resume" />
<lex here="header" />

Making the upload

When doing the upload, to decide which file on the server needs to be updated is difficult, and that task should be automated indeed. So we use Make to do it. The basic idea is to touch a blank some.html.upload file whenever some.html is uploaded. When some.html is newer than some.html.upload that means it needs to be uploaded to the server again. The following Makefile rule shows that:

%.upload: %
	lftp -c "open -u \"$(USER),$(PASS)\" $(SITE); put $<"
	touch $@

Conclusion

Makefile and Lex themselves warrantize lengthy articles. They are very traditional Unix tools for C development. But could be very useful in maintaining webpages. We cannot explore the details of them very carefully. This article is just mean to raise your imagination with these traditional Unix tools.

Example files available

Makefile
scan.l Lex rules file
index.scan Template file for index.html
header.js
footer.js
style.css

You could visit my homepage for the resulted effects. Have fun and good luck!

Zhaoway

zhaoway lives in Nanjing, China. He divides his time among his beautiful girlfriend, his old Pentium computer, and pure mathematics. He wants to marry now, which means he needs money, ie., a job. Feel free to help him come into the sweet cage of marriage by providing him a job opportunity. He would be very thankful! He is also another volunteer member of the Debian GNU/Linux project.

"Linux Gazette...making Linux just a little more fun!"