I deployed my Django website on Vercel successfully, yet it is hosted without static files, mainly; the CSS file. Here is my files structure: 
And here is my form.html code:
<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form</title>
<link rel="stylesheet" href="{% static 'client/style.css'%}">
<style>
@media (max-width: 768px) {
.container {
width: 100%;
padding: 10px;
}
}
</style>
</head>
<body>
<div class="content">
<div class="container">
<div class="navinfo">
<nav class="navitems">
<ul>
<li class="ServiceAnass"><h3>ServiceAnass</h3></li>
</ul>
</nav>
</div>
<div class="title">
<h2>200dh Competition By Anass</h2>
</div>
<div class="form">
<div><h3>Fill in the information below</h3></div>
<div><form action="/submit" method="post">
<div >
<label class="firstname" for="firstname">Nom</label>
<input type="text" name="nom" id="firstname">
</div>
<div>
<label class="lastname" for="lastname">Prenom</label>
<input type="text" name="prenom" id="lastname">
</div>
<div>
<label class="ID" for="ID">ID</label>
<input type="number" name="nombre" id="number">
</div>
<div>
<label class="nwhatsapp" for="nwhatsapp">Numero Whatsapp</label>
<input type="number" name="nwhatsapp" id="nwhatsapp"></label>
</div>
<div class="screenshot-comb">
<label class="screenshot" for="screenshot">Screenshot</label>
<input type="file" name="screenshot" id="screenshot">
</div>
<div>
<input type="submit" name="submit" value="Submit" id="submit">
</div>
</form></div>
</div>
</div>
</div>
</body>
</html>This is the client/settings.py:
"""
Django settings for client project.
Generated by 'django-admin startproject' using Django 5.0.7.
For more information on this file, see
https://docs.djangoproject.com/en/5.0/topics/settings/
For the full list of settings and their values, see
https://docs.djangoproject.com/en/5.0/ref/settings/
"""
from pathlib import Path
import os
# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent
# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/5.0/howto/deployment/checklist/
# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = 'django-insecure-zqrlszaish$o+^8l#^k%iwyxc9t(j%o3r8c@wh4w%5dgq4$53x'
# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True
# api/settings.py
ALLOWED_HOSTS = ['127.0.0.1', '.vercel.app']
WSGI_APPLICATION = 'api.wsgi.app'
# Application definition
INSTALLED_APPS = [
'form',
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
]
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
ROOT_URLCONF = 'client.urls'
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
WSGI_APPLICATION = 'client.wsgi.application'
# Database
# https://docs.djangoproject.com/en/5.0/ref/settings/#databases
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.sqlite3',
'NAME': BASE_DIR / 'db.sqlite3',
}
}
# Password validation
# https://docs.djangoproject.com/en/5.0/ref/settings/#auth-password-validators
AUTH_PASSWORD_VALIDATORS = [
{
'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
},
]
# Internationalization
# https://docs.djangoproject.com/en/5.0/topics/i18n/
LANGUAGE_CODE = 'en-us'
TIME_ZONE = 'UTC'
USE_I18N = True
USE_TZ = True
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/5.0/howto/static-files/
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static'),
]
# Default primary key field type
# https://docs.djangoproject.com/en/5.0/ref/settings/#default-auto-field
DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'I tried using a ‘staticfiles’ DIR with all my static files and assigning it to my form.html, I run python3 manage collectstatic to make all my static file in one directory, but all of that didn’t work!
You need to sign in to view this answers
Leave feedback about this