Github

Terms

A repository is the most basic element of GitHub. They're easiest to imagine as a project's folder. A repository contains all of the project files (including documentation), and stores each file's revision history. Repositories can have multiple collaborators and can be either public or private.

Terms (cont.)

A branch is a parallel version of a repository. It is contained within the repository, but does not affect the primary or master branch allowing you to work freely without disrupting the "live" version. When you've made the changes you want to make, you can merge your branch back into the master branch to publish your changes.

Terms (cont.)

A repository's default branch is called "master". As you initially make commits, you're given a master branch that points to the last commit you made. Every time you commit, it moves forward automatically.

Terms (cont.)

A fork is a copy of a repository. Forking a repository allows you to freely experiment with changes without affecting the original project. Most commonly, forks are used to either propose changes to someone else's project or to use someone else's project as a starting point for your own idea.

Terms (cont.)

A commit to a in Git simply records/saves changed to a Git repository.

Github Pages

What are Github Pages?

  • GitHub Pages is a free static site hosting service.
  • GitHub Pages is designed to host your personal, organization, or project pages directly from a GitHub repository.
  • You can create and publish GitHub Pages online using the Jekyll Theme Chooser and/or the GitHub file editor.
  • If you prefer to work locally, you can use GitHub Desktop, the command line Git tool, or a variety of other Git client tools.

Terms

Markdown is a lightweight markup language with plain text formatting syntax. It is designed so that it can be converted to HTML and many other formats using a tool by the same name.

Terms (cont.)

YAML (/ˈjæməl/, rhymes with camel) is a human-readable data serialization language. It is commonly used for configuration files, but could be used in many applications where data is being stored (e.g. debugging output) or transmitted (e.g. document headers).

Hello World

  1. Create a new repository in your personal Github Account, name it whatever you like, check the box that's labeled "Initialize this repository with a README".
  2. Click on the Settings tab and scroll down to the "GitHub Pages" section.
  3. Select "Master branch" as the source and click the save button.
  4. Scroll back down to the "GitHub Pages" section and select a theme that you like best (you can change it later).

Welcome to GitHub's file editor!

  1. Your README.md file is used as your new site's index page if you don't have an index.md (or index.html) file.
  2. Edit the default markdown content if you like and preview how the content renders by clicking on the "preview changes" tab.
  3. When done, scroll to the bottom of the page/file editor, enter a commit title (if you like) describing your edits, and click the "Commit changes" button.

View your new website

  1. Your repository's Pages URL is going to be made up from your GitHub account (or organization) id and your repository id like so: [account id].github.io/[repository id]
  2. An easy way to find your Pages URL as a link is to click on the 'Settings' tab and scroll down to the 'GitHub Pages' section.

Jekyll

So what is Jekyll, exactly?

Jekyll is a simple, blog-aware, static site generator. It takes a template directory containing raw text files in various formats, runs it through a converter (like Markdown) and a Liquid renderer, and spits out a complete, ready-to-publish static website suitable for serving with your favorite web server (or GitHub's in our case).

Jekyll Structure

Jekyll looks to your directory and file sturcture to determine how to build a static Web Site

Jekyll Plugins

Jekyll has a plugin system with hooks that allow you to create custom generated content specific to your site. You can run custom code for your site without having to modify the Jekyll source itself.

GitHub has a predefined set of plugins that you can use, outside of those you will have to build your site locally before committing it to GitHub.

Jekyll Configuration

Jekyll allows you to concoct your sites in any way you can dream up, and it’s thanks to the powerful and flexible configuration options that this is possible. These options can either be specified in a _config.yml file placed in your site’s root directory, or can be specified as flags for the jekyll executable in the terminal.

Jekyll Posts

Jekyll posts are either html or markdown files stored in the _posts directory.

Posts need to have their date and title in the filename like so: YEAR-MONTH-DAY-title.MARKUP

Posts also are required to have 'Front Matter' which is YAML defined in the top of the file

Jekyll Pages

Jekyll Pages use 'Front Matter' to define page layout.

Non-Jekyll HTML Sites on GitHub

You can tell GitHub to completely bypass Jekyll processing on your Pages by creating a file named .nojekyll in the root of your pages directory.

  1. This presentation is an example of that!
  2. While you miss out on the power of Jekyll, this is the most flexiable way to deploy sites to GitHub.

Accelerated Mobile Pages

AMP is Fast!

AMP stands for Accelerated Mobile Pages, a Google-backed project designed as an open standard for any publisher to have pages load quickly on mobile devices. On Feb. 24, 2016, Google officially integrated AMP listings into its mobile search results.

AMP pages are weighted higher in search results.

AMP provides a set of Web Components to use as a pattern library for your site.

AMP Jekyll Template

Let's fork a Jekyll AMP template for use as a new site.

Be sure to update the _config.yml file.

Prose.io as a Jekyll editor on Github

There are many options for editing your Jekyll site on GitHub including the online file editor, a Git tool and your favorite markdown editor, etc.

Prose.io is an online editor that uses GitHub's API to provide a friendlier (and free) editing experience.

Web Components