How to configure Chalk

The _config.yml file is the most important one. It contains the basic setup of your project. Some parts are preconfigured and shouldn’t be touched as the comments state. Of course if you are familiar with Jekyll you can change whatever you want.

Note: You do not have to change anything. Chalk works out of the box. I do recommend changing the _config.yml to suit your needs.

Mandatory settings

# Mandatory settings

name: Chalk
paginate: 1
url: # add your site url (format: http://example.com/)
blog_theme: light # Or use dark

• name: Used as the page title and throughout your project as the default name.
• paginate: Define how much posts should be shown on the homepage for each page.
• url: Your production url (http://example.com).
• blog_theme: 2 options here, light or dark. Choose which design you prefer.

Optional settings

# Optional settings

about_enabled: false # Change to true if you wish to show an icon in the navigation that redirects to the about page
discus_identifier: # Add your Disqus identifier
ga_analytics: # Add your GA Tracking Id
local_fonts: false # Change to true if you wish to use local fonts
rss_enabled: true # Change to false if not
social:
  dribbble: # Add your Dribbble handle
  facebook: # Add your Facebook handle
  flickr: # Add your Flickr handle
  github: # Add your GitHub handle
  linkedin: # Add your LinkedIn handle
  twitter: # Add your Twitter handle
  email: # Add your Email address
  bitcoin: # Add your Bitcoin link or address

• about_enabled: If you wish to put the about page link in the top navigation in between the social icons set to true.
• discus_identifier: If you like to use Disqus for comments on each blog post, you can add the Disqus identifier here and it will popup automatically.
• ga_analytics: Add Google Analytics Tracking ID here.
• local_fonts: By default Chalk uses Google Fonts but if you wish to use local fonts this is the fallback.
• rss_enabled: When set to true, the rss icon in the top navigation will show up and people will be able to subscribe to your rss feed.
• social: Add you social links in here. When filled in they will show up in the navigation.

Other settings

Other than the _config.yml you can change a lot more in the project.

Tags

To add tags you must add a file with the tag name in _my_tags. In the file you add 2 variables: slug used to reference the tag and name which is displayed in the article header.

# _my_tags/design.md
---
slug: design
name: Design
---

SCSS

You can change colors, fonts, sizes in the _assets/stylesheets/_variables.scss file. For each specific theme (light or dark) you can change the variables in _assets/stylesheets/dark.scss and _assets/stylesheets/light.scss.

// =============================================================================
// Variables
// =============================================================================

// Typography
// =============================================================================

$sans-serif: "Lato", Helvetica, Arial, sans-serif;
$serif: "Cormorant Garamond", Courier, serif;
$base-font-family: $sans-serif;
$base-font-weight: 400;
$base-font-weight-bold: 700;

// Colors
// =============================================================================

// Brand colors

$brand-success: #1fbf92;
$brand-danger: #e74b3c;
$brand-primary: #3449ed;
$brand-warning: #f1c90b;

// Sizes
// =============================================================================

// Grid

$columns: 12;
$max-width: 650px;
$gutter: 20px;
$one-column: 100% / $columns;
$negative-gutter: 0 - $gutter;

// Font sizes

$base-font-size: 16px;
$base-line-height: 1.8;

// Box sizes

$base-border-radius: 4px;

// Effects
// =============================================================================

$base-transition-speed: .2s;

Fonts

Chalk uses Google Fonts by default. You can change the font in _includes/javascripts.html and in 404.html.

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js"></script>
<script>
  WebFont.load({
    google: {
      families: ['Cormorant Garamond:700', 'Lato:300,400,700']
    }
  });
</script>

Don’t forget Chalk also support local fonts if enabled in config.yml!

Footer

Changing the text in the footer is easy. It can be found in _includes/footer.html.

If you have any questions about using or configuring Chalk please create an issue here!