how to create your own static website generator

Creating your own static website generator involves several key steps: designing the overall architecture, writing the core logic for generating static pages, and implementing a simple templating system. Below is a basic guide on how to create a static site generator using Python, which is a popular choice due to its simplicity and readability.

Step 1: Define the Project Structure

Create a Project Directory:

mkdir my_static_site_generator
cd my_static_site_generator

Create the Necessary Directories:
```
mkdir templates content output
```

templates/: Contains HTML templates.
content/: Contains Markdown files for content.
output/: The generated static site files will be stored here.

Step 2: Install Required Libraries

You’ll need a library to parse Markdown files. markdown is a good choice for this.

pip install markdown

Step 3: Create the Templating System

Create a simple templating system to insert content into HTML templates.

# templating.py
def render_template(template_path, context):
    with open(template_path, 'r') as file:
        template = file.read()
    
    for key, value in context.items():
        template = template.replace(f'{{{{ {key} }}}}', value)
    
    return template

Step 4: Write the Core Logic

Create a script to generate the static website.

# generate_site.py
import os
import markdown
from templating import render_template

CONTENT_DIR = 'content'
TEMPLATE_DIR = 'templates'
OUTPUT_DIR = 'output'

def read_markdown_file(file_path):
    with open(file_path, 'r') as file:
        return file.read()

def write_output_file(file_path, content):
    with open(file_path, 'w') as file:
        file.write(content)

def generate_site():
    if not os.path.exists(OUTPUT_DIR):
        os.makedirs(OUTPUT_DIR)

    for markdown_file in os.listdir(CONTENT_DIR):
        if markdown_file.endswith('.md'):
            content_path = os.path.join(CONTENT_DIR, markdown_file)
            content = read_markdown_file(content_path)
            html_content = markdown.markdown(content)
            
            # Assume there's a 'base.html' template in the templates directory
            context = {'content': html_content}
            output_html = render_template(os.path.join(TEMPLATE_DIR, 'base.html'), context)
            
            output_file_path = os.path.join(OUTPUT_DIR, markdown_file.replace('.md', '.html'))
            write_output_file(output_file_path, output_html)

if __name__ == '__main__':
    generate_site()

Step 5: Create HTML Template

Create a basic HTML template file.

<!-- templates/base.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Static Site</title>
</head>
<body>
    <div class="content">
        {{ content }}
    </div>
</body>
</html>

Step 6: Add Some Content

Create some Markdown files in the content directory.

<!-- content/index.md -->
# Welcome to My Static Site

This is the home page.

<!-- content/about.md -->
# About Me

This is the about page.

Step 7: Generate the Site

Run the script to generate the static website.

python generate_site.py

This script reads Markdown files from the content directory, converts them to HTML using the markdown library, renders them using the base.html template, and writes the resulting HTML files to the output directory.

Step 8: Serve the Site Locally

You can use a simple HTTP server to view your generated static site locally.

cd output
python -m http.server

Conclusion

This basic static site generator demonstrates the core concepts: reading content, rendering templates, and writing output files. You can expand it by adding more features like support for multiple templates, CSS/JS inclusion, navigation generation, and more. This foundational knowledge will help you understand the workings of more advanced static site generators like Jekyll, Hugo, and Gatsby.