Building a Personal Website with Github Pages

Taught by Bryan Braun / @BryanEBraun

Slides at http://bryanbraun.github.io/gdi-personal-website.

Why a Personal Site?

• Claim your name
• A place to experiment
• A place to write
• Control your message.
• Build it before you need it

Ask: Does anybody here have a personal site? Why? How have you found it helpful?

• I've had a personal site since I started web dev in 2009. (Talk about MY experiences!)
• Tell the story about the advice to get yourname .com.
• There's no better way to learn then by making things.
• Writing: is a good skill to develop. Writing gets your name out there.
• Your website may be the first impression people get of you online.
• It's great for potential employers.

100s of Options

Wix - Wordpress - Joomla - Squarespace - Django - Drupal - Rails - Express - Sinatra - Hexo - Jekyll - Octopress - Postachio - Hugo - Weebly - Pancake - Pelican - Middleman - Blogger - Google Sites - October - Ghost - Harp - About.me - Yola - Assemble - Craft - Tumblr - Hubpress - Grav - Medium - Hubpages - Svbtle - Posthaven - Pico - Statamic ...

Every one of these options is perfect for someone. It's about about tradeoffs.

Github Pages

What is it?

It's free static site hosting provided by Github.

What is Static?

What is Hosting?

Github is a developer's network for managing code. We'll talk more about this later.

Why are we interested in Github Pages?

• Uses professional developer workflows
• Full control of your design & content
• Embraces openness
• Versioned
• Distributed (encourages a local backup)
• Benefits of Static Sites
  • Secure
  • Scalable
  • Portable
• Free

• Uses Developer workflows: Git, Github, Markdown, Ruby, Javascript Integrations
• For the _Convenience vs Control_ tradeoff, we developers want control.
• Secure: No database to hack, no passwords to leak. No server to hijack and send spam from.
• Lots of options seem close to free but they tend to increase over time and add up.

The Case Against Github Pages

• You can't use it to experiment with Backend / Databases / Caching / Servers / Ops
• Favors control over convenience.
• No CMSs. Advanced Github pages sites use static site builders like Jekyll
• Web interface is lacking: Github is designed for code management, not content management.
• Some features must use 3rd party JS plugins

Missing conveniences

• May not want Jekyll if:
  • You don't want to work with Ruby
  • You are on Windows and aren't interested in the more complex installation
  • You have specific technologies you want to work with.
• No Drag & Drop image uploads.
• No WYSIWYG Editor. Uses HTML instead
• No Large high-quality theme ecosystem
• No 3rd Party Only: Commenting, Upvotes, Ratings, [your cool idea]

Sites using Github Pages

An example of use in government.

Sites using Github Pages

An example of corporate use.

Sites using Github Pages

An example of personal / blogging use.

First... What is Github?

Think of it as a social network for programmers. Like Instagram, but instead of posting photos, you post code projects.

Github: Profile Page

Github: Newsfeed

Github: Project Page

Getting Started: Github Pages

https://pages.github.com

Jump over to Github Pages and walk through their steps to follow the setup.

• Make sure the repo is empty (no README).
• Put the project on my desktop.
• Add the index.html file from my desktop.
• Sync the commit
• Get the URL from the settings area (and add it to the description area).
• Verify it's live on Github

Getting Started: Github Desktop

It is...

Download and Instructions at: https://desktop.github.com

Draw where Github Desktop fits in on the whiteboard (computer -> Github)

Do Git in 5 minutes (on the whiteboard?) comparing commits to revisions and a timeline.

- Compare to Google Doc Revisions: https://docs.google.com/document/d/1_ZGO0NjCssLqhp6AOHHglbe94jjFib9QWfcOG1fotT4/edit

Walkthough the Github Desktop features, showing the AnchorJS project.

• Show the projects listing
• Show the timeline
• Show how each point in time references a commit (and show the commit metadata)

Demonstrate github Desktop usage with my "Hello" example.

• Make a series of changes, committing them, sync with github and view the history.

Let's Reflect

What have we done?

• We now a have live webpage running on Github Pages.
• We know how to use Github & Github Desktop to publish a website.

We have acheived our most basic goal.

(Reproducing this in the hands-on portion would be a success.)

Limitations of Static Sites:

The pain of updates. I don't recommend straight HTML for large sites.

Limitations of Static Sites:

Writing content in HTML can get tiresome

Solution: Static Site Generators

• They try to eliminate the pain of static sites
• They are most useful for sites with many pages.

Jekyll - Middleman - Hexo - Hugo - Nanoc - Pelican

(compare options at https://www.staticgen.com/)

Blogging is easier with Markdown

They also improve blogging, by letting you write markdown instead of HTML

Jekyll is a Static Site Generator

http://jekyllrb.com/

A quick slide.

Why are we interested in Jekyll?

• Github Pages Integration
• Large Plugin Ecosystem
• Secure / Easy to maintain
• No comment spam
• Ease of migration
• Free

• Plugins: RSS, Sitemaps, Syntax Highlighting, etc.

One downside: Windows setup could be a challenge. Maybe look into Hugo?

Jekyll Setup

Using Jekyll with Github Pages

Installation Instructions (Mac)

Installation Instructions (PC)- not for the faint of heart

Don't try to setup Jekyll live.

Give a tour of Jekyll by browsing through the file tree of a local Jekyll site. (Una's is a bit complex. Maybe Ben Balter's?)

Note: Running `jekyll new` creates a scaffold for a basic site. I could demonstrate this.

• layouts & includes (header, footer, etc)
• Blog posts
• Listings with ERB logic

Hands On

What do you want to build?

Ideas:

• Putting my "Hello" page on your Github Pages, and customizing it for you.
• Build your own static webpage / website
  • Designed by you
  • OR, find a static template (try here or here)
• Set up a custom domain name
• Set up a Jekyll site
• Use a different static site builder to set up a site
• Ask around

THE END