Intro to Git

Build Your Own Website with Github Pages and Cloud9

 

Women Who Code DC

Front End Hack Night

 

 

About Me

Alexandra Ulsh

alexandraulsh.com

@AlexUlsh

 

Women Who Code DC Front End Hack Night (FEHN) Lead

 

InfoSec @ Mapbox

 

Goals

  • Learn Git
  • Learn GitHub
  • Learn GitHub Pages
  • Learn a little Bash
  • Learn Cloud9 

After tonight, you will be able to use Git, Github Pages, and Cloud9 IDE to host your own website!

 

What is Open Source?

Open = Free, available, public, transparent

 

Source = software source code

Public software projects on GitHub are open source.

 

Opposite of commercial proprietary software.

 

What is Git?

A software program that helps you write software.

 

Distributed version control for source code

 

Distributed = more than one copy on more than one computer 

 

Created in 2005 by Linus Torvalds (Linux kernel).

 

Git = a software program

 

What is GitHub?

A website that hosts public and private Git repositories

 

Repository = a project or set of files

 

"Social coding"

 

Created in 2008

 

GitHub = a website

 

Git

social media 

=

GitHub

tl;dr

What is GitHub Pages?

Public web site hosting via GitHub

 

Uses specially named repositories

 

User pages = http://username.github.io/

Organization pages = http://organization.github.io/

Project pages = http://username.github.io/my-cool-project

1

GitHub Pages Limitations

  • Only static files
  • HTML, CSS, JavaScript, CSV, JSON, GeoJSON
  • No PHP, Node.js, Ruby, Django, or server-side frameworks
  • This means it is hard to manage pieces of code that repeat on multiple pages - menus, headers, and footers
 

Unless you use Jekyll!

Jekyll

  • Static site generator
  • Uses template and configuration files
  • GitHub Pages runs on Jekyll
  • GitHub the website runs on Ruby on Rails
  • Jekyll = a Ruby gem
 

Why use GitHub Pages?

  • Free!
  • Secure
  • Easy to use and configure
  • Under source control automatically
  • Use Jekyll to host your blog
 

What is Cloud9?

Free cloud-based integrated development environment (IDE)

 

Each workspace is its own Ubuntu Docker container

 

Support for 40+ programming languages

 

Why use Cloud9?

  • Hardware agnostic = socioeconomic accessibility
  • Saves time - pre-configured
  • Amazing productivity features
  • Live preview and cross-browser testing
  • Collaborative coding - "Google docs style"
  • Available from any computer or tablet

Best way to code on a Chromebook

 

Why have a personal website?

  • Great first front end development project
  • Complete control of your personal brand
  • Shows up when you Google your name
  • Career advancement
  • Showcase portfolio
1

Women are encouraged to not self-promote...

 

Let's change that by building a personal website!

 

Let's get started!

Create a GitHub Account

https://github.com/

Keep the Free Plan

GitHub Welcome Page

Create a New User Pages Repository

username.github.io

GitHub Repository

GitHub User Profile

Organization Profile

What is README.md?

.md = Markdown

 

"Text-to-HTML conversion tool"

 

GitHub Flavored Markdown

 

You can use Emojis!

 

Cloud9 - GitHub Sign In

https://c9.io/

Authorize application

Cloud9 Dashboard

Clone Username Repo

Create Workspace from Repo

Repository Workspace

Git is already installed

Let's add some files!

Create with GUI

GUI = Graphical User Interface

Upload Local Files

Create files via Bash

# Create a new file
touch index.html

Quick Intro to Bash

Why learn bash? Because it saves time

Builds command line interface (CLI) skills

CLIs used in SASS, bower, Node.js, and Ruby

 The Terminal

Create files via the Terminal

# Create a new file
touch index.html

# Create a new directory (folder)
# mkdir = "Make directory"
mkdir css

# Change the current directory
# cd = "Change directory"
cd css

# Create CSS stylesheet
touch styles.css

Open Files Quickly in Cloud9

# Open file in Cloud9
c9 index.html
# Where am I? What's my working directory?
# pwd = "Print working directory"
pwd
# returns /home/ubuntu/workspace/css

# List files in current directory
# ls = "list"
ls
# returns styles.css

# Go back a directory (to the parent)
cd ..

# Go back two directories
cd ../..

# Clear all text in the terminal
clear

Navigating the File System

# Remove a file
# rm = "Remove"
rm styles.css

# Remove a directory containing files
# -r = "Recursive"
rm -r css 

# Delete empty directory
# rmdir = "Remove directory"
rmdir js

Deleting Files and Directories

Let's add some code!

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>My Personal Website</title>
	    
	<link href="css/styles.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        
        <div class="container">
            
            <h1>My Personal Website</h1>
            
            <p>Here's a puppy</p>
            
            <img src="img/Dougie-the-Shih-Tzu.jpg">
            
        </div>
        
    </body>
</html>

Preview index.html

Side by Side

Live Preview Changes

Preview In Your Browser

Run with Apache

Different URL

Test on Multiple Browsers

Let's Add Our Code to GitHub

Checking Git Status

git status

Adding Untracked Files

# Add one file
git add index.html

# Add all current untracked files
git add --all

Commiting Changes

# Commit changes to the local working directory
# -m = "Message"
git commit -m "My first commit"

I accidentally just did git commit!

 
git commit

What is this?

 

Nano Text Editor

 

Type your commit message

To save type ctrl + o then enter

 

After saving, type ctrl + x to exit

 

OS X - Vim Editor

 

Type the letter a

Type your commit message

Type esc then :w to save

 

To exit, type :q

May have to type esc again before

 

Windows - Vim Editor

 

Type the letter a

Type your commit message

Type esc then :w to save

 

To exit, type :q

May have to type esc again before

 

Push Changes to GitHub

# Push changes to GitHub repository on the master branch
git push origin master

What's "origin"?

 
# Get information about remote servers
git remote -v

origin = default name for connection to Github

Github = remote server, or "remote"

repository = https://github.com/techladyulsh/techladyulsh.github.io

 

Let's check GitHub...

Hmm... let's wait 5-10 minutes?

Success!

Let's create a branch to test some CSS!

Branches allow us to safely isolate changes or work on multiple features in parallel

# Get a list of branches
git branch

# Create a new branch
git branch css

# Switch to the new branch
git checkout css

# Shortcut - create and switch to new branch
git checkout -b css

Update styles.css

Commit and push changes to CSS branch

# Add modified styles.css to tracked files in CSS branch
git add --all

# Commit changes to CSS branch
git commit -m "Set default font family to Sans Serif"

# Push changes to CSS branch on Github
# NOTE we are pushing to "origin css" not "origin master"
git push origin css

Let's check GitHub...

New CSS branch!

Hmm... my website hasn't changed though?

For user pages, only the master branch is public.

We need to merge our changes in the css branch with the master branch.

Merging Branches

# Check out the master branch
git checkout master

# Merge the CSS branch with the master branch
git merge css

# Push changes from merge back to master branch on Github
git push origin master

Website updated!

Delete the Old Branch

# Delete the remote branch on Github
git push origin --delete css

# Delete the local branch
# -d = "Delete"
git branch -d css

# View available branches
git branch

Troubleshooting Updates

If an update is not showing on your site despite pushing the changes to GitHub, open up your browser's developer tools and disable caching.

Google Chrome Developer Tools 

Windows/Linux/Chromebook = Ctrl + Shift + J

Mac OS X = Cmd + Opt + i

 

Make sure "Disable cache" is checked, then refresh the page.

I want to host a portfolio on my website.

Try GitHub Project Pages!

These use the gh-pages branch of any repository, as long as you have already created a User Pages repository.

Project Pages Setup

  1. Create new repository on GitHub
  2. Create new workspace in Cloud9 from GitHub repository
  3. Add files and code to new workspace
  4. Push code to master branch
  5. Create a gh-pages branch
  6. Push gh-pages branch to GitHub

Sample Project

Sample Project Repository

Setup the Project Page

# Create the gh-pages branch
git branch gh-pages

# Checkout the gh-pages branch
git checkout gh-pages

# Push the gh-pages branch to GitHub
git push origin gh-pages

Admire Your Work

http://techladyulsh.github.io/My-Sample-Project

NOTE: Project Pages URLs are case sensitive!

GitHub Extras!

.gitignore file

Allows certain files, file extensions, and folders to be excluded from your Git repository.

 

Particularly useful for Node.js applications.

To enable in Cloud9, show hidden files.

Sometimes may have to add the hidden .c9 folder to a .gitignore file.

GitHub Social and Collaboration Features

  • Watch a repo
  • Star a repo
  • Submit an issue
  • Pull requests

Watch a repo

Get notifications of any new pull requests or issues.

Star a repo

  • Bookmark interesting repositories
  • Show appreciation of good work
  • Affects ranking of repository

Log an Issue

Pull Requests

What if I want my own custom domain name for my website?

Buy your domain name

I used namecheap

CNAME = canonical name

 

DNS (Domain Name System) record

 

Points an alias (domain name), to another domain name (canonical name).

 

For example, alexandraulsh.com is the alias for alulsh.github.io.

Add a CNAME file to GitHub Repo

CNAME file does not have a file extension.

Configure DNS with your domain name provider

Domain name needs to point to Github's servers.

Cloud9 Extras

  • Node.js, PHP, Go, C++, Ruby on Rails, Django...
  • ALL THE THINGS
  • Npm already installed
  • Bower already installed

Want more to do for your website?

Check out Search Engine Optimization (SEO), Google Analytics, and Jekyll.

 

Need Inspiration?

Check out some personal websites of awesome women and non-binary people in the DC Tech scene.

Questions?

@AlexUlsh

 

alexandra.ulsh@gmail.com

 

Come to Women Who Code DC's Front End Hack Night!

 

Every Monday, 6:30-8:30pm

Made with Slides.com