I have been working to fix it for a week but still not find the solution I've tried all of the solutions but can't work
my project is fine at local, but when deployed is not like my expect
I have run collectstatic on Heroku but still not work
the result is like this my heroku app
my settings.py
import os
# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
TEMPLATES_DIRS = os.path.join(BASE_DIR,'templates')
STATIC_DIR = os.path.join(BASE_DIR,'static')
#STATICFILES_STORAGE = 'whitenoise.django.GzipManifestStaticFilesStorage'
# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/1.11/howto/deployment/checklist/
# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = '=i(73nmd3&e&m)&@ivj)av4!yrrcle45t#eoegug-4dn4%m^ba'
# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = False
ALLOWED_HOSTS = ['*']
# Application definition
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'portfolio_app',
]
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',
'whitenoise.middleware.WhiteNoiseMiddleware',
]
ROOT_URLCONF = 'portfolio.urls'
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [TEMPLATES_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 = 'portfolio.wsgi.application'
# Database
# https://docs.djangoproject.com/en/1.11/ref/settings/#databases
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.sqlite3',
'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
}
}
# add this
import dj_database_url
db_from_env = dj_database_url.config()
DATABASES['default'].update(db_from_env)
# Password validation
# https://docs.djangoproject.com/en/1.11/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/1.11/topics/i18n/
LANGUAGE_CODE = 'en-us'
TIME_ZONE = 'UTC'
USE_I18N = True
USE_L10N = True
USE_TZ = True
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.11/howto/static-files/
STATIC_URL = '/static/'
STATICFILES_DIRS = [
STATIC_DIR,
]
STATIC_ROOT = os.path.join(BASE_DIR, 'app/staticfiles')
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
my wsgi.py
import os
from django.core.wsgi import get_wsgi_application
from whitenoise.django import DjangoWhiteNoise
os.environ.setdefault("DJANGO_SETTINGS_MODULE", "portfolio.settings")
application = get_wsgi_application()
application = DjangoWhiteNoise(application)
my index.html
<!DOCTYPE html>
{% load staticfiles %}
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1, maximum-scale=1" />
<title>Diki's Portfolio</title>
<script src="{% static "bower_components/jquery/dist/jquery.min.js" %}" charset="utf-8"></script>
<link rel="stylesheet" href="{% static "bower_components/foundation-sites/dist/css/foundation.min.css" %}">
<script src="{% static "bower_components/foundation-sites/dist/js/foundation.min.js" %}" charset="utf-8"></script>
<script src="{% static "bower_components/normalize-css/normalize.css" %}" charset="utf-8"></script>
<script src="{% static "bower_components/typed.js/dist/typed.min.js"%}" charset="utf-8"></script>
<script src="{% static "bower_components/jqcloud2/dist/jqcloud.min.js"%}" charset="utf-8"></script>
<link rel="stylesheet" href="{% static "bower_components/jqcloud2/dist/jqcloud.min.css" %}">
<script src="{% static "bower_components/custombox/dist/custombox.min.js" %}"></script>
<link href="{% static "bower_components/custombox/dist/custombox.min.css" %}" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Maven+Pro:400,500" rel="stylesheet">
<link rel="stylesheet" href="{% static "fonts/foundation-icons/foundation-icons.css" %}">
<link rel="stylesheet" href="{% static "styles/styles.css" %}">
</head>
<body>
<div class="wrapper">
<div class="thin-bar">
</div>
<section id="about">
<div class="row">
<div class="small-12 large-8 large-offset-2 columns text-center">
<img class="img-circle" src="{% static "images/diki.jpg" %}" alt="headshot">
<div class="details">
<h2>Hi, I'm Diki. I...<br> <span id="writing-text"><span></h2>
</div>
</div>
</div>
<div class="row">
<div class="small-12 column">
<div class="cta text-center">
<a class="my-button cta-button expand form-button" href="mailto:dikimuhamadsyidik14@hotmail.com">Get In Touch</a>
</div>
</div>
<div class="small-12 column">
<div class="my-arrow-div text-center">
<a href="https://github.com/dikimsyidik"><i class="fa fa-github-alt fa-2x"></i></a>
</div>
</div>
</div>
</section>
<section id="experience">
<div class="row column">
<div class="small-12">
<h2 class="text-center">My Experience</h2>
<p class="text-center tag-line">Specialist in need. Generalist at heart.</p>
</div>
</div>
<div class="row">
<div class="small-12 medium-4 columns text-center experience-topics">
<i class="fi-laptop"></i>
<h3>Front-end</h3>
<ul>
<li>html(5)</li>
<li>css(3)</li>
<li>Javascript</li>
<li>Jquery</li>
<li>Bootstrap</li>
<li>Semantics-UI</li>
</ul>
</div>
<div class="small-12 medium-4 columns text-center experience-topics">
<i class="fi-database"></i>
<h3>Back-end</h3>
<ul>
<li>SQL</li>
<li>Restful Web Services</li>
<li>Flask | Python</li>
</ul>
</div>
<div class="small-12 medium-4 columns text-center experience-topics">
<i class="fi-star"></i>
<h3>Tools</h3>
<ul>
<li>Django</li>
<li>Bower</li>
<li>Atom</li>
<li>Github</li>
</ul>
</div>
</div>
</section>
<section id="work">
<h2 class="text-center">Work</h2>
<div class="row">
<p class="text-center tag-line">Here are few of my former clients.</p>
</div>
<div class="row work-row"> <!-- odd -->
<div class="small-12 medium-6 medium-push-6 columns">
<img src="{% static "images/hunter-cole-portfolio-image.png" %}" alt="">
</div>
<div class="small-12 medium-5 medium-pull-7 columns">
<div class="details details-ftm">
<h3>Hunter Cole</h3>
<p class="platform">Web</p>
<p class="icons"><i class="fi-monitor"></i><i class="fi-tablet-portrait"></i><i class="fi-mobile"></i></p>
<p>An internationally recognized Scientist and Artist from Loyola University of Chicago.</p>
<a class="my-button" target="_blank" href="http://huntercole.org">Visit Website</a>
</div>
</div>
</div>
<div class="row work-row"> <!-- even -->
<div class="small-12 medium-6 columns">
<img src="{% static "images/ftm-site.png" %}" alt="">
</div>
<div class="small-12 medium-5 medium-offset-1 columns">
<div class="details details-ftm">
<h3>FreshTechMaids</h3>
<p class="platform">Web</p>
<p class="icons"><i class="fi-monitor"></i><i class="fi-tablet-portrait"></i><i class="fi-mobile"></i></p>
<p>FreshTechMaids is a house maid service company.</p>
<a class="my-button" target="_blank" href="http://www.freshtechmaids.com">Visit Website</a>
</div>
</div>
</div>
<div class="row work-row"> <!-- odd -->
<div class="small-12 medium-6 medium-push-6 columns">
<img src="{% static "images/sykora-kitchens.png" %}" alt="">
</div>
<div class="small-12 medium-5 medium-pull-7 columns">
<div class="details details-ftm">
<h3>Sykora Kitchens</h3>
<p class="platform">Web</p>
<p class="icons"><i class="fi-monitor"></i><i class="fi-tablet-portrait"></i><i class="fi-mobile"></i></p>
<p>A European kitchens and cabinets manufacturer.</p>
<a class="my-button" target="_blank" href="http://www.sykorakitchens.com">Visit Website</a>
</div>
</div>
</div>
</section>
<section id="teaching">
<h2 class="text-center">Teaching</h2>
<div class="row">
<div class="small-12 medium-8 medium-offset-2">
<p class="text-center tag-line">Here are some of the domains I've helped people with...</p>
</div>
</div>
<div class="row">
<div class="small-12 medium-8 medium-offset-2 columns">
<div class="teaching-domains">
</div>
</div>
</div>
</section>
<section id="footer-cta">
<h2 class="text-center">Wanna work with me?</h2>
<p></p>
<div class="row text-center">
<div class="small-12 medium-8 medium-offset-2 columns">
<p class="text-center">I'm currently available for work.</p>
</div>
<div class="small-12 columns" id="startButtonDiv">
<a class="my-button form-button" href="mailto:dikimuhamadsyidik14@hotmail.com.com">Start Now</a>
</div>
</div>
</section>
<footer id="footer">
<div class="row text-center">
<div class="small-12 medium-6 medium-offset-3 columns">
<p id="logo">DMS</p>
<p id="copyright">Copyright © 2018 | Diki Muhamad Syidik</p>
</div>
</div>
</footer>
</div>
<script src="{% static "scripts/app.js" %}" charset="utf-8"></script>
</body>
</html>
