Learn how to modify your
_config.yml file. If you are using the remote method and you didn’t fork the chulapa-101 repo, you can use this file as a starting point. Don’t forget to add also
remote_theme: dieghernan/chulapa@[version] to your file.
For some variables, a default value is provided. This value is shown at the end of the explanation on bold.
A. Site settings/SEO
locale: Set the
<head>of your site. Use the format
language-TERRITORY, e.g fr, en-GB, es-MX, pt-BR. Default value: en-US.
subtitle: Set several
<meta>tags and defines the text to be displayed on top of the browsers. repository_name | project_tagline.
description: Brief description of your site. project_tagline.
baseurl: If you are deploying on Github just ignore these pesky two. You may (or may not) want to read Clearing Up Confusion Around baseurl – Again by Parker Moore (Jekyll).
words_per_minute: Used for computing the reading time of the page. 200.
timezone: Used for setting the timezone of your dates and hours. See Jekyll Docs.
Search Engine Optimization is important (obviously) for any site. Some of the previous options would affect to SEO, however Chulapa has a specific focus on that (check also our PageSpeed Results):
og_image: The default image to be displayed when a page of your site is shared on any of the major social networks (Facebook, Twitter, etc.). If
og_imageare set on the front matter of a page those images would be used instead. Author avatar (if set, see below) or your Github avatar.
twitter_site: The twitter username without @! of the owner of the site. Useful when sharing on Twitter.
authorof the site:
nameof the author, it will be injected on several parts of your site, as the footer or different
<meta>tags. github username for metadata.
avatar: The avatar of the author, should be a small square image preferably.
location: As a nice touch, this would link to Google Maps 😉.
links: A list of social links. You may set an url and a Fontawesome 5 code for each social link. You can also include an email address on this list.
See below a full example for an
author: name : Name Surname Company avatar : https://github.com/devdhh.png location : New York, US links: - url: https://twitter.com/jack icon: "fab fa-twitter" label: "My personal Twitter" - url: https://www.facebook.com icon: "fab fa-facebook" - url: fake@email icon: far fa-envelope label: "My personal email" ...
Your pages would look awesome on social networks: You don’t have to set anything, the theme already shipped this for you. Twitter Cards, LinkedIn Post Inspector, Facebook Validator, WhatsApp and some structured data! Every page shared would look awesome.
Chulapa has its own installation of Fontawesome 6, so you don’t need to set anything. However, if you want to use your own kit, jump to your Fontawesome account and grab the kitcode. Implement this kitcode after
To enable v4 support, set
analytics_id: Use either your gtag (recommended) or your Google Analytics tracking code. Learn more.
While Lunr is fully integrated on the theme, for Algolia and Google CSE you may need to create an account and perform some additional steps.
provider: Select a provider for enable search:
label: Text to be displayed on the navbar when enabled. Useful for localization (i.e. you can set it as Búsqueda or Ricerca). Search.
landing_page: url of your search page, useful for localization. “/search”.
lunronly, number of word to be included in the index. 30.
algolia_logo: Your must set it as
trueif your are on a Community (Free) Algolia plan.
google_cse_id: Your Google Custom Search id, available on cse.google.com > Your search engine > Settings.
application_id: App id on Algolia.
index_name: Name of the index to search.
search_only_api_key: Your public key.
Recommended additional options are:
algolia: application_id: your id index_name: your name search_only_api_key: your apikey extensions_to_index: - html - md searchableAttributes: - title - headings - unordered(content) - unordered(subtitle) - unordered(categories) - unordered(collection) - unordered(tags) customRanking: - desc(include_on_search) - desc(title) - desc(content) - desc(subtitle)
If you are deploying your site with Github Pages, I recommend using this GitHub Action to create and update your Algolia index after every commit automatically.
You can add a comment feature to a page. Currently the following services are supported:
- Disqus, one of the most known comment providers for static sites,
- cusdis, a lightweight, privacy-first, open-source comment system,
- giscus, A comments system powered by GitHub Discussions
- Cactus, a federated comment system for the web, based on the Matrix protocol
Welcomments, lightweight, fast, and SEO-friendly comment sections for your site
welcommentsto enable it.
disqus_shortname: Disqus only. Add your site id, on
cusdis_app_id: Cusdis only, the app id of your service. On cusdis see Embed code and use
cusdis_host: Cusdis only. If you are self-hosting Cusdis use this field.
cactus_shortname: Cactus only. The name of the name that you use for registering this site with Cactus.
website_id: Welcomments site id.
Configure giscus following their instructions and paste the resulting script on a file hosted on your GitHub repo with path ./_includes/custom/giscus.html.
When setting up Welcomments, you may receive a pull request on your site. My suggestion is that you ignore it (except for the
website_id), since Chulapa has some customised templates that would be overridden by the files on the PR.
Configure the navbar and footer of your site. This theme supports a two-level navigation structure, and features three different navbar styles:
fab, as a floating action button with animation, a classic sticky-top navbar or
dual that would display as
fab on small devices and as a classic navbar on bigger devices.
Check this live demo of the classic navbar style.
fabvalue would display your navbar as a floating action button.
dualoption also available. classic.
expand: Only affects the classical navbar. Defines on which devices the links of the navbar would expand. Values are
sm, md, lg, xlfor small, medium, large and extra-large devices,
never. See Bootstrap docs on breakpoints to understand each value. md.
title: Text to be displayed as the title of your navbar.
img: An icon (ideally 30px x 30 px) displayed together with the
url: The brand would link to this value. your root url.
nav: Links on your navbar. See the example to learn how to set one-level and two-level links:
navbar: style : fab brand: title : Home img: "./assets/img/site/brand-clear.png" url: /someurl nav: - title: One-level link #Label url: /url1/ #url - title: Two-level link #Label child: - title: Second level first item url: /url2-1 - title: Second level second item url: /url2-2 - title: One-level link #Label url: /url1/ #url ... more levels
To set social links to be displayed on your footer, configure this section:
label: Label of your link.
icon: Fontawesome icon code.
url: url of the link
footer: links: - label: "RSS" icon: "fa fa-rss" url: "./atom.xml" - label: "Twitter" icon: "fab fa-twitter" url: https://twitter.com/ - label: "Facebook" icon: "fab fa-facebook" url: https://www.facebook.com
You can also customize the copyright on the footer:
footer: copyright: "© 2021 <span class='chulapa'>Chulapa</span> developers"
C. Theming Chulapa
This is the core feature of Chulapa, please find the full reference here, or just navigate to the next page.
D. Jekyll Defaults and collections
The only specific parameter of Chulapa on this section is:
paginator_maxnum: This parameter would affect only if you are using the Chulapa template for pagination. This parameter would define the maximum number of pagination elements to be shown. 3.
Have a look to a potential Default configuration here.
XX. Other settings.
You don’t need to modify anything on that section, but obviously you can.