Links to style sheets can be included in the header of a layout. Here’s an example from the Jekyll docs that shows how to capitalize a word with a filter. They are wrapped in double curly braces with the object on the left of a | and the filter on the right. If you have used Ruby before, tags may remind you of the syntax used in HTML.ERB files.įilters are used to transform objects. They are wrapped in percentage signs with curly braces on the outside. ![]() Tags contain logic for templates like if statements or iteration. These variables could be defined in the front matter which we’ll talk about shortly. Objects output pre-defined variables by wrapping the variable name in double curly braces. The 3 key components to Liquid are objects, tags, and filters. Another language that you’ll need to be familiar with is a templating language called Liquid. Supported LanguagesĪs mentioned before, Jekyll accepts markup languages such as HTML. You’ll also need an index.html file with markup for your home page. This will contain the build files for your site. The first time that you run the serve command, a _site directory will be created at the root of your project. Including the live reload tag, allows hot reloading which means that you don’t have to refresh the page to see recent changes appear. ![]() Once you navigate into the newly created project’s directory, run the following command to access the site on localhost:4000. Starting a new project is as easy as typing ‘jekyll new’ followed by the name of your project/site. You’ll also want to install the Jekyll gems by entering the following command in the terminal while in your projects directory. Jekyll is written in Ruby, so it does require the installation of Ruby before getting started. ![]() This is great for simple sites that don’t require a backend or database. Photo credit: Getting StartedĪs a static site generator, Jekyll gives us the ability to take text written in a markup language and insert that content into pre-defined layouts to be displayed in a browser.
0 Comments
Leave a Reply. |