Web Development – Jayatechnology

How To Build Your Own Theme for Grav CMS

admin — Tue, 12 Dec 2017 12:39:11 +0000

Grav is an open source flat-file CMS platform, built by the RocketTheme Team. While there are plenty of great CMS platforms available, they are all mostly database-driven, which can be overkill for smaller websites. Instead of a database, Grav uses folders and a basic file structure, it is focused on speed, simplicity, and flexibility.

After reading all of the documentation and spending some time trying Grav out, I’m definitely sold and will be using the platform. I hope you will too.

WHAT WE’LL BE BUILDING

For the first part of this tutorial we’ll be building a one-page website, and in the second part, we’ll build a simple blog. I’ll assume you have a good understanding of HTML and CSS (or CSS preprocessors). We will not be getting into the styling of the themes but rather focus on Grav, and its functionality.

You can check out both of these themes on GitHub:

INSTALLING GRAV

Below are the very few requirements Grav needs in order for it to run:

A web server (Apache, Nginx, LiteSpeed, Lightly, IIS, etc.)
PHP 5.5.9 or higher

Download Grav Core with the Admin Panel Plugin and unzip the package in the webroot of your web server and you’re ready to roll.

PAGE TYPES

Grav comes with 3 types of pages out of the box:

STANDARD PAGE

These are typically single pages, such as blog posts, contact pages, error pages, etc. Grav assumes that any page is a standard page unless otherwise specified.

LISTING PAGE

These are basically a standard page that has a reference to a collection of pages, for an example, a blog listing page. Configuration settings for these pages include: order, number of items and whether or not pagination is enabled.

MODULAR PAGE

Modular pages build a single page from it’s child pages, allowing us to build one-page layouts from smaller modular pages.

FILE STRUCTURE

Generally speaking, the only folder you’ll use is the /user folder.

THE CONTENT

The /user/pages folder is where all of the content pages live. Each page is placed in its own folder, and folder names should reflect the page’s name, and also be a valid slug.

You can order pages by naming the page folders with a preceding number: 01.home, 02.blog. Page folders then contain a markdown file and media for the page. The name of the markdown file will reference the name of the theme’s template to be used to render the content, for example: home.md would look for a template named home.html.twig.

THE THEME

Themes can be found within the /user/themes folder. For a theme to function you’ll need:

blueprints.yaml – a file which contains information about the theme.
themename.php – a file which contains any logic your theme needs.
themename.yaml – a configuration file used by the plugin to set options the theme might use.
templates/ – a folder containing the Twig templates to render the pages.

You should also include and these are required if you plan to release a theme:

CHANGELOG.md – a file that follows the Grav Changelog Format to show changes.
LICENSE – a file containing the license to the theme.
README.md – a file with documentation for the theme.
screenshot.jpg – a 1009px x 1009px screenshot of the theme.
thumbnail.jpg – a 300px x 300px screenshot of the theme.

This is also where the css, sass, fonts, images, and js folders for the theme reside.

THE TEMPLATES

Templates can be found in the /user/themes/themename/templates folder. These templates are Twig templates and will be used to render your pages.

THE BLUEPRINTS

Blueprints are located in the /user/themes/themename/blueprints folder. The files within this folder are YAML files used to extend and modify the admin plugin with custom forms to make updating the website simpler.

PART 1: ONE PAGER MODULAR THEME

Now that we have a basic understanding of how Grav works, let’s get started on our first Grav theme: a one page theme showcasing Grav’s awesomeness. Below is what our content and themes folder are going to look like:

CONTENT FILE STRUCTURE

├── 01.home
│   ├── _download
│   │   └── download.md
│   ├── _features
│   │   └── features.md
│   ├── _highlights
│   │   └── highlights.md
│   ├── _intro
│   │   └── intro.md
│   ├── _overview
│   │   ├── grav-logo.png
│   │   └── overview.md
│   └── home.md

THEME FILE STRUCTURE

├── blueprints
│   └── modular
│       ├── highlights.yaml
│       └── showcase.yaml
├── css
│   └── main.css
├── fonts
├── imgs
├── js
├── sass
├── templates
│   ├── home.html.twig
│   ├── modular
│   │   ├── download.html.twig
│   │   ├── features.html.twig
│   │   ├── highlights.html.twig
│   │   ├── intro.html.twig
│   │   └── overview.html.twig
│   └── partials
│       └── base.html.twig
├── blueprints.yaml
├── onepager.yaml
├── screenshot.jpg
└── thumbnail.jpg

CONFIG FILES

SITE.YAML

The site’s configuration file. We should never edit the default configuration files found in system/config. Instead, we overwrite the settings we’d like to change via creating our own configuration files within user/config. Below is a simple version of a site configuration file.

For more complex configurations, have a look at the documentation.

title: 'One Pager'
author:
    name: 'Angie Vella'
    email: 'email@email.com'
metadata:
    generator: 'Grav'
    description: 'Simple One Page Theme for Grav'
    keywords: 'HTML, CSS, Grav, Theme, One Page'
    author: 'Angie Vella'
    robots: 'noindex, nofollow'

THEME FILES

As mentioned before, there are a couple of files Grav requires for a theme to function.

BLUEPRINTS.YAML

This file defines theme information and configuration options to be shown in the Admin panel. Blueprints are defined with YAML and below is our blueprints file for our One Pager Theme.

name: One Pager
version: 1.0.0
description: "A simple one page theme for Grav"
author:
    name: Angie Vella
    email: email@email.com
    url: http://www.website.com
license: MIT

ONEPAGER.YAML

This file contains theme configuration, like the blueprints file this is also defined in YAML. For this example we’ll keep it super simple.

enabled: true
default_lang: en

THEME TEMPLATES

Now that we have the files the theme requires to function, it’s time to get started on the Twig templates. These templates will be used to render our content.

BASE.HTML.TWIG

The base template is just that: the template that will be the base of our theme. We’ll be extending this template within our other templates. Let’s break it down:

– Gets the configuration set in onepager.yaml.

{% block head %}{% endblock head %} – This defines an area in the base template, typically containing the stuff we put in theelement. Note that the head in {% endblock %} is not required, but can be used for readability.

{{ site.title }} – Pulls the configuration set in config/site.yaml.

– Sets a canonical URL for the page.

– Points to the site’s favicons, located in the theme/imgs directory.

{% block stylesheets %} – Within this block we register our stylesheets for the theme.

{{ assets.css() }} – This outputs the stylesheets we just registered.

{% block javascripts %} – Just like the stylesheets block this registers our JavaScript files for the theme. Note that the jQuery library comes bundled with Grav.

{{ assets.js() }} – Renders the scripts we just registered.

OnePager – Links to the home page.

{% for module in page.collection.modular() %}
    <a href="#{{ module.header.anchor }}">{{ module.menu }}a>li>
{% endfor %}

Runs over the collection defined withinhome.mdto create the navigation.

{% block content %}{% endblock %} – This is where content from other templates that extend this one will be.

{% block bottom %}{% endblock %} – We add our custom JavaScript initialization here.

And this is what the file looks like when it’s all put together:




    
        {% block head %}
        {{ site.title }}

        

        
        

        

        {% block stylesheets %}
            {% do assets.addCss('theme://css/main.css') %}
            {% do assets.addCss('https://fonts.googleapis.com/css?family=Montserrat:400,700') %}
        {% endblock %}

        {{ assets.css() }}

        {% block javascripts %}
            {% do assets.addJs('jquery', '110') %}

            {% do assets.addJs('theme://js/singlepagenav.min.js') %}

            {% if browser.getBrowser == 'msie' and browser.getVersion >= 8 and browser.getVersion <= 9 %}
                {% do assets.add('theme://js/html5shiv.min.js') %}
                {% do assets.add('theme://js/respond.min.js') %}
            {% endif %}
        {% endblock %}

        {{ assets.js() }}

        {% endblock head %}
    

    

        
            
                
                    OnePager
                

                
                    
                        {% for module in page.collection.modular() %}
                            {{ module.menu }}
                        {% endfor %}
                    
                
            
        

        
            {% block content %}{% endblock %}
        

        
            © OnePager Grav Theme.
        

        {% block bottom %}
            {{ assets.js('bottom') }}

            
        {% endblock %}

HOME.HTML.TWIG

The template used to render the home page (user/pages/01.home/home.md). It builds on top of the base template and adds anchors to the sections. These anchors will be defined within the modular markdown file’s Front Matter.

{% extends 'partials/base.html.twig' %}
{% block content %}
    {% for module in page.collection() %}
        "{{ module.header.anchor }}">div>

        {{ module.content }}
    {% endfor %}
{% endblock %}

INTRO.HTML.TWIG

The intro to our one page site. Simply pulls the content of the intro.md file using {{ content }}.

class="intro">
    <div class="wrapper">
        {{ content }}
    div>
</div>

HIGHLIGHTS.HTML.TWIG

The second section of our website. This pulls the content from the highlights.md file as well as the the custom header settings defined in the file’s YAML Front Matter (We’ll understand this better once we get into the content files).

class="highlights">
    <div class="wrapper">
        {{ content }}
        {% for highlight in page.header.highlights %}
            <div class="highlight">
                <i class="fa fa-fw fa-{{ highlight.icon }}">i>

                <h4>{{ highlight.header }}h4>
                <p>{{ highlight.text }}p>
            div>
        {% endfor %}
    div>
</div>

OVERVIEW.HTML.TWIG

By now you should start seeing a theme (no pun intended). This template renders the third section of the website. It pulls the content from overview.md and also get the image from the pages folder (section folder since this is a modular theme).

class="overview">
    <div class="wrapper">
        <div class="text">
            {{ content }}
        div>

        <div class="image">
            {% set image = page.media.images|first %}
            {% if image %}
                {{ image }}
            {% endif %}
        div>
    div>
</div>

FEATURES.HTML.TWIG

Similar to the features template. This pulls the content defined within the features.md file and the file’s YAML Front Matter.

class="features">
    <div class="wrapper">
        {{ content }}
        {% for feature in page.header.features %}
            <div class="feature">
                <i class="fa fa-{{ feature.icon }}">i>

                <h5>{{ feature.header }}h5>
            div>
        {% endfor %}
    div>
</div>

DOWNLOAD.HTML.TWIG

The last template of our theme, pulls the content from the download.md file and the button defined in the YAML Front Matter.

class="download">
    <div class="wrapper">
        {{ content }}

        {% for button in page.header.buttons %}
            <div class="button-wrapper">
                <a class="button" href="{{ button.url }}">{{ button.text }}a>
            div>
        {% endfor %}
    div>
</div>

CONTENT FILES

Our theme is now complete. We can focus on our content.

HOME.MD

This file tells Grav which subpages to pull to assemble the modular page, and which order to display them in. The name of the file also tells Grav to use the home.html.twig template to render the page.

---
title: Home
content:
    items: '@self.modular'
    order:
        by: default
        dir: asc
        custom:
            - _intro
            - _highlights
            - _overview
            - _features
            - _download
---

INTRO.MD

Within the YAML Front Matter we define the title of the section and an anchor. The content is then defined using markdown.

---
title: Home
anchor: intro
---

# OnePager
## A Simple One Page Modular Theme for Grav

HIGHLIGHTS.MD

Another title and anchor are defined, then we also create a custom header option called highlights. Each highlight has a header, text, and an icon. These are then rendered using the assigned template (highlights.html.twig).

Looking at the template you can see how the for statement {% for highlight in page.header.highlights %} loops through the highlights page header and then pulls the header {{ highlight.header }}, text {{ highlight.text }}, and icon {{ highlight.icon }}. At the end of this tutorial we’ll create a blueprint so these values can be edited via a form within the Admin panel.

---
title: Highlights
anchor: highlights
highlights:
    - header: 'Crazy Fast'
      text: 'Performance is not just an after thought, we baked it in from the start!'
      icon: fighter-jet
    - header: 'Easy to build'
      text: 'Simple text files means Grav is trivial to install, and easy to maintain.'
      icon: database
    - header: 'Awesome Technology'
      text: 'Grav employees best-in-class technologies such as Twig, Markdown & Yaml'
      icon: cubes
    - header: 'Super Flexible'
      text: 'From the ground up, with many plugin hooks, Grav is extremely extensible'
      icon: puzzle-piece
---
### Built on top of Greatness
#### Four core tenants keep Grav focused

OVERVIEW.MD

Similar to the intro.md. Here we only define the title and anchor in the YAML Front Matter, together with the content in markdown syntax.

---
title: Overview
anchor: overview
---

### Fast, Extensible, Open Source!
#### Grav is a modern open source flat-file CMS
Grav is a modern open source flat-file CMS. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse suscipit ultrices ligula eget accumsan. Sed egestas augue a risus semper pretium non sit amet odio.

FEATURES.MD

Here we basically repeat what we done in the highlights.md.

---
title: Features
anchor: features
features:
    - header: Markdown Syntax
      icon: text-height
    - header: Twig Templating
      icon: code
    - header: Smart Caching
      icon: rocket
    - header: Flexible Taxonomies
      icon: tags
    - header: Simple Install
      icon: cloud-download
    - header: Powerful Plugins
      icon: cogs
    - header: Intuitive UI
      icon: dashboard
    - header: File-Based
      icon: file-text
    - header: Documentation
      icon: bookmark
    - header: On Github
      icon: github
    - header: Responsive Design
      icon: html5
    - header: Awesomazing
      icon: heart
---

### Stuffed full of Amazing Features
#### This is a non-inclusive smattering of them

DOWNLOAD.MD

By now you’ve gotten the hang of the the YAML front matter. These headers can be as simple or as complicated as you want or need them to be. In this file we’ve defined the title and anchor for this section, together with a custom header defining our download button.

---
title: Download
anchor: download
buttons:
    - text: Download
      url: https://getgrav.org/downloads
---

### Get Grav

BLUEPRINTS

At this point our Grav theme is fully functioning, and we’ve also added the content for our one page website. Blueprints allow us to extend and modify the Admin panel. They are YAML files, defining a custom form for the specified template which then saves the data from the content file’s front matter.

Going over the files below, you can see they are very readable thanks to YAML. They extend on top of the default.yaml blueprint provided by Grav, and create a new tab in the Admin panel for each of the pages (in this case the highlights page and the features page).

HIGHLIGHTS.YAML

title: Highlights
'@extends': default

form:
  fields:
    tabs:
      fields:
        advanced:
          fields:
            columns:
              fields:
                column1:
                  fields:
                    name:
                      default: modular/highlights
                      '@data-options': '\Grav\Common\Page\Pages::modularTypes'
            overrides:
              fields:
                header.template:
                  default: modular/highlights
                  '@data-options': '\Grav\Common\Page\Pages::modularTypes'
        highlights:
          type: tab
          title: Highlights
          fields:
            header.highlights:
              name: highlights
              type: list
              label: Highlights

              fields:
                .icon:
                  type: text
                  label: Icon
                .header:
                  type: text
                  label: Header
                .text:
                  type: text
                  label: Text

FEATURES.YAML

title: Features
'@extends': default

form:
  fields:
    tabs:
      fields:
        advanced:
          fields:
            columns:
              fields:
                column1:
                  fields:
                    name:
                      default: modular/features
                      '@data-options': '\Grav\Common\Page\Pages::modularTypes'
            overrides:
              fields:
                header.template:
                  default: modular/features
                  '@data-options': '\Grav\Common\Page\Pages::modularTypes'
        features:
          type: tab
          title: Features
          fields:
            header.features:
              name: features
              type: list
              label: Features

              fields:
                .icon:
                  type: text
                  label: Icon
                .header:
                  type: text
                  label: Header

PART TWO – MNMM BLOG THEME

Since much of the code is repeated from the previous theme, we will only go over the new code.

CONTENT FILE STRUCTURE

├── 01.home
│   ├── _blog-post
│   │   ├── media.jpg
│   │   └── item.md
│   └── blog.md

THEME FILE STRUCTURE

├── css
│   └── main.css
├── fonts
├── imgs
├── js
├── sass
├── templates
│   ├── blog.html.twig
│   ├── error.html.twig
│   ├── item.html.twig
│   ├── modular
│   └── partials
│       ├── base.html.twig
│       └── blog_item.html.twig
├── blueprints.yaml
├── mnmm.php
├── mnmm.yaml
├── screenshot.jpg
└── thumbnail.jpg

PLUGINS

In the previous theme, we only used the plugins that come with the Grav Core + Admin Panel. For this theme we’ve added some more plugins;

Feed – Lets you view a Grav Collection as RSS or Atom news feed.
JS Comments – Enables you to add comments to your site with Discourse, Disqus, Facebook, Google+, IntenseDebate, and Muut comment systems.
Pagination – Adds pagination to your site.
Readingtime – Adds reading time to your pages.
SimpleSearch – Enables you to search your site’s content.

CONFIG FILES

SITE.YAML

Our config files remain the same, the only thing that changed is the title in site.yaml.

THEME FILES

BLUEPRINTS.YAML

The Front Matter here was changed to reflect this theme.

MNMM.YAML

This file is completely unchanged.

THEME TEMPLATES

BASE.HTML.TWIG

The base template file is very similar to the previous theme. The only changes here are for content/aesthetic reasons. The Grav code remains the same and is explained it the previous section.




    
        {% block head %}
        {{ site.title }}

        
        
        
        

        {% block stylesheets %}
            {% do assets.addCss('theme://css/main.css') %}
            {% do assets.addCss('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700') %}
        {% endblock %}

        {{ assets.css() }}

        {% block javascripts %}
            {% do assets.addJs('jquery', '110') %}

            {% do assets.addJs('theme://js/singlepagenav.min.js') %}

            {% if browser.getBrowser == 'msie' and browser.getVersion >= 8 and browser.getVersion <= 9 %}
                {% do assets.add('theme://js/html5shiv.min.js') %}
                {% do assets.add('theme://js/respond.min.js') %}
            {% endif %}
        {% endblock %}

        {{ assets.js() }}

        {% endblock head %}
    

    

        
            
                
                    MNMM

                    
                        {% if config.plugins.simplesearch.enabled %}
                            {% include 'partials/simplesearch_searchbox.html.twig' %}
                        {% endif %}
                    
                
            

            
                
                    {{ site.title }}
                
            
        

        
            {% block content %}{% endblock %}
        

        {% block footer %}
        
            
                © MNMM Grav Theme.

                
                    
                    
                    
                    
                    
                    
                    

                    {% if config.plugins.feed.enabled %}
                        
                        
                    {% endif %}
                
            
        
        {% endblock %}

        {% block bottom %}
            {{ assets.js('bottom') }}
        {% endblock %}

BLOG.HTML.TWIG

This template is use to render the blog listings page, which in this case is the home page. It loops through the child pages (blog items) and includes the blog_item.html.twig template as well as pagination.html.twig which adds the blog listings page navigation.

{% embed 'partials/base.html.twig' %}

    {% set collection = page.collection() %}

    {% block content %}
        class="blog-list-wrapper">
            <div class="listing">
                {% for child in collection %}
                    {% include 'partials/blog_item.html.twig' with {'blog':page, 'page':child, 'truncate':true} %}
                {% endfor %}

                <div class="pagination-wrapper">
                    {% if config.plugins.pagination.enabled and collection.params.pagination %}
                        {% include 'partials/pagination.html.twig' with {'base_url':page.url, 'pagination':collection.params.pagination} %}
                    {% endif %}
                div>
            div>
        </div>
    {% endblock %}
{% endembed %}

ERROR.HTML.TWIG

This template is rendered when a page is not found. The error plugin is used which is included with the Grav Core + Admin Panel package.

{% extends 'partials/base.html.twig' %}
{% block content %}
    "error">
        <div>
            <h2>{{ 'ERROR'|t }} {{ page.header.http_response_code }}h2>
            <p>
                {{ page.content }}
            p>
        div>
    </div>
{% endblock %}

ITEM.HTML.TWIG

The item template renders the blog item content as specified in the blog.md file.

{% embed 'partials/base.html.twig' %}

    {% block content %}
        class="blog-item-wrapper">
            <div id="blog-item">
                {% include 'partials/blog_item.html.twig' with {'blog':page.parent, 'truncate':false} %}
            div>
        </div>
    {% endblock %}
{% endembed %}

BLOG_ITEM.HTML.TWIG

The template that renders the blog item. In here we pull the date, post title, post content, reading time (using the Reading Time Plugin), post tags, social share buttons (using the Social Buttons Plugin), comments (using the JSComments Plugin), and post pagination.

class="blog-list-item">

    <div class="blog-list-header">
        <span class="blog-list-date">
            <time class="date" datetime="{{ page.date|date("c") }}">
                <span>{{ page.date|date("d") }}span>
                <em>{{ page.date|date("M") }}em>
                <em>{{ page.date|date("Y") }}em>
            time>
        span>

        {% if page.header.link %}
            <h4 class="post-name">
                {% if page.header.continue_link is not sameas(false) %}
                <a href="{{ page.url }}"><i class="fa fa-angle-double-right u-url">i>a>
                {% endif %}
                <a href="{{ page.header.link }}" class="u-url">{{ page.title }}a>
            h4>
        {% else %}
            <h4 class="post-name"><a href="{{ page.url }}" class="u-url">{{ page.title }}a>h4>
        {% endif %}
    div>

    class="list-blog-padding">
        {% if page.header.continue_link is sameas(false) %}
            class="post-content">
                {{ page.content }}
            </div>
            {% if not truncate %}
            {% set show_prev_next = true %}
            {% endif %}
        {% elseif truncate and page.summary != page.content %}
            
                {{ page.summary }}
            div>

            <div class="meta">
                {% if config.plugins.readingtime.enabled %}
                    <span class="reading">{{ page.content|readingtime }}span>
                {% endif %}

                {% if page.taxonomy.tag %}
                    <span class="tags">
                        {% for tag in page.taxonomy.tag %}
                            <a href="{{ blog.url|rtrim('/') }}/tag{{ config.system.param_sep }}{{ tag }}">{{ tag }}a>
                        {% endfor %}
                    span>
                {% endif %}
            div>
        {% elseif truncate %}
            class="post-content">

                {% if page.summary != page.content %}
                    {{ page.content|truncate(550) }}
                {% else %}
                        {{ page.content }}
                {% endif %}
            </div>
        {% else %}
            
                {{ page.content }}
            div>

            <div class="post-meta">
                {% if page.taxonomy.tag %}
                    <span class="post-tags">
                        {% for tag in page.taxonomy.tag %}
                            <a href="{{ blog.url|rtrim('/') }}/tag{{ config.system.param_sep }}{{ tag }}">{{ tag }}a>
                        {% endfor %}
                    span>
                {% endif %}
            div>

            class="post-share">
                {% if config.plugins.socialbuttons.enabled %}
                    {% include 'partials/socialbuttons.html.twig' with {'url':page.url} %}
                {% endif %}
            </div>

            
                {% if config.plugins.jscomments.enabled %}
                    {{ jscomments() }}
                {% endif %}
            div>
        {% set show_prev_next = true %}
    {% endif %}
    </div>
div>
{% if show_prev_next %}
    class="post-pagination">
        <div class="wrapper">
            {% if not page.isFirst %}
                <span class="lft"><a class="button" href="{{ page.nextSibling.url }}"><i class="fa fa-chevron-left">i> Nexta>span>
            {% endif %}

            {% if not page.isLast %}
                <span class="rgt"><a class="button" href="{{ page.prevSibling.url }}">Prev <i class="fa fa-chevron-right">i>a>span>
            {% endif %}
        div>
    </div>
{% endif %}

CONTENT FILES

BLOG.MD

items: ‘@self.children’ – tells Grav to loop through the page’s subpages (the blog posts).

order: – Order configuration for the blog posts.

pagination – enables the pagination.

---
title: 'MNMM Grav Theme'
content:
    items: '@self.children'
    order:
        by: date
        dir: desc
    limit: 5
    pagination: true
feed:
    description: 'Sample Blog Description'
    limit: 10
pagination: true
---

# MNMM Grav Theme

ITEM.MD

This is what the blog post files look like. A title and date are specified, as well as taxonomy. In this case we add this post to the blog category and define its tags. After the YAML Front Matter, the blog post content is defined.

---
title: The Urban Jungle
date: 17:34 07/04/2014
taxonomy:
    category: blog
    tag: [travel, photography, city]
---

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies tristique nulla et mattis. Phasellus id massa eget nisl congue blandit sit amet id ligula. Praesent et nulla eu augue tempus sagittis. Mauris faucibus nibh et nibh cursus in vestibulum sapien egestas. Curabitur ut lectus tortor. Sed ipsum eros, egestas ut eleifend non, elementum vitae eros. Mauris felis diam, pellentesque vel lacinia ac, dictum a nunc. Mauris mattis nunc sed mi sagittis et facilisis tortor volutpat. Etiam tincidunt urna mattis erat placerat placerat ac eu tellus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies tristique nulla et mattis. Phasellus id massa eget nisl congue blandit sit amet id ligula. Praesent et nulla eu augue tempus sagittis. Mauris faucibus nibh et nibh cursus in vestibulum sapien egestas. Curabitur ut lectus tortor. Sed ipsum eros, egestas ut eleifend non, elementum vitae eros. Mauris felis diam, pellentesque vel lacinia ac, dictum a nunc. Mauris mattis nunc sed mi sagittis et facilisis tortor volutpat. Etiam tincidunt urna mattis erat placerat placerat ac eu tellus. Ut nec velit id nisl tincidunt vehicula id a metus. Pellentesque erat neque, faucibus id ultricies vel, mattis in ante. Donec lobortis, mauris id congue scelerisque, diam nisl accumsan orci, condimentum porta est magna vel arcu. Curabitur varius ante dui. Vivamus sit amet ante ac diam ullamcorper sodales sed a odio. Curabitur ut lectus tortor. Sed ipsum eros, egestas ut eleifend non, elementum vitae eros. Mauris felis diam, pellentesque vel lacinia ac, dictum a nunc.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies tristique nulla et mattis. Phasellus id massa eget nisl congue blandit sit amet id ligula. Praesent et nulla eu augue tempus sagittis. Mauris faucibus nibh et nibh cursus in vestibulum sapien egestas. Curabitur ut lectus tortor. Sed ipsum eros, egestas ut eleifend non, elementum vitae eros. Mauris felis diam, pellentesque vel lacinia ac, dictum a nunc. Mauris mattis nunc sed mi sagittis et facilisis tortor volutpat. Etiam tincidunt urna mattis erat placerat placerat ac eu tellus. Ut nec velit id nisl tincidunt vehicula id a metus. Pellentesque erat neque, faucibus id ultricies vel, mattis in ante. Donec lobortis, mauris id congue scelerisque, diam nisl accumsan orci, condimentum porta est magna vel arcu. Curabitur varius ante dui. Vivamus sit amet ante ac diam ullamcorper sodales sed a odio.

CONCLUSION

After building these two themes, you should have a basic understanding of how Grav works. As I’ve already said, in my opinion Grav can be as simple or as complex as you want/need it to be. I look forward to seeing some awesome things being built with this is awesome platform!

The post How To Build Your Own Theme for Grav CMS appeared first on Jayatechnology.

3 Ways To Minimize DownTime

admin — Tue, 12 Dec 2017 06:27:45 +0000

Both developers and system admins regularly focus on strategies to create infrastructures that are reliable and minimize downtime. The primary reason for this, is that so many companies now rely on Internet-based services, making downtime financially damaging.

Users expect a stable and reliable service, so interruptions not only decrease customer satisfaction but increase support requests.

In this article I’m going to talk about three areas that are particularly sensitive when it comes to downtime, and offer some improvements that will push you towards 99.9999% uptime.

1. MONITORING AND ALERTS

Properly monitoring your infrastructure is the first step in being proactive with any issues, and it’s the most efficient way of discovering issues before they affect your customers.

This also includes aggregating and retaining a record of stats such as application performance metrics, and system resource utilization. Alerts then build on the metric collection through evaluating rules against current metrics. In other words it looks for anything weird.

A client is often implemented on each host that gathers metrics for monitoring, and then reports back to a central server. The metrics are stored in a database and are available for services like searching, alerting, and graphing.

There is monitoring software that can do this for you, including:

GRAPHITE

Graphite provides an API that has the support of dozens of applications and programming languages. Metrics are pushed, stored, and graphed in the central Graphite installation.

PROMETHEUS

Prometheus can be used to pull data from a variety of community supported and official clients. It has an alerting system that is built-in, is highly scaleable, and comes with client libraries for several programming languages.

2. SOFTWARE DEPLOYMENT IMPROVEMENT

Software deployment strategies are one area that many people overlook, but it has a huge impact on your downtime.

Having a deployment process that is very complex, or requires a number of manual steps to be completed will result in the production environment leaving the development environment behind. This contributes to risky software releases because every deploy is a much larger set of changes, and that naturally carries a much higher risk of problems arising. This in turn leads to numerous bugs, which slow down development and can potentially lead to the unavailability of resources.

To combat this, you need some up-front planning. If you already have this issue then set aside some time to smooth out the problems and start afresh, before you move on.

Finding a strategy that allows you to automate the workflow, code integration, deployment, and testing, will give you the best chance of syncing your production environment with your development environment.

A good place to start automating deployments is to make sure that you’re following best practices with regards to continuous integration and delivery (CI/CD) and testing the software. These best practices include:

MAINTAINING A SINGLE REPOSITORY

Maintaining a single repository ensures that every person on the development team works on the same code, and can test their changes easily.

AUTOMATING TESTING AND BUILD PROCESSES

Automating your development and testing is essential. This will simplify deployment in an environment similar to the final use-case, and is particularly helpful when debugging platform-specific issues.

3. IMPLEMENTING HIGH AVAILABILITY

The last strategy to use when attempting to minimize downtime is to use the concept of high availability on the infrastructure. This includes principles used in designing resilient and redundant systems.

The system must be able to detect the health of the system. If the system fails, it needs to know precisely where it has failed.

The system must be able to redirect traffic. This is essential in minimizing downtime as it ensures that traffic between servers is quick, with minimal interruption.

Eliminate single points of failure. This means that several redundant servers are used. Moving to multiple web servers and a load balancer from a single server is one of the ways you can upgrade to a highly available infrastructure. The load balancer performs regular health checks on web servers and routes traffic from those servers that are failing. (It also enables a more seamless deployment of code.)

Increasing database resilience using database replication is another way you can add resilience and redundancy. Different database models have different configurations of replication. However group replication is the most interesting because it allows you to have both read and write operations on a redundant cluster of servers. Failing servers can be detected and routing done to avoid downtime.

CONCLUSION

In this article we’ve covered three areas where processes and infrastructure improvements will lead to less downtime. This will lead to happier clients, and of course ultimate more revenue.

Investigating the changes you can make to reduce downtime is one of the best investments you can make in software; start by improving deployment, monitoring your metrics, and ensuring a high infrastructure availability.

The post 3 Ways To Minimize DownTime appeared first on Jayatechnology.