Codea freesite fast with Jekyll & GitHub
7. Install Jekyll
Now we can actually get Jekyll running in the site.
Make sure you are in the directory you cloned down
and simply type ‘gem install jekyll bundler’. Your
computer will go and grab all the needed
dependencies to run a site.8. Serve locally and build
There are two main commands you will use with Jekyll:
‘serve’ and ‘build’. To run your site locally, type ‘jekyll
serve’ in your command line.
This will run a version on http://127.0.0.1:4000 that
you can preview your changes on. NB if you already
have gem and other dependencies installed on your
machine, this command may fail due to a mismatch in
dependency versions.
In this case try ‘bundle exec jekyll serve’ instead. It
runs the same, but with the word build compiles the site.9. Get a headstart
Copy in the files supplied with this tutorial at this point
to give you a basis to work from, or download them
here: GitHub.com/maxray/jekyll/archive/
master.zip This will give us a homepage, blog list
and the assets structure for the site. Refresh your
page at http://127.0.0.1:4000 and you will see we now
have some basic pages to build from. Let’s have a
quick overview of how the Jekyll site works.10. First stop — configuration
Open _config.yml in your text editor and add your
own details. One key area to check is to set your
base url. This is the folder that your site is loading in.Jekyll — old faithful
Jekyllisoneofthefoundingstaticsitegenerators,
launchedin2008.Itisstillthemostpopular,largely
becauseoftheadoptionbyGitHub.Morerecently
generatorssuchasHugo,EleventyandGatsby
meantherearemorechoicesthanever.Tutorials
11. Frontmatter
Frontmatter is a snippet of YAML () at the top of a
file. Jekyll uses it to hold variables.
Look in the about.md file, and you can see that
we set the title there.12. Liquid tags
Liquid is a templating language that uses objects,
tags and filters. We use the object tag surrounded
by {{ }} to do this.
If you look in the layouts/default.html file you can
see how we output the Frontmatter from the
previous step.13. Building up pages
We build pages in a similar way to how you might
build a WordPress theme.
We use includes for often used parts, for
example the navigation, html for templates and, in
this case, markdown files for posts.14. Navigation
Rather than a static navigation, we use the power of
config files to separate the content from the
template. Navigation.html has liquid tags for a loop
through the navigation.yml file.
We can just enter whatever pages and links we
want now without going back to the template.15. Blog list template
To create a list page, again we use liquid tags to
give us the logic to loop through all the files in the
‘posts’ folder.10111214a14b68 _____tutorial