Women Who Code DC Front End Hack Night (FEHN) Lead
Microsoft SharePoint technical consultant for the DoD
- 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?
Website that hosts public and private Git repositories
Collaborate with others
Distribute and share your code
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
- 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!
- 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?
- 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
Keep the Free Plan
GitHub Welcome Page
Create a New User Pages Repository
GitHub User 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
Clone Username Repo
Create Workspace from Repo
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
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!
<!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>
Side by Side
Live Preview Changes
Preview In Your Browser
Run with Apache
Test on Multiple Browsers
Let's Add Our Code to GitHub
Checking Git Status
Adding Untracked Files
# Add one file git add index.html # Add all current untracked files git add --all
# 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?
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
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.
# 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
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
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 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
NOTE: Project Pages URLs are case sensitive!
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
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.
- 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) and Google Analytics.
Check out some personal websites of awesome women and non-binary people in the DC Tech scene.
Build Your Own Website With Cloud9 and GitHub Pages
By Alexandra Ulsh