Backdrop CMS

There are lots of different approaches to managing Backdrop CMS configuration files in Git, but this one is my favorite. It works great for projects with multiple developers, and it can also be easily adapted for multiple deployment environments, as on Pantheon.

This versioned staging directory strategy has been adapted from a recommendation from @populist and @davidstrauss based on how the config directory is being managed for Drupal 8/9/10 on Pantheon.

One of the benefits of hosting a website on Pantheon, is that the dashboard can notify you when there are available updates for the core code of your CMS (Backdrop CMS, Drupal, or WordPress).

Pantheon does this by comparing the code you are running on your own website, to the latest available code in the matching Pantheon "upstream". For Backdrop CMS websites, the Pantheon "upstream" is the backdrop-pantheon repository on GitHub.

When your Pantheon dashboard shows that there are updates available for your site, it has noticed that your code is no longer identical to the code located there.

If you've been working with Backdrop for a while, you'll notice that sometimes, a particular module, theme, layout template (or sometimes even Backdrop core) doesn't quite work right - or - perhaps it just doesn't quite work the way you'd like it to for your particular project.

Fortunately, this is the world of open-source, and you are most likely not the first person to have this concern. Your first line of attack should always be to search the issue queue for the project and see if someone else has already fixed this problem for you (or added the new feature). Quite often, you'll find that they have, and there will be a Pull Request (PR) linked from the issue containing the necessary changes to the code.

Once an issue has a PR on GitHub, it's easy to create a patch for your own site by adding .patch to the end of the URL.

Today I need to make some updates to one of my Backdrop CMS websites that hasn't been worked on for in a while. This site is hosted on Pantheon. Since I haven't written about how I update my local site before, I thought I'd take the time to document it today. I hope someone finds this helpful :)

Note, the instructions here assume the site is using my configuration management workflow for Pantheon hosted websites.

Get recent copies of everything

I always start by grabbing a fresh copy of the 1) code, 2) database, 3) files and 4) configuration files.

To pull down any recent changes to the code (1), I use the Terminal to navigate to where I keep the code for this site on my local computer, and type 'git pull'.

I use MAMP for my local Backdrop development on MacOS.

If you would like to do the same, first download the most recent version of MAMP and install it locally. When you are done, you should have directories for both MAMP and MAMP PRO in your /Applications directory.

To run the application, double click MAMP.app inside the MAMP directory. Once it's up and running, you should see a MAMP widget with a cute elephant icon.

Let's start by adjusting the preferences. I like to run MAMP on the standard ports for Apache and MySQL. MAMP provides it's own ports, and by default uses these instead.

When moving from traditional web hosting to managed platform-specific hosting providers like Pantheon, there are often a few tricks you'll need to work around. In this post I'll be documenting the steps necessary to move an existing website onto Pantheon.

Step 1: Create a new website on Pantheon

As someone who manages dozens of websites, I love Pantheon's upstreams. Whenever there is a security update for Drupal core or for Backdrop core, the provided one-click core update saves me a lot of time. Whenever I start a new Pantheon project or moving an existing site onto Pantheon, I want to start from an upstream.

I'll start by creating my site from Backdrop's Pantheon upstream.

I also like to run the installer to get a working Backdrop site (you'll see why later). I will replace various parts in the steps that follow.

Part of my job as a developer is making website hosting recommendations to my clients. To create a list of recommendations, I determine the appropriate plan for the website (or websites) we're working with, and present the options to my client. In order for them to make a decision based on these recommendations, each option needs to include an associated cost.

Since most of my clients are small businesses (with less than 5 employees, in many cases only 1), educational institutions, non-profits, or otherwise operating on a tight budget, they need to know what the cost will be head of time, and they need the ability to reject the recommendation if it is too expensive.

I've been meaning to write up a blog post about how to go from a HTML template (purchased from a place like https://themeforest.net) to a Backdrop theme. As a developer with only a smidge of design skill, I have found this to be a workable alternative to hiring a designer for custom work.

Below you'll find a very a rough outline of the steps I follow:

This guide is intended to help people using Cloudflare to speed up and protect their Backdrop CMS sites.

Step #1

Create three Cloudflare PageRules to exclude the Backdrop cron page and the link to run cron as an admin from Cloudflare’s caching and performance features:

• www.example.com/node/*/edit - Cache Level: Bypass
• www.example.com/node/add/* - Cache Level: Bypass
• www.example.com/core/cron.php* - Cache Level: Bypass

Step #2

If you have a valid SSL certificate on your server, you'll need to navigate to the Cloudflare Crypto section and update the SSL setting to `Full (strict)`. Without this setting SSL will be terminated at the Cloudflare edge server, and all traffic on your server will come in through port 80 instead of 443.

The breakpoint for a Smartmens menu to go from displaying only the hamburger to displaying the whole menu is 768px by default. I had a site where I needed the breakpoint to fall at 1120px instead, here's how I changed it:

I started by copying two CSS files from backdrop core into my theme. The two files were named menu-dropdown.theme.css and menu-toggle.theme.css and are located in the core/modules/system/css/ directory.

I then opened both copies of these files in my editor, and changed every breakpoint that was 768px, to 1120px. The breakpoints are specified in ems, so that meant replacing

@media (min-width: 48em) {

with

@media (min-width: 70em) { 

I then added both these stylesheets into my theme's .info file, like so: