Install Fastapi
https://github.com/tiangolo/fastapi
pip install fastapi
C:\fastAPI\simplewebsite>pip install fastapi
C:\fastAPI\simplewebsite>pip install "uvicorn[standard]"
Install sqlalchemy jinja2
pip install python-multipart sqlalchemy jinja2
C:\fastAPI\simplewebsite>pip install python-multipart sqlalchemy jinja2
Create main.py
simplewebsite/main.py
simplewebsite/main.py
#simplewebsite/main.py
from fastapi import FastAPI, Request
from starlette.templating import Jinja2Templates
from fastapi.staticfiles import StaticFiles
templates = Jinja2Templates(directory="templates")
app = FastAPI()
app.mount("/static",StaticFiles(directory="static",html=True),name="static")
@app.get("/")
def home(request: Request):
return templates.TemplateResponse("index.html", {"request": request})
@app.get("/about")
def about(request: Request):
return templates.TemplateResponse("about.html", {"request": request})
@app.get("/contact")
def contact(request: Request):
return templates.TemplateResponse("contact.html", {"request": request})
download bootstrap template https://startbootstrap.com/template/modern-business simplewebsite/templates/base.html
//simplewebsite/templates/base.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="{{ url_for('static', path='/css/styles.css')}}"/>
<!-- Bootstrap icons-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" rel="stylesheet" />
<title>{% block title %} My Webpage {% endblock %}</title>
</head>
<body class="d-flex flex-column h-100">
<main class="flex-shrink-0">
{% include "nav.html" %}
{% block content %}{% endblock %}
</main>
{% include "footer.html" %}
<!-- Bootstrap core JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- Core theme JS-->
<script src="{{ url_for('static', path='/js/scripts.js')}}"></script>
</body>
</html>
simplewebsite/templates/index.html
//simplewebsite/templates/index.html
{% extends "base.html" %}
{% block title %}Home Page{% endblock %}
{% block content %}
Index.html Home page
{% endblock %}
simplewebsite/templates/nav.html
//simplewebsite/templates/nav.html
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container px-5">
<a class="navbar-brand" href="/">Start Bootstrap</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link" href="/">Home</a></li>
<li class="nav-item"><a class="nav-link" href="/about">About</a></li>
<li class="nav-item"><a class="nav-link" href="/contact">Contact</a></li>
<li class="nav-item"><a class="nav-link" href="pricing.html">Pricing</a></li>
<li class="nav-item"><a class="nav-link" href="faq.html">FAQ</a></li>
</ul>
</div>
</div>
</nav>
simplewebsite/templates/footer.html
//simplewebsite/templates/footer.html
<footer class="bg-dark py-4 mt-auto">
<div class="container px-5">
<div class="row align-items-center justify-content-between flex-column flex-sm-row">
<div class="col-auto"><div class="small m-0 text-white">Copyright © Your Website 2022</div></div>
<div class="col-auto">
<a class="link-light small" href="#!">Privacy</a>
<span class="text-white mx-1">·</span>
<a class="link-light small" href="#!">Terms</a>
<span class="text-white mx-1">·</span>
<a class="link-light small" href="#!">Contact</a>
</div>
</div>
</div>
</footer>
simplewebsite/templates/about.html
//simplewebsite/templates/about.html
{% extends "base.html" %}
{% block title %}About Page{% endblock %}
{% block content %}
About Page
{% endblock %}
simplewebsite/templates/contact.html
//simplewebsite/templates/contact.html
{% extends "base.html" %}
{% block title %}Contact Page{% endblock %}
{% block content %}
Contact Page
{% endblock %}
run the FastAPI app C:\fastAPI\simplewebsite>uvicorn main:app --reload
with uvicorn using the file_name:app_instance
open the link on the browser http://127.0.0.1:8000/
http://127.0.0.1:8000/docs
