Folkbot Drupal 8 Bootstrap based Custom theme

Folkbot Pink

Like the web at large, the formerly Twitter Bootstrap base theme is now the de-facto standard, the go-to theme in Drupal.

The internet is increasingly being dominated by mega corporations, and the leading FLOSS projects are often coming from projects sponsored by them.

For instance the Zurb Foundation project is struggling and many of its ambitious branches are un-maintained, from the issues on GH it seems competition from Google is denying Zurb oxygen.

Drupal 8 Custom Theme

Let’s build a custom distribution for the Folk Bot Drupal 8 Distribution.

From the Bootstrap Drupal 8 Subtheming docs with the SASS Starterkit.

Change directory to our Installation profile directory

[code lang=text]
cd /var/www/folkbot_drupal8/profiles/folkbot/themes
[/code]

we copy the SASS starterkit folder and create a new folder

Bootstrap SASS starterkits
Bootstrap SASS starterkits

and we rename it folkbot

folkbot theme based on sass starter kit
folkbot theme based on sass starter kit

Rename and Customize

Next we rename the and customize

[code lang=text]
THEMENAME/THEMENAME.starterkit.yml becomes folkbot/folkbot.info.yml
THEMENAME/THEMENAME.libraries.yml becomes folkbot/folkbot.libraries.yml
THEMENAME/THEMENAME.theme becomes folkbot/folkbot.theme
[/code]

Inside our folkbot.info.yml file we make changes

[code lang=text]
core: 8.x
type: theme
base theme: bootstrap

name: 'FolkBot Bootstrap'
description: 'FolkBot Uses the Bootstrap framework Sass source files and must be compiled (not for beginners).'
package: 'Bootstrap'

regions:
navigation: 'Navigation'
navigation_collapsible: 'Navigation (Collapsible)'
header: 'Top Bar'
highlighted: 'Highlighted'
help: 'Help'
content: 'Content'
sidebar_first: 'Primary'
sidebar_second: 'Secondary'
footer: 'Footer'
page_top: 'Page top'
page_bottom: 'Page bottom'

libraries:
– 'folkbot_bootstrap/global-styling'
– 'folkbot_bootstrap/bootstrap-scripts'
[/code]

we also change the sub-theme config settings

THEMENAME/config/install/THEMENAME.settings.yml becomes folkbot/config/install/folkbot.settings.yml

and THEMENAME/config/schema/THEMENAME.schema.yml becomes folkbot/config/schema/folkbot.schema.yml

/var/www/folkbot_drupal8/profiles/folkbot/themes/folkbot/config/schema/folkbot.schema.yml is also changed

[code lang=text]
# Schema for the theme setting configuration file of the THEMETITLE theme.

folkbot.settings:
type: theme_settings
label: 'FolkBot settings'
[/code]

Enable Folkbot Bootstrap theme

We can now see our new FolkBot Bootstrap sub-theme

FolkBot Bootstrap
FolkBot Bootstrap

Now its enabled

FolkBot enabled
FolkBot enabled

We check the homepage and see we need to add logo, favicons and compile the SASS to get the needed CSS.

FolkBot before SASS compile
FolkBot before SASS compile

Install SASS Compiler

Now we focus on the SASS starterkit docs we need to install Ruby and SASS

Install Ruby

Lets use Gorails for Ruby installation docs

Ruby pre-requisites

[code lang=text]
sudo apt-get update
sudo apt-get install git-core curl zlib1g-dev build-essential libssl-dev libreadline-dev libyaml-dev libsqlite3-dev sqlite3 libxml2-dev libxslt1-dev libcurl4-openssl-dev python-software-properties libffi-dev nodejs
[/code]

there are a few Ruby version managers, Gorails recommends rbenv

[code lang=text]
cd
git clone https://github.com/rbenv/rbenv.git ~/.rbenv
echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bashrc
echo 'eval "$(rbenv init -)"' >> ~/.bashrc
exec $SHELL

git clone https://github.com/rbenv/ruby-build.git ~/.rbenv/plugins/ruby-build
echo 'export PATH="$HOME/.rbenv/plugins/ruby-build/bin:$PATH"' >> ~/.bashrc
exec $SHELL

rbenv install 2.4.0
rbenv global 2.4.0
ruby -v
[/code]

Once Ruby is installed we shall have Ruby

[code lang=text]
ruby -v
ruby 2.4.0p0 (2016-12-24 revision 57164) [x86_64-linux]
[/code]

<h2>Install Bundler</h2>

We need the Ruby package manager for gems, called Bundler

[code lang=text]
gem install bundler
Fetching: bundler-1.14.4.gem (100%)
Did you know that maintaining and improving Bundler and RubyGems.org costs more than $25,000 USD every month? Help us keep the gem ecosystem free for everyone by joining the hundreds of companies and individuals who help cover these costs: https://ruby.to/support-bundler
Successfully installed bundler-1.14.4
Parsing documentation for bundler-1.14.4
Installing ri documentation for bundler-1.14.4
Done installing documentation for bundler after 5 seconds
1 gem installed

[/code]

we now install SASS

[code lang=text]
gem install sass
Fetching: sass-3.4.23.gem (100%)
Successfully installed sass-3.4.23
Parsing documentation for sass-3.4.23
Installing ri documentation for sass-3.4.23
Done installing documentation for sass after 4 seconds
1 gem installed
[/code]

Now we need to download the Bootstrap SASS code into our new subtheme as described in the Drupal Bootstrap <a href="http://drupal-bootstrap.org/api/bootstrap/starterkits%21sass%21README.md/group/sub_theming_sass/8">docs</a>

[code lang=text]
/var/www/folkbot_drupal8/profiles/folkbot/themes/folkbot (master) $
git clone https://github.com/twbs/bootstrap-sass.git bootstrap
[/code]

now we start SASS compilation and polling, where it watches the SASS folder for changes and compiles to style.css

[code lang=text]
/var/www/folkbot_drupal8/profiles/folkbot/themes/folkbot (master) $ sass –watch sass:css
>>> Sass is watching for changes. Press Ctrl-C to stop.
directory css
write css/style.css
write css/style.css.map
[/code]

we can now do some changes to SASS and see our results

vi /var/www/folkbot_drupal8/profiles/folkbot/themes/folkbot_bootstrap/sass/_default-variables.scss

[code lang=text]
$gray-base: #0a0c16 !default;
$gray-darker: lighten($gray-base, 13.5%); // #222
$gray-dark: lighten($gray-base, 20%); // #333
$gray: lighten($gray-base, 33.5%); // #555
$gray-light: lighten($gray-base, 46.7%); // #777
$gray-lighter: lighten($gray-base, 93.5%); // #eee

$brand-primary: darken(#ca278e, 6.5%); // #337ab7
$brand-success: #52b820;
$brand-info: rgba(58, 115, 196, 0.33);
$brand-warning: #f0965f;
$brand-danger: #d959c0;
[/code]

and our crazy color scheme can be seen

Folkbot Pink
Folkbot Pink

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.

Install Drupal 8 for Local Development (Alongside WordPress)

Using a Digital Ocean doc as a guide

check the status of the mysql server

sudo service mysql status
● mysql.service – MySQL Community Server
Loaded: loaded (/lib/systemd/system/mysql.service; enabled; vendor preset: enabled)
Active: active (running) since Sun 2017-02-05 09:14:49 PST; 5 days ago
Process: 1515 ExecStartPost=/usr/share/mysql/mysql-systemd-start post (code=exited, status=0/SUCCESS)
Process: 1510 ExecStartPre=/usr/share/mysql/mysql-systemd-start pre (code=exited, status=0/SUCCESS)
Main PID: 1514 (mysqld)
CGroup: /system.slice/mysql.service
└─1514 /usr/sbin/mysqld

Feb 05 09:14:48 wordpress-dev systemd[1]: Starting MySQL Community Server…
Feb 05 09:14:49 wordpress-dev systemd[1]: Started MySQL Community Server.

Login to mysql server as root

mysql -u root -p

Create a mysql database

CREATE DATABASE drupal8_folkbot;

Create a database user

CREATE USER [email protected] IDENTIFIED BY ‘your_complex_password’;

Assign this user rights over the database

GRANT SELECT,INSERT,UPDATE,DELETE,CREATE,DROP,INDEX,ALTER,CREATE TEMPORARY TABLES,LOCK TABLES ON drupal8_folkbot.* TO [email protected];
Query OK, 0 rows affected (0.00 sec)

Flush and exit

mysql> FLUSH PRIVILEGES;
Query OK, 0 rows affected (0.00 sec)

mysql> exit
Bye

This server already runs WordPress, so I have LAMP installed, for that use this doc

Php & SSH modules

sudo apt-get install php-gd php-curl php-ssh2

Make changes for Drupal specific PHP config

sudo vi /etc/php/7.0/apache2/php.ini

and change this setting to

allow_url_fopen = Off

Ensure Apache mod_rewrite is on

sudo a2enmod rewrite

sudo service apache2 reload && sudo service apache2 restart

Now we create a vhost

sudo cp -ar /etc/apache2/sites-available/000-default.conf /etc/apache2/sites-available/folkbot_drupal8.conf

and we edit this file

[code lang=text]
<VirtualHost *:80>
ServerName folkbot_drupal8.dev
ServerAdmin [email protected]
DocumentRoot /var/www/folkbot_drupal8
ErrorLog ${APACHE_LOG_DIR}/error.log
CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

<Directory /var/www/folkbot_drupal8>
AllowOverride All
</Directory>

# vim: syntax=apache ts=4 sw=4 sts=4 sr noet
[/code]

and pull down the code from gitlab

sudo mkdir /var/www/folkbot_drupal8
cd /var
sudo chown -R $USER:www-data www/folkbot_drupal8
cd www/folkbot_drupal8
git remote add gitlab_com [email protected]:folkbot/folkbot_drupal8.git
fatal: Not a git repository (or any of the parent directories): .git
128 [email protected]:/var/www/folkbot_drupal8⟫ git init
Initialized empty Git repository in /var/www/folkbot_drupal8/.git/
git remote add gitlab_com [email protected]:folkbot/folkbot_drupal8.git
git status
On branch master

Initial commit

nothing to commit (create/copy files and use “git add” to track)
git pull gitlab_com master
remote: Counting objects: 525019, done.
remote: Compressing objects: 100% (100744/100744), done.
Receiving objects: 100% (525019/525019), 107.63 MiB | 18.54 MiB/s, done.
remote: Total 525019 (delta 375958), reused 525013 (delta 375957)
Resolving deltas: 100% (375958/375958), done.
From gitlab.com:folkbot/folkbot_drupal8
* branch master -> FETCH_HEAD
* [new branch] master -> gitlab_com/master

new site

sudo a2ensite folkbot_drupal8.conf
Enabling site folkbot_drupal8.
To activate the new configuration, you need to run:
service apache2 reload
sudo service apache2 reload

add this to vhosts

10.1.10.117 wordpress-dev.devekko.io wordpress-dev localhost folkbot_drupal8.dev

Make Cross Device Icons and Favicons.ico using Sketch App

Folkbot Icon Favicon Exporter Sketch

One of the great things about Macs are the creative professionals tools, one of which is Sketchapp which is native to Mac OSx.

For Folkbot I need to create favicons for the Drupal themes, WordPress themes, Phoenix apps etc etc.

Sketch uses a file format that can be shared via GIT and Frederik Jacques has created a template that does this, create an array of favicons for various devices, Mac, Windows, HTML5 etc. He even has the HTML block for the webpage templates for all devices.

Folkbot Icon Favicon Exporter Sketch
Folkbot Icon Favicon Exporter Sketch

exports nicely

folkbot export
folkbot export

and we now have individual favicons for each device type

cross device favicons
cross device favicons

I also have icon set for for Android apps from the same base icon created in Sketch

I also do the same for Mac OSx apps

folk bot iosx
folk bot iosx

Sketch App is a great tool and thanks Frederik Jacques

I have never had so much fun making icons !

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

Ubuntu 17.04 Zesty Notes

Zesty

I am such a sucker for punishment

I am running Ubuntu 17.04 Zesty, due in April and its a little bit kind of broken

Virtualbox

Virtualbox is not yet packaged by Oracle so I had to install from source

Searching around I found devmanuals and had to install multiverse repositories

sudo add-apt-repository main
sudo add-apt-repository universe
sudo add-apt-repository restricted
sudo add-apt-repository multiverse

and

sudo apt update
sudo apt upgrade
sudo apt install virtualbox-source
sudo apt install virtualbox-dkms

since this is a new desktop

install apt-vim

apt-vim docs

curl -sL https://raw.githubusercontent.com/egalpin/apt-vim/master/install.sh | sh

then install vim-nerdtree

apt-vim install -y https://github.com/scrooloose/nerdtree.git

I then had to reboot and install the Virtualbox Extension pack

Getting rich quick with WordPress, or not

The Gem

As a follow-on from my WordPress/Drupal Page Builder post, I bought a license for Beaver Builder for WordPress.

I am exploring the concept of a hyper-local news, community, market site with WordPress, Beaver Builder and a Beaver Builder child theme.  I am doing the development on my home lab server, and using sshfs to access the Ubuntu server web folder share.

I wish I had time to write up more, and I plan to be doing something along these lines in a book project, but for now, I want to simply take some notes of some highlights along the way.

I setup WordPress, on Apache2, PHP7, on Ubuntu 16.04 and used sshfs to do remote shares.

I actually played around with Beaver Builder, more than I document below. It’s a great tool, and if you are in the market for a visual web-design and visual page builder for WordPress, with more flexibility around custom themes, than I recommend it.

However, for myself, I realized I just wasn’t happy. I wasn’t satisfied with Beaver Builder or Divi or the Page Builder experience. It felt like Microsoft Frontpage or Adobe Dreamweaver, it felt shallow.

Don’t get me wrong, for many projects, and many clients, possibly the great majority of the 40% of the worlds total websites, that happen to run WordPress, a Page Builder like Beaver Builder would be awesome. But for me, it felt like the same dynamic as my Page Builder Dark Magic Locked Forever post.

I should also say, I am really sure, I could of made a production grade, release ready, relatively competitive website with Beaver Builder and WordPress and Woocommerce in about a week. This would of included custom CSS, maybe some templates, a logo, banner, content and store. The whole deal. Problem is, anybody else, or maybe 3 billion people, could do the same.

I’ve been told by a tech educator that the tech choice is 1% of the business, and its other factors. I wonder what Google or Facebook or Tesla would say to that. This is a nice idea, and we all like myths and might say that in public. But internally invest massively in R&D and patents and IP.

The 1% tech choice, then becomes the secret sauce, the key ingredient. It’s not like you can just say, I won’t worry about that 1%, I’ve got 99% to work with. Let’s build the next big thing on WordPress or Drupal.

I saw a presentation at Badcamp, maybe three years ago, where Jay Batson, former co-founder of Acquia, the kind of Accenture of Drupal, had just left Acquia with a golden parachute, and was with Y Combinator and was preaching Drupal for startups. The room was full, and there where people there who agreed with him.

Personally, I think its mostly fantasy. I know of Patch.com, Examiner.com and these are basically user generated i.e. spam, sites over loaded with ads.

There is Weather.com, which is Drupal, but its really the marketing site for The Weather Channel, cable TV. It’s not really a pure web startup. Weather Underground is way better.

It might be true, like Pinterest which is based on Django, you could build an amazing startup with Drupal or WordPress, but it would be so heavily modified that it would be basically a fork. By this stage, why not use a framework like Rails or Elixir?

Compare this with Bleecher Report, which is Ruby/Elixir and a Javascript app UI.  Or any number of tech startups or SAAS. They are flat out not WordPress sites. Sure they may have blogs in WordPress, or unusually like Pinterest, numerous Drupal blogs.

On a personal level,  after almost 20 years doing websites, yes, I started in 1997, WordPress and Drupal feel really tired, the PHP Web CMS feels like the past, even if they are rock solid and super slick. You can see with the WordPress REST API in core, the WP CLI and the Calypso ReactJS UX for WordPress, the people behind it know this too.

As a web developer and hopeful tech entrepreneur, WordPress and Drupal also feels like and extremely crowded space. If I see another premium WordPress theme for sale I will literally scream profanity out loud like Al Swearengen. If I find another WordPress lead generation, get rich quick scheme I will implode.

Back to the Beaver Builder experience, in short I got a refund. I wasn’t satisfied. I am not a web designer. I stopped being that in 1998.

Beaver Builder, Divi, Carbon all felt easy today, and much, much harder tomorrow. So, I got refunds and backed out of the R&D.

I will continue to use WordPress and Drupal, but will be using them for a much narrower focus. I have plans for custom modules, themes and plugins around my new business project which I will be starting today.

Oh, and one more thing about the promise of WordPress. A WordPress site will not make you rich. A website in general will not make you rich. It’s not a money making machine that you turn on and it money pours in. Most people who claim this are actually selling what they are selling.

I mean, a super star coach selling coaching lessons on how to be a coach via website ebooks and webinars. Or, a WordPress page builder tool (DIVI and Beaver Builder are not doing this, but others do) that sells a WordPress page builder tool for selling.

Making more money than you spend makes you rich, and websites can be a tool. But believe it or not, plenty of people make money without websites. For instance, look at Renaissance Technology. If you don’t know who these people are, your really should look them up.

This is classic Ponzi scheme stuff. Its the reason I left permaculture. The system itself mostly doesn’t work commercially, and the business model is based on permaculture students selling the permaculture practice to new students.

I know you can make money as a farmer and use permaculture ideas etc. Just like you can make money and use a WordPress site. But it’s the 99% that makes the business not just the 1% tech choices.

A big BUY NOW button, wont make people buy a rubbish product, you can trick people, mis-lead people sure, and part of this might be adding a button.

A fellow traveller of WordPress get rich quick, is the dreaded acronym SEO.

Never has so much BS been written and said about a word.

Sure you need a well structured website, with complies to the basics of technical website structure. But, that’s not enough, and plenty of wonky websites are very successful.

Along with technical SEO, the website structure, is content marketing, i.e. editorial and content.

Do you have words and images and other interesting engaging and interactive content on your website that will attract and keep and convert readers into paying customers?

Finally, and most importantly, do you actually have a product to sell, that a customer will want?

Internet Death

I recently listened to a webinar by an SEO company out of Nevada, where the inevitable question was asked, I do all this SEO stuff and nothing works, I don’t get traffic, I don’t get business. The SEO company then spoke about getting paid advertising, or trying new things. They dodged the question imho.

Personally, I think that the real answer is, you are screwed. Your business is screwed, you will go under, get ready.

Doing SEO and doing advertising may well be just accelerating this fact.

I actually think this is more of a systemic thing than we like to admit.

I call it Internet Death. All across the world, thanks to Amazon, book stores are gone, and now its expanding into entire shopping malls, dead malls.

Soon it will be taxi drivers, and truck drivers. Soon it will be domestic workers replaced by robots. Soon journalists will be replaced by robots. Sorry, its Internet Death, and a WordPress SEO effort with Facebook ads and Google Adwords is not going to be enough.

Interestingly enough, the only thing that stopped some of the first “disruptive” innovations, i.e. file sharing of audio and video was legal action by media companies.

Interestingly enough again, some of the exact same people behind the illegal file sharing, yes, its theft folks, are behind companies that are somehow glorious and untouchable and leading the “disruption” today.

The Gem
The Gem

 

Set-Up Atom.io Editor

Download Atom.io, the excellent cross-platform text editor/almost IDE.

Creating a custom Beaver Builder Child Theme

Copy and customize the Beaver Build Child theme

On linux this is cp -ar bb-theme-child sonoma-speaks-bb-theme-child

change the screenshot.png and the styles.css, from the docs

/*
Theme Name: Sonoma Speaks Beaver Builder Child Theme
Theme URI: http://www.devekko.com/sonoma-speaks-com
Version: 1.0
Description: A custom theme for Sonoma Speaks
Author: Nicholas Roberts, Devekko.com
Author URI: http://www.devekko.com
template: bb-theme
*/

/* Add your custom styles here… */

now Activate your custom theme in the WordPress dashboard

Sonoma Speaks Theme Activated
Sonoma Speaks Theme Activated

Add a Custom Beaver Builder Preset

I want to try to leverage the Beaver Builder preset system and make a Preset

Possibly in the future I will want to create a second Preset for a sub-site or a different version, say the Christmas holidays, or the Fall or the Spring

In the functions.php file of my custom theme I add this block, as guided by the docs


function sonomaspeaks_custom_presets()
{
FLCustomizer::add_preset('default-sonomaspeaks', array(
'name' => 'Sonoma Speaks',
'skin' => 'default',
'settings' => array(
'fl-body-bg-color' => '#282a2e',
'fl-accent' => '#95bf48',
'fl-accent-hover' => '#95bf48',
'fl-heading-text-color' => '#95bf48',
'fl-topbar-bg-color' => '#3e4147',
'fl-topbar-text-color' => '#a6a6a6',
'fl-topbar-link-color' => '#a6a6a6',
'fl-topbar-hover-color' => '#95bf48',
'fl-header-bg-color' => '#282a2e',
'fl-header-text-color' => '#a6a6a6',
'fl-header-link-color' => '#a6a6a6',
'fl-header-hover-color' => '#95bf48',
'fl-nav-bg-color' => '#282a2e',
'fl-nav-link-color' => '#a6a6a6',
'fl-nav-hover-color' => '#95bf48',
'fl-footer-widgets-bg-color' => '#282a2e',
'fl-footer-widgets-text-color' => '#a6a6a6',
'fl-footer-widgets-link-color' => '#95bf48',
'fl-footer-widgets-hover-color' => '#95bf48',
'fl-footer-bg-color' => '#282a2e',
'fl-footer-text-color' => '#a6a6a6',
'fl-footer-link-color' => '#95bf48',
'fl-footer-hover-color' => '#95bf48'
)
));
}
add_action( 'after_setup_theme', 'sonomaspeaks_custom_presets', 11 );

now I have a preset listed in the Customizer which I can force values with code

Sonoma Speaks Presets
Sonoma Speaks Presets

I want now to be able to see easily what each of the colors are and so in atom.io I install pigments

apm install pigments
Installing pigments to /home/devekko/.atom/packages ✓

after restarting atom.io hex now has colored backgrounds making CSS much easier

Atom.io Pigment
Atom.io Pigment

lets also install Color Picker

apm install color-picker

now we can right click, choose Color Picker and change colors visually

Customize via the WordPress Customizer

Color Picker
Color Picker

Ultimately atom.io & sshfs didn’t work, atom.io processes grew to 2+GB and crashed my laptop. So, used VNC to remote into the dev VM.