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: ""
titleis added to every browser tab title and used as your name ifizar.nameis empty.descriptionis used by search engines and social sharing when a page has no description of its own.langis the page language for browsers and screen readers. Set it to match any words you translate in_data/strings.yml.urlis your site’s full address, without a slash at the end. Search engines and social sharing need it.baseurlis empty forusername.github.io, custom domains and Cloudflare or Netlify, or/repository-namefor 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
nameshows in the header and footer, with the first word in bold. If it’s empty,titleis used. The first and last words also give the initials in the author box under each note.roletells search engines what you do. It doesn’t show on the page.emailshows in the contact section and the footer, and goes into the structured data.addressshows in the contact section and the footer. Leave it out to hide it.schema_typeisPersonfor one person (the default) orProfessionalServicefor a studio. See SEO.
Menu
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
iconis one ofgithub,x,linkedin,dribbbleormail.show_in_header: truealso 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
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.svgwith your own, or addfavicon: /assets/your-file.svgat the top level of_config.yml. It’s served as an SVG. - The picture shown when a page is shared is set under
defaults:asimage: /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-sitemapandjekyll-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.