I have followed the setup procedures here https://www.digitalocean.com/community/tutorials/how-to-set-up-django-with-postgres-nginx-and-gunicorn-on-ubuntu-22-04 and my Django app is running but whenever I turn debug = False it will not load my static files.
Below is my nginx configuration:
server {
listen 80;
server_name server_domain_or_IP;
location = /favicon.ico { access_log off; log_not_found off; }
location /static/ {
root /home/sammy/myprojectdir;
}
location / {
include proxy_params;
proxy_pass http://unix:/run/gunicorn.sock;
}
}
and my settings.py:
STATIC_URL = 'static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'my_site/static')]
I have tried my best, researched a lot online, and followed many links but still fruitless.
In /etc/nginx/sites-available/etal-project, I have:
server {
server_name 68.183.101.227 etal.ac www.etal.ac;
location = /favicon.ico { access_log off; log_not_found off; }
location /static/ {
alias /home/yustaoab/pyapps/etal-project/static/;
}
location media/ {
root /home/yustaoab/pyapps/etal-project;
}
location / {
include proxy_params;
proxy_pass http://unix:/run/gunicorn.sock;
}
In my base html:
{% load static %}
{% load humanize %}
<!doctype html>
<html lang="en" dir="ltr">
<head>
<!-- Meta data -->
<meta charset="UTF-8">
<meta content="" name="">
<meta content="" name="author">
<meta name="keywords" content=""/>
<link rel="icon" type="image/x-icon" href="{% static 'img/logo.ico' %}" />
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'css/all.css' %}">
<link rel="stylesheet" href="{% static 'css/morris.css' %}">
<link rel="stylesheet" href="{% static 'css/style.css' %}">
<link rel="stylesheet" href="{% static 'css/dark-style.css' %}">
<link rel="stylesheet" href="{% static 'css/color-styles.css' %}">
<link rel="stylesheet" href="{% static 'css/skin-modes.css' %}">
<link rel="stylesheet" href="{% static 'css/p-scroll.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'css/p-scroll.css' %}">
<link rel="stylesheet" href="{% static 'css/sidemenu-closed.css' %}">
<link rel="stylesheet" href="{% static 'css/jquery-jvectormap-2.0.2.css' %}">
<link rel="stylesheet" href="{% static 'css/plugin.css' %}">
<link rel="stylesheet" href="{% static 'css/sidebar.css' %}">
<link rel="stylesheet" href="{% static 'css/sidebar-old.css' %}">
<link rel="stylesheet" href="{% static 'css/sidebar2.css' %}">
<link rel="stylesheet" href="{% static 'css/side-bar.css' %}">
<link rel="stylesheet" href="{% static 'css/sidemenu-responsive-tabs.css' %}">
<link id="theme" rel="stylesheet" type="text/css" media="all" href="{% static 'css/color15.css">
<link rel="stylesheet" href="{% static 'css/demo.css' %}">
<link rel="stylesheet" href="{% static 'css/mine.css' %}">
<link rel="stylesheet" href="{% static 'css/a.css' %}">
<link rel="stylesheet" href="{% static 'css/accordion.css' %}">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
{% block title %}
{% endblock title %}
</head>
<body class="app sidebar-mini">
{{ form.media }}
<!-- Global Loader-->
<div class="page">
<div class="page-main">
<!-- Navbar-->
<header class="app-header header">
<!-- Navbar Right Menu-->
<div class="container-fluid">
<div class="d-flex">
<a class="header-brand">
<a href="{% url 'index' %}"><img src="" class="logo2" alt="Logo"> <strong class="text-dark-green"></strong></a>
</a>
{% if user.is_authenticated %}
<!-- Sidebar toggle button-->
<div class="d-flex order-lg-2 ml-auto">
<div class="dropdown d-sm-flex d-none header-message">
<a class="nav-link icon" href="{% url 'collab' %}">
<strong class="text-black">Collab</strong>
</a>
</div>
<div class="dropdown d-sm-flex d-none header-message">
<a class="nav-link icon" data-toggle="dropdown">
<strong class="text-black">Discover</strong>
</a>
</div>
<div class="dropdown d-sm-flex d-none header-message">
<a class="nav-link icon" data-toggle="dropdown">
<strong class="text-black">Community</strong>
</a>
</div>
<div class="dropdown d-sm-flex d-none header-message">
<a class="nav-link icon" href="{% url 'envelope_notification' %}">
<i class="fa fa-envelope text-info fa-2x"></i>
{% if user.envelope_unreads > 0 %}
<span class=" nav-unread badge badge-danger badge-pill">{{user.envelope_unreads}}</span>
{% else %}
{% endif %}
</a>
</div>
<div class="dropdown d-sm-flex d-none header-message">
<a class="nav-link icon" href="{% url 'bell_notification' %}">
<i class="fa fa-bell text-info fa-2x"></i>
{% if user.bell_unreads > 0 %}
<span class=" nav-unread badge badge-danger badge-pill">{{user.bell_unreads}}</span>
{% else %}
{% endif %}
</a>
</div>
<div class="dropdown d-sm-flex d-none header-message">
<a class="nav-link icon" href="{% url 'researcher_profile' %}">
{% if user.photograph %}
<img src="{{ user.photographURL }}" alt="Photograph" class="profile-small">
{% else %}
<i class="fa fa-user-circle text-info fa-2x"></i>
{% endif %}
</a>
</div>
<button class="navbar-toggler navresponsive-toggler d-sm-none" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-4"
aria-controls="navbarSupportedContent-4" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon fa fa-th-list text-white"></span>
</button>
<!--Navbar -->
</div>
{% else %}
<!-- Sidebar toggle button-->
<div class="d-flex order-lg-2 ml-auto">
<div class="dropdown d-sm-flex d-none header-message">
<a class="btn fw-500 ms-lg-4" href="{% url 'join' %}">
<strong class="text-dark">Join</strong>
</a>
</div>
<div class="dropdown d-sm-flex d-none header-message">
<a class="btn fw-500 ms-lg-4 btn-outline-info" href="{% url 'login' %}">
<strong>Login</strong>
</a>
</div>
<button class="navbar-toggler navresponsive-toggler d-sm-none" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-4"
aria-controls="navbarSupportedContent-4" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon fa fa-th-list text-white"></span>
</button>
<!--Navbar -->
</div>
{% endif %}
</div>
</div>
</header>
<div class="mb-1 navbar navbar-expand-lg responsive-navbar navbar-dark d-sm-none bg-white">
<div class="collapse navbar-collapse" id="navbarSupportedContent-4">
<br>
<br>
{% if user.is_authenticated %}
<div class="d-flex order-lg-2 ml-auto">
<div class="dropdown d-md-flex header-contact">
<a class="nav-link icon" href="{% url 'collabs' %}">
<strong class="text-black">Collab</strong>
</a>
</div>
<div class="dropdown d-md-flex header-message">
<a class="nav-link icon" data-toggle="dropdown">
<strong class="text-black">Discover</strong>
</a>
</div>
<div class="dropdown d-md-flex header-message">
<a class="nav-link icon" data-toggle="dropdown">
<strong class="text-black">Community</strong>
</a>
</div>
<div class="dropdown d-md-flex header-contact">
<a class="nav-link icon" href="{% url 'envelope_notification' %}">
<i class="fa fa-envelope text-info fa-2x"></i>
{% if user.envelope_unreads > 0 %}
<span class="nav-unread badge badge-danger badge-pill">{{user.envelope_unreads}}</span>
{% else %}
{% endif %}
</a>
</div>
<div class="dropdown d-sm-flex d-none header-message">
<a class="nav-link icon" href="{% url 'bell_notification' %}">
<i class="fa fa-bell text-info fa-2x"></i>
{% if user.bell_unreads > 0 %}
<span class=" nav-unread badge badge-danger badge-pill">{{user.bell_unreads}}</span>
{% else %}
{% endif %}
</a>
</div>
<div class="dropdown d-md-flex header-message">
<a class="nav-link icon" href="">
{% if user.photograph %}
<img src="{{ user.photographURL }}" alt="Photograph" class="profile-small">
{% else %}
<i class="fa fa-user-circle text-info fa-4x"></i>
{% endif %}
</a>
</div>
</div>
{% else %}
<div class="d-flex order-lg-2 ml-auto">
<div class="dropdown d-sm-flex d-none header-message">
<a class="btn fw-500 ms-lg-4" href="{% url 'join' %}">
<strong class="text-dark">Join</strong>
</a>
</div>
<div class="dropdown d-sm-flex d-none header-message">
<a class="btn fw-500 ms-lg-4 btn-outline-info" href="{% url 'login' %}">
<strong>Login</strong>
</a>
</div>
</div>
{% endif %}
</div>
</div>
<!--/.Navbar -->
{% if 'login' in request.path or 'create-account' in request.path or 'reset-password' in request.path or '/join' in request.path %}
{% elif user.is_authenticated %}
<!-- Sidebar menu-->
<div class="app-sidebar__overlay" data-toggle="sidebar"></div>
<aside class="app-sidebar bg-white">
<ul class="side-menu">
<br>
<li class="slide bg-info">
<a class="side-menu__item bg-info" data-toggle="slide" href="{% url 'researcher_profile' %}"><i class="fas fa-user fa-1x mr-1"></i><span class="side-menu__label">Profile</span></a>
</li>
<li class="slide bg-info">
<a class="side-menu__item bg-info" data-toggle="slide" href="{% url 'researcher_board' %}"><i class="fas fa-chalkboard-teacher fa-1x mr-1"></i></i><span class="side-menu__label">Dashboard</span></a>
</li>
<li class="slide bg-info">
<a class="side-menu__item bg-info" data-toggle="slide" href="{% url 'collabs' %}"><i class="fa fa-comments fa-1x mr-1"></i></i><span class="side-menu__label">Collabs</span></a>
</li>
<li class="slide bg-info">
<a class="side-menu__item bg-info" data-toggle="slide" href="{% url 'initiated_collabs' %}"><i class="fas fa-american-sign-language-interpreting fa-1x mr-1"></i></i><span class="side-menu__label">Initiated Collabs</span></a>
</li>
<li class="slide bg-info">
<a class="side-menu__item bg-info" data-toggle="slide" href="{% url 'accepted_collabs' %}"><i class="fas fa-handshake fa-1x mr-1"></i></i><span class="side-menu__label">Accepted Collabs</span></a>
</li>
<li class="slide bg-info">
<a class="side-menu__item bg-info" data-toggle="slide" href=""><i class="fas fa-check-circle fa-1x mr-1"></i></i><span class="side-menu__label">Concluded Collabs</span></a>
</li>
<li class="slide bg-info">
<a class="side-menu__item bg-info" data-toggle="slide" href=""><i class="fas fa-tools fa-1x mr-1"></i></i><span class="side-menu__label">Collab Tools</span></a>
</li>
<li class="slide bg-info">
<a class="side-menu__item bg-info" data-toggle="slide" href=""><i class="fas fa-copy fa-1x mr-1"></i><span class="side-menu__label">Templates</span></a>
</li>
<li class="slide bg-info">
<a class="side-menu__item bg-info" data-toggle="slide" href="{% url 'logout' %}"><i class="fa fa-sign-out-alt fa-1x mr-1"></i><span class="side-menu__label">Sign out</span></a>
</li>
</ul>
</aside>
<!--side-menu-->
{% else %}
{% endif %}
{% block content %}
{% endblock content %}
<!--footer-->
<footer class="footer">
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-8">
<div class="text-dark">Copyright © <strong class="text-info">Et al.</strong> <span class="year"></span></div>
</div>
<div class="col-md-2">
</div>
</div>
</div>
</footer>
<!-- End Footer-->
</div>
</div>
</div>
<a href="#top" id="back-to-top"><i class="fas fa-angle-up "></i></a>
<script src="{% static 'js/jquery.js' %}"></script>
<script src="{% static 'js/jquery.sparkline.min.js' %}"></script>
<script src="{% static 'js/jquery.sparkline.min0.js' %}"></script>
<script src="{% static 'js/selectize.min.js' %}"></script>
<script src="{% static 'js/jquery.tablesorter.min.js' %}"></script>
<script src="{% static 'js/circle-progress.min.js' %}"></script>
<script src="{% static 'js/jquery.rating-stars.js' %}"></script>
<script src="{% static 'js/popper.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<script src="{% static 'js/sidemenu.js' %}"></script>
<script src="{% static 'js/sidemenu-responsive-tabs.js' %}"></script>
<script src="{% static 'js/left-menu.js' %}"></script>
<script src="{% static 'js/p-scroll.js' %}"></script>
<script src="{% static 'js/p-scroll-1.js' %}"></script>
<script src="{% static 'js/jquery.mask.min.js' %}"></script>
<script src="{% static 'js/jquery.peity.min.js' %}"></script>
<script src="{% static 'js/jquery.knob.js' %}"></script>
<script src="{% static 'js/othercharts.js' %}"></script>
<script src="{% static 'js/apexcharts.js' %}"></script>
<script src="{% static 'js/chart.bundle.js' %}"></script>
<script src="{% static 'js/jquery-jvectormap-2.0.2.min.js' %}"></script>
<script src="{% static 'js/jquery-jvectormap-world-mill-en.js' %}"></script>
<script src="{% static 'js/gdp-data.js' %}"></script>
<script src="{% static 'js/jquery-jvectormap-us-aea-en.js' %}"></script>
<script src="{% static 'js/jquery-jvectormap-uk-mill-en.js' %}"></script>
<script src="{% static 'js/jquery-jvectormap-au-mill.js' %}"></script>
<script src="{% static 'js/jquery-jvectormap-ca-lcc.js' %}"></script>
<script src="{% static 'js/jvectormap.js' %}"></script>
<script src="{% static 'js/counterup.min.js' %}"></script>
<script src="{% static 'js/waypoints.min.js' %}"></script>
<script src="{% static 'js/sidebar.js' %}"></script>
<script src="{% static 'js/index5.js' %}"></script>
<script src="{% static 'js/custom.js' %}"></script>
<script src="{% static 'js/scripts.js' %}"></script>
<script src="{% static 'js/select2.js' %}"></script>
<script src="{% static 'js/chart.js/jquery-1.6.3.min.js' %}"></script>
<script src="{% static 'js/chart.js/jquery-1.9.1.min.js' %}"></script>
<script src="{% static 'js/horizontal-menu.js' %}"></script>
<script src="{% static 'js/sticky.js' %}"></script>
<script src="{% static 'js/chart.min.js' %}"></script>
<script src="{% static 'js/chart.extension.js' %}"></script>
<script src="{% static 'js/morris.min.js' %}"></script>
<script src="{% static 'js/raphael.min.js' %}"></script>
<script src="{% static 'js/index4.js' %}"></script>
<script src="{% static 'js/accordion.js' %}"></script>
<script src="{% static 'js/accordion.min.js' %}"></script>
<script src="{% static 'js/accordion-Wizard-Form.js' %}"></script>
<script src="{% static 'js/wizard.js' %}"></script>
<script src="{% static 'js/reconnecting-websocket.js' %}"></script>
<script data-search-pseudo-elements defer src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/js/all.min.js" crossorigin="anonymous"></script>
</body>
</html>
The site is https://etal.ac