DVL-014 Add gh-pages

.gitignore

@@ -39,6 +39,11 @@
 /cfg/php-fpm-7.1/*.ini
 /cfg/hhvm-latest/*.ini
 
+# gh-pages
+docs/Gemfile
+docs/Gemfile.lock
+docs/_site/
+docs/view-page.sh
 
 
 ######################################

docs/README.md

@@ -1,28 +1,32 @@
-# Devilbox Documentation
+# Devilbox
 
-[Home](https://github.com/cytopia/devilbox) |
-Overview |
-[Configuration](Configuration.md) |
-[Usage](Usage.md) |
-[Updating](Updating.md) |
-[Info](Info.md) |
-[PHP Projects](PHP_Projects.md) |
-[Emails](Emails.md) |
-[Logs](Logs.md) |
-[Intranet](Intranet.md) |
-[FAQ](FAQ.md)
+| **Overview** | **Installing** | **Updating** | **Configuration** | **Usage** | **Technical** | **FAQ** |
 
-----
+---
 
-## Overview
 
-![Devilbox](img/devilbox-dash.png)
+### Dockerized LAMP/MEAN stack
 
-This is a brief overview to get you started as quick as possible. For in-depth documentation use the navigation above.
+<p class="center">The devilbox is a modern and highly customisable LAMP and MEAN stack replacement based purely on docker and docker-compose running on all major platforms. It supports an unlimited number of projects for which vhosts and DNS records are created automatically. Email catch-all and popular development tools will be at your service as well.</p>
+
+<img src="img/devilbox-dash.png" alt="Devilbox" style="max-width:100%"/>
+
+
+### Supported Host OS
+
+<p class="center">Don't worry about switching computers. The devilbox will run on all major operating systems.</p>
+
+<div class="center">
+  <img class="battery" style="height:64px;" title="Linux support" alt="Linux support" src="https://raw.githubusercontent.com/cytopia/icons/master/64x64/linux.png" />
+  <img class="battery" style="height:64px;" title="OSX support" alt="OSX support" src="https://raw.githubusercontent.com/cytopia/icons/master/64x64/osx.png" />
+  <img class="battery" style="height:64px;" title="Windows support" alt="Windows support" src="https://raw.githubusercontent.com/cytopia/icons/master/64x64/windows.png" />
+</div>
 
 
 ### Install, Configure and Start
 
+<p class="center">Your whole development stack is up and running in a few simple steps.</p>
+
 ```shell
 # Get the soures
 $ git clone https://github.com/cytopia/devilbox
@@ -32,56 +36,124 @@ $ cd devilbox
 $ cp env-example .env
 $ vim .env
 
-# Start your container
+# Start your daemons
 $ docker-compose up
 ```
 
-### Create projects
 
-Inside the `.env` file you will find two important variables:
-1. `HOST_PATH_HTTPD_DATADIR`
-2. `TLD_SUFFIX`
+### Run exactly what you need
 
-The first one defines the root path for all your projects and the second one defines your desired domain suffix (default: `loc`). Inside the `HOST_PATH_HTTPD_DATADIR` folder you will have to create the following generic directory structure: `<project-dir>/htdocs`. Files from the `htdocs` folder are then served via `http://<project-dir>.<TLD_SUFFIX>`.
+<p class="center">Choose your required daemons and select a version. Any combination is possible.<br/>This will allow you, to always exactly simulate your production environment locally during development.</p>
 
-**TL;DR (easy)**  
-
-  - Assuming `TLD_SUFFIX` equals `loc`
-  - Assuming `HOST_PATH_HTTPD_DATADIR` equals `/shared/httpd/`
-  - Assuming desired project name equals `my-new-project`
-  - `mkdir -p /shared/httpd/my-new-project/htdocs`
-  - `echo "127.0.0.1 my-new-project.loc" | sudo tee --append /etc/hosts`
-  - `curl http://my-new-project.loc`
-  -
+| Apache | Nginx   | PHP  | MySQL | MariaDB | PgSQL | Redis | Memcached | MongoDB |
+|------- |---------|------|------ |---------|-------|-------|-----------|---------|
+| 2.2    | stable  | 5.4  | 5.5   | 5.5     | 9.1   | 2.8   | 1.4.21    | 2.8     |
+| 2.4    | mainline| 5.5  | 5.6   | 10.0    | 9.2   | 3.0   | 1.4.22    | 3.0     |
+|        |         | 5.6  | 5.7   | 10.1    | 9.3   | 3.2   | 1.4.23    | 3.2     |
+|        |         | 7.0  | 8.0   | 10.2    | 9.4   |       | ...       | 3.4     |
+|        |         | 7.1  |       | 10.3    | 9.5   |       | 1.4.36    | 3.5     |
+|        |         | HHVM |       |         | 9.6   |       | latest    |         |
 
 
-**TL;DR (pro)**  
+### Run only what you need
 
-  - `export project=my-new-project`
-  - `. .env`
-  - `mkdir -p ${HOST_PATH_HTTPD_DATADIR}/${project}/htdocs`
-  - `echo "127.0.0.1 ${project}.${TLD_SUFFIX}" | sudo tee --append /etc/hosts`
-  - `curl http://${project}.${TLD_SUFFIX}`
+<p class="center">You are not forced to load the whole stack everytime. Only bring up what you really need.<br/>It is also possible to add or remove daemons while the stack is already running.</p>
 
-Here is a more complete example for the directory structure:
-```
-  project1/
-     htdocs/
-  project2/
-     htdocs/
-  some-random-name/
-     htdocs  -> ./some-dir/              # <-- symlinks are also possible
-	 some-dir/
-  my-website.com/
-     htdocs  -> /shared/httpd/site.com/  # <-- symlinks are also possible
+```shell
+# Load traditional lamp stack only
+$ docker-compose up httpd php mysql
+
+# Add redis to the running stack
+$ docker-compose up redis
+
+# Stop MySQL from the current stack
+$ docker-compose stop mysql
 ```
 
-You will then have to extend `/etc/hosts` with your created foldernames plus the tld suffix:
-```
-127.0.0.1 project1.loc
-127.0.0.1 project2.loc
-127.0.0.1 some-random-name.loc
-127.0.0.1 my-website.com.loc
+
+### Introduction Videos
+
+<p class="center">Head over to youtube for a quick introduction and see for yourself how easily new projects can be created.</p>
+
+<div class="center">
+  <a target="_blank" href="https://www.youtube.com/watch?v=reyZMyt2Zzo" alt="Devilbox introduction video" title="Devilbox introduction video"><img src="img/devilbox_01-setup-and-workflow.png" /></a>
+  <a target="_blank" href="https://www.youtube.com/watch?v=e-U-C5WhxGY" alt="Devilbox Email catch-all introduction" title="Devilbox Email catch-all introduction"><img src="img/devilbox_02-email-catch-all.png" /></a>
+</div>
+
+
+### Batteries included
+
+<p class="center">No need to download external tools. Everything is bundled, up-to-date and available inside the containers.</p>
+
+<div class="center">
+  <a target="_blank" title="phpMyAdmin" href="https://www.phpmyadmin.net"><img class="battery" style="height:64px;" src="img/logos/phpmyadmin.png" alt="Devilbox"/></a>
+  <a target="_blank" title="Adminer" href="https://www.adminer.org"><img class="battery" style="height:64px;" src="img/logos/adminer.png" alt="Devilbox"/></a>
+  <a target="_blank" title="OpCache GUI" href="https://github.com/amnuts/opcache-gui"><img class="battery" style="height:64px;" src="img/logos/opcachegui.png" alt="Devilbox"/></a>
+  <a target="_blank" title="Email catch-all" href="#"><img class="battery" style="height:64px;" src="img/logos/email.png" alt="Devilbox"/></a>
+  <a target="_blank" title="DNS resolver" href="#"><img class="battery" style="height:64px;" src="img/logos/dns.png" alt="Devilbox"/></a>
+  <br/> 
+  <a target="_blank" title="Composer" href="https://getcomposer.org"><img class="battery" style="height:64px;" src="img/logos/composer.png" alt="Devilbox"/></a>
+  <a target="_blank" title="Drush" href="https://www.drupal.org/project/drush"><img class="battery" style="height:64px;" src="img/logos/drush.png" alt="Devilbox"/></a>
+  <a target="_blank" title="Drupal Console" href="https://drupalconsole.com"><img class="battery" style="height:64px;" src="img/logos/drupal-console.png" alt="Devilbox"/></a>
+  <a target="_blank" title="NodeJS" href="https://nodejs.org"><img class="battery" style="height:64px;" src="img/logos/nodejs.png" alt="Devilbox"/></a>
+  <a target="_blank" title="WP-CLI" href="https://wp-cli.org"><img class="battery" style="height:64px;" src="img/logos/wp-cli.png" alt="Devilbox"/></a>
+  <a target="_blank" title="NPM" href="https://www.npmjs.com"><img class="battery" style="height:64px;" src="img/logos/npm.png" alt="Devilbox"/></a>
+  <a target="_blank" title="Git" href="https://git-scm.com"><img class="battery" style="height:64px;" src="img/logos/git.png" alt="Devilbox"/></a>
+</div>
+
+
+### Supported Frameworks and CMS
+
+<p class="center">There is nothing special about the devilbox, so any framework or CMS that will work with normal LAMP/MEAN stacks will work here as well. However in order to make double sure, a few popular applications have been explicitly tested.</p>
+
+<div class="center">
+  <a target="_blank" title="CakePHP" href="https://cakephp.org" ><img alt="CakePHP" class="battery" style="height:64px;" src="img/logos/cake.png" /></a>
+  <a target="_blank" title="Drupal" href="https://www.drupal.org/" ><img alt="Drupal" class="battery" style="height:64px;" src="img/logos/drupal.png" /></a>
+  <a target="_blank" title="PhalconPHP" href="https://phalconphp.com" ><img alt="PhalconPHP" class="battery" style="height:64px;" src="img/logos/phalcon.png" /></a>
+  <a target="_blank" title="Wordpress" href="https://wordpress.org" ><img alt="Wordpress" class="battery" style="height:64px;" src="img/logos/wordpress.png" /></a>
+  <a target="_blank" title="Yii" href="http://www.yiiframework.com" ><img alt="Yii" class="battery" style="height:64px;" src="img/logos/yii.png" /></a>
+</div>
+
+
+### Devilbox Intranet
+
+<p class="center">Once the devilbox is up and running, you can visit the bundled intranet on <a target="_blank" href="http://localhost">http://localhost</a>.<br/>The intranet is not just a simple dash, it provides many useful tools:</p>
+
+<div class="center">
+  Container Health | DNS Status | Available vHosts | Emails | Databases | Effective Configuration<br/>
+  <img alt="" title="" src="img/02_intranet_vhosts.png "/>
+</div>
+
+
+### Security
+
+<p class="center">Be aware that the docker service is running with root privileges on your system (like any other webserver for example). The devilbox is using a mix of official docker images and custom images. All integrated containers are available on <a target="_blank" href="https://github.com/cytopia/devilbox#run-time-matrix">Github</a> and can be reviewed at any time.</p>
+
+
+### Up-to-dateness
+
+<p class="center">Docker containers are pushed to <a target="_blank" href="https://hub.docker.com/r/cytopia">Docker Hub</a> frequently.<br/>It should be enough for you to pull updated images on a regeular basis.</p>
+
+```shell
+$ docker-compose pull
 ```
 
-Contents inside the `htdocs` folder will be server via the configured domain automatically. So in order to access project2's htdoc folder go to `http://project2.loc` (assuming `TLD_SUFFIX` was `loc`)
+<p class="center">However, if a new minor version (PHP for example) has just been released and you want to use it right away with the devilbox, you can simply *git clone* the docker repository and rebuild the container. Each container repository contains a shell script for easy building.</p>
+
+```shell
+# Download PHP 7.1 repository
+$ git clone https://github.com/cytopia/docker-php-fpm-7.1
+
+# Rebuild the container in order to get the latest minor/patch version
+$ cd docker-php-fpm-7.1
+$ ./build/docker-rebuild.sh
+```
+
+
+### Integration Tests
+
+<div class="center">
+  <a target="_blank" href="https://travis-ci.org/cytopia/devilbox"><img src="https://travis-ci.org/cytopia/devilbox.svg?branch=master" /></a>
+</div>
+
+<p class="center">In order to make sure everything always runs stable and as expected, the devilbox makes heavy use of integration tests. You can head over to <a target="_blank" href="https://travis-ci.org/cytopia/devilbox">Travis-CI</a> and have a look at stable and nightly builds.</p>

docs/_config.yml

@@ -1 +1,4 @@
-theme: jekyll-theme-slate
+theme: jekyll-theme-slate
+kramdown:
+   input: GFM
+   hard_wrap: false

docs/_layouts/default.html

@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="{{ site.lang | default: "en-US" }}">
+
+  <head>
+    <meta charset='utf-8'>
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="width=device-width,maximum-scale=2">
+    <meta name="description" content="{{ site.title | default: site.github.repository_name }} : {{ site.description | default: site.github.project_tagline }}">
+
+    <link rel="stylesheet" type="text/css" media="screen" href="{{ '/assets/css/style.css?v=' | append: site.github.build_revision | relative_url }}">
+
+    <title>{{ site.title | default: site.github.repository_name }}</title>
+  </head>
+
+  <body>
+
+    <!-- HEADER -->
+    <div id="header_wrap" class="outer">
+        <header class="inner">
+          <a id="forkme_banner" href="{{ site.github.repository_url }}">View on GitHub</a>
+
+          <h1 id="project_title">{{ site.title | default: site.github.repository_name }}</h1>
+          <h2 id="project_tagline">{{ site.description | default: site.github.project_tagline }}</h2>
+
+          {% if site.show_downloads %}
+            <section id="downloads">
+              <a class="zip_download_link" href="{{ site.github.zip_url }}">Download this project as a .zip file</a>
+              <a class="tar_download_link" href="{{ site.github.tar_url }}">Download this project as a tar.gz file</a>
+            </section>
+          {% endif %}
+        </header>
+    </div>
+
+    <!-- MAIN CONTENT -->
+    <div id="main_content_wrap" class="outer">
+      <section id="main_content" class="inner">
+        {{ content }}
+      </section>
+    </div>
+
+    <!-- FOOTER  -->
+    <div id="footer_wrap" class="outer">
+      <footer class="inner">
+        {% if site.github.is_project_page %}
+        <p class="copyright">{{ site.title | default: site.github.repository_name }} maintained by <a href="{{ site.github.owner_url }}">{{ site.github.owner_name }}</a></p>
+        {% endif %}
+        <p>Published with <a href="https://pages.github.com">GitHub Pages</a></p>
+      </footer>
+    </div>
+
+    {% if site.google_analytics %}
+      <script type="text/javascript">
+        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+        ga('create', '{{ site.google_analytics }}', 'auto');
+        ga('send', 'pageview');
+      </script>
+    {% endif %}
+  </body>
+</html>

docs/assets/css/style.scss

@@ -0,0 +1,46 @@
+---
+---
+
+@import "{{ site.theme }}";
+
+.inner {
+	max-width: 850px;
+	position: relative;
+	padding: 20px 10px;
+	margin: 0 auto;
+}
+#header_wrap {
+	background-image: url('/assets/img/devilbox-dash.png');
+	background-repeat: no-repeat;
+	background-size: cover;
+	min-height: 100%;
+}
+h1, h2, h3 {
+	text-align: center;
+}
+h2, h3 {
+	margin-top:30px;
+}
+
+
+table {
+    margin: auto;
+    width: 50%;
+    padding: 10px;
+}
+
+.center {
+	text-align: center;
+}
+img.battery {
+	/*border: 1px solid black;*/
+	border-radius: 15px;
+}
+
+/* remove gh pages link */
+footer.inner p {
+	display: none;
+}
+footer.inner p.copyright {
+	display: block;
+}