Folkbot Drupal 8 Distribution Referencing Standard & Lightning

Folkbot Drupal 8 Distribution

In Part 1 we set-up a Drupal 8 default Git repository with Drupal.org as upstream and Gitlab as our origin for continuous integration.

Drupal 8 Installation Profiles

Drupal.org has had a face-lift and we hit the spanking new docs

Lightning & Standard Distribution as Reference

https://www.drupal.org/u/brantwynn has created the excellent Lightning Distribution as a kind of reference and best practice Drupal 8 site while working for Acquia, lets use that as a reference.

Notice the difference between downloading the code vs downloading a tar or zip. The tar/zip is an entire working codebase, whereas the code via git needs to be built with composer and Drush Make and the D8 build tool-chain.

Lets keep it simple and download the tar.gz.

Also, lets rename the folder according to Lightning conventions

Our new folder name is folkbot-8.2-dev-0.01, we can keep the gitlab repo the same and use branches and tags as needed depending on how we work with dev/test/live.

Choose a Machine Name

We are calling this machine name folkbot

[code lang=text]
cd /home/devekko/Projects/Folkbot/drupal8/folkbot-8.2-dev-0.01/profiles/
vi folkbot.info.yml
[/code]

inside the file we add meta information and also modules we require our custom module called folkbot and our theme folkbot which will be based on the Bootstrap theme

[code lang=text]
name: Folkbot
type: profile
description: 'Folkbot – automation of the people, by the people, for the people'
core: 8.x

# Optional: Declare your installation profile as a distribution
# This will make the installer auto-select this installation profile.
# The distribution_name property is used in the installer and other places as
# a label for the software being installed.
distribution:
# name: Folkbot TODO make a Distribution

# Required modules
dependencies:
# CORE modules
– block
– block_content
– breakpoint
– ckeditor
– color
– config
– comment
– contextual
– contact
– contact_storage
– datetime
– diff
– dblog
– editor
– entity_reference
– field_ui
– file
– help
– history
– image
– options
– menu_link_content
– path
– quickedit
– rdf
– search
– shortcut
– toolbar
– taxonomy
– views
– views_ui
# CONTRIB modules
– metatag
– node
– search_api_db
– bootstrap_layouts
# CUSTOM modules
– folkbot

themes:
# CONTRIB theme
– bootstrap
# CUSTOM theme
– folkbot
# CORE themes
– bartik
– seven
[/code]

next we add an .install file

[code lang=text]
vi folkbot.install
[/code]

we use the default basic script snippet and call the core profile buried away deeper in core, and then we take some basic installation functions from Lightning, such as setting logo, homepage, admin user etc.

Looking at the Drupal Core Standard installation we also see we have repeated installation functions, we remove those and we have code below

[code lang=text]
<!–?php /** * @file * Install, update and uninstall functions for the Folkbot install profile. */ use Drupal\Core\Entity\Entity\EntityViewDisplay; use Drupal\field\Entity\FieldConfig; use Drupal\node\Entity\NodeType; use Drupal\user\Entity\User; use Drupal\user\RoleInterface; /** * Implements hook_install(). * * Perform actions to set up the site for this profile. * * @see system_install() */ function folkbot_install() { // First, do everything in standard profile. include_once DRUPAL_ROOT . '/core/profiles/standard/standard.install'; standard_install(); // Restrict user registration to admin role creation. \Drupal::configFactory() ->getEditable('user.settings')<br ?–> ->set('register', USER_REGISTER_ADMINISTRATORS_ONLY)
->save(TRUE);

// Set the default and admin theme.
\Drupal::configFactory()
->getEditable('system.theme')
->set('default', 'folkbot')
->set('admin', 'seven')
->save(TRUE);

// Set the path to the logo, favicon and README file based on install
// directory.
$folkbot_path = drupal_get_path('profile', 'folkbot');
\Drupal::configFactory()
->getEditable('system.theme.global')
->set('logo', [
'path' => $folkbot_path . '/folkbot.png',
'url' => '',
'use_default' => FALSE,
])
->set('favicon', [
'mimetype' => 'image/vnd.microsoft.icon',
'path' => $folkbot_path . '/favicon.ico',
'url' => '',
'use_default' => FALSE,
])
->save(TRUE);
}
[/code]

we see a bunch of profiles in core

[code lang=text]
ls -alh /home/devekko/Projects/Folkbot/drupal8/folkbot-8.2-dev-0.01/core/profiles
total 40K
drwxr-xr-x 10 devekko devekko 4.0K Feb 9 14:39 .
drwxr-xr-x 12 devekko devekko 4.0K Feb 9 14:39 ..
drwxr-xr-x 4 devekko devekko 4.0K Feb 9 14:39 minimal
drwxr-xr-x 4 devekko devekko 4.0K Feb 9 14:39 standard
drwxr-xr-x 4 devekko devekko 4.0K Feb 9 14:39 testing
drwxr-xr-x 2 devekko devekko 4.0K Feb 9 14:39 testing_config_import
drwxr-xr-x 3 devekko devekko 4.0K Feb 9 14:39 testing_config_overrides
drwxr-xr-x 2 devekko devekko 4.0K Feb 9 14:39 testing_missing_dependencies
drwxr-xr-x 3 devekko devekko 4.0K Feb 9 14:39 testing_multilingual
drwxr-xr-x 3 devekko devekko 4.0K Feb 9 14:39 testing_multilingual_with_english

[/code]

and standard profile

[code lang=text]
tree /home/devekko/Projects/Folkbot/drupal8/folkbot-8.2-dev-0.01/core/profiles/standard

home/devekko/Projects/Folkbot/drupal8/folkbot-8.2-dev-0.01/core/profiles/standard
├── config
│   ├── install
│   │   ├── automated_cron.settings.yml
│   │   ├── block.block.bartik_account_menu.yml
│   │   ├── block.block.bartik_branding.yml
│   │   ├── block.block.bartik_breadcrumbs.yml
│   │   ├── block.block.bartik_content.yml
│   │   ├── block.block.bartik_footer.yml
│   │   ├── block.block.bartik_help.yml
│   │   ├── block.block.bartik_local_actions.yml
│   │   ├── block.block.bartik_local_tasks.yml
│   │   ├── block.block.bartik_main_menu.yml
│   │   ├── block.block.bartik_messages.yml
│   │   ├── block.block.bartik_page_title.yml
│   │   ├── block.block.bartik_powered.yml
│   │   ├── block.block.bartik_search.yml
│   │   ├── block.block.bartik_tools.yml
│   │   ├── block.block.seven_breadcrumbs.yml
│   │   ├── block.block.seven_content.yml
│   │   ├── block.block.seven_help.yml
│   │   ├── block.block.seven_local_actions.yml
│   │   ├── block.block.seven_login.yml
│   │   ├── block.block.seven_messages.yml
│   │   ├── block.block.seven_page_title.yml
│   │   ├── block.block.seven_primary_local_tasks.yml
│   │   ├── block.block.seven_secondary_local_tasks.yml
│   │   ├── block_content.type.basic.yml
│   │   ├── comment.type.comment.yml
│   │   ├── contact.form.feedback.yml
│   │   ├── core.base_field_override.node.page.promote.yml
│   │   ├── core.entity_form_display.block_content.basic.default.yml
│   │   ├── core.entity_form_display.comment.comment.default.yml
│   │   ├── core.entity_form_display.node.article.default.yml
│   │   ├── core.entity_form_display.node.page.default.yml
│   │   ├── core.entity_form_display.user.user.default.yml
│   │   ├── core.entity_view_display.block_content.basic.default.yml
│   │   ├── core.entity_view_display.comment.comment.default.yml
│   │   ├── core.entity_view_display.node.article.default.yml
│   │   ├── core.entity_view_display.node.article.rss.yml
│   │   ├── core.entity_view_display.node.article.teaser.yml
│   │   ├── core.entity_view_display.node.page.default.yml
│   │   ├── core.entity_view_display.node.page.teaser.yml
│   │   ├── core.entity_view_display.user.user.compact.yml
│   │   ├── core.entity_view_display.user.user.default.yml
│   │   ├── editor.editor.basic_html.yml
│   │   ├── editor.editor.full_html.yml
│   │   ├── field.field.block_content.basic.body.yml
│   │   ├── field.field.comment.comment.comment_body.yml
│   │   ├── field.field.node.article.body.yml
│   │   ├── field.field.node.article.comment.yml
│   │   ├── field.field.node.article.field_image.yml
│   │   ├── field.field.node.article.field_tags.yml
│   │   ├── field.field.node.page.body.yml
│   │   ├── field.field.user.user.user_picture.yml
│   │   ├── field.storage.node.comment.yml
│   │   ├── field.storage.node.field_image.yml
│   │   ├── field.storage.node.field_tags.yml
│   │   ├── field.storage.user.user_picture.yml
│   │   ├── filter.format.basic_html.yml
│   │   ├── filter.format.full_html.yml
│   │   ├── filter.format.restricted_html.yml
│   │   ├── node.type.article.yml
│   │   ├── node.type.page.yml
│   │   ├── rdf.mapping.comment.comment.yml
│   │   ├── rdf.mapping.node.article.yml
│   │   ├── rdf.mapping.node.page.yml
│   │   ├── rdf.mapping.taxonomy_term.tags.yml
│   │   ├── system.cron.yml
│   │   ├── system.theme.yml
│   │   ├── taxonomy.vocabulary.tags.yml
│   │   └── user.role.administrator.yml
│   └── optional
│   ├── image.style.max_1300x1300.yml
│   ├── image.style.max_2600x2600.yml
│   ├── image.style.max_325x325.yml
│   ├── image.style.max_650x650.yml
│   ├── responsive_image.styles.narrow.yml
│   └── responsive_image.styles.wide.yml
├── standard.info.yml
├── standard.install
├── standard.links.menu.yml
├── standard.profile
└── tests
└── src
└── Functional
└── StandardTest.php

6 directories, 80 files

[/code]

vs Lightning, a more sophisticated distro

[code lang=text]
tree /home/devekko/Projects/lightning-8.x-2.03/profiles/lightning
1291 directories, 3102 files
[/code]

we create a folkbot.profile

[code lang=text]
vi folkbot.profile
<!–?php <br ?–> /**
* @file
* Enables modules and site configuration for a standard site installation.
*/

// Add any custom code here like hook implementations.
[/code]

Now when we visit the local dev site in our browser we can install and choose our partly built installation profile

Choose language | Drupal - Google Chrome_001
Choose language | Drupal – Google Chrome_001

and choose profile

Select an installation profile | Drupal - Google Chrome_002
Select an installation profile | Drupal – Google Chrome_002

we make the files directory

[code lang=text]
mkdir sites/default/files
[/code]

make it writeable with permissions and groups

[code lang=text]
sudo chmod -R 775 sites/default/files
sudo chown -R $USER:www-data sites/default/files
[/code]

copy the settings file

cp -ar /var/www/folkbot_drupal8/sites/default/default.settings.php /var/www/folkbot_drupal8/sites/default/settings.php

make it writeable with permissions as above

[code lang=text]
sudo chown $USER:www-data /var/www/folkbot_drupal8/sites/default/settings.php
sudo chmod 775 /var/www/folkbot_drupal8/sites/default/settings.php
[/code]

and we need to create a gitignore and make sure our settings isn’t in our git repo, a good reference is this repo with many specific gitgnores

we need to now install Drush and download the missing modules from the docs

[code lang=text]
[email protected]:/var/www/folkbot_drupal8⟫ # Download latest stable release using the code below or browse to github.com/drush-ops/drush/[email protected]:/var/www/folkbot_drupal8⟫ php -r "readfile('https://s3.amazonaws.com/files.drush.org/drush.phar');" > drush
[email protected]:/var/www/folkbot_drupal8⟫ # Or use our upcoming release: php -r "readfile('https://s3.amazonaws.com/files.drush.org/drush-unstable.phar');" > drush
[email protected]:/var/www/folkbot_drupal8⟫
[email protected]:/var/www/folkbot_drupal8⟫ # Test your install.
[email protected]:/var/www/folkbot_drupal8⟫ php drush core-status
Drupal version : 8.2.6
Site URI : http://default
PHP configuration : /etc/php/7.0/cli/php.ini
PHP OS : Linux
Drush script : /var/www/folkbot_drupal8/drush
Drush version : 8.1.9
Drush temp directory : /tmp
Drush configuration :
Drush alias files :
Drupal root : /var/www/folkbot_drupal8
Drupal Settings File : sites/default/settings.php
Site path : sites/default

[email protected]:/var/www/folkbot_drupal8⟫
[email protected]:/var/www/folkbot_drupal8⟫ # Make `drush` executable as a command from anywhere. Destination can be anywhere on $PATH.
[email protected]:/var/www/folkbot_drupal8⟫ chmod +x drush
[email protected]:/var/www/folkbot_drupal8⟫ sudo mv drush /usr/local/bin
[email protected]:/var/www/folkbot_drupal8⟫
[email protected]:/var/www/folkbot_drupal8⟫ # Optional. Enrich the bash startup file with completion and aliases.
[email protected]:/var/www/folkbot_drupal8⟫ drush init
Copied example Drush configuration file to /home/devekko/.drush/drushrc.php [ok]
Copied example Drush bash configuration file to /home/devekko/.drush/drush.bashrc [ok]
Copied Drush completion file to /home/devekko/.drush/drush.complete.sh [ok]
Copied example Drush prompt file to /home/devekko/.drush/drush.prompt.sh [ok]
# Include Drush bash customizations.
if [ -f "/home/devekko/.drush/drush.bashrc" ] ; then
source /home/devekko/.drush/drush.bashrc
fi

# Include Drush completion.
if [ -f "/home/devekko/.drush/drush.complete.sh" ] ; then
source /home/devekko/.drush/drush.complete.sh
fi

# Include Drush prompt customizations.
if [ -f "/home/devekko/.drush/drush.prompt.sh" ] ; then
source /home/devekko/.drush/drush.prompt.sh
fi

Append the above code to /home/devekko/.bashrc? (y/n): y
Updated bash configuration file /home/devekko/.bashrc [ok]
Start a new shell in order to experience the improvements (e.g. `bash`). [ok]
[/code]

we can drush dl modules now and copy them to the profiles/modules folder, from help

[code lang=text]
drush dl –help | grep "destination"
If no –destination is provided, then destination depends on the project type:
–destination= Path to which the project will be copied. If you're providing a relative path, note it is relative to the
–destination is also present this option will be ignored.
[/code]

install modules

[code lang=text]
drush dl metatag –destination=profiles/folkbot/modules
Project metatag (8.x-1.0) downloaded to /var/www/folkbot_drupal8/profiles/folkbot/modules/metatag. [success]
Project metatag contains 14 modules: metatag_dc_advanced, metatag_dc, metatag_hreflang, metatag_app_links, metatag_mobile, metatag_facebook, metatag_twitter_cards, metatag_open_graph, metatag_open_graph_products, metatag_google_cse, metatag_verification, metatag_google_plus, metatag_favicons, metatag.
[/code]

lets add Bootstrap base theme

[code lang=text]
drush dl bootstrap –destination=profiles/folkbot/themes
The directory profiles/folkbot/themes does not exist.
Would you like to create it? (y/n): y
Project bootstrap (8.x-3.1) downloaded to /var/www/folkbot_drupal8/profiles/folkbot/themes/bootstrap. [success]
[/code]

and token module

[code lang=text]
drush dl token –destination=profiles/folkbot/modules
Project token (8.x-1.0-rc1) downloaded to /var/www/folkbot_drupal8/profiles/folkbot/modules/token.
[/code]

we now get a prompt to change settings.php back to a more secure read only setting

[code lang=text]
sudo chmod 555 /var/www/folkbot_drupal8/sites/default/settings.php
[/code]

We now see a site after we manually change to Bootstrap theme

Folkbot Drupal 8 Distribution
Folkbot Drupal 8 Distribution

We will build the Folkbot theme next

In part 3 we make a custom theme, part 4 a custom module for a rest API.

Folkbot Drupal 8 Distribution Part 1 – Code Setup

Folk Bot Drupal 8

We are going to build a Folkbot Drupal 8 Distribution, Profile, Module, Theme.

This will connect with the central proprietary www.Folkbot.com and also other Folkbot servers, self hosted, forks etc in the federation.

Or that is the plan anyways.

Drupal 8 Installation Profiles

Drupal.org has had a face-lift and we hit the spanking new docs

Download Drupal 8

It’s tempting to set-up a GIT upstream right now from Drupal.org, lets live dangerously

mkdir -p ~/Projects/Folkbot/drupal8
cd ~/Projects/Folkbot/drupal8

note, we are nesting a bit deeper so I can put other working folder and files above the repo as needed

git clone --branch 8.2.x https://git.drupal.org/project/drupal.git folkbot_drupal8
cd folkbot_drupal8

I am adding the Gitlab remote for Folkbot

git remote add gitlab_com [email protected]:folkbot/folkbot_drupal8.git

and lets remove origin so we dont accidentally pull from it

git remote remove origin 

and we can add it again as drupal_org

git remote add drupal_org https://git.drupal.org/project/drupal.git

its a nice thing to have two remotes, one upstream from source, and another our customizations

[email protected]:~/Projects/Folkbot/drupal8/folkbot_drupal8⟫ git remote -v
drupal_org      https://git.drupal.org/project/drupal.git (fetch)
drupal_org      https://git.drupal.org/project/drupal.git (push)
gitlab_com      [email protected]:folkbot/folkbot_drupal8.git (fetch)
gitlab_com      [email protected]:folkbot/folkbot_drupal8.git (push)

lets make the branch 8.2.x our master branch, we can make feature branches and tags for our work later, we want to be able to keep drupal.org upstream branches separate from our own work

git checkout -b master
git status
On branch master
nothing to commit, working tree clean

now lets modify create a FOLKBOT.md

touch ~/FOLKBOT.md
git commit -am "FolkBot docs"

and now we can push to Gitlab

git push -u gitlab_com master

Page Builder Dark Magic Locked Forever

"Love Locks" on Pont Neuf

Page Builder’s for Drupal and WordPress, at first feel like magic, but the Light can soon turn to Darkness.

Web CMS like Drupal and WordPress save development time and this thinking leads to the magic of a Page Builder.

Does complexity and increased total cost of ownership follow this initial simplicity? Are you locked in forever with a Page Builder? Is this bait and switch?

Page Builder Magic with Drupal
Page Builder Magic with Drupal

Saving Time and Money With Page Builders Today

Busy, stressed, want to get a product to market?

Want a website launched quickly?

A web CMS like WordPress and Drupal, offer paid page builders like Divi (WordPress) and Glazed/Carbon (Drupal).  There are also free ones like Panels and Display Suite in Drupal and some others I’ve not used on WordPress.

The overall philosophy of WordPress and Drupal, with their “clickety click” web interface, lead a site owner or site builder, to buy into the page builder route.

Very recently I launched 3 commercial websites in 4 weeks, for a local publisher, with the very excellent WordPress Divi Builder / page builder and the themes Divi & Extra from Elegant Themes.

From an end-user, site builder, no-coding required perspective DIVI and to a lesser extent, the newer Extra theme, are really, really amazing.

In Drupal projects I have struggled with Drupal 7 free page builders like Panels/Panels-In-Place-Editor.  A more magical page builder is the Drupal Distribution Panopoly and the distributions based on it.

It’s genuinely a really amazing feeling to be able to build a site in a day with WordPress & Divi.

You quickly get to the “looks great, thanks for building the website” moment. With gorgeous and functional landing pages. You can build a website in minutes and hours versus weeks to months. But…

But, What About Tomorrow?

The DIVI page builder downside came quickly with a simple request to change the standard functionality of a core Divi Builder module.

Under deadline pressure I looked at the code for the proprietary plugin Divi Builder and the Divi theme, and was overwhelmed by the hundreds of thousands of lines of code.

Seriously, that’s a lot of code. So, what looked like a small change turned into a steep learning curve, with the prospect of a fairly significant programming project.

The light magic of the page builder UX had a dark magic code underbelly.

Any page builder time-saving, looked about to be lost into a coding project of ambiguous value. This created a catch-22 situation which was frustrating and unsatisfactory to all.

Experienced WordPress developers will be shaking their heads and saying “I told you so, page builders are dark magic, page builders are evil”.

No doubt on the other side, Divi experts will also be shaking their heads and saying “dude, its all on you, buy a plugin, or code a custom Divi module, you just haven’t got the skills”.

I started a couple of coding experiments specific to requests. But the Divi Builder code is complex and large, and there was no real budget for this, and it was ultimately wasted effort.

Divi Ecosystem

There is a blogosphere of excellent tutorials and recipes and hacks. There are a few independent after-markets for plugins for the Divi page builder.

You can relatively easily find fixes and extensions and themes. Many of these seem like good value and the ecosystem is real and the community seems great.

But we had clearly left the Divi / Extra magic sweet spot and moved into a different place not so obvious up front with page builders.

Page Builder Locked In Forever

Possibly the biggest downside of Divi, is the intermingling of content and structure and display.

This is the single biggest problem and goes against every tenant of good web content management. Data should be separated from structure and display. Not all mixed up in a huge page of shortcodes.

One way to avoid this, I think, was to develop custom post types, and custom fields. Then use after market Divi modules to extend the Divi or Extra theme to accommodate this. This was not obvious and was not easy.

Locked In By the Magic of Page Builders

Our choices where now;

  • The screamingly obvious choice was narrow the scope of customization and work within the golden handcuffs.
  • Or focus on more fruitful aspects of web publishing.
  • Maybe a heads-first dive into the deep-end of Divi customization.
  • Perhaps swap out or mix-in third party plugins into Divi theme.

High Trust Client-Developer Relationships

It’s a precious client that wants to customize and understands the process and the costs.

When a client has a realistic understanding i.e. this is usually paid discovery, and they have a good sense of process, and this is an investment in time and has risks.

There may well be rabbit holes of complexity. It might be necessary to back out of one line of research and development. It might be better to outsource to a specialist.

Everything is wonderful if there is a high-trust relationship with the client. They have the time and money, understanding, maturity and patience to invest in such paid discovery, or outsourcing, or change in general.

Not a high trust relationship? The client doesn’t have time or money? If they need to get a product to market? If the perception is “my business is failing because the standard Divi module doesn’t work how I want, therefore my website is broken”.

Up goes the Red Flag and now there looms a big question mark over the entire project and the choice of technologies along the way.

Project & Task Management as Contract

Then project management becomes a kind of contract for settling disagreements and if these  project management artifacts don’t exist, well then, Houston, we have a problem.

Startups and Proof of Concepts with Page Builders

On a self-funded start-up R&D project I worked on with a friend we had to own the cost of similar lessons but on Drupal.

The project was based on a Drupal premium theme, which was very similar to Divi, a company Sooperthemes, with premium themes such as Glazed and a page builder called Carbon.

As a paying customer of premium themes from Sooperthemes in the past. I re-discovered Carbon & Glazed when struggling with an ancestor of Panopoly, a Drupal 7, Panels based site. A Panels page-builder website built by a leading agency and and other developers for a government client.

Drupal Panels Page Builder Magic

As the webmaster for this site, which had almost 20 Drupal Content Types, almost 7,000 nodes and a nightly feed via Drush from a JSON API from a custom core enterprise Rails app. This enterprise architecture had numerous iterations and felt like an archaeological dig.

On request, we documented the Panels based Landing Page procedure, for this GPL Panels based Drupal 7 site, and it came to something like 20 steps. Screenshots with many steps, which where counter intuitive. It involved bouncing between different screens and adjusting taxonomies and panel pages etc.

Sure, you can use Drupal 7 Panopoly and its way better than this. But there was no appetite for spending lots of time and money migrating the Drupal 7 site into a new Panopoly setup. Certainly not with 20 content types and 7000 nodes.

WordPress Custom Post Types and Drupal Entities

Also Drupal 8 is the next big thing in the Dries kindgom and seems to be maturing somewhat.

WordPress Custom Post Types / Advanced Content Fields is also a strong contender. A migration to WordPress was tempting as a Drupal 7 to Drupal 8 change is also a migration and not an upgrade.

Custom build-outs in Rails and Angular quietly lurk in the shadows.

At this stage I searched around and discovered Glazed and Carbon by Sooperthemes. When I bought a limited license and sent a colleague, the PHP programmer on the project, his response was “this is the coolest thing I ever saw!”. And in many ways it was.

Being ambitious, and poor, and foolish, I wanted to do a sustainability project website in Drupal 7 with Glazed and Carbon, and decided and make it a rating site.

Drupal 7 is a mature ecosystem, and you get a huge range of modules for free. Glazed and Carbon added a really excellent page builder experience, kind of like Divi.

But I soon discovered that some Drupal 7 modules, like the rating modules are effectively in maintenance mode, and there are long standing bugs.

Also, another Drupal page building style module ecosystem snagged development. Display Suite has some annoyances that I couldn’t troubleshoot via the web interface. Also, the Views for the directory of the rating site where slow and needed a refactored but these where generated originally from the proprietary theme.

A strange netherworld in between

Again, I’d left the sweet, safe magical space of “Page Builders”. This time in Drupal 7 page builders, a combination of free Display Suite and premium/paid Glazed/Carbon.

I had stumbled, blinded by Page Builder Light Magic into a Dark place. A place where the surface simplicity of the Page Builder Magic UX had created monstrously complex code. It felt like frickin Fantasia.

So, after 3 weeks of nearly full time work, including content creation by a friend, I decided reluctantly, that I wanted to do a second version.

A new version with a custom simplified Bootstrap on vanilla Drupal 7. I cloned the site with Aegir, and switched themes to Bootstrap and borked the cloned site. There was too much intermingled proprietary and non proprietary code.

Conversion was going to be complex and time consuming.

A combination of all of the above factors meant a rebuild was on the horizon, not a simple switch in theme.

Click Click Click Click, Refresh,  Click Click Click Click, Refresh

One of the other unsatisfying things about the Divi and Glazed is that the constant click click click. You get this experience site building with Drupal and WordPress in general, but this no coding philosophy is taken to the next level with magical page builders.

Ultimately it hurts, you get RSI, Repetitive Strain Injury. I switch hands with my mouse, change chairs and computers. Buts its stressful. Its a case of too much of a good thing.

Capturing Page Builder Config in Code ?

It’s all configuration via the web interface.

Theoretically,  a lot of these changes could be captured in code, in Drupal 7 that would be Features, and in WordPress the Configuration Management plugins, which I haven’t tried.

But this would untested and involve quite a bit of trial and error and would be in the shadow land between paid and free.

Open questions are:

  • Can I share the code and get community support?
  • Does this break the license if you forked parts of the code and make extensions and share the code?

With completely free i.e. GPL code you would have no issues.

Presumably there would be ways to deal with this.

Straddling is Not a Good Strategy

But the key thing is, you’ve left one business model i.e. paid premium easy page builder.

You are now straddling premium and free and it’s complex.

The overall cost of ownership becomes more than choosing one or the other and working within those constraints.

Surely there are experts in this hybrid of paid/free page builders. They must make a great living doing consulting and selling plugins.

Maybe its an easy fix with a plugin or two from the Divi after market, then again I am not so sure. I wonder how much of the experts work is saving projects from this messy straddling two worlds zone. There must be a lot of client therapy involved.

Proprietary code can be open source. Gitlab Enterprise hosts its proprietary code in public and enforces license payments via the admin UX. So, I assume it would be possible to publicly develop extensions of the code and get community AND company support. Is open source but with a proprietary license. TODO research this.

RMS would not be pleased.

Frustrated, searching the web, I read a blog piece about WordPress Divi, saying, its a great tool, but you better make sure when you use it for a site, its forever.

This article of course was suggesting a competing product and describing it middle ground solution called Beaver Builder. Maybe this was an affiliate link, maybe it was a genuine recommendation AND an affiliate link.

I’ve also had Beaver Builder recommended by two people personally. Beaver Builder has a page builder plugin, AND a Beaver Builder theme, but also advertises the use of ANY THEME.

Alternatives Today

So, this is where I am at currently, I am in the process of archiving my Glazed/Carbon development sites and didn’t renew.

The new version for rich page, rich design, landing page driven marketing sites, does look amazing. Some of the designs look cliched and like every other rich-design, rich-page marketing site out there on the web today. Fashions eh?

Owning the starter license for Divi, but a bit burned out and struggling to think of a site I will use it on. I don’t really want to do more work with it, and am unsure if I could recommend it to a client.

Excellent for a 5 to 10 page site that gets built in a day or a week and has only marginal updates. But if customization or migration becomes an requirement, well its a highly specialized area. It’s an entirely different proposition to the original super easy page builder proposition.

The same with Sooperthemes and Glazed? There is a short term gain, and then possibly you are locked in and its more expensive overall if you want to do advanced work. If I am wrong, please post comments.

A kind of bait and switch?

Super easy and almost free, and cheaper for the beginning stages. But then locked in and super complex on customization. I guess enough websites owners are okay with this, enough to not create a huge backlash.

No doubt I am wrong and there are talented experts out there who will share examples of how to completely avoid all these snares.

Horses For Courses

Plenty of marketing websites are basically traded in and scrapped every couple of years. And if the cost is low, like thousands versus 10,000’s than Divi and Glazed are still good value.

God knows web design is driven by fashions. i.e. scrap those text animations please, remove those rotating gauges please, take off the full width sliders and the luminescent primary colors please.

Anyways, enough vanity griping and verbose monologue.

I am building a hyperlocal startup site for myself with Beaver Builder now and I’ll let you know how I get on.

Do you love the Light Magic of Page Builders? Or are the Page Builders Dark Magic?

Aegir 3.8 on Ubuntu 16.04 Xenial on LXD LXC (eventually)

I have decided to write some books and work on apps from those. One book will be on website building and the other will be on self-hosting.

Therefore I am going to record the set-up, customization, programming and themes of various systems for hosting.

One I know relatively well is Aegir, basically Drupal hosting Drupal with Drush. I am going to work through Aegir 3.8 on Ubuntu Xenial with PHP 7 which is twice as fast.

As a second step I use the Remote Import feature to import sites from an OVH server.

The plan is to build a Drupal 7 and a Drupal 8 site each using my emerging framework.

Community Organizing

For a maybe 12 months I volunteered as community organizer for the Aegir Project and co-founded and co-organized an event at the United Nations hosted within nyccamp and opencamps.org.

This event is called Aegir Summit and we had Richard Stallman of Free Software Foundation give the Aegir group a strategy session and he also gave the entire summit a presentation on Free Software. The 2015 Aegir Summit archive site has details on sessions etc and the 2016 Aegir Summit featured NASA hosting with Aegir by Mobomo.

The Aegir Summit mini site has some additional info as does the marketing site Aegir Hosting System and the community site. I also gave a talk at Stanford Drupal Camp (slides) and at SCALE as report-back sessions from the New York event, basically telling my story and advocating commercial free software.

Virtual Machine

Am working on LXD / LXC I use a partly pre-configured Xenial LXC container

launch a fresh LXC container

enter enter the container and change hostname, hosts and network

lxc exec aegir-devekko-io bash

update and upgrade the container

apt-update && apt-upgrade

edit the /etc/hostname

aegir-devekko-io

/etc/hosts files, I turn off ipv6 as I cant use DNS with ipv6 on my LAN and it creates issues


127.0.0.1 aegir.devekko.io aegir-devekko-io localhost
REDACTED aegir.devekko.io aegir-devekko-io localhost
10.1.10.115 aegir.devekko.io aegir-devekko-io localhost

/etc/network/interfaces.d/eth0.cfg

The primary network interface


auto eth0:0 eth0:1 
iface eth0:0 inet static 
address REDACTED/28 
gateway REDACTED

iface eth0:1 inet static 
address 10.1.10.115/24

dns-nameservers REDACTED 8.8.8.8 
dns-search devekko.io

 

Pre-requisites for Aegir 3.8

From the Aegir docs we first update and upgrade

apt update && apt upgrade

we then check DNS and hostname

uname -a
Linux aegir-devekko-io 4.4.0-57-generic #78-Ubuntu SMP Fri Dec 9 23:50:32 UTC 2016 x86_64 x86_64 x86_64 GNU/Linux
hostname -i
127.0.0.1 REDACTED 10.1.10.115

install utilities

apt install git wget rsync

According to Aegir maintainer colan in response to my ISSUE on Drupal.org he does this for the Postfix MTA, I’ve been caught on this numerous times on Ubuntu and Aegir

apt install postfix bsd-mailx mutt

in Postfix config I choose Internet site and aegir.devekko.io as email domain

alter /etc/postfix/main.cf

inet_interfaces = 127.0.0.1

Install Aegir 3.9

add project repositories

echo "deb http://debian.aegirproject.org stable main" | sudo tee -a /etc/apt/sources.list.d/aegir-stable.list</pre>

and archive key to keyring

wget -q http://debian.aegirproject.org/key.asc -O- | sudo apt-key add -
sudo apt-get update
sudo apt update

Install Aegir 3.9 Debian Packages

sudo apt-get install aegir3

manually enter a Mysql password (some of the Ansible installers handle this)

choose an Aegir UI domain, Aegir is installed

start the file wall

sudo ufw allow http
Rules updated
Rules updated (v6)
[email protected]:~# sudo ufw enable
Firewall is active and enabled on system startup

Sites | aegir.devekko.io - Chromium_002

Note, I did actually have issues and had to autoremove and purge postfix and tried to manually install Php etc

Installation did finally work after considerable troubleshooting. I would say that there is defintely something happening during install on Xenial that is not being handled properly.

Aegir is installed, and now its time to add a Drupal 7 and a Drupal 8 site for my project.

More in later blog posts