These items must be installed on your computer:
- Node.js - 7.6 or above
- Yarn
- Ruby - 2.3.5 (we suggest using rbenv to provide the specific version)
- RubyGems
- Download the repo
Next, you will want to open the project directory in terminal and run yarn setup
. This will download all the packages and gems you need to compile assets on this project.
Running yarn start
will start the jekyll server and the task that watches for changes to your files, always have this running in a seperate terminal tab while developing.
After initial setup, if changes are made to the packages needed for the project, run yarn
to get the latest.
You'll see the site on: http://127.0.0.1:4000
If your changes aren't showing, do try refreshing the server by quitting yarn and running yarn start
again to regenerate the site.
SiteLeaf uses Jekyll and the Liquid template engine. Here are some general tips and links to help you get started:
- https://learn.siteleaf.com/content/metadata/
- https://learn.siteleaf.com/content/defaults/
- https://jekyllrb.com/docs/configuration/#front-matter-defaults
The base Jekyll templates have hooks to several fields that will help with SEO and social metadata:
site.description
- controls meta description. Changed from site settings.site.keywords
- controls meta keywords. Changed from site settings.page.title
- controls<title>
and the open graph title tag (also used by Twitter). You get this field by default in Jekyll, so name your page/content something appropriate.page.description
- overrides meta description on a page-by-page basis. This can either be added to the metadata scope for pages or collections or can be added manually as needed.page.keywords
- overrides meta keywords on a page-by-page basis. This can either be added to the metadata scope for pages or collections or can be added manually as needed.page.canonical
- by default, a canonical link tag is created pointing to the current url. This field can override that and can either be a local path (eg./stories/eric
) or can be a fully resolved url to a separate domain. For local urls, it is recommended to just use the path fragment as the rest of the url is filled in automatically. This field can either be added to the metadata scope for pages or collections or can be added manually as needed.page.image
- if animage
field exists for a page, it is used for the open graph image tag (also used by Twitter). It is recommended to add this to the metadata scope for pages or collections as the default image field so it is most likely to be populated.