Markdown

  • Simplified HTML
  • Preprocessor turns it into HTML.
  • Use the links to the left to play with Markdown.
  • Most README files on GitHub are writtein with Markdown. (Here's an example. Click the 'RAW' button to see the Markdown code.)

Jekyll

  • Jekyll: a static-site generator
  • Lightweight, easy-to-use system for a site with templates
  • You define your templates and content locally, compile it locally, and move your compiled directory to a server.
  • How Jekyll works

Installing Jekyll

  • First, your computer must already have Ruby installed. Macs already come with Ruby. Windows users can use RubyInstaller.
  • Second, if you're on a Mac, you'll need to install Command Line Tools before you can install Jekyll. We didn't cover this in class, because I didn't realize it was necessary. If you're on Mavericks, just follow this guide. If you're using Mountain Lion or Lion, first download Xcode (a free app available on the Mac App Store). Once its installed (it takes a while), open it, go to Preferences > Downloads, and install Command Line Tools.
  • Open Terminal
  • Enter sudo gem install jekyll
  • If it prompts you for a password, type your system password. You won't be able to see it as you type it.

Creating a new Jekyll project

  • In Terminal, navigate to where you keep your projects
  • Type jekyll new PROJECTNAME
  • Move into the new directory by typing cd PROJECTNAME.
  • Create the site by typing jekyll build
  • Your compiled site will go in a new _site subdirectory

Updating your _site directory

  • To make Jekyll convenient, we need it to continue to compile the site as we change files.
  • To do this, type jekyll build --watch.
  • This tells Jekyll to rebuild the site every time a file gets changed.
  • Try it out! Load your entire PROJECTNAME directory in Sublime Text, and change something. Go back to the Terminal and you'll see a line that tells you it regenerate the page.
  • While build is running, you won't be able to type other commands in the same Terinal window. You can hit command-t to open a new tab, or control-c to make the build stop running.

Converting an old site to Jekyll

  • cd to your project directory
  • Type jekyll new --blank --force .
  • You'll need to create a _config.yml file in the root of your project. Populate it with the text in this Gist.
  • You should also add a .gitignore file if you don't have one already. In it, list _site. That will prevent your compiled site from being checked into git. (You only need the source files in git — the compiled site can always be regenerated.)
  • Then type jekyll build --watch to build out your _site folder and keep Jekyll on alert for new changes.

GitHub Pages

  • GitHub Pages are specifically set up to use Jekyll.
  • Your GH Pages site actually uses the templates and content, not the compiled _site directory.

Jekyll + Sass

  • Using both together can be fluid, but requires going just a little deeper into using the Terminal.
  • Follow these instructions.
  • You'll no longer need Prepros if you go this route.
  • And you'll use Jekyll's built-in server, instead of Prepros'. You'll navigate to localhost:4000 instead of localhost:8000 to see your site.

Command line

Basic Terminal commands

  • cd means 'change directory', it's what lets you enter into a folder
  • pwd will list the directory you're currently in
  • Folders and filenames are case sensitive
  • 'tab' will autocomplete a folder or filename
  • ls will list all the files and folders in your current directory
  • open . will open Finder to display all the files in your current directory
  • cd .. will navigate you back up a folder
  • cd ~ will take you back to your root folder
  • cmd k will clear your window
  • The up arrow will cycle through all your previously typed commands
  • mkdir FOLDERNAME will create a new director/folder
  • touch FILENAME will create a new file

Using git and Github in Terminal

  • To begin a new Git repository, type git init inside of your project folder
  • git status will tell you what files in your projects have been changed.
  • To add your files to a commit, type git add -a. Then type git commit -m "Message about this commit.".
  • Go to your account on Github.com and create a new repository
  • Paste the instructions from Push an existing repository from the command line in your project folder, in Terminal.
  • Refresh your Github page, and it should have the updated files.

Homework

  • Work on Sass or Jekyll.