Build Your Own Website With Cloud9 and GitHub Pages

About Me

Alexandra Ulsh

alexandraulsh.com

@AlexUlsh

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

Microsoft SharePoint technical consultant for the DoD

Goals

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

I want you to leave this class with the knowledge and tools to build your own website using GitHub Pages.

What is Open Source?

Open = Free, available, public, transparent

Source = software source code

Public repositories on GitHub are open source.

Contrast with commercial proprietary software.

What is Git?

Distributed version control software for source code

Distributed = a copy (repository) on your machine, not one copy on a central server

Created in 2005 by Linus Torvalds (Linux kernel).

Software to help you write software

What is GitHub?

Social coding

Website that hosts public and private Git repositories

Collaborate with others

Distribute and share your code

Git

+

social media

=

GitHub

tl;dr

What is GitHub Pages?

Public web site hosting on GitHub's servers via Git repositories

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

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

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

GitHub Pages Limitations

Can only use 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

GitHub the website runs on Ruby on Rails
Jekyll = a Ruby gem
Static site generator - generates static HTML files from templates
All GitHub Pages sites are processed via Jekyll, even regular HTML sites
Created by Tom Preston Warner, founder of GitHub

Why use GitHub Pages?

Free!
Easy to use and configure
People can easily view your website's awesome code

What is Cloud9?

Free cloud-based integrated development environment (IDE)

Each workspace is its own Linux Ubuntu Docker container

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

Why have a personal website?

You are in complete control of your personal brand
SEO when your name is Googled
Career advancement
Showcase portfolio
Women not socialized to self-promote...
Let's change that by making our own websites

It's easy to configure and develop your own website...

the hardest part is writing the content!

My goal is to help eliminate any technical barriers to setting up your own personal website so you can instead focus on the code and the content.

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 uses 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"

Push Changes to GitHub

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

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

# 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 = Ctrl + Shift + J

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

Create new repository on GitHub
Create new workspace in Cloud9 from GitHub repository
Add files and code to new workspace
Push code to master branch
Create a gh-pages branch
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