+++ title = "Building and deploying a personal site with blog. Part 1" date = 2018-07-21T21:46:00Z +++ I will be explaining in this guide how I built, and how I deployed this site. This will be a really simple tutorial, on how to do it using Python and Django. You might want to have a little knowledge of Django and Python previous to attempting to follow the instructions laid out in this tutorial, as the goal of this tutorial is not to teach you the basic principles of either the Python programming language, or Django framework. It is just meant as a little guide on the basic workflow when building and deploying sites with Django. Initially I intended for the whole guide to be just one post, but I had to break it into two posts since it ended up being too long. This first part will focus on the initial process of setting up and building a kind of personal blog site based on what I did for my own site, using the Django framework. I will not be writing here on how I made the blog engine for this site, rather I will be using a blog engine that I have made, called w3blog (you can read it either as "weblog", or as "w3/www blog"). [Checkout the GitHub page here](https://github.com/Yaroslav-95/w3blog). I will not be writing on this guide all of the possible configurations of w3blog, I will be writing a separate post about it soon (actually, I should also write thorough documentation for the module, and I will, but while I get enough time to do it, I will write a short post about it in the meantime). So let's get our hands dirty... ## Part I: Building and getting the site ready for deployment Before getting started, we need to make that everything we need is installed. In this case I am building my site using Python 3.6, and Django 2.0. I am also using PostgreSQL as my database. ### First steps I am using Manjaro as my OS, so I already have installed Python 3.6. You should also have Python 3.6 installed if you are using Ubuntu 18.04. PostgreSQL doesn't come by default, so using the terminal I installed postgres using the following command (this is for Manjaro and other Arch based distros): ```sh $ sudo pacman -S postgresql ``` Or for Ubuntu and other Debian-based distros: ```sh $ sudo apt-get update $ sudo apt-get install postgresql ``` If you're using Windows, these commands will obviously not be of much help (unless you are using the Linux Subsystem for Windows, or whatever Micro$oft is calling it these days). I would recommend using Linux for web development (or any kind of development (or any kind of use case for that matter)), especially with Python, or even Mac OSX (or whatever Apple has taken to calling their OS these days), since it is also Unix-like, and you have bash installed natively. However, if you do plan on using Windows to develop your site, you should be able to download the respective installers from their respective websites. Anyway, back to the topic. Next, we start PostgreSQL using systemd (or your init system of choice): ```sh $ sudo systemctl start postgresql ``` Once we have Python and Postgres installed, we need to create a virtual environment to keep all the packages that we need for our site all in one place. Now, you could of course skip this step and just install the packages system-wide, however, it is a better practice to have different environments for different projects. I am not going to be explaining the reasons for that since there already are a lot of articles on the internetz which do a better job at explaining why, than I would. If you don't have virtualenv installed, go ahead and do it now: ```sh $ sudo pacman -S python-virtualenv ``` Or ```sh $ sudo apt-get install python-virtualenv ``` Now we cd into the directory where we want to keep our environments and do: ```sh $ virtualenv envname -p python3 ``` After some seconds we should have a new folder with our new virtual environment. To activate the environment we need to source the "activate" script inside the environment, like so: ```sh $ source envname/bin/activate ``` You should now notice the name of the environment on the left side of your prompt. After that we can proceed to install with pip the packages that we need, for example, to install Django: ```sh $ pip install Django ``` The list of packages needed to build the site in this tutorial: ``` Django Pillow psycopg2 django-summernote w3blog ``` Pillow is a package used by Django to work with images saved on the database. psycopg2 is needed to use PostgreSQL with and Django. w3blog is my blog engine, it makes use of django-summernote, a module to integrate the wonderful editor summernote. You can find out more about it [here](https://summernote.org/). ### Starting and setting up the project After that we are ready to initialize our project. We cd into a directory where we usually keep all our projects, and tell django to initialize it for us ```sh $ django-admin startproject mysite ``` Django will create the basic directory structure for our project and generate some basic files to get started. If you run "manage.py runserver" right now you will get the welcome screen from Django telling you your project has been correctly initialized. I will be skipping that part and go on ahead and start configuring my project as needed. First let's set up the `settings.py` file by modifying the following settings, the other we can leave for the time being: ```py from django.utils.translation import ugettext_lazy as _ SECRET_KEY = os.environ.get('SITE_SECRETKEY') DEBUG = os.environ.get('SITE_DEBUG') == true DATABASES = { 'default': { 'ENGINE': 'django.db.backends.postgresql', 'NAME': 'sitedb', 'USER': os.environ.get('SITE_DBUSER'), 'PASSWORD': os.environ.get('SITE_DBPASSWORD'), 'HOST': os.environ.get('SITE_DBHOST'), 'PORT': os.environ.get('SITE_DBPORT') } } LANGUAGE_CODE = 'en-us' LANGUAGES = ( ('es', _('Spanish')), ('en', _('English')), ('ru', _('Russian')), ) LOCALEPATHS = ( os.path.join(BASE_DIR, 'locale'), ) TIME_ZONE = 'Europe/Moscow' USE_I18N = True USE_L10N = True USE_TZ = True STATIC_URL = '/static/' MEDIA_URL = '/media/' MEDIA_ROOT = os.path.join(BASE_DIR, 'media/') ``` You may have noticed that I am using `os.environ.get('ENVVAR_NAME')` to get some of my settings from environmental variables, instead of typing those settings directly into my file. Part of the reason I do that, is because it is not safe to store information such as passwords, or secret keys in your code. Also, since not all of my settings are the same in my local, or testing machine, as in my server or production machine, this makes it more convenient and easier, since I don't have to keep two different "settings.py" files, and I don't risk the chance of, for example, uploading my passwords, and other private information to a service like GitHub, or BitBucket, should I decide to publicly host the source code of my site. There are other reasons for that, and there are other ways to keep config separated from code, but I will not be going into much detail now. To export the environmental variables while you're developing, you can create a script (for example variables.sh) that will export them for you, it should something like this ```sh #!/bin/sh export SITE_SECRETKEY="YOURSECRETKEYGOESHERE" export SITE_DEBUG="false" export SITE_DBPASSWORD="YOURPOSTGRESPWDGOESHERE" export SITE_DBUSER="postgres" export SITE_HOST="localhost" export SITE_PORT="5342" ``` To export the variables from the file to your current shell you would run either ```sh $ source variables.sh ``` or ```sh $ . variables.sh ``` Both work equally fine. The other settings are the language and locale settings. This is an example of my settings, so you should them accordingly to your needs. For example, my site is available in three languages, so I them accordingly in the `LANGUAGES` tuple, and also enabled Django's localization services by setting the `USE_I18N` and `USE_L10N` variables to True. If you want Django to translate your site according to the user settings automatically, you also need to add the following to `MIDDLEWARE` before `CommonMiddleWare`, but after `SessionMiddleware`: ```py 'django.middleware.locale.LocaleMiddleware', ``` The last three settings back there, are so that Django knows where to look for static files such as images, css, js, etc. And so that it knows where to save and look for images belonging to models in the database, for example, if a user uploads a picture, or this case, if I embed an image in one of my blog posts. Let us not forget about adding the modules that we downloaded with pip to the list of installed apps: ```py INSTALLED_APPS = [ '...', 'django-summernote', 'weblog', ] ``` And set our allowed hosts: ```py ALLOWED_HOSTS = [ '127.0.0.1', 'mysite.xyz', ] ``` ### Configuring the DB With these settings, we can now migrate our models to the database. However, before doing that we need to set up the database in PostgreSQL. For that we need to open up the terminal and switch to user postgres, and open up the psql shell: ```sh $ sudo su - postgres $ psql ``` Inside the shell, if you haven't set up a password for user postgres, do so now: ```sh postgres=# \password ``` After that, we create our database ```sh postgres=# create database sitedb; ``` And NOW, we can migrate our models. Let us do so by going back to our project's root directory, and typing: ```sh $ ./manage.py migrate ``` If for some reason, it complains to you about some model migrations conflicts, go ahead and do the following, typing "y" when it prompts you: ```sh $ ./manage.py makemigrations --merge ``` After migrating we can create a superuser so that we can enter the Django admin site: ```sh # ./manage.py createsuperuser ``` ### Launching the project One final thing before our site is ready for use. We need to add the corresponding urls for the w3blog engine, and summernote editor in our projects main `urls.py` file. So let's go ahead and add them, our urls.py file should like this: ```py from django.contrib import admin from django.conf import settings from django.urls import path, include from django.conf.urls.static import static urlpatterns = [ path('admin/', admin.site.urls), path('summernote/', include('django_summernote.urls')), path('', include('weblog.urls')), ] if settings.DEBUG: urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) ``` Now we if we launch our development server ```sh $ ./manage.py runserver ``` And go to `127.0.0.1:8000` in our browser, we should see a basic blog site with no posts on it yet, however, if we go to the django admin page, we can some posts, and so our site is not so empty anymore! Now, if you are planning on having some other things on you site besides the blog, you need to start a new django app inside your project's root directory ```sh $ django-admin startapp myapp ``` Add an include to it's urls config to the main urls.py file. So your project's urlpatterns variable now might be looking something like this: ```py urlpatterns = [ path('admin/', admin.site.urls), path('summernote/', include('django_summernote.urls')), path('weblog/', include('weblog.urls')), path('', include('myapp')), ] ``` And don't forget to add your app's name to the `INSTALLED_APPS` list in "settings.py". This is it for part 1 of this little guide. Soon I will post the second part where I'll write about how I deployed my site to a Debian server. [Continue reading part two here](/weblog/building-deploying-personal-site-with-blog-pt1/).