a static blog generator using Python

by Posted on

Step 1: Set Up Your Environment

  1. Install Python: Ensure Python is installed on your system.
  2. Install Required Packages:
    bash
    Copy
    pip install markdown jinja2

Step 2: Create the Project Structure

Create the following folder structure:

my_static_blog/
├── content/               # Markdown files for blog posts
├── templates/             # HTML templates
├── output/                # Generated static HTML files
└── generate.py            # Python script to generate the blog

Step 3: Create Markdown Blog Posts

  1. Inside the content/ folder, create a Markdown file for your first blog post, e.g., first-post.md:
    markdown
    title: My First Blog Post
date: 2023-10-01
author: John Doe

# Welcome to My Blog!

This is my first blog post. I'm using a **static blog generator** built with Python.

Here's a list of things I love:
- Python
- Markdown
- Static Sites
  2. Create another Markdown file, e.g., second-post.md:
    markdown
    title: Another Blog Post
date: 2023-10-02
author: Jane Doe

# Another Post

This is another blog post. Static sites are awesome!

Step 4: Create HTML Templates

  1. Inside the templates/ folder, create a base.html file:
    html
    <!DOCTYPE html>
<html>
<head>
    <title>{{ title }}</title>
</head>
<body>
    <header>
        <h1>My Static Blog</h1>
    </header>
    <main>
        {% block content %}{% endblock %}
    </main>
    <footer>
        <p>&copy; 2023 My Static Blog</p>
    </footer>
</body>
</html>

    Run HTML

  2. Create a post.html file for individual blog posts:
    html
    {% extends "base.html" %}

{% block content %}
    <article>
        <h2>{{ post.title }}</h2>
        <p>By {{ post.author }} on {{ post.date }}</p>
        {{ post.content | safe }}
    </article>
{% endblock %}

    Run HTML

  3. Create an index.html file for the homepage:
    html
    {% extends "base.html" %}

{% block content %}
    <h2>Blog Posts</h2>
    <ul>
        {% for post in posts %}
            <li>
                <a href="{{ post.filename }}">{{ post.title }}</a>
                <p>By {{ post.author }} on {{ post.date }}</p>
            </li>
        {% endfor %}
    </ul>
{% endblock %}

    Run HTML

Step 5: Write the Generator Script

Create a generate.py file:

python
import os
import markdown
from jinja2 import Environment, FileSystemLoader

# Define paths
CONTENT_DIR = "content"
TEMPLATES_DIR = "templates"
OUTPUT_DIR = "output"

# Create output directory if it doesn't exist
os.makedirs(OUTPUT_DIR, exist_ok=True)

# Load templates
env = Environment(loader=FileSystemLoader(TEMPLATES_DIR))
index_template = env.get_template("index.html")
post_template = env.get_template("post.html")

# Parse Markdown files
posts = []
for filename in os.listdir(CONTENT_DIR):
    if filename.endswith(".md"):
        with open(os.path.join(CONTENT_DIR, filename), "r") as file:
            content = file.read()
            metadata, markdown_content = content.split("\n\n", 1)
            metadata = dict(line.split(": ") for line in metadata.split("\n"))
            html_content = markdown.markdown(markdown_content)
            post = {
                "title": metadata["title"],
                "date": metadata["date"],
                "author": metadata["author"],
                "content": html_content,
                "filename": f"{os.path.splitext(filename)[0]}.html",
            }
            posts.append(post)

# Sort posts by date (newest first)
posts.sort(key=lambda x: x["date"], reverse=True)

# Generate individual post pages
for post in posts:
    with open(os.path.join(OUTPUT_DIR, post["filename"]), "w") as file:
        file.write(post_template.render(post=post))

# Generate index page
with open(os.path.join(OUTPUT_DIR, "index.html"), "w") as file:
    file.write(index_template.render(posts=posts))

print("Blog generated successfully!")

Step 6: Generate the Blog

Run the generator script:

bash
python generate.py

This will create static HTML files in the output/ folder:

Copy
output/
├── first-post.html
├── second-post.html
└── index.html

Step 7: View Your Blog

  1. Open the output/index.html file in your browser to see the homepage.
  2. Click on the links to view individual blog posts.

Step 8: Deploy Your Blog

You can deploy the output/ folder to any static hosting service:

  • GitHub Pages: Push the output/ folder to a GitHub repository and enable GitHub Pages.
  • Netlify: Drag and drop the output/ folder into Netlify.
  • Vercel: Use the Vercel CLI to deploy the output/ folder.

Published by howdy