105800 Views
82496 Views
47243 Views
47066 Views
45458 Views
38527 Views
Pi-Apps
Intermediate MicroPython
Arduino Alvik
Raspberry Pi Time machine
Now Ad-Free
Guiding Light
Intermediate level MicroPython
Introduction to FreeCAD for Beginners
Building a Robot Arm with Raspberry Pi and PCA9685
Building User Authentication for Static Sites with FastAPI
Mastering Pydantic for Robust Data Validation
Mastering Markdown for Documentation with Jekyll
KevsRobots Learning Platform
88% Percent Complete
By Kevin McAleer, 3 Minutes
Integrating a FastAPI backend with a Jekyll static site allows you to combine the speed and security of static content with the flexibility and power of dynamic content generation and user authentication.
The integration process involves:
First, ensure you have a secure endpoint that returns dynamic content. This content could be user-specific data or any content that changes based on the user’s state.
from fastapi import FastAPI, Depends app = FastAPI() @app.get("/dynamic/") def dynamic_content(current_user: models.User = Depends(get_current_user)): # Logic to return dynamic content return {"message": f"Hello, {current_user.username}! This content is dynamic."}
In your Jekyll site, you can use JavaScript to fetch the dynamic content from FastAPI. Here’s a simple example using the Fetch API:
<script> document.addEventListener("DOMContentLoaded", function() { fetch('http://localhost:8000/dynamic/', { method: 'GET', headers: { 'Authorization': `Bearer ${localStorage.getItem('token')}` } }) .then(response => response.json()) .then(data => { document.getElementById('dynamic-content').innerText = data.message; }) .catch(error => console.error('Error fetching dynamic content:', error)); }); </script> <div id="dynamic-content">Loading dynamic content...</div>
This script should be included in the relevant HTML file of your Jekyll site. It attempts to fetch dynamic content from the FastAPI server and displays it on the page. Make sure to replace http://localhost:8000/dynamic/ with the actual URL of your FastAPI application.
http://localhost:8000/dynamic/
You’ll need to manage user authentication tokens in the browser. Typically, this involves storing the JWT token in localStorage or sessionStorage after login and then including it in the authorization header of your API requests.
localStorage
sessionStorage
Integrating FastAPI with a Jekyll static site enables you to deliver dynamic, authenticated content alongside your static content, offering a richer user experience. This lesson covered creating a dynamic content endpoint in FastAPI and fetching this content from Jekyll, paving the way for a seamless integration.
Explore additional ways to enhance user interaction on your Jekyll site using dynamic content from FastAPI. Consider implementing a feature that displays content based on the user’s profile or preferences.
< Previous Next >