Static sites are very popular in the real world for blogs and other content-heavy websites because they're lightning-fast, secure, and easy to host.
The flow of data through the full system:
- Markdown files are in the
/content
directory. Atemplate.html
file is in the root of the project. - The static site generator (the Python code in
src/
) reads the Markdown files and the template file. - The generator converts the Markdown files to a final HTML file for each page and writes them to the
/public
directory. - Start the built-in Python HTTP server (a separate program, unrelated to the generator) to serve the contents of the /public directory on
http://localhost:8888
(our local machine). - We open a browser and navigate to
http://localhost:8888
to view the rendered site.
The vast majority of our coding will happen in the src/
directory because almost all of the work is done in steps 2 and 3 above. Here's a rough outline of what the final program will do when it runs:
- Delete everything in the /public directory.
- Copy any static assets (HTML template, images, CSS, etc.) to the
/public
directory. - Generate an HTML file for each Markdown file in the
/content
directory. For each Markdown file:- Open the file and read its contents.
- Split the markdown into "blocks" (e.g. paragraphs, headings, lists, etc.).
- Convert each block into a tree of HTMLNode objects. For inline elements (like bold text, links, etc.) we will convert: Raw markdown -> TextNode -> HTMLNode
- Join all the HTMLNode blocks under one large parent HTMLNode for the pages.
- Use a recursive to_html() method to convert the HTMLNode and all its nested nodes to a giant HTML string and inject it in the HTML template.
- Write the full HTML string to a file for that page in the /public directory.
All run commands are in ./main.sh
. Feel free to change as you edit the code.
./main.sh
The program comes with various test cases. In your terminal, run:
./test.sh