Izar Jekyll documentation

Site settings

Every setting in Izar's _config.yml, from your name and menu to the colour scheme, with its default.

Everything that appears in more than one place is set once in _config.yml. Each setting has a comment above it. After changing this file, stop jekyll serve and start it again.

Site basics

title: "Daniel Stephan"
description: "Freelance front-end developer and designer. I design and code beautifully simple things."
lang: en
url: "https://your-domain.com"
baseurl: ""
  • title is added to every browser tab title and used as your name if izar.name is empty.
  • description is used by search engines and social sharing when a page has no description of its own.
  • lang is the page language for browsers and screen readers. Set it to match any words you translate in _data/strings.yml.
  • url is your site’s full address, without a slash at the end. Search engines and social sharing need it.
  • baseurl is empty for username.github.io, custom domains and Cloudflare or Netlify, or /repository-name for a GitHub project site.

About you: izar:

izar:
  name: Daniel Stephan
  role: Front-end developer and designer
  email: hello@example.com
  address: 116 Fairground Rd, FL 32901, USA
  schema_type: Person
  • name shows in the header and footer, with the first word in bold. If it’s empty, title is used. The first and last words also give the initials in the author box under each note.
  • role tells search engines what you do. It doesn’t show on the page.
  • email shows in the contact section and the footer, and goes into the structured data.
  • address shows in the contact section and the footer. Leave it out to hide it.
  • schema_type is Person for one person (the default) or ProfessionalService for a studio. See SEO.
  nav:
    - label: Services
      url: /#services
      also: [/]
    - label: Works
      url: /works/
    - label: Notes
      url: /notes/
    - label: Contact
      url: /contact/

The same list builds the header menu (a button on phones) and the footer menu. A link is marked as the current page when its url matches the page, when the page sits under it (a project at /works/lewis/ lights up Works), or when the page’s address is listed under also. In the example, the home page (/) lights up Services.

Write site addresses with a leading slash. The theme adds baseurl for you.

Profiles

  social:
    - label: GitHub
      icon: github
      url: https://github.com/you
      show_in_header: true
    - label: LinkedIn
      icon: linkedin
      url: https://www.linkedin.com/in/you
  • icon is one of github, x, linkedin, dribbble or mail.
  • show_in_header: true also shows the link in the header. All profiles show in the contact section and as icons in the footer.
  • Search engines get the addresses as your other profiles.

To add another icon, save an SVG as _includes/icons/<name>.svg (24 × 24, drawn with lines) and use its name as icon.

  footer:
    heading: Let's make something amazing together.
    action:
      before: Start by
      label: saying hi
      url: /contact/
    info_label: Information

The closing call to action on every page, with your address, email and menu beside it. heading, action.before, action.label and info_label fall back to the words in _data/strings.yml, so you can set them in either place. Remove action.url to hide the link. Under it, a bar shows your logo, “© 2026 All rights reserved” (the year fills in by itself) and your profile icons.

Contact form

  form:
    provider: demo
    subject: New message from your website
    # access_key: your-web3forms-key
    # endpoint: https://formspree.io/f/your-id

provider is web3forms, formspree or demo. See Contact form.

Look and feel

  color_scheme: dark
  theme_switch: true
  reveal: true
Setting Default What it does
color_scheme dark dark, light, or auto to follow each visitor’s system setting.
theme_switch off true shows a round light/dark button in the header. A visitor’s choice is remembered in their browser. color_scheme sets where they start.
reveal on Sections fade in as they scroll into view. Set false to switch it off. Visitors who ask their device for less motion never see it.

The demo’s _config.yml sets theme_switch: true. Without the line, there’s no switch.

Favicon and sharing image

  • Replace assets/favicon.svg with your own, or add favicon: /assets/your-file.svg at the top level of _config.yml. It’s served as an SVG.
  • The picture shown when a page is shared is set under defaults: as image: /assets/img/og.png. Make your own at 1200 × 630 pixels. See SEO.

Below the line

The second half of _config.yml says “rarely need to change anything”. It sets up:

  • collections: projects are written as files in _projects/ and get addresses like /works/lewis/.
  • permalink: /notes/:title/: notes get addresses like /notes/plain-css-is-enough/.
  • defaults: the layout each kind of file uses, and the sharing image.
  • plugins: jekyll-seo-tag, jekyll-sitemap and jekyll-feed. All three are allowed on GitHub Pages.
  • feed: the notes feed at /feed.xml.
  • exclude: files kept out of the built site.

The theme’s own words

Labels such as “Menu”, “Send message”, “Your name” and “Read” come from _data/strings.yml. See Colours, fonts and words.