Skip to content

dannguyen/github-for-portfolios

Repository files navigation

How to build a web portfolio from scratch with Github Pages

at the moma

A layperson's step-by-step guide to building webpages with Github. You can visit the live tutorial (which itself was publislhed via Github Pages and Jekyll) at:

http://dannguyen.github.io/github-for-portfolios/

This guide is meant for the true layperson, someone who has a minimal-to-non-existent grasp or awareness of HTML, Git, Github, and the command-line. That being the case, this guide attempts to guide the reader through Github's web-interface to explore how to build a webpage from scratch.

At the end of the tutorial, the goal is for the user to have a basic website that they can edit and manage themselves and that can function as a respectable web portfolio. However, this tutorial does not purport to teach even basic web development or programming skills. On the other hand, the user can expect to have a good starting spot from which to experiment and iterate if they want to learn web development on their own, especially if they want to continue improving their personal website.

Feel free to fork the site. Leave questions/comments in this repo's Issues section, or tweet me at @dancow.

This tutorial was built using Github Pages, Jekyll, Bootswatch v3.1.1, and the Sublime Text editor.

How to clone and edit this repo

Note: This section is not related to the actual tutorial and is meant for developers looking to recreate this tutorial and its build process. You must have Ruby, Jekyll, and Git installed, for starters.

  1. Clone the repo:
$ git clone https://github.com/dannguyen/github-for-portfolios
  1. Install Jekyll and Ruby dependencies with Bundler
$ cd github-for-portfolios
$ bundle install
  1. Run the Jekyll server and browse the site at http://127.0.0.1:4000/github-for-portfolios/
$ jekyll serve --watch

The jekyll serve command will generate a _site directory, which contains the published output of Github, and what you see at http://dannguyen.github.io/github-for-portfolios/. The --watch will cause the Jekyll server to update the _site directory every time you make a change to the source files.

  1. If you have forked your own copy of this repo and want to publish it via Github Pages, take note that the tutorial does not publish it via Github.com's Jekyll instance, as I've thrown in some hacky custom plugins, which Github will not run. Instead, I've created a Rake task that generates the static Jekyll site and pushes it to the gh-pages branch. Assuming you've set up your own fork and configured the remote and upstream properly, you can push static site changes simply with:
$ rake publish