Ditch Wordpress. Build Your Own CMS with Bash and Python!

Unless you absolutely love building websites, then the thought of building your next one can be discouraging.

There are very few good options out there.

Of course, you could follow the masses and build a WordPress website or utilize Wix.com. There is nothing wrong with that, and if you went that route, your website would function just fine without any issues.

But there’s always a catch.

No matter what sort of theme you pick, purchase, or utilize, all of them are a compromise. They never quite behave the way you want them to. It’s very hard to exact full control of your website when using one of these popular methods. That fact alone is enough to turn me off from utilizing WordPress ever again. But let’s look at some more important aspects.

By the time you add in four or five different plugins, your website load time is slow. Now let me explain what slow truly is. If a person who is trying to visit your website has to wait any amount of time, over a few milliseconds for your website to load, they may very well decide it’s not worth waiting for. People in today’s society are impatient and they have short attention spans.

Ideally, every single webpage on your website should be under 14 kb. That way when the first packets are sent to their browser, your page is fully loaded.

Well, there is really only one way to accomplish this. That is to build your website from pure HTML and CSS.

Before I built this website, I did not know any CSS. To be honest, learning CSS seemed like a daunting task. There was just so much of it. Of course, all the internet practitioners would encourage you to utilize Tailwind or some other framework. However, these frameworks are just as difficult to learn as the original vanilla CSS. So why wouldn’t you just go ahead and learn the original CSS and have full control over your site. That’s what I decided to do.

Now, if you utilize just HTML and CSS only, you are going to encounter two problems. First, If you change anything inside of your footer, then you must go to every single web page on your site and make that change manually again and again.

In order to solve this problem, you have to learn about PHP Includes. That way you can just simply change one piece of HTML code for your footer, and then that change will be cascaded across all of your website pages.

All right, so that’s the first problem solved. What about the second problem?

The second problem is this. How do you manage hundreds of webpages using only HTML and CSS? (and now a little php)

This requires some sort of content management system, also known as a CMS.

For those who can actually code their own website in HTML and CSS, there are many contact management system frameworks out there.

There is Ghost, 11ty, etc. These all require learning a new framework as well.

Something I really didn’t want to take the time to do.

I experimented with 11ty and saw how it functioned.

It became clear to me I could build the exact same thing using nothing more than Bash and Python.

So today I’m going to share with you exactly how this website is built and maintained.

How to Use BASH and Python to Build Your Own CMS

The basis of this system is truly built on markdown files. Every post starts as a markdown file. At the top of every markdown file is metadata. This metadata will be utilized by the bash scripts to create files and execute all sorts of other commands. The metadata at the beginning of each of my posts looks something like this.

           ---
           Title: 
           Author: Jonathan Adams
           Date: 
           Seo-Description: 
           Keywords: 
           ---
           

Once the post is written in markdown format, then two simple bash scripts are used to publish it on the website. Let’s have a look at the first one.

IMPORTANT NOTE --- Portions of this code will not display correctly on this WEB PAGE due to various factors. If you really want to see it; View this page using your developer tools in your browser. (Press F12)

           
            #!/bin/bash

            # Prompt the user for the filename
            read -p "Please enter the name of the markdown file you wish to post: " filename

            # Check if the file exists in the Markdown_Post_Files directory
            if [ -f "Markdown_Post_Files/$filename" ]; then
                echo "File found."
            else
                echo "File not found. Please check the filename and try again."
                exit 1
            fi

            # Extract metadata using grep and sed
            title=$(grep -oP '(?<=Title: ).*' "Markdown_Post_Files/$filename")
            author=$(grep -oP '(?<=Author: ).*' "Markdown_Post_Files/$filename")
            date=$(grep -oP '(?<=Date: ).*' "Markdown_Post_Files/$filename")
            seo_description=$(grep -oP '(?<=Seo-Description: ).*' "Markdown_Post_Files/$filename")
            keywords=$(grep -oP '(?<=Keywords: ).*' "Markdown_Post_Files/$filename")

            # Print the extracted metadata (for debugging purposes)
            echo "Title: $title"
            echo "Author: $author"
            echo "Date: $date"
            echo "SEO Description: $seo_description"
            echo "Keywords: $keywords"

            # Remove the .md extension from the filename
            html_filename="${filename%.md}.html"
            #php_filename="${filename%.md}.php"


            # Create a permalink from the title
            permalink=$(echo "$title" | tr '[:upper:]' '[:lower:]' | sed 's/ /-/g')

            # Prompt the user to accept the generated permalink or enter their own
            read -p "Do you accept this permalink: $permalink [Y/n] " confirm

            # Check the user's response and either use the generated permalink or prompt for a new one
            if [[ "$confirm" =~ ^[Yy]$ ]]; then
                echo "Using permalink: $permalink"
            else
                read -p "Please enter your own permalink: " custom_permalink
                permalink="$custom_permalink"
            fi

            # Add permalink full url to sitemap.txt file
            echo "https://jonathanadams.pro/blog-articles/"$permalink".php" >> public/sitemap.txt

            # Convert the Markdown file to HTML using Pandoc
            # (UNCOMMENT WHEN DONE)  
            pandoc -o "pandoc_html_files/$html_filename" --mathjax "Markdown_Post_Files/$filename"


            # Modify the 
 tags in the HTML file using sed
            sed -i 's/
/
/g' "pandoc_html_files/$html_filename"

            # Modify the 
 tags in the HTML file using sed
            sed -i 's/
/
/g' "pandoc_html_files/$html_filename"

            # Modify the 
 tags in the HTML file using sed
            sed -i 's/
/
/g' "pandoc_html_files/$html_filename"

            # Modify the  tags in the HTML file using sed
            sed -i 's/ tags in the HTML file using sed
            sed -i 's/ "pandoc_html_files/output_file.html"

            # Remove orginal file
            rm "pandoc_html_files/$html_filename"

            # Move the temp file back to the original filename
            mv "pandoc_html_files/output_file.html" "pandoc_html_files/$html_filename"

            echo "File has been updated with two tabs added at the beginning of each line."

            # Name the php file name same as permalink
            php_filename="${permalink}.php"

            # Create a new PHP file in the public/blog-articles folder by copying post-template.php
            cp "public/blog-articles/post-template.php" "public/blog-articles/$php_filename"

            # Replace placeholders in the template with actual values
            sed -i "s/{Title}/$title/g" "public/blog-articles/$php_filename"
            sed -i "s/{Author}/$author/g" "public/blog-articles/$php_filename"
            sed -i "s/{Date}/$date/g" "public/blog-articles/$php_filename"
            sed -i "s/{SEO_Description}/$seo_description/g" "public/blog-articles/$php_filename"
            sed -i "s/{Keywords}/$keywords/g" "public/blog-articles/$php_filename"
            sed -i "s/{Permalink}/$permalink/g" "public/blog-articles/$php_filename"


            # Insert the generated HTML content into the template
            

            # Insert the generated HTML content into the template using Python
            python3 <" in line:
                        f.write(line)
                        f.write(html_content + "\n")
                    else:
                        f.write(line)

            # Replace the original file with the modified one
            import os
            os.replace(output_file, template_file)
            EOF

            echo "Post created successfully."


            python3 <" in nav_content:
                    nav_content = nav_content.replace("", "\n" + template_content)
                else:
                    nav_content += template_content + "\n"
                
                f.write(nav_content)

            # Replace the original file with the modified one
            import os
            os.replace(output_file, "public/articles-nav.php")
            EOF

            echo "Post listed successfully."
           
           

           
            #!/bin/bash

            # Prompt the user for the git comment
            read -p "Please enter the comment you wish to have placed in the commit message: " comment


            git add .
            echo "Added all files to the local git folder"

            git commit -m "$comment"

            echo "Added the following message to the commit: $comment"

            git push -u origin master

            echo "Pushed a copy of the master branch to github"

            git subtree split --prefix public -b hostinger-deploy

            echo "Created subtree split"

            git push origin hostinger-deploy:hostinger --force

            echo "Pushed to hostinger branch"

            git branch -D hostinger-deploy

            echo "Deleted subtree split"
            echo "Done"
            echo "Visit site https://jonathanadams.pro"