Skip to content

A dynamic content management system for publishing youtube videos and blog post in a single page web application.

License

Notifications You must be signed in to change notification settings

mahmudahsan/pythonbangla.com

Repository files navigation

Build django Bootstrap License Twitter: @mahmudahsan

pythonbangla.com

A dynamic content management system for publishing youtube videos and blog post in a single page web application. I developed this web app to place all my youtube video tutorials and related blog post links in one place.

Demo 1 🤓: Django + PostgreSQL + Heroku | Source Code: Github Django

Demo 2 😎: React + Firebase | Source Code: Github React

🔥 I developed a React and Firebase based similar project. Checkout the React based project's source code https://github.com/mahmudahsan/python-bangla-react

Usage

If you know django, postgresql, bootstrap you can easily modify html template and backend according to your project needs. But if you just want a site like the demo Pythonbangla.com you can change the images in static directory in the project, and add contents from your or your client's youtube channel or blog post. To know how to setup, follow the table of contents.

Other Python Projects

Table of Contents

Technology Used

  1. Django
  2. PostgreSQL
  3. Bootstrap
  4. JQuery
  5. Linkyfy

Features

  1. Responsive single page webapp
  2. Admin Panel for content management
  3. Automatic playlist created based on content
  4. Mainly developed for youtube videos
  5. Blog post or external link list also supported
  6. Youtube video description also can be added from admin panel
  7. In description, link automatically converted to hyperlink
  8. In Admin easy way to add javascript code within head tag
  9. Easy way to add Google Analytics or Google Adsense auto ads

Setup in local machine

Let assume our project name will be djangodemo

  1. First clone this project or fork and clone your fork url
git clone https://github.com/mahmudahsan/pythonbangla.com.git djangodemo
cd djangodemo # Enter the project dir
  1. Now run and install django by pipenv
pipenv install django
pipenv shell # Activate pipenv

Setup PostgreSQL in local machine

  1. Downlaod and install PostgreSQL
  2. Run the PostgreSQL in your machine
  3. Download pgAdmin if you prefer managing PostgreSQL visually
  4. Run pgAdmin to create database visually
  5. Or Create a database in PostgreSQL in terminal
  6. Update django frameworks's project settings djangodemo/pythonbangla_project/settings.py
DATABASES = {
    "default": {
        "ENGINE": "django.db.backends.postgresql",
        "NAME": "YOUR_LOCAL_DB_NAME",
        "USER": "YOUR_POSTGRESQL_USER_NAME",
        "PASSWORD": "YOUR_POSTGRESQL_PASSWORD",
        "HOST": "localhost", 
        "PORT": "5432", # usually this port unless your port is different
    }
}
  1. Apply database migration from django to postgresql This will convert all the models to SQL tables in postgresql
python3 manage.py migrate
  1. Start django server locally
python3 manage.py runserver
  1. Visit http://127.0.0.1:8000/ in a web browser. You will see the following blank webpage without any contents

demo 1

  1. Quit the server with CONTROL-C in terminal
CONTROL-C

How to use admin panel to manage contents

  1. First create a superuser
python3 manage.py createsuperuser
  1. Now run the server again
python3 manage.py runserver
  1. Now in web browser visit http://127.0.0.1:8000/admin . Login with the superuser name and password you created already.

You will see the following admin panel with 4 tables

demo 2

  1. Now add a topic category. Click the [+ Add] button

You will see the following form

demo 3

Now fill the form for our demo purpose. In later you can modify/remove/add anything according to your requirments. After filling, SAVE the form.

Column Data
Title English Python Beginner
Title Other পাইথন বিগিনার
Short Description পাইথন দিয়ে আমরা একটা ওয়েব অ‍্যাপ বানাই।
Image Name py-beg.png
Topic Type Youtube

py-beg.png image already stored in projects djangodemo/static/img/py-beg.png. So if you want to use other image, please put that on this directory and mention the name in the form.

  1. Now go to Home › Main_App and click [+ Add] in Topic Contents

You will see the following form. Fill with some data like the demo and click SAVE.

  • Url is used for Blog Post link, so for youtube no need.
  • Tag is optional as well. If you put tag, it will be shown in the home page playlist.
  • Order is used to rank list item accordingly.

demo 4

  1. Now visit http://127.0.0.1:8000 again

You will see the following web page

demo 5

  1. To publish URL links like the following example

demo6

  • Add a topic category and set the Topic Type URL

demo7

  • Add topic content and provide Title and URL

demo8

Now visit http://127.0.0.1:8000 again to see the updates

Social Links

  1. To add social links like facebook, twitter etc

demo-social1

  • Add item in Social Link table. If you don't provide any link, nothing will appear at top. By default the social icons are shown from djangodemo/static/img/social dirs

demo-social2

JavaScript code like Google analytics or Google adsense code can be pushed within head tags

  • To do this add site option and paste javascript code in header section
  • Only create one field in this table and add as many javascript code you want
  • Also provide Title, Meta Author and Meta Description fields to show them in your site's html page

demo 9

Setup Amazon S3 CDN to upload static content

Django by default doesn't support serving static files in production. So the best and recommended way to upload static files in CDN network. In this case, I like Amazon S3 CDN and its super easy to use.

  1. First you need to create a Amazon Aws account

  2. You have to create S3 bucket/container. To know how to proceed follow this tutorial

  3. Install two new libraries

pipenv install boto3
pipenv install django-storages
  1. Updates project's settings.py file
  • Add 'storage' above the app within INSTALLED_APPS
INSTALLED_APPS = [
    ...,
    'storages',
    'main_app'
]
  • At the bottom of setting.py write and update the following codes and fill the ID, KEY, BUCKET_NAME from your account.
  • Also special notice AWS_S3_CUSTOM_DOMAIN this part. If you create different location for your bucket, you have to update it s3.us-east-2.amazonaws.com and have to give proper location
AWS_ACCESS_KEY_ID = ''
AWS_SECRET_ACCESS_KEY = ''
AWS_STORAGE_BUCKET_NAME = ''
AWS_S3_CUSTOM_DOMAIN = 's3.us-east-2.amazonaws.com/%s' % AWS_STORAGE_BUCKET_NAME
AWS_S3_OBJECT_PARAMETERS = {
'CacheControl': 'max-age=86400',
}
AWS_LOCATION = 'static'

STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static'),
]
STATIC_URL = 'https://%s/%s/' % (AWS_S3_CUSTOM_DOMAIN, AWS_LOCATION)
STATICFILES_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'
  • Now run the following command to automatically upload your project static files to Amazon S3
python3 manage.py collectstatic
  • If you visit http://127.0.0.1:8000 in your browser, now all the static content will be served from amazon S3 not from your local dir.

Setup And Running in Heroku without static content

Well now finally we can deploy our project in web server. For me, I found it is quite easy to use Heroku one of the popular python app hosting site. Heroku also has free tier package. So you can upload any python web project there, test and if satisified you can upgrade to premium service. Then you can add your own domain. Also heroku provides PostgreSQL service as well.

  1. Create an account on Heroku
  2. Install Heroku CLI (Command Line Interface) in your machine. Follow heroku tutorial
  3. Also I assume you have git installed in your machine and you can use git by typing commands in terminal/shell
  4. Now create a new file named Procfile
touch Procfile
  • Now open the Procfile in any editor and add the following code to specify heroku to use Gunicorn web server.
web: gunicorn pythonbangla_project.wsgi --log-file -
  1. Install gunicorn in your machine
pipenv install gunicorn
  1. Now run the following heroku commands in Terminal/Shell
  • When asks for email/password, provide your heroku account credentials.
heroku login
  • After login successfully, create a heroku project by
heroku create django-demo-2018 # if this name django-demo-2018 available you can use otherwise try different name
# OR
heroku create # it will generate a random name for heroku project
  • Now run the following command to set heroku's git's remote url to your project name
heroku git:remote -a django-demo-2018 # in your case may be change django-demo-2018 to the name you selected or get randomly from heroku
  • Now disable auto collection static files here i assume you are using Amazon S3 or other service
heroku config:set DISABLE_COLLECTSTATIC=1

Copy PostgreSQL configuration and update your django's settings.py Database section

  • visit heroku dashboard click your app

  • Then click Heroku Postgres within Installed add-ons section

  • Then go to settings and click view database credentials

  • Now copy those info and update your django project's settins.py DATABASES->Default section

  • Add '*' in Allowed hosts in settings.py

DEBUG = False # first test it with False, if everythin runs successully then make it True, commit and push again
ALLOWED_HOSTS = ['*']
  • Now run the following git commands to add your changes and commit them
git add -A
git commit -m "heroku config updated"
  • Now push the code on heroku
git push heroku master 
# OR if you use a different git branch in your machine then run
git push heroku LOCAL_BRANCH_NAME:master 
  • Finally start web process on heroku
heroku ps:scale web=1

Setup And Running in Heroku with static content

If you don't want to use Amazon S3 or other CDN service and want to server static contents from heroku then you can follow this way to solve the problem.

  1. Install the whitenoise package
pipenv install whitenoise
  1. Open settings.py and within INSTALLED_APP write whitenoise command between messages and staticfiles
'django.contrib.messages',
'whitenoise.runserver_nostatic', # whitenoise
'django.contrib.staticfiles',
'main_app'
  1. In setting.py, within MIDDLEWARE add whitenoise between session and common
'django.contrib.sessions.middleware.SessionMiddleware',
'whitenoise.middleware.WhiteNoiseMiddleware', # whitenoise
'django.middleware.common.CommonMiddleware',
  1. In setting.py at the bottom add the following lines

STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles') # new!
STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage' #new
  1. If you already disabled collect static command then enable it
heroku config:unset DISABLE_COLLECTSTATIC=1
  1. Now add and commit
git add -A
git commit -m "Whitenoise config added"
  1. Now follow the steps described in here Setup And Running in Heroku without static content

How to force https in django

If your up the project in heroku and use their premium service and add a domain, heroku will automatically add a SSL so you can use https instead of http.

  • To redirect https by default update djangodemo/pythonbangla_project/settings.py and at the end of the file add the following code
SECURE_SSL_REDIRECT = True
SESSION_COOKIE_SECURE = True
CSRF_COOKIE_SECURE = True

Contribution

If you want to contribute on this project, you're welcome to fork the project and submit a pull request. Just try to not break the existing things.

Questions or feedback?

Feel free to open an issue, or find me @mahmudahsan on Twitter.