Kyle Darden

Managing a personal portfolio website can quickly become tedious, especially when manually updating posts, categories, and pages. To streamline this process, I decided to automate the content generation on my website using Python scripting, ensuring scalability and reducing the effort required to maintain a dynamic platform. Below is a detailed breakdown of the steps I took, highlighting the most interesting and impactful parts of this journey.

Step 1: Structuring the Data

The first step in this project was to centralize all the website's content into a single, structured JSON file. This file (posts_metadata.json) serves as the backbone of the automation process, containing metadata for each post, such as:

Title: The name of the post.
Categories: A list of tags associated with the post.
Filename: The HTML file name for the post.
Date: The publication date.

            {
                "title": "How AI is Revolutionizing Real Estate Investment",
                "categories": ["Machine Learning", "Real Estate"],
                "filename": "ai-in-real-estate.html",
                "date": "2025-01-10"
                "content": "Test content from JSON",
                "summary": "This article explores how AI is transforming the real estate investment landscape."
            }

This structure allows the Python script to systematically read, process, and generate the necessary files for the website.

Step 2: Automating Post Creation

Using Python, I automated the creation of individual post pages. Each post page is generated using a predefined HTML template, which dynamically inserts the title, publication date, content placeholder, and category links.

            for post in posts:
                post_path = os.path.join(posts_output_dir, post["filename"])
                if os.path.exists(post_path):  # Skip existing posts
                    print(f"Post page {post['filename']} already exists. Skipping.")
                    continue
                category_links = ", ".join(
                    f"<a href='../category/{category.lower().replace(' ', '-')}.html'>{category}</a>"
                    for category in post["categories"]
                )
                post_content = POST_TEMPLATE.format(
                    title=post["title"],
                    date=post["date"],
                    content="Post content goes here...",  # Placeholder for actual content
                    category_links=category_links
                )
                with open(post_path, "w") as file:
                    file.write(post_content)

This step includes a check to prevent overwriting existing posts, ensuring that re-running the script doesn’t erase custom edits. Each post also dynamically links back to its relevant categories, improving navigation.

Step 3: Creating Category Pages

To organize content effectively, the script generates a dedicated page for each category listed in the metadata. These pages contain a list of all posts associated with the category, complete with links to their respective pages.

            CATEGORY_TEMPLATE = """<!DOCTYPE html>
            <html lang="en">
            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>{category} | Updates</title>
                <link rel="stylesheet" href="../styles.css">
            </head>
            <body>
                <header>
                    <h1>{category}</h1>
                </header>
                <main>
                    <section class="posts">
                        {posts}
                    </section>
                </main>
            </body>
            </html>
            """

One interesting challenge here was formatting category names for URL-friendly links. For example, "Machine Learning" is converted to machine-learning.html for the file name.

Step 4: Updating the Updates (Index) Page

The updates.html page displays the most recent posts on the website. To keep the homepage engaging, I limited the display to the five most recent posts, sorted by date in descending order.

            updates_html = ""
            for post in sorted(posts, key=lambda x: x["date"], reverse=True)[:5]:  # Limit to 5 posts
                updates_html += f"""
                <article>
                    <h2><a href="posts/{post['filename']}">{post['title']}</a></h2>
                    <p>{post['summary']}</p>
                    <p class="date">Posted on {post['date']}</p>
                    <hr class="separator_category">
                </article>
                """

Step 5: Improving Scalability and Maintainability

To ensure scalability, the script was designed with the following features:

Centralized Data: All metadata is stored in one file, making it easy to add or update posts and categories.
File Skipping Logic: The script checks for existing files before generating them, preventing unnecessary overwriting.
Consistent Design: Templates ensure that all pages follow the same layout and style, which is maintained via an external CSS file.

Conclusion

This project demonstrates the power of combining programming and web development to create a dynamic, data-driven website. By automating content generation, I’ve reduced manual effort, ensured scalability, and improved the user experience. These updates reflect my commitment to leveraging technology for efficient and effective solutions.