Within this HTML code, the symbols {{ and }} represent liquid syntax, a language used in Jekyll for dynamic content creation. Liquid can be thought of as an alternative to PHP.
In this case, the code snippet
{{ "/assets/css/style.css" | prepend: site.baseurl }}
instructs to insert the string "/assets/css/style.css" with the value of site.baseurl prepended to it (this variable should be defined in your _config.yml).
To avoid conflicts between quotation marks in the expression and the HTML code, consider using:
<link href="{{ '/assets/css/style.css' | prepend: site.baseurl }}" rel="stylesheet">
Once interpreted by Jekyll, this could generate the following HTML code:
<link href="http:/www.baseurl.of.mysite.com/assets/css/style.css" rel="stylesheet">
For more on liquid, check out this introduction.
To see a preview, run the Jekyll engine on your cloned repository using the appropriate command:
jekyll build
This will create the HTML pages in ./_site
. Alternatively, you can use:
jekyll serve
This command launches a test server with auto regeneration of HTML pages for preview at http://localhost:4000/
.
Find more jekyll commands here.
Assuming you've installed Jekyll following the documentation, when satisfied with the preview, push your repository to your GitHub account. GitHub will then run the Jekyll engine to generate HTML pages on its server.
If your username is "popcorn" on GitHub, you can push your Jekyll files to either:
- a repository named "popcorn.github.io": your user site accessible at
https://popcorn.github.io/
.
- in an existing project "foo", push to a branch named "gh-pages" (default for GitHub Pages) for your project site available at
https://popcorn.github.io/foo/
.
Refer to the GitHub tutorial for more details.