Building this website

As you can probably tell, I don't have much experience with web development but I knew I wanted a personal site and it turned out to be a fun project.

I tried messing around with some Javascript frameworks but found them all very unintuitive. So I made my own! Not really... it's more of a preprocessor or build tool than anything.

It's a single perl script that that does a couple file manipulation tasks and then takes the markdown files that I use for these write-ups and converts them to HTML. I wanted it to be designed like this because many places (for example github, where I am hosting the repository) have excellent support for rendering .md files directly. They also feel much easier to work on and read as they are mostly just plain text

The script also copies css files and assets into the output directory

I then have a very simple (<10 lines) express server written in typescript that hosts the static files generated by the script

Features of my perl script:

These are the main pages of the site. Home page, about page, etc...

These are .md files that contain each of the project and writing pages. The script will parse the markdown into HTML. The following are some examples of parsing markdown and replacing it with HTML

open (my $FILE, "<", "$dir/$file_name") \
  || die "ERROR: Failed to open $dir/$file_name";

open (my $OUT_FILE, ">", substr("public/$dir/$file_name", 0, -3).".html") \
  || die "ERROR: Failed to open public/$file_name";

if (!$in_code_block && s/^# (.*)$/<h3>$1<\/h3>/) {
  print $OUT_FILE "$_";
}
elsif (s/\*\*\*(.*)\*\*\*/<b><em>$1<\/em><\/b>/) {
  print $OUT_FILE "$_";
}
elsif (!$in_code_block && s/^- (.*)$/<li>$1<\/li>/) {
  if ($in_list) {
    print $OUT_FILE "$_";
  }
  else {
    print $OUT_FILE "<ul>";
    print $OUT_FILE "$_";
    $in_list = 1;
  }
}

All that is required to create a component is to make a .html file in the components directory. The perl script will use the name of the file and then look for HTML comments in the pages

<!--HEADER-->

open (my $HEADER, "<", "components/header.html") \
  || die "ERROR: Failed to open components/header.html";

if (//) {
  while(<$HEADER>) {
    print $OUT_FILE "$_";
  }
  seek($HEADER, 0, SEEK_SET);
}