Site Customization using Jekyll theme and deployent at Netlify CMS


Published on November 07, 2020 by Giannis Giannousis

jekyll-custom netlify-cms

2 min READ

Site Customization using Jekyll theme and deployment at Netlify CMS


Theme Customization

  • The default.html file contains the main structure of the site, so there you can include, using Liquid, any new html file that you are going to use or perform DOM scripting.
  • The style.scss file contains the site style properties. You can modify it in every way you want or add a new one and import it like this :

    ---
    ---

    @import "";

    You also can use just css files and import them the traditional way at the head.html.

  • Edit your _config.yml file to adapt to your needs. It implements amazing SEO tactics (check SEO results below) and built-in Google Analytics function. There you can also add your social links or add some Jekyll plugins.
    Recommended: jekyll-seo-tag jekyll-sitemap
  • There is a meta.html file for your meta tags, open graph,schemas etc.
  • Ready to use navbar.html file. Adapt it to your needs by changing the order of the menu items or add new pages.

Custom animations used in the site

  • rellax.js for parallax effects
  • grained.js for the ‘noisy’ background
  • aos.js for the scroll effects
  • magic-mouse.js for the pointer animation

All the scripts were imported at the default.html file.


Netlify CMS

Intergrate with netlify cms

The process is really easy if you follow the instructions —> HERE
Create a new folder named Admin and put inside a new file index.html and config.yml After that, setup your backend following these instructions and don’t forget to enable the git gateway —> BACKEND

CMS Configuration

config.html

In this file you are going to edit your cms by ading collections.
Configure the blog collection by adding this code:

collections:
  - name: 'blog'
    label: 'Blog'
    folder: '_posts/'
    create: true
    slug: '---'
    editor:
      preview: false
    fields:
      - { label: "Image", name: "post-image", widget: "image"}
      - { label: 'Layout', name: 'layout', widget: 'hidden', default: 'post' }
      - { label: 'Title', name: 'title', widget: 'string' }
      - { label: 'Publish Date', name: 'date', widget: 'datetime' }
      - { label: 'Body', name: 'body', widget: 'markdown' }

Note: You have to add before the colletions your media folder root path like this: media_folder: '/assets/images'
Locate your images-folder and add the relative path.


Overall Review

The overall results of the Jekyll generator are highly satisfactory considering the speed and seo tactis. Below is the lighthouse report of the website :