keraban

An inflexible, opinionated CMS based on Wagtail.

Design a corporate website and give your client an user to keep the content they desire up to date.

See it live! http://keraban.marcanuy.com/

The Keraban website is an example of what a typical site looks like, the site itself its made with it.

Table of Contents

• keraban
• Goals
  • Design Principles
• Explanation
• Features
• Notes
• Installation
• Running locally
  • Admin
• Customize content
• Deploy
  • 1. Set up production webserver
    • Webfaction
  • 2. Customize production environment
• How to
  • Add a Page to main menu
  • Add a feature
  • Change Business info
    • Change business data
    • Add business social network
• Models
• To do
• Credits
• Ideas and Questions

Goals

• Build and deploy websites that can be easily maintained by non developer users.
• Implementation of web best practices with special focus on Google's supported schema.org content types and enhancements.

Design Principles

• Consistent look & feel through all web pages
• Semantic web: Schema.org meta tags and html5
• Optimized for Search Engines (SEO, Google's richsnippets)
• Fully responsive
• Add / Remove / Edit pages from Backend by end users

Explanation

Most corporate websites shares the same content structure, their needs typically consist of the following pages:

• homepage
• photo gallery
• features
• testimonials
• contact

This structure is most seen in websites for:

• Clinics
• Dentists
• Business
• Any organization that has a physical address and offer some kind of service.

Features

• Based on Wagtail (Django CMS)
  • Amazing back-end
• Fully Responsive (Bootstrap 4 grid system)
• Icons (FontAwesome https://fontawesome.com/v4.7.0/icons/)
• SEO
  • Using Schema.org
  • Social Markup https://developers.google.com/webmasters/social-markup
  • Knowledge Graph card with details about the business https://developers.google.com/search/docs/data-types/local-business
  • Implementation of Google's advised enhancements
    • Corporate Contact - Your corporate contact information displayed in the Google Knowledge panel.
    • Logo - Your organization's logo in search results and Google Knowledge Graph.
    • Social Profile - Your social profile information displayed on Google Knowledge panels.
    • Breadcrumbs - "Breadcrumb trails on a page indicate the page's position in the site hierarchy. "
  • Local Business Content Type
    • Business details displayed prominently in the Knowledge Graph card.
• SASS with Bootstrap variables available
• Contact form with https://formspree.io/ (doesn't need email server configuration)
• Google Maps in Location page
  • https://developers.google.com/maps/documentation/embed/guide
• Autogenerated sitemap with all pages available: /sitemap.xml
  • http://docs.wagtail.io/en/v2.1/reference/contrib/sitemaps.html
• meta tags and OpenGraph, Twitter, and Google Plus properties by django-meta

Notes

• static files: whitenoise
  • locally with runserver and
  • in production
• environment variables: django-dotenv
• media: django-storages
• google analytics: django-analytical
• database
  • develoment: sqlite3
  • production: dj-database-url

Installation

1. Create a virtual environment:

    python3.6 -m venv ~/.virtualenvs/keraban/
   

2. Clone the repo:

    git clone git@github.com:marcanuy/keraban.git
   

3. Use new site:

    cd keraban
    echo `pwd` > ~/.virtualenvs/keraban/.project
    source ~/.virtualenvs/keraban/bin/activate
   

4. Install deps

    pip3 install -r requirements.txt
   

5. Generate site CSS

    make compile-sass
   

6. Generate database

    ./manage.py migrate
   

7. Load website data with a fixture

    ./manage.py load_initial_data
   

Running locally

./manage.py runserver

Admin

http://localhost:8000/admin/login/?next=/admin/

Super admin credentials:

• user: admin
• pass: mypass1234

Customize content

1. Adjust your site hostname at http://localhost:8000/admin/sites/
2. Edit pages with your content

Deploy

1. Set up production webserver

Considering you have already customized your website locally, this section describes how to set up your webserver with the new site.

Skip it to next step if you already use another one.

Webfaction

Webfaction is a shared hosting environment with support for Python and Django.

1. Create a new app.

   • Fill form data:
     • Name: myapp_keraban
     • App Category: mod_wsgi
     • App type: Django 2.0.5 (mod_wsgi 4.6.4/Python3.6)
     • Hit Save button

2. Access server through SSH after looking up your server address

    ssh webfactionserver
    cd webapps/proaprado_keraban
   

3. If you are installing it Create a virtualenv

    python3.6 -m venv ~/.virtualenvs/myapp_keraban
   

4. Remove the Python interpreter installed by default to use the one from virtualenv and the default django app

    rm -r lib/
    rm -r myproject/myproject/
   

5. Set up Apache to serve your website, edit ~/webapps/myapp_keraban/apache2/conf/httpd.conf and change these keys (add the first one and modify the second one). Change myuser with your webfaction user:

    WSGIPythonHome /home/myuser/.virtualenvs/myapp_keraban
    WSGIDaemonProcess myapp_keraban processes=2 threads=12 python-path=/home/myuser/webapps/myapp_keraban/myproject
    WSGIScriptAlias / /home/myuser/webapps/proaprado_keraban/myproject/keraban/wsgi.py
   

   • Python version should match the modwsgi used by Apache or it won't work

6. Copy the contents of your local modified keraban instance to webfaction:webapps/myapp_keraban/myproject/

7. Restart Apache

    ./myapp_keraban/apache2/bin/restart
   

2. Customize production environment

Adjust server after getting the files on the server:

1. Copy /_env.skeleton to /.env (or set up environment variables)
2. Customize /.env with your environment variables values
   • .env is processed by https://github.com/jpadilla/django-dotenv
   • Choose to use keraban.settings.production as the DJANGO_SETTINGS_MODULE
   • Adjust ALLOWED_HOSTS by setting DJANGO_ALLOWED_HOSTS
   • Set up Amazon S3:
     • Create an user with programmatic access
       • Create group for that user with AmazonS3FullAccess as the attached policy
       • generate a key with IAM https://console.aws.amazon.com/iam/home)
     • Then you can fill the following keys for handling media
       • AWS_ACCESS_KEY_ID
       • AWS_SECRET_ACCESS_KEY
       • AWS_REGION
       • AWS_STORAGE_BUCKET_NAME (will be created if not exists)
   • Get Google maps api key https://developers.google.com/maps/documentation/embed/get-api-key to fill GOOGLE_MAP_API_KEY and restrict its usage accepting requests from your website at https://console.developers.google.com/apis/credentials

How to

Add a Page to main menu

In Admin go to Page / Edit / Promote and select Show in menus.

Add a feature

In Admin go to Page / Home, locate the Features index page and Add Child Page.

Change Business info

Change business data

In Admin go to Business Misc / Organization and Edit Business info.

Add business social network

In Admin go to Business Misc / Social Networks and locate the button Add Social Profiles.

Models

To do

• change featurettes to a flexible streamfield of alternating pages
• add boostrap form classes to contact form template
• make carousel on homepage hero items
• add business opening hours snippet
• business data and social profiles as settings? http://docs.wagtail.io/en/v2.0/reference/contrib/settings.html
• add sharing on social buttons https://github.com/fcurella/django-social-share#templates
• footer with icons and list (similar to https://stackoverflow.com/q/48519250/1165509 and https://getbootstrap.com/docs/4.0/examples/pricing/)
• Possibility to use any numbers of featurettes pages in homepage (ListBlock) implementing it as a StreamBlock
• add favicon
• extend support for more specific Organization types http://schema.org/Organization
• better integration of location page and business data address/location
• submit it to https://madewithwagtail.org/developers/torchbox/

Credits

• Powered by https://wagtail.io
• Inspired by the amazing Wagtail Bakery Demo https://github.com/wagtail/bakerydemo/
• Galleries layout based on https://tutorialzine.com/2018/03/3-amazing-bootstrap-4-gallery-templates

Ideas and Questions

• https://twitter.com/marcanuy/
• https://github.com/marcanuy/keraban/issues