DEV Community: Skriptmonkey

QR Code Gen - Creating the model

Skriptmonkey — Tue, 06 Jan 2026 16:00:00 +0000

Okay, now that the holidays are over. Let's get back to it, shall we? My hope is to get these out on a more regular schedule. However, like during the holiday season, sometimes other obligations (family, work) take priority.

I'm just going to jump right in to creating the QR app and designing/testing our basic "starter" model.

Create the app

Creating the app is simple enough.

$ django-admin startapp qr

Then open the config/settings.py file and add 'qr', to the end of the "INSTALLED_APPS" variable.

Now that we have the "application" created, we can start thinking about content.

Location location location

We need to figure out where we're going to store the QR code images when they're generated. In a larger project we might consider storing the images on a CDN (content delivery network) for better distribution over geographically different locations. But this isn't a big project. This is a small project where I don't expect anyone to really use so I'm not going to worry about load times, yet.
What I will do, is create a 'media' folder at the base of the project and set the 'MEDIA_ROOT' variable to the new folder in the settings.py file.

Note: I also had to add import os to the top of my settings file.

Also, quick tip: keep a separate terminal open with python manage.py runserver running. Whenever you save a change to a file it'll refresh the local web server and report any errors (like using the os module without importing it).

Create the model

This will be a simple model to start. All we want is a single line text input which we'll use to generate the QR code. We can add more QR code customization later.
So what fields do I need?

a field to store the input text.
a field to store the location of the generated image
and a field for the creation date. I'm also adding in a couple of functions (stolen from the Django tutorial) to help later on. Here is what my qr/models.py file looks like so far.

import datetime
from django.db import models
from django.utils import timezone

class QRCode(models.Model):
    input_text = models.CharField(max_length=200)
    qr_code_img = models.ImageField(upload_to='qr_codes/')
    pub_date = models.DateTimeField('date published')

    def __str__(self):
        return self.input_text

    def was_published_recently(self):
        now = timezone.now()
        return now - datetime.timedelta(days=1) <=self.pub_date <= now

I also needed to install the pillow module using pip install pillow to use the ImageField field.

The Segno Package

Now that we have a model, I'd like to do something with it. As in, create some QR codes. To do that, I've decided to go with the Segno package. And... I'll be honest, I did about 10 seconds of searching and just picked something. Segno seems easy enough to use and looks like it has the features that I'd want in a QR code generating web app.
Installing Segno was straight forward:

(.venv)$ pip install segno

Creating a QR code using Segno is also very easy.

import segno
qrcode = segno.make("test")
qrcode.save("test.png")

This creates a "test" QR code and saves it as "test.png". Easy right?

You can find more info on the Segno package from the PyPi website.

Testing the model

Now let's test out the model using the Segno package. I'm taking another chapter out of the Django tutorial and using the Django shell to do our testing. But first, let's migrate our changes.

(.venv)$ ./manage.py makemigrations
Migrations for 'qr':
  qr/migrations/0001_initial.py
    + Create model QRCode

(.venv)$ ./manage.py migrate
Operations to perform:
  Apply all migrations: admin, auth, contenttypes, qr, sessions
Running migrations:
  Applying contenttypes.0001_initial... OK
  Applying auth.0001_initial... OK
  Applying admin.0001_initial... OK
  Applying admin.0002_logentry_remove_auto_add... OK
  Applying admin.0003_logentry_add_action_flag_choices... OK
  Applying contenttypes.0002_remove_content_type_name... OK
  Applying auth.0002_alter_permission_name_max_length... OK
  Applying auth.0003_alter_user_email_max_length... OK
  Applying auth.0004_alter_user_username_opts... OK
  Applying auth.0005_alter_user_last_login_null... OK
  Applying auth.0006_require_contenttypes_0002... OK
  Applying auth.0007_alter_validators_add_error_messages... OK
  Applying auth.0008_alter_user_username_max_length... OK
  Applying auth.0009_alter_user_last_name_max_length... OK
  Applying auth.0010_alter_group_name_max_length... OK
  Applying auth.0011_update_proxy_permissions... OK
  Applying auth.0012_alter_user_first_name_max_length... OK
  Applying qr.0001_initial... OK
  Applying sessions.0001_initial... OK

Now, let's enter into the shell to play around with our new model.

(.venv)$ ./manage.py shell
7 objects imported automatically (use -v 2 for details).

Python 3.14.2 (main, Dec  5 2025, 00:00:00) [GCC 15.2.1 20251111 (Red Hat 15.2.1-4)] on linux
Type "help", "copyright", "credits" or "license" for more information.
(InteractiveConsole)
>>> import segno # import segno
>>> import os
>>> from django.utils import timezone # import django timezone
>>> QRCode.objects.all() # show that nothing has been done, yet.
<QuerySet []>

Everything is setup, let's create a new QRCode object with some test input text. Then we'll use the new object's input_text to create the QR code and use the object's ID for the naming.

>>> qrcode = QRCode(input_text="This is a test", pub_date=timezone.now())
>>> qrcode.save()
>>> qrcode.id
1
>>> qrcode.qr_code_img = f"{qrcode.id}.png"
>>> qrcode.save()
>>> from config.settings import MEDIA_ROOT
>>> qr_code_path = os.path.join(MEDIA_ROOT, 'qr_codes', f"{qrcode.id}.png")
>>> qr = segno.make_qr(qrcode.input_text)
>>> qr.save(qr_code_path, scale=4)

And now we should have a PNG file saved at media/qr_codes/1.png.

To be honest, this last part took a lot longer than expected. I kept running into a FileNotFoundError when attempting to create the QR code image. This was resolved by creating the qr_code_path variable with the full path to the "1.png" file location, which involved needing to import the MEDIA_ROOT variable from config.settings.

Next up, I'll work on creating the templates for the input form and the QR code results page, then I'll work on creating the views later.

To some of you more experienced Django developers, some tips and tricks are always appreciated in the comments. Especially if it makes something that I've done in the post easier to accomplish.

Getting Started with Django - Project Setup

Skriptmonkey — Fri, 19 Dec 2025 12:00:00 +0000

Introduction

In this series of posts, I'll be building my way from fresh graduate of the Django tutorial (months ago) to SaaS application builder extraordinaire. The goal is to take a simple, over-done, unimaginative idea (QR code generator) and build a SaaS application out of it. For educational fun, of course. Complete with user authentication, and monetization strategies without the.... monetization?? I'm going to add "paid" tiers, but no actual payment methods, for now. Unless? Just kidding..... heh.

The purpose of this project is to practice building web applications in Django and write about it along the way. A real "learning in public" kind of project.

So, let's just go ahead and jump into the process. We'll start with a simple project setup. Here is my standard setup process.

I am on a Linux workstation so all of the commands will be in bash.

Creating the project

Create the folder
I have a Code/Py folder in my home folder. This is where I like to start my Django projects.
```
$ cd ~/Code/Py/
$ mkdir QRCodeGen
$ cd QRCodeGen/
```
Install Python VirtualEnv, and activate
At the root of this folder, I setup the python virtualenv.
```
$ python3 -m venv .venv
$ source .venv/bin/activate
```
Upgrade Setuptools and Pip
As a habit, before I install any packages through pip, I make sure to upgrade both setuptools and pip.
```
$ pip install --upgrade setuptools pip
```
Install DJango
Now we can install the Django package.
```
$ pip install django
```
Create Django Project
This is where people might start to question my process.
The folder that we're in is the project folder, so I don't want to create a nested project folder inside of the project folder. I prefer to use the current folder. I also name the project "config" because that will create the folder that will hold what I consider the config files for the project.
```
# notice the lone period at the end.
$ django-admin startproject config .
```
I'll be honest, I'm not experienced enough to know if this preference will bite me in the long run. I've only created simple, single page apps so far. So go ahead, tell me why I'm wrong here.
Lastly for this post, run the dev server.
This is just a quick test to make sure everything has been setup properly so far.
```
$ ./manage.py runserver
```
Then open your web browser to http://127.0.0.1:8000 or http://localhost:8000. There will be a link in the terminal that you can click, if your terminal supports it. This is what you should see.

This is a very simple setup, and honestly, the end of my comfort zone with Django. I've built some basic apps before but that was YEARS ago. So now I'm jumping back in. There are a few things that I like to do that I purposely skipped over to keep this a very short and simple guide. I'll go over these in future posts as I work my way through this project.

Next, I'll go over creating a simple model for our QR code generator.

Learning to Code like Crafting in an MMORPG

Skriptmonkey — Sat, 25 Oct 2025 20:25:31 +0000

I’ve been on a bit of a productivity kick lately; thinking a lot about note-taking (bullet Journal + Obsidian), time management, and how systems thinking ties it all together. Systems thinking, in particular, has been a big part of my current studies. It’s made me look closely at how I approach learning itself, how I study, take notes, and write, to reinforce what I’ve learned.

Then a thought occurred: one of the best examples of learning through systems already exists in something I love, crafting in MMORPGs.

I’ve always been a bit of an MMORPG addict. I played World of Warcraft for way longer than I’d like to admit, spent thousands of hours buried in the spreadsheets of EVE Online, and still log into Guild Wars 2 when new content drops. These days I'm giving New World a go, and some friends have pulled me into the new Pax Dei game that recently released version 1.0.

While I enjoy the combat, storylines, and endgame content (and maybe a little PvP), it’s the crafting that keeps me coming back. I love gathering materials, refining them, and building things from scratch to sell on the market. There’s something deeply satisfying about turning raw resources into something valuable and leveling up my crafting skill in the process.

And honestly, learning to code (and other skills) feels exactly the same.

In games like World of Warcraft or Guild Wars 2, you don’t start by crafting legendary weapons. You begin by chopping wood, mining copper, and making a lot of basic, unimpressive items. Nobody’s impressed by your mountain of copper daggers, but each one pushes your crafting experience a little higher.

Coding follows the same pattern. You don’t jump straight from “Hello, world!” to deploying a full SaaS app with authentication, payments, and analytics. You get there by building small things, over and over, until the process becomes second nature, until you can forge something great without even realizing how far you’ve come.

One of the content creators that I watch occasionally, ThePrimeagen, has a saying that it takes "time in the saddle". This, to me, means "just start creating". Start small, build up, and learn along the way.

Gathering Resources (Fundamentals)

Let’s start with the basics, what does it mean to “gather resources” in coding?

In games, you begin by collecting the most common, easy-to-find materials: copper ore, herbs, cloth. This stuff is so abundant it practically litters the starting zones. You swing a pickaxe a few times, fill your bags, and head back to town.

In coding, it’s the same. You start by learning the fundamentals: variables, loops, functions, and classes. Resources for these basics are everywhere: tutorials, videos, interactive sites, documentation. A quick search for “how to learn programming” will bury you in guides eager to hand you your first virtual pickaxe.

It’s not glamorous work. Writing a function that adds two numbers is the coding equivalent of mining copper. But without that raw material, you can’t craft anything worth showing off later.

Just like the resources in the game getting better as you level up, the resources you gather when learning also get more advanced. Data structures and algorithms, design patterns, new technologies, and frameworks. The learning doesn't stop, you grow and learn more to continue growing.

Crafting Low-Level Items (Small Projects)

Once you’ve gathered enough materials, it’s time to start crafting - and crafting a lot.

In games, that usually means cranking out 20 basic daggers or 50 bandages, most of which will never see use. You’ll probably sell them to a vendor just to clear bag space.

In coding, it looks a little different but feels the same. You build a simple calculator, a to-do list app, a tiny blog, or maybe a quick script that automates something trivial. These are small projects that probably only you will ever use, but they serve as your training ground.

Will these projects make you famous? Not likely. But every one of them builds muscle memory. You’re learning how to structure a project, solve problems, and debug when things inevitably break. Just like crafting those “useless” daggers, the real reward isn’t the item—it’s the experience points you gain along the way.

Unlocking New Recipes (Concept Mastery)

Grinding out enough low-level items eventually unlocks the good stuff.

In games, the items you craft start to get interesting. They have stats, special bonuses, or unique effects—and as your skill increases, you learn new recipes. You move from crafting basic starter gear to creating useful items that other players actually want.

In coding, the same thing happens. As you build more small projects, your understanding deepens. You start to see how different pieces fit together, how data flows, how logic connects, and how systems interact. Suddenly, things that once felt mysterious begin to make sense. Each concept you master unlocks the next, like learning a new recipe you didn’t even know existed.

Crafting Epic and Legendary Items (Big Projects)

The real payoff comes when you take on big projects.

In games, crafting a legendary weapon is a long-term goal. You need rare materials, patience, and persistence. Some ingredients might only drop from dungeon bosses or raid encounters, which means teaming up with others to get what you need. Even then, it’s still a deeply personal pursuit—the grind, the refinement, the long path to something extraordinary.

In coding, the same idea applies. Building and deploying a large application—something complex and feature-rich—is the equivalent of crafting your own legendary item. It draws on every skill you’ve learned so far: designing systems, structuring data, creating interfaces, and learning how to ship your work into the real world. Sometimes you’ll need help from others, and learning to collaborate is another craft in itself.

But the only way to reach this point without burning out is by grinding through those smaller builds first. Every simple project you’ve ever finished has been quietly preparing you for this moment.

The Grind is the Path

It’s easy to get discouraged when your projects feel small. But here’s the secret: those small projects are not wasted time. They’re your grind. They’re your XP.

Every tiny script, every toy project, every bug you squash, those are your daggers, your copper rings, your stacks of bandages. Without them, you'd never unlock the recipes for the bigger stuff.

The trick is to keep moving forward. Don’t stay stuck crafting the same copper sword forever. Try new patterns. Experiment with different materials. Build something slightly outside your comfort zone. Even failure gives you XP if you take the time to learn from it.

Momentum is everything. The grind is not a punishment—it’s the path. Every repetition, every small improvement, every “failed” experiment is quietly pushing your skill tree upward. And before you know it, you’ll look back and realize: you’ve gone from crafting daggers to forging your first legendary item.

Where I’m At in the Grind

So where am I right now in my own journey? I’m building a simple QR code generator using Python and the Django web framework. It’s not flashy. It’s not a legendary sword. But it’s teaching me how to structure a Django app, work with forms, and think through the flow of a real project from start to finish.

Eventually, I’d like to add more—an API using Django REST Framework, maybe even multi-tenancy. Each addition is another recipe unlocked, another refinement to the craft.

This is my batch of iron daggers. Once I’ve mastered this, I’ll have the foundation to forge something greater. And one day, maybe that “something greater” will be a full-fledged SaaS app—my first real legendary.

Note: I used AI to help with editing and refining the flow of this post. Writing these articles is another part of my own “crafting grind”, a way to practice explaining my thoughts and what I’m learning as I go.

Backup and Restore a WagtailCMS Website

Skriptmonkey — Fri, 26 May 2023 15:04:59 +0000

Essential Guide: Backing up and Restoring Your Wagtail Site for Data Security and Peace of Mind.

Introduction

Backups are an essential part of maintaining any website, including those built with Wagtail. Whether it's due to a server crash, a hacking incident, or accidental deletion, losing your website data can be devastating. In this blog post, I will walk you through the steps of manually creating a backup and restoring a Wagtail site. By following these steps, you can safeguard your website data and quickly restore it in the event of a disaster.

Creating a Backup

There are two main types of backups that you need to create for your Wagtail site: a file system backup and a database backup. The file system backup will contain all the files that make up your website, while the database backup will contain all the data stored in your database.

Database Backup

To create a database backup, follow these steps:

SSH into your server as a user with sudo privileges.
(Optional) Navigate to your websites root directory. This is the directory where your Wagtail projects manage.py file is stored. For example, if you followed my guide to Deploying Wagtail your root directory would be at /opt/wagtail/<projectname>. This is where I like to store the database backup so that it will be included in the file system backup.
My server uses MariaDB so that's what I'll be documenting here. For other databases it's easy enough to do a search for creating a database dump. Run the following commands for switching to the root user, creating an SQL dump, then exiting back to your normal user.

$ sudo su
[sudo] password for user:
$ mysqldump -u root -p wagtail > db_backup.sql
Enter password:
$ exit

Move the file to a secure location. You can use commands like scp or rsync to copy the file to your local machine or to a remote backup server.

File System Backup

SSH into your server as a user with sudo privileges.
Use the tar command to compress and archive all the files in the root directory into a single file. For example, to create a backup file called 'example.com.tar.gz' and store it in your users home directory use the following command

$ tar -czvf ~/example.com.tar.gz .

Move the file to a secure location. You can use commands like scp or rsync to copy the file to your local machine or to a remote backup server.

At this point you should now have both a file system backup and a database backup stored in a secured location in case of emergencies. In the next section, I will walk you through the steps of restoring a backup.

Restoring a Backup

What good is a backup if you don't know how to restore? Whether you're restoring after an emergency or you're migrating your site to a new host, these steps will walk you through getting your site back up and running.

I won't be going over setting up your web server, proxy software, or firewall. If you're not sure how to setup your host server have a look at my guide for Deploying Wagtail on CentOS 8. Instead of cloning a git repository follow the instructions on the next section to restore the file system. Instead of setting up the DB, follow the instructions in the Database Restore section.

File System Restore

SSH into your new server as a user with sudo privileges.
Copy the backup file from your backup location. If you're using an attachable volume or an S3 equivalent, go ahead and mount that device to your new server, if you haven't already, and change into that directory using the cd command.
If you followed my deployment guide, linked above, change into your wagtail user.

$ sudo su - wagtail

Create the folder where your project files will live. Then exit back to your user with sudo privileges (or switch to the tmux terminal with that user).

$ mkdir /opt/wagtail/<projectname>
$ exit

Extract the files from the backup tar.gz file.

$ sudo tar -xzvf example.com.tar.gz -C /opt/wagtail/<projectname>/

Now that the files are in place, we need to get the database setup before we continue.

Database Restore

As a user with sudo privileges switch to the root user.

$ sudo su

Change into the directory with your SQL backup file. If you're following this guide it should be in your projects root folder.

$ cd /opt/wagtail/<projectname>

To restore the database we need to first create it. And we might as well create the user and grant it all privileges while we're at it.

$ mysql -u root -p
Enter password: <enter>
> CREATE DATABASE wagtail CHARACTER SET utf8mb4 COLLATE   utf8mb4_general_ci;
> CREATE USER 'wagtaildb'@'localhost' IDENTIFIED BY '<db user password>';
> GRANT ALL PRIVILEGES ON wagtail.* to wagtaildb@localhost;
> FLUSH PRIVILEGES;
> exit;

Now, restore the contents of the SQL file to your newly created wagtail database.

$ mysql -u root -p wagtail < db_backup.sql

Finishing Up

Now that your file system and database have been restored, I like to run migrations and collect static to make sure that everything is in place for your site. Switch to your wagtail user and make sure your have the virtual environment activated.

$ sudo su - wagtail
$ source .venv/bin/activate
$ cd <project name>
$ ./manage.py makemigrations
$ ./manage.py migrate
$ ./manage.py collectstatic --no-input

Restore or configure your web server (Gunicorn, uWSGI, etc...) and your reverse proxy (Nginx, Apache) and you should be all set.

Best Practices for Backups and Restorations

To ensure the effectiveness and reliability of your backups and restorations for a Wagtail site, consider the following best practices:

Regularly Schedule Backups: Set up a regular backup schedule to ensure that your data is consistently backed up. Depending on the frequency of updates and changes to your website, consider daily, weekly, or monthly backups.
Test Your Backups: Periodically test your backups by restoring them to a test environment. This step helps verify that your backups are complete and functional, allowing you to identify and address any issues before an actual restoration is needed.
Store Backups Off-Site: Store your backups in an off-site location, separate from your production server. This practice provides protection against physical damage or server-related issues. Consider using cloud storage, external hard drives, or remote backup services.
Implement Multiple Backup Storage: Avoid relying on a single backup location or storage device. Use multiple storage options to ensure redundancy and minimize the risk of data loss.
Encrypt Your Backups: Protect the confidentiality and integrity of your backup data by encrypting it. This step ensures that even if your backups fall into the wrong hands, they will be unreadable without the encryption key.
Document the Backup and Restoration Process: Maintain clear documentation outlining the step-by-step procedures for creating backups and restoring them. This documentation serves as a reference guide during emergency situations and helps ensure consistency in the process.
Monitor Backup Success and Errors: Regularly check your backup logs and monitoring tools to verify the success of backups and identify any errors or failures. Promptly address any issues to maintain the reliability of your backup system.
Keep Software and Components Up to Date: Regularly update and patch the software components of your Wagtail project, including the operating system, database, web server, and backup tools. This practice ensures compatibility, security, and optimal performance during backup and restoration processes.

By following these best practices, you can enhance the reliability, security, and effectiveness of your backup and restoration procedures for your Wagtail site.

Conclusion

In conclusion, implementing regular backups, testing them, and storing them off-site are crucial for ensuring the safety and integrity of your Wagtail site. By following best practices such as encryption, documentation, and monitoring, you can enhance the reliability and security of your backup and restoration processes. Additionally, keeping software and components up to date is essential for maintaining compatibility and optimal performance.

Remember, preparedness and practice are key to successfully safeguarding your website data. With these practices in place, you can confidently navigate the backup and restoration process and protect your valuable Wagtail site.

Additional Resources

For more information and resources on Wagtail, backups, and website deployment, please visit the following:

Official Wagtail Documentation
Deploying Wagtail on CentOS8 with MariaDB/Nginx/Gunicorn

Stay informed, explore, and keep your Wagtail website up and running smoothly!

Updating WagtailCMS

Skriptmonkey — Mon, 22 May 2023 13:58:30 +0000

Step-by-Step Guide: Updating Your WagtailCMS Website on a RHEL Server for Improved Functionality and Security.

Introduction

Wagtail is a popular content management system that allows users to create and manage websites easily. However, as with any software, it's important to keep it up-to-date to ensure security and performance. In this blog post, we'll discuss the steps involved in manually updating Wagtail hosted on a Red Hat based Linux server. We'll cover everything from preparing for the update to troubleshooting common issues that may arise. By the end of this post, you'll be equipped with the knowledge you need to update your Wagtail site with confidence.

Preparation

Before updating Wagtail, it's important to prepare for the update process.

Read the release notes: It's important to read the release notes for the latest version of Wagtail to understand what changes have been made and if there are any compatibility issues that could affect your site. You can find the release notes on the official Wagtail Docs website.
Create a backup of your site: Creating a backup of your site is essential in case anything goes wrong during the update process. You can use a variety of backup methods, including using a backup plugin or manually backing up your site's files and database. It's important to store your backup files in a secure location.

Upgrade Steps

SSH into your Linux host with a user that has sudo privilages.
If you have a separate user that manages your Wagtail environment, switch into that user using this command, in my case I have a user named "wagtail".
1. $ sudo su - <user>
2. NOTE: I like to use tmux with two terminals, one for the wagtail user and one for a user with sudo privileges. This helps with not having to constantly switch between users.
Change into the root directory of your project. This will be the directory that has the manage.py file.
Edit your requirements.txt file to reference the version you'd like to upgrade to.
1. Example: wagtail>=5.0,<5.1
After saving the file, upgrade Wagtail using the pip command.
1. $ pip install -r requirements.txt
Once the upgrade process is complete, run the following commands to migrate any changes to the database.
1. $ python manage.py makemigrations
2. $ python manage.py migrate
Fix any errors or warnings that pop up. If you fix errors, run the migration commands again.
Run the collectstatic command to add all the new resources to your static folder.
1. $ python manage.py collectstatic --no-input
Restart your web server (Gunicorn, uWSGI, etc...) and test your website to make sure everything works as expected.

Troubleshooting

If you encounter any issues during the WagtailCMS update process, try these troubleshooting steps:

Check the release notes to make sure you followed all the necessary steps, and that any prerequisites are in place. Make sure you're updating to a version that's compatible with your current setup.
If you're using third-party packages or plugins make sure they're compatible with the new version. Check the documentation or contact the package/plugin developer for guidance.
Seek support: If you can't resolve the issue on your own, reach out to the Wagtail community or the support team for assistance. Provide as much detail as possible about the issue, including any error messages or log files.
As a last resort you can always redeploy your site using the most recent backup to get back to a functional state while you look further into why the upgrade failed.

By following these troubleshooting steps, you should be able to resolve any issues that may arise during the update process. Remember to always backup your data before making any updates or changes to your site.

Conclusion

Updating Wagtail can seem like a daunting task, but it's an essential step to keep your site running smoothly and securely. By following the steps outlined in this blog post, you can successfully update Wagtail on both your development and production servers. Remember to always create a backup of your data before making any changes or updates, and to review the release notes and troubleshooting steps carefully to avoid any compatibility issues. If you encounter any issues, don't hesitate to seek support from the Wagtail community or the support team. With these tips, you can keep your Wagtail site up-to-date and running smoothly.

Additional Resources

The Wagtail Documentation for Upgrading Wagtail
Release Notes for all the past Wagtail releases.
The Wagtail Slack community is a great place to go to ask questions.

TailwindCSS: Quick Setup

Skriptmonkey — Thu, 16 Dec 2021 21:51:43 +0000

Introduction

TailwindCSS is a utility-first CSS framework that allows you to style your HTML without needing to leave your HTML file. Most of the styling is done though pre-defined CSS classes. This results in a very easy system to use when adding style to your website.

This quick setup guide will get you to a point where you can start writing HTML and adding in CSS as you go.

If you're in a bit hurry and willing to sacrifice some features you can use the TailwindCSS CDN.

Installing Node.js

This guide is written with Linux in mind but you can also install Nodejs on Windows and Mac.

For RHEL based distros (Fedora, CentOS, Rocky Linux, etc..):

$ sudo dnf install nodejs

For Ubuntu based distros you can install Node from NodeSource:

$ curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash -
$ sudo apt-get install -y nodejs

Setup the Project environment

Now that we have Node installed, lets create our project environment.

First, cd into your workspace. I like to use ~/Code as my main local workspace.

$ cd ~/Code

Create a folder of us to work in and cd into that.

$ mkdir tailwind
$ cd tailwind

Initialize the directory for NPM. This will create a package.json file within the folder.

$ npm init -y

Now install TailwindCSS.

$ npm install tailwindcss

To finish off this environment, lets create a src and public folder. You can name these folders whatever you want.

$ mkdir src public

Generating the TailwindCSS CSS file

Next lets create a style.css file.

$ touch src/style.css

Then, using your preferred text editor, add the @tailwind directives so your style.css file looks like this:

@tailwind base;
@tailwind components;
@tailwind utilities;

Now, open the package.json file and add a new command to the scripts. The file should look like this.

{
  "name": "tailwind",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "tailwind build -i src/style.css -o public/tailwind.css --watch"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "tailwindcss": "^3.0.1"
  }
}

Finally, create a tailwind.config.js file in your project root folder containing the following.

module.exports = {
  content: ["./public/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Remember the "dev" script that we added into the package.json file? Now we're going to run it in a separate terminal.

$ npm run dev

This command will continue to run while you write your HTML. It will "watch" and "rebuild" your tailwind.css file as new utility classes are added into your HTML file. If you'd like to learn more about the Just-in-Time engine, check out this blog post.

You should now have a new tailwind.css file in the public folder. link this file into your HTML file and start coding away. Remember to keep the npm run dev command running in a separate terminal.

Using the style.css file

Now you can use the style.css file by adding a link tag into the <head> of your html source file.

<link href="./style.css" rel="stylesheet">

Enjoy the new setup and happy coding!

Migrate CentOS 8 to Alma Linux, Rocky Linux, or CentOS Stream

Skriptmonkey — Mon, 12 Jul 2021 03:45:30 +0000

So you went ahead and upgraded your CentOS 7 (or 6) servers up to CentOS 8 and then Red Hat announced that CentOS was turning into a rolling release distro. This decision has caused a fair amount of controversy on the Internet. A lot of people are upset that their freshly upgraded CentOS 8 servers are going EoL at the end of 2021. In this post I’ll share some options for migrating away from CentOS 8.

Quick note: while writing this guide I’m using a fresh install of CentOS 8. I know that in most situations this will not be the case. Having a properly tested backup of your data is very, VERY important. We can’t assume that everything will go smoothly. Always have a way to restore.

That being said, these will be quick and dirty guides. Before we begin go ahead and SSH into your CentOS server and make sure it’s up-to-date. Reboot if needed.

$ ssh user@centosserver
$ sudo dnf update -y
$ sudo reboot

Migrating to Alma Linux

AlmaLinux is a community governed 1:1 RHEL clone created by CloudLinux to replace the soon-to-be EoL CentOS.

First we’re going to download the almalinux-deploy.sh script.

$ curl -O https://raw.githubusercontent.com/AlmaLinux/almalinux-deploy/master/almalinux-deploy.sh

Make the script executable and then run it.

$ chmod +x almalinux-deploy.sh
$ sudo ./almalinux-deploy.sh

Wait until the script finishes running. You should see a “Migration to AlmaLinux is completed” when you’re done.

Reboot the system to apply the changes.

$ sudo reboot

After the reboot you can verify the migration by looking at the /etc/os-release file.

$ cat /etc/os-release

All done! You’ve migrated from CentOS to AlmaLinux.

Migrating to Rocky Linux

Rocky Linux was brought to life by the founder of the CentOS project, Gregory Kurtzer. Rocky intends to be a “100% bug-for-bug” clone of RHEL.

Upgrading to Rocky Linux is as simple as the process for Alma Linux.

First we’re going to download the migrate2rocky.sh script.

$ curl -O https://raw.githubusercontent.com/rocky-linux/rocky-tools/main/migrate2rocky/migrate2rocky.sh

Make the script executable and execute the script with the -r flag.

$ chmod +x migrate2rocky.sh
$ sudo ./migrate2rocky.sh -r

When the script finishes reboot your system to apply the changes.

You can verify the changes to your system by looking at the /etc/os-release file.

$ cat /etc/os-release

Upgrading to CentOS Stream

The last option that I’m adding into this post, migrating to CentOS Stream.

Also fairly simple, we have three main steps.

First, enable the CentOS Stream repositories.

$ sudo dnf install centos-release-stream

Second, update the CentOS repositories with CentOS Stream repositories.

$ sudo dnf swap centos-{linux,stream}-repos

And finally, migrate CentOS 8 to CentOS Stream.

$ sudo dnf distro-sync

Reboot your system when this command finishes.

You can verify the chances to your system by looking at the /etc/os-release file.

cat /etc/os-release

Matomo Analytics with WagtailCMS

Skriptmonkey — Wed, 31 Mar 2021 14:47:14 +0000

Introduction

Matomo is an open source alternative to Google Analytics that focuses on data ownership and privacy. Both a Cloud and an On-Premise solution exist. I opted for deploying Matomo to my own VPS. HowToForge has a great guide to help you deploy Matomo to your own server. https://www.howtoforge.com/how-to-install-matomo-piwik-on-centos-8/

WagtailCMS is an Open Source Content Management System built using Python and Django. This guide assumes that you have a website already built using Wagtail and you’re either ready to deploy or have already deployed into production.

This guide will walk through integrating Matomo into your WagtailCMS website for a more private and secure method of tracking the number of visitors and other valuable metrics.

Requirements

Access to the source code of your Wagtail site that is either in production or ready to be deployed to production.
A Matomo account either in the Cloud or on your own On-Premise server.

Configuring Wagtail

Let’s start by first configuring your Wagtail site for using the Matomo Javascript code. Matomo instructions say to add their Javascript to the <head> tag of your site and to ensure the code is in all webpages. I try to avoid inline CSS/Javascript code when possible.

Start by opening up the base.html page for your app. I like to separate my base.html files by apps instead of using one base.html for the whole project. In my case I have blog_base.html stored in

/BASE_DIR/blog/templates/blog/blog_base.html

Matomo instructions say to add the Javascript code just before the </head> tag. Instead were going to add a <script> tag pointing to an analytics.js file. You can name this file whatever you want, analytics.js was the first thing to pop into my mind.

<script type="text/javascript" src="{% static 'js/analytics.js' %}"></script>

Next we create the analytics.js file that we’ll use to import the Matomo JS code. Since I can potentially use this in other apps I created the file in the same folder that stores your settings folder.

BASE_DIR/ProjectName/static/js/analytics.js

If you’re using source control like Git, commit this file to your repository blank or with a comment indicating what the file is for.

Adding a new website to Matomo

If you’re using a freshly installed instance of Matomo you will have created a website during the first time setup process. Just follow the instructions and you’ll be provided with the Javascript code to add into your Wagtail site. Otherwise follow the instructions below.

Log into your Matomo website and navigate to the “All Websites” tab in the top navigation bar.
At the bottom of the list click on the “Add a new website” button.
Assuming you’re using this on a website, click on the “Website” button to answer the “What would you like to measure?” dialog.
Fill out the form for Managing Measurables and click Save at the bottom of the page.
In your newly created website, find the link for “View Tracking Code”.
On the Tracking Code page, scroll to the bottom of the Javascript Tracking section.
Copy the Javascript only. Everything between the <script></script> tags.

Last Step

On your production server, paste the code into the analytics.js file that was created in the Configuring Wagtial section.

That’s it!

Restart your HTTP server, in my case both Gunicorn and Nginx. Make sure that tracking is allowed in your browser for your website. You should see hits in Matomo when your site is visited.

Cheers!

Deploying Wagtail on CentOS8 with MariaDB/Nginx/Gunicorn

Skriptmonkey — Sat, 02 Jan 2021 03:58:00 +0000

Wagtail is an actively developed, open source CMS built on Python and the Django web framework. In this tutorial, we will go over how to deploy Wagtail on a CentOS 8 server with MariaDB, Nginx, and Gunicorn.

Getting Started

Start with a fresh install of CentOS 8 and make sure your server is up to date.

dnf update -y
# reboot the server to apply the updates if needed.

Create a non-root sudo user, if you haven't already

useradd <username>
passwd <username> #enter new password
# add the user to the wheel group for sudo access.
usermod -aG wheel <username>

Next, lets install Python 3.8 using our newly created sudo user account.

su <username>
sudo dnf module -y install python38

Now we need to install both Nginx and MariaDB.

sudo dnf install nginx mariadb-server git

Setup the environment

At this point I like to create a Wagtail user account for managing the project code.

sudo groupadd --system wagtail
sudo useradd --system --gid wagtail --shell /bin/bash --home /opt/wagtail wagtail
sudo mkdir /opt/wagtail
sudo chown wagtail:wagtail /opt/wagtail

If you're hosting your project on GitHub or GitLab you can create an SSH key using the following commands.

sudo su wagtail
ssh-keygen -t rsa -b 2048 -C "<your email address>"
Generating public/private rsa key pair.
Enter file in which to save the key (/opt/wagtail/.ssh/id_rsa): <enter>
Created directory '/opt/wagtail/.ssh'.
Enter passphrase (empty for no passphrase): <enter password and/or press enter>
Enter same passphrase again: <enter password and/or press enter>
Your identification has been saved in /opt/wagtail/.ssh/id_rsa.
Your public key has been saved in /opt/wagtail/.ssh/id_rsa.pub.

You can get the key by running the following command.

cat /opt/wagtail/.ssh/id_rsa.pub

Setting up the database

Before we do anything else, lets start the MariaDB server and enable MariaDB on boot. Run these commands as root.

systemctl start mariadb
systemctl enable mariadb

Now, to give ourselves a nice, secure default setup run the following command.

mysql_secure_installation

Enter current password for root (enter for none): <enter>
Set root password? [Y/n] n
Remove anonymous users? [Y/n] <enter>
Disallow root login remotely? [Y/n] <enter>
Remove test database and access to it? [Y/n] <enter>
Remove test database and access to it? [Y/n] <enter>

mysql -u root -p
Enter password: <enter>
CREATE DATABASE wagtail CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;
CREATE USER 'wagtaildb'@'localhost' IDENTIFIED BY '<db user password';
GRANT ALL PRIVILEGES ON wagtail.* to wagtaildb@localhost;
FLUSH PRIVILEGES;
exit

Deploying your Project

The next step is to pull the code down from your repository. This guide assumes GitHub or GitLab is being used but feel free to use whatever you prefer. For this example I am using an empty project hosted on GitLab named Hello.

If you're following this guide closely you should be logged in as root right now.

Create the Python virtual environment in the wagtail users home directory.

su - wagtail
python3.8 -m venv .venv
source .venv/bin/activate

Upgrade setuptools and pip

pip install --upgrade setuptools pip

Create a directory to store the logs.

mkdir logs

Clone your git repositiory and cd into the project directory.

git clone https://gitlab.com/Skriptmonkey/hello.git
cd hello

Install the dependancies.

pip install -r requirements.txt

Migrate your database.

python manage.py migrate

And finally, collect your static assets. Your STATIC_ROOT variable in the base.py settings file should be set to someplace that Nginx can easily access. I go with '/var/www/static'. Run the following commands as root.

cd /opt/wagtail
source .venv/bin/activate
cd hello
python manage.py collectstatic --noinput

Change back to the wagtail user and create a new settings file in the settings folder called local.py.

su - wagtail
vim /opt/wagtail/hello/hello/settings/local.py

In this settings file we want to import from .base, add a SECRET_KEY, and add in our ALLOWED_HOSTS. How you generate a secret key is up to you. I like to create a "test" project on my local machine and take the SECRET_KEY from that.

from .base import *


SECRET_KEY = '<your secret key>' 

# SECURITY WARNING: define the correct hosts in production!
ALLOWED_HOSTS = ['exampleurl.com', 'www.exampleurl.com']

Configuring Gunicorn

If Gunicorn hasn't been added to the requirements.txt file in your project it should be. But if it isn't you can install it through pip as the wagtail user.

pip install gunicorn

We need to create a start file for gunicorn. This file will be called whenever you need to start the application server. Feel free to use your favorite text editor.

vim /opt/wagtail/gunicorn_start

Paste this into your new file and update the variables to reflect your project. Pay special attention to the DJANGO_SETTINGS_MODULE, Wagtail uses a different convention than Django by default.

#!/bin/bash

NAME="hello"
DJANGODIR=/opt/wagtail/hello
USER=wagtail
GROUP=wagtail
WORKERS=3
BIND=unix:/opt/wagtail/run/gunicorn.sock
DJANGO_SETTINGS_MODULE=hello.settings.production
DJANGO_WSGI_MODULE=hello.wsgi
LOGLEVEL=error

cd $DJANGODIR
source /opt/wagtail/.venv/bin/activate

export DJANGO_SETTINGS_MODULE=$DJANGO_SETTINGS_MODULE
export PYTHONPATH=$DJANGODIR:$PYTHONPATH

exec /opt/wagtail/.venv/bin/gunicorn ${DJANGO_WSGI_MODULE}:application \
  --name $NAME \
  --workers $WORKERS \
  --user=$USER \
  --group=$GROUP \
  --bind=$BIND \
  --log-level=$LOGLEVEL \
  --log-file=-

Make the file executable.

chmod +x ~/gunicorn_start

Make the run directory to store the unix socket file.

mkdir ~/run

Set the permissions on the new directory.

chmod 755 ~/run

Now exit out of the wagtail user so we can setup the systemd gunicorn service.

First create the systemd service file using your favorite editor.

sudo vim /etc/systemd/system/gunicorn.service

Add the following to the file:

[Unit]
Description=gunicorn daemon
After=network.target

[Service]
User=wagtail
Group=wagtail
WorkingDirectory=/opt/wagtail
ExecStart=/opt/wagtail/gunicorn_start

[Install]
WantedBy=multi-user.target

Start the gunicorn service and enable the service to start on boot.

sudo systemctl start gunicorn
sudo systemctl enable gunicorn

Configuring Nginx

Lets get SELinux squared away before we start on configuring Nginx. We need to install the SELinux utilities.

sudo dnf install policycoreutils-python-utils -y

Now we add httpd_t to the permissive domains in SELinux.

sudo semanage permissive -a httpd_t

While we're allowing things to happen on our server lets also allow both http and https through the server firewall.

sudo firewall-cmd --zone=public --permanent --add-service=http
sudo firewall-cmd --zone=public --permanent --add-service=https

Change into the Nginx conf.d directory.

cd /etc/nginx/conf.d/

Once again, using your favorite editor create a config file for Nginx.

sudo vim wagtail.conf

Add this into the file:

upstream app_server {
    server unix:/opt/wagtail/run/gunicorn.sock fail_timeout=0;
}

server {
    listen 80;
    #listen [::]:80; # <- Uncomment this if you also have AAAA DNS record for IPV6.
    server_name IP_ADDRESS_OR_DOMAIN_NAME;  # <- insert here the ip address/domain name

    keepalive_timeout 5;
    client_max_body_size 4G;

    access_log /opt/wagtail/logs/nginx-access.log;
    error_log /opt/wagtail/logs/nginx-error.log;

    location /static/ {
        autoindex on;
        alias /opt/wagtail/hello/static/;
    }

    location /media/ {
        alias /opt/wagtail/hello/media/;
    }

    location / {
        try_files $uri @proxy_to_app;
    }

    location @proxy_to_app {
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_redirect off;
        proxy_pass http://app_server;
    }
}

Test your Nginx configuration.

sudo nginx -t

Start the service and enable it on boot.

sudo systemctl start nginx
sudo systemctl enable nginx

Reboot the server.

sudo reboot

That's it!

You should now have a functional Wagtail site deployed.

Next I'd recommend configuring your webserver with an SSL certificate. Let's Encrypt is a good, free option.