I Coded My Own Static Page Builder

What about software to speed up blog post building? No! I’m not using any CMS, and I’m not even using any third-party tool for it. I coded my own solution.

In short, I have a job that requires me to learn the Swift language. So, what’s the best way to learn a new language, if not by building a project in that language? And why not build a project that also helps with my personal work? Once again, I’m killing two birds with one codebase.

Static Page Builder In A Nutshell

Many people don’t need to deal with HTML, CSS, and JS to write a webpage. They can use a static page builder. That kind of software allows you to focus on writing your content and uses a very simple code syntax, which will later be parsed into HTML, CSS, and JS code for you. The downside may be that they’re not very customizable, since how the parsing is done is set by the tool’s developer.

For What Reason?

I have been writing and editing my HTML blog posts with not much automation. My process has been like:

I spend some time on Google Docs brainstorming.
After finishing the first version, I ask ChatGPT for grammar checks and suggestions.
If I'm not happy, I go back to brainstorming again and ask ChatGPT again.
Once I'm satisfied with my text, I edit the post HTML file.
Lastly, I add, commit, and push my blog project to my GitHub repository, which updates my blog online.

It wasn’t bothering me until recently, when I got the idea of having two versions of each blog page: one in English, for the world in general, and one in Portuguese, for my fellow Brazilians that I invite to read my blog. There are other solutions for this language problem, but I will talk more about that in another post.

OK, I can write a blog post in one language and ask free-tier ChatGPT to translate it for me, but what if I change the default structure of my blog post and then have to go through each one manually to change their code? Remember that they will be twice as many, so the number of files may escalate quickly.

An automated solution that takes text files and turns them into my blog format would be very handy.

Plus, it would be nice to also be able to write my raw blog text and, after a click, have the HTML page generated.

Demonstration

Let's say I have the following plain text file called myPostText.txt:

postFile.html   
#card   
 #center-title Hello World   
 #p That is a test paragraph   
 #ul   
  #li Item 1   
  #li Item 2   
 #p bye bye   
#card   
 #title Second card here

The first line defines the output file name. Each other line is made of a tag (#tagName) and some have text after it.

Each tag has an initial and end HTML code associated. That is up to you to define in the file called tagRules.tr. Below are my definitions for this demonstration.

#card initial: <div class="card card-body mb-3"> end: </div>
#center-title initial: <h1> end: </h1>
#title initial: <h2> end: </h2>
#p initial: <p> end: </p>
#ul initial: <ul> end: </ul>
#li initial: <li> end: </li>

I call my command-line application spb (Static Page Builder) like this:

spb myPostText.txt

It will load all the text file content into the spb program, which will use it to build the postFile.html page.

I can also do this for multiple .txt files by passing a folder as the first parameter:

spb myFolder

I will leave more information on how to use my software in its GitHub README file.

Now I will show how the core concept of my application works using some pictures:

Algorithm Slide Show:

STEP 1) We start with the user's .txt file, an empty stack (data structure), and an empty output file. Note: The underline characters are there only to make the indentation clear for you. It is just for visual explanation.

STEP 2) Now, let’s turn the first line of the .txt file into an object with attributes: indentation (0) and tagName (#card). Note: The program does not change the .txt file. It is just for visual explanation.

STEP 3) Since the stack is empty, we can just push (add to the top) the object into the stack. When an object is pushed, the initial string previously defined for that tag will be written to the output file with the object’s corresponding indentation.

STEP 4) The next .txt line becomes an object. This object can be pushed if its indentation is greater than the object already at the top.

STEP 5) Since indentation 1 is greater than indentation 0, the new object is pushed, becoming the new object on top and adding its initial code in the output document with the object’s indentation.

STEP 6) The next .txt line becomes an object. This object can be pushed if its indentation is greater than the object already at the top.

STEP 7) Since 1 is not greater than 1, the program pops (takes the top object out). When an object is popped, the end string previously defined for that tag will be written to the output file with the object’s corresponding indentation.

STEP 8) Now we check again if the new object's indentation is greater than the current object at the top.

STEP 9) Since indentation 1 is greater than indentation 0, the new object is pushed, becoming the new object on top and adding its initial code in the output document.

STEP 10) The next .txt line becomes an object. This object can be pushed if its indentation is greater than the object already at the top.

STEP 11) Since 1 is not greater than 1, the program pops (takes the top object out) the top object, and adds its end code to the document with the object’s indentation.

STEP 12) Now we check again if the new object's indentation is greater than the current object at the top.

STEP 13) Since indentation 1 is greater than indentation 0, the new object is pushed, becoming the new object on top and adding its initial code to the output document.

STEP 14) The next .txt line becomes an object. This object can be pushed if its indentation is greater than the object already at the top.

STEP 15) Since indentation 2 is greater than indentation 1, the new object is pushed, becoming the new object on top and adding its initial code in the output document.

STEP 16) The next .txt line becomes an object. This object can be pushed if its indentation is greater than the object already at the top.

STEP 17) Since 2 is not greater than 2, the program pops (takes the top object out) the top object, and adds its end code to the document with the object’s indentation.

STEP 18) Now we check again if the new object's indentation is greater than the current object at the top.

STEP 19) Since indentation 2 is greater than indentation 1, the new object is pushed, becoming the new object on top and adding its initial code in the output document.

STEP 20) The next .txt line becomes an object. This object can be pushed if its indentation is greater than the object already at the top.

STEP 21) Since 1 is not greater than 2, the program pops (takes the top object out) the top object, and adds its end code to the document with the object’s indentation.

STEP 22) Now we check again if the new object's indentation is greater than the current object at the top.

STEP 23) Since 1 is not greater than 1, the program pops (takes the top object out) the top object, and adds its end code to the document with the object’s indentation.

STEP 24) Now we check again if the new object's indentation is greater than the current object at the top.

STEP 25) Since indentation 1 is greater than indentation 0, the new object is pushed, becoming the new object on top and adding its initial code in the output document.

STEP 26) The next .txt line becomes an object. This object can be pushed if its indentation is greater than the object already at the top.

STEP 27) Since 0 is not greater than 1, the program pops (takes the top object out) the top object, and adds its end code to the document with the object’s indentation.

STEP 28) Now we check again if the new object's indentation is greater than the current object at the top.

STEP 29) Since 0 is not greater than 0, the program pops (takes the top object out) the top object, and adds its end code to the document with the object’s indentation.

STEP 30) Now we have an empty stack open for any object to enter.

STEP 31) Since the stack is empty, the program can just push (add to the top) the object into the stack and add its initial code to the output document.

STEP 32) The next .txt line becomes an object. This object can be pushed if its indentation is greater than the object already at the top.

STEP 33) Since indentation 1 is greater than indentation 0, the new object is pushed, becoming the new object on top and adding its initial code in the output document.

STEP 34) Now that there are no more lines to become objects, the program proceeds to unstack all remaining objects in the stack.

STEP 35) The program pops (takes the top object out) the top object, and adds its end code to the document with the object’s indentation.

STEP 36) The program pops (takes the top object out) the top object, and adds its end code to the document with the object’s indentation.

STEP 37) Finally, the output file is done.

If you reached this point, thank you very much. This slideshow gave me a lot of work.

You may think the final output is missing a body tag (<body>...</body>) and other stuff too. That is because I abstracted out a lot that surrounds the core principle of how the program works.

Actually, by default, the first tag on the stack is the #html tag that you define in the tagRules.tr file. Its initial and end are set with tags like <header>, <link>, <body>. Its indentation is set to zero. Every object created for tags in the .txt file has its indentation incremented by 1, so they get pushed upon the #html tag.

What do you think?

Do you think it could be done with a more interesting approach?
Do you know how a well-known static page generator is implemented?
Do you have opinions for new features?

Let me know in the comments !

Loading comments...