Getting Started with Sage 9 Beta

I’ve been hearing really good things about the GoodLayers themes as a fast, inexpensive and high-quality starting point, but somehow I still feel like I’d end up having the content fit the Theme rather than the other way around.

So for the new Storybook Sound website, I’m going to my Sage Starter Theme workflow and starting with the new Sage 9 Beta version.

There are four built-in options for a CSS framework and though I’m most familiar with Bootstrap, I’m going with Tachyons for this install, largely because of it’s wonderful support for Responsive Typography/Modular Scale and all that.

Sage 9 requires php version 7, so I need to make sure that the hosting environment supports that. I think it’s HostGator. No. It’s HostMonster.

I encountered an error because the docker-compose file I like to use for development is looking for a theme that has the required style.css file in the top level directory and Sage 9 has it in a resources subdirectory. Also it’s still in Beta so I’m going with Sage 8 as usual.

I’m experimenting with getting BrowserSync to work with Docker and ended up adding some code to my docker-compose.yml file to also include a Node image, but I’m not quite sure if it’s working or not. The code is

version: "2"

services:
  wordpress:
    image: "chriszarate/wordpress:4.8.1"
    environment:
      VIRTUAL_HOST: "${DOCKER_DEV_DOMAIN}"
      WORDPRESS_ACTIVATE_PLUGINS: "" # plugin folder relative to /wp-content/plugins/
      WORDPRESS_ACTIVATE_THEME: "storybook2017"   # theme folder relative to /wp-content/themes/
      WORDPRESS_SITE_TITLE: "Storybook Sound"
      WORDPRESS_SITE_URL: "http://${DOCKER_DEV_DOMAIN}"
      XDEBUG_CONFIG: "remote_host=${DOCKER_LOCAL_IP} idekey=xdebug"
    depends_on:
      - "mysql"
    networks:
      - "front"
      - "back"
    volumes:
      - "./storybook2017:/var/www/html/wp-content/themes/storybook2017"
  mysql:
    image: "mariadb:10.2"
    environment:
      MYSQL_ALLOW_EMPTY_PASSWORD: "yes"
      MYSQL_DATABASE: "wordpress"
      MYSQL_ROOT_PASSWORD: ""
    networks:
      - "back"
  proxy:
    image: "jwilder/nginx-proxy:alpine"
    ports:
      - "80:80"
    networks:
      front:
        aliases:
          - "${DOCKER_DEV_DOMAIN}"
    volumes:
      - "/var/run/docker.sock:/tmp/docker.sock:ro"
  node:
    restart: 'no'
    image: node:slim
    depends_on:
        - wordpress
    volumes_from:
        - wordpress
    working_dir: /var/www/html/wp-content/themes/storybook2017
    build:
        context: .
        dockerfile: WordPressBuild
        args:
            - SITE_VERSION=0.0.1
    ports:
        - 3000:3000
        - 3001:3001

networks:
  front: {}
  back: {}

I also updated the gulpfile based on a SO answer to match my dev url which in this case is http://project.dev.

I can view the BrowserSync interface at localhost:3001 and the site at localhost:3000, but it’s slow as hell and when I run docker-compose ps it says that the node container is not running.