css changes; second post

1 files changed, 376 insertions, 0 deletions

diff --git a/content/weblog/2018-07-21_building-deploying-personal-site-with-blog-pt1/index.md b/content/weblog/2018-07-21_building-deploying-personal-site-with-blog-pt1/index.md
new file mode 100644
index 0000000..b961a83
--- /dev/null
+++ b/content/weblog/2018-07-21_building-deploying-personal-site-with-blog-pt1/index.md
@@ -0,0 +1,376 @@
++++
+title = "Building and deploying a personal site with blog. Part 1"
+date = 2018-07-21T20: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.
+
+<!-- more -->
+
+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/).