DEV Community

Cover image for Making My Own Static Site Generator - DWEB 001
Ahmed Alaa
Ahmed Alaa

Posted on

Making My Own Static Site Generator - DWEB 001

This article was originally posted on my blog and I've mentioned there that I wanna write my own static site generator. I know that most of the time re-inventing the wheel doesn't produce a better wheel, and the better quality wheels that come from such approach aren't always compatible with different vehicles. To rephrase, I know there are plenty of high quality SSGs out there, in different programming languages, and with a plethora of features and capabilities. But in my case, DWEB ( that's the codename I gave for my SSG project ) should serve as a base to formulate other projects ( AMON, TAPS,.. more on that later ), and as a way to practice my self-decipline techniques, enhance my programming, scripting and problem solving skills.

In this intro post I'll just write my plans for DWEB and kickstart the Projects Log category where I'd hopefully document the projects I work on.

My goal is for DWEB to be a lightweight, generic and easily hackable SSG. Also since I'm a masochist engineer with a tendency to over optimize and taking the longer route making stuff, I've decided that I'll write DWEB in BusyBox shell ash. Why exactly ash? why not bash, or the POSIX compliant shell dash? That's because I will most definitely need to use some of the basic UNIX commands, but I don't wanna be tempted to use the extensions of GNU's coreutils, and I want the script to run on a vanilla Alpine Linux Docker image.

So, what should DWEB be able to do:

  • Scan a specified directory and subdirectory for content files, process and map them to the public HTML directory
  • Scan the content directory and subdirectories for other file types and map them to their respective paths under the public HTML directory
  • Processing the content files means extracting the metadata, performing markup conversion ( AMON project; more on that later ), and other related tasks such as pagination, generating navbars, taxonomies pages, etc.
  • Compare the content and public HTML directories and only compile the needed content files

So basically the following content directory tree:

content
|-- dir1
|   |-- index
|   |-- page1
|   |-- page2
|   `-- page3
|-- dir2
|   |-- page1
|   |-- page2
|   `-- page3
|-- dir3
|   |-- page1
|   |-- page2
|   `-- page3
|-- index
|-- page1
|-- page2
`-- page3
Enter fullscreen mode Exit fullscreen mode

Should be transformed into the following public HTML directory tree:

public_html
|-- dir1
|   |-- index.html
|   |-- page1.html
|   |-- page2.html
|   `-- page3.html
|-- dir2
|   |-- index.html
|   |-- page1.html
|   |-- page2.html
|   `-- page3.html
|-- dir3
|   |-- index.html
|   |-- page1.html
|   |-- page2.html
|   `-- page3.html
|-- index.html
|-- page1.html
|-- page2.html
`-- page3.html
Enter fullscreen mode Exit fullscreen mode

Notice the generated /public_html/dir2/index.html and /public_html/dir3/index.html pages while there are no /content/dir2/index and /content/dir3/index content files. I'm still not sure how I want these to turn out, but one of the solutions is to make some kind of branch and leaf pages templates and make the branch index pages like /public_html/dir{2,3}/index.html contain a listing of the leaf pages like /public_html/dir{1,2,3}/page{1,2,3}.html.

By the next update hopefully next week, I should have a working POC of the tasks I've listed above, and have a more clear overview and tasks list for DWEB.

That's it for now. Thanks and goodbye!

Top comments (0)