Skip to content

Instantly share code, notes, and snippets.

@TheMuellenator

TheMuellenator/index.html

Forked from angelabauer/index.html
Last active September 3, 2025 23:09
Show Gist options
  • Save TheMuellenator/7c6a08a3df3b94a28d1a867628481910 to your computer and use it in GitHub Desktop.
Save TheMuellenator/7c6a08a3df3b94a28d1a867628481910 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://fonts.googleapis.com/css2?family=Raleway" rel="stylesheet">
<link rel="stylesheet" href="../static/css/styles.css">
</head>
<body>
<div class="wrapper">
<div class="top">
<div class="title"><h1>My Blog</h1></div>
</div>
{% for post in all_posts: %}
<div class="content">
<div class="card ">
<h2>{‌{ post.title }}</h2>
<p>{‌{ post.subtitle }}</p>
<a href="{‌{ url_for('show_post', index=post.id) }}">Read</a>
</div>
</div>
{% endfor %}
</div>
</body>
<footer>
<p>Made with ♥️ in London.</p>
</footer>
</html>
Raw
main.py
from flask import Flask, render_template
from post import Post
import requests
posts = requests.get("https://api.npoint.io/c790b4d5cab58020d391").json()
post_objects = []
for post in posts:
post_obj = Post(post["id"], post["title"], post["subtitle"], post["body"])
post_objects.append(post_obj)
app = Flask(__name__)
@app.route('/')
def get_all_posts():
return render_template("index.html", all_posts=post_objects)
@app.route("/post/<int:index>")
def show_post(index):
requested_post = None
for blog_post in post_objects:
if blog_post.id == index:
requested_post = blog_post
return render_template("post.html", post=requested_post)
if __name__ == "__main__":
app.run(debug=True)
Raw
post.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://fonts.googleapis.com/css2?family=Raleway" rel="stylesheet">
<link rel="stylesheet" href="../static/css/styles.css">
</head>
<body>
<div class="wrapper">
<div class="top">
<div class="title"><h1>My Blog</h1></div>
</div>
<div class="content">
<div class="card">
<h1> {‌{ post.title }}</h1>
<h2> {‌{ post.subtitle }}</h2>
<p> {‌{ post.body }}</p>
</div>
</div>
</div>
</body>
<footer>
<p>Made with ♥️ in London.</p>
</footer>
</html>
Raw
post.py
class Post:
def __init__(self, post_id, title, subtitle, body):
self.id = post_id
self.title = title
self.subtitle = subtitle
self.body = body
@ShyamSamant
Copy link

I don't know why and how but i am losing the css style sheet effects once entering the individual post website, is this only my problem or other's are also face same issue

@Yatincode
Copy link

Yatincode commented Jun 22, 2025 •
edited
Loading

MY CODE

main.py:

from flask import Flask, render_template
import requests

app = Flask(__name__)

def data():
    blog_url = "https://api.npoint.io/8cefde3bad80ae6e10e8"
    all_posts = requests.get(blog_url).json()
    return all_posts
@app.route('/')
def home():
    all_posts = data()
    return render_template("index.html" , posts=all_posts)

@app.route("/post/<int:post_id>")
def view_post(post_id):
    all_posts=data()
    return render_template("post.html" , post=all_posts[post_id - 1])

if __name__ == "__main__":
    app.run(debug=True)

index.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://fonts.googleapis.com/css2?family=Raleway" rel="stylesheet">
    <link rel="stylesheet" href="../static/css/styles.css">
</head>
<body>
<div class="wrapper">
    <div class="top">
        <div class="title"><h1>My Blog</h1></div>
    </div>
    {%for post in range(posts | length ) %}
        <div class="content">
            <div class="card">
                    <h2>{{posts[post]["title"]}}</h2>
                    <p class="text">{{posts[post]["subtitle"]}}</p>
                    <a href="{{ url_for('view_post' , post_id=posts[post]['id'])}}">Read</a>
            </div>
        </div>
    {% endfor %}
        
    <!-- <div class="content">
        <div class="card">
            <h2>Another blog post</h2>
            <p class="text">Lorem ipsum dolor sit </p>
            <a href="#">Read</a>
        </div>
    </div> -->
</div>
</body>
<footer>
    <p>Made with ♥️ in London.</p>
</footer>
</html>

post.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://fonts.googleapis.com/css2?family=Raleway" rel="stylesheet">
    <link rel="stylesheet" href="../static/css/styles.css">
</head>
<body>
<div class="wrapper">
    <div class="top">
        <div class="title"><h1></h1></div>
           </div>
        <div class="content">
            <div class="card">
                <h2>{{post["title"]}}</h2>
                <h3>{{post["subtitle"]}}</h3>
                <p>{{post["body"]}}</p>
            </div>

    </div>
</div>
</body>
<footer>
    <p>Made with ♥️ in London.</p>
</footer>
</html>

ALSO YOU CAN USE MY API TO GET 100 blog postss to test just for fun:)))

@Hassenebrahim
Copy link

here is what i found by trial and error, all of my html code was commented, and there was a jinja code in it. so even if the entire file is commented, jinja will still excute any codes in the curly braces. so you have to comment that aswell , like {#...#} so in addition to the html commenting, add this one to, other wise it will throw error in your server.

@dvelkakov
Copy link

main.py

from flask import Flask, render_template
from posts import Posts


app = Flask(__name__)
posts = Posts()


@app.route('/')
def home():
    all_posts = posts.get_all_post()
    return render_template("index.html", posts=all_posts)


@app.route("/post/<int:post_id>")
def read_post(post_id):
    post = posts.get_post(post_id)
    return render_template("post.html", post=post)




if __name__ == "__main__":
    app.run(debug=True)

posts.py

import requests

URL = "https://api.npoint.io/c790b4d5cab58020d391"


class Posts:
    def __init__(self):
        response = requests.get(URL)
        self.all_posts = response.json()

    def get_all_post(self):
        return self.all_posts

    def get_post(self, post_id):
        for post in self.all_posts:
            if post["id"] == post_id:
                return post
        return None

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Blog</title>
    <link href="https://fonts.googleapis.com/css2?family=Raleway" rel="stylesheet">
    <link rel="stylesheet" href="../static/css/styles.css">
</head>
<body>
<div class="wrapper">
    <div class="top">
        <div class="title"><h1>My Blog</h1></div>
    </div>
    {% for post in posts %}
    <div class="content">
        <div class="card">
            <h2>{{ post["title"] }}</h2>
            <p class="text">{{ post["subtitle"] }} </p>
            <a href="{{ url_for('read_post', post_id=post['id']) }}">Read</a>
        </div>
    </div>
    {% endfor %}
</div>
</body>
<footer>
    <p>Made with ♥️ in London.</p>
</footer>
</html>

post.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Blog</title>
    <link href="https://fonts.googleapis.com/css2?family=Raleway" rel="stylesheet">
    <link rel="stylesheet" href="../static/css/styles.css">
</head>
<body>
<div class="wrapper">
    <div class="top">
        <div class="title"><h1>My Blog</h1></div>
           </div>
        <div class="content">
            <div class="card">
                <h1>{{ post["title"] }}</h1>
                <h2>{{ post["subtitle"] }}</h2>
                <p>{{ post["body"] }}</p>
            </div>

    </div>
</div>
</body>
<footer>
    <p>Made with ♥️ in London.</p>
</footer>
</html>

@Gesifeta
Copy link

Gesifeta commented Jul 20, 2025 •
edited
Loading

here is how i did it with only single html template(index.html) and also added back link. I also used json to avoid breaking changes from the API call.
*server.py

from flask import Flask, render_template
import json
app = Flask(name)

with open("blog.json") as f:
posts = json.load(f)
@app.route('/')
def index():
return render_template('index.html',posts=posts)

@app.route('/post/int:id')
def get_post(id):
post = posts[id]
return render_template("index.html",posts=[post],id=id, len = len(post))

if name == 'main':
app.run(debug=True)

index.html

<title>Technology - the latest</title>

My Blog

{% for post in posts %}

{{ post['title'] }}

{{ post['summary'] }}

{% if len == 7: %}

{{ post['content'] }}

Back {% else %} Read {% endif %}
{% endfor %}

© {{ year }}. Made with ❤ in Shaggar.

@shivam-teli08
Copy link

here is how i did it that is working too .. i am just thinking to get something differnent approach

  1. index.html
Screenshot 2025-07-20 235848 2)main.py image 3)post.html image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment