|
| 1 | +Fancy jekyll powered single page site |
| 2 | +====================== |
| 3 | + |
| 4 | +Here're some examples: |
| 5 | + |
| 6 | +- **This repository** is also a live demo, see it at [t413.com/SinglePaged](http://t413.com/SinglePaged) |
| 7 | +- **Education:** |
| 8 | + - [Global Health Project](http://gcarrozza.github.io/global-health-proj/) for Public Health class at UIC (student project) ([source](https://github.com/gcarrozza/global-health-proj/)) |
| 9 | + - [Bioinformatics at Harvard Medical School](http://bioinformatics.hms.harvard.edu/) -- ([source](https://github.com/hbc-hms/hbc-hms.github.io)) |
| 10 | + - [Dutch Introduction to Electronics class](http://tverbesselt.github.io/) ([source](https://github.com/tverbesselt/tverbesselt.github.io)) ([translation](https://translate.google.com/translate?sl=auto&tl=en&js=y&prev=_t&hl=en&ie=UTF-8&u=http%3A%2F%2Ftverbesselt.github.io%2F&edit-text=&act=url)) |
| 11 | + - [Innovation Lab + Smart Data Hack](http://smartdatahack.org/) 5-day student challenge at University of Edinburgh, Turkey ([source](https://github.com/ilwhack/ilwhack.github.io)) |
| 12 | + - [@opsbug Tech Inoculator](http://increasingprobability.com/) ([source](https://github.com/increasingprobability/increasingprobability.github.io)) |
| 13 | +- **Open Source Projects:** |
| 14 | + - [ALM](http://alm.tools/) A cloud ready IDE for TypeScript ([source](https://github.com/alm-tools/alm-tools.github.io)) |
| 15 | + - [argon.js](http://argonjs.io/) JS framework for adding augmented reality to web apps ([source](https://github.com/argonjs/argonjs.github.io)) |
| 16 | + - [Mockito](https://mockito.github.io/) mocking framework for unit tests in Java ([source](https://github.com/mockito/mockito.github.io)) |
| 17 | + - [REMnux](http://www.elabftw.net/) Electronic lab notebook ([source](https://github.com/elabftw/elabftw/tree/gh-pages)) |
| 18 | + - [REMnux](http://remnux.github.io/) A Linux Toolkit for Reverse-Engineering and Analyzing Malware ([source](https://github.com/REMnux/remnux.github.io)) |
| 19 | + - [Langmuir](https://langmuirsim.github.io/) Charge transfer simulations in organic electronics. ([source](https://github.com/LangmuirSim/langmuirsim.github.io)) |
| 20 | + - [OSX Privacy](http://osxprivacy.com/)-- exposing OS X Yostemite privacy issues ([source](https://github.com/maxx/osxprivacy)) |
| 21 | + - [SMS-Tools](http://t413.com/SMS-Tools/) is another project of mine that uses this template ([source](https://github.com/t413/SMS-Tools/tree/gh-pages)) |
| 22 | + - [HTML Tidy Advocacy Community Group](http://www.htacg.org/) ([source](https://github.com/htacg/htacg.github.io)) |
| 23 | + - [AfriLeaks](https://afrileaks.org/) (since changed, still cool!) - secure whistleblowers confidential submition project page ([source when single-paged](https://github.com/CodeForAfrica/AfriLeaks-Landing-Page/tree/698e3b0b1a67cc5f072ccd3a8f24b6d5e3ad406a)) |
| 24 | + - [FitNesse](http://fitnesse-eclipse.github.io/) Eclipse Plugin ([source](https://github.com/fitnesse-eclipse/fitnesse-eclipse.github.io)) |
| 25 | + - [Akanda](http://akanda.io/) Network Virtualization ([source](https://github.com/akanda/akanda.io)) |
| 26 | + - [Lazy Dubuntu](http://lazydubuntu.com/) ([source](https://github.com/darol100/lazydubuntu.com)) |
| 27 | + - [GROgreenhouses](http://grogreenhouses.com/), finances greenhouses for farmers in Sierra Leone ([source](https://github.com/grogreenhouses/grogreenhouses.github.io)) |
| 28 | + - [vampd](http://vampd.io) Vagrant Drupal Box ([source](https://github.com/vampd/vampd/tree/gh-pages)) |
| 29 | + - [Automatune](http://mlsites.github.io/Automatune-Site/) - discover and share melodies ([source](https://github.com/mlsites/Automatune-Site/)) |
| 30 | + - [The Rosette Platform](https://rosette-proj.github.io/)- git-based, internationalization framework (Ruby) ([source](https://github.com/rosette-proj/rosette-proj.github.io)) |
| 31 | + - [PHP Cat](http://phpcat.github.io/phpcat/) PHP Developer Group in Catalan (grup de desenvolupadors PHP de llengua catalana) ([source](https://github.com/phpcat/phpcat/)) |
| 32 | + - [Alt.Net Australia User Group](http://www.ozalt.net/) ([source](https://github.com/ozaltnet/ozaltnet.github.io)) |
| 33 | + - [FeedReader](http://jangernert.github.io/FeedReader/) Desktop RSS client ([source](https://github.com/jangernert/FeedReader/tree/gh-pages)) |
| 34 | + - [Coala Analyzer](http://coala-analyzer.org/) command-line interface for linting ([source](https://github.com/coala-analyzer/website)) |
| 35 | + - [Easy Shell](http://lucasviola.github.io/easyshell/) Linux and Shell Commands the Easy Way ([source](https://github.com/lucasviola/easyshell/tree/gh-pages)) |
| 36 | +- **Events / Conferences** |
| 37 | + - [CodeWeek 15 @ DI](http://cesium.github.io/codeweek15) CodeWeek at the University of Minho in 2015 by [CeSIUM](http://cesium.di.uminho.pt) - ([source](http://github.com/cesium/codeweek15)) |
| 38 | + - [Innovation Lab + Smart Data Hack](http://smartdatahack.org/) 5-day student challenge at University of Edinburgh, Turkey ([source](https://github.com/ilwhack/ilwhack.github.io)) |
| 39 | + - [Open CoMo](http://jakewins.github.io/opencomo-site/) Open-Data Incubator for Columbia, MO. 13th-15th of November 2015 ([source](https://github.com/jakewins/opencomo-site)) |
| 40 | + - [FSU Festival of New Music](https://fsufnm.github.io/) (17th Biennial) ([source](https://github.com/fsufnm/fsufnm.github.io)) |
| 41 | + - Code Across 2015 @Seoul 전 세계 시빅해커들과 함께 하는 -> since changed, ([source](https://github.com/codeforseoul/codeacross)) |
| 42 | +- **Personal:** |
| 43 | + - [Karen and Scott wedding](http://karenandscott.com/) ([source](https://github.com/karenandscott/karenandscott.github.io)) |
| 44 | + - [ryan & rachel wedding](https://r-and-r.github.io/) ([source](https://github.com/r-and-r/r-and-r.github.io)) |
| 45 | + - [Chris & Katie wedding](http://katieball.me/wedding-style/) ([source](https://github.com/roachhd/wedding-style)) |
| 46 | + - [Harmanpreet weds Gurwinder](http://harmanhanzra.github.io/) ([source](https://github.com/harmanhanzra/harmanhanzra.github.io)) |
| 47 | +- **Products:** |
| 48 | + - [Pawan Kumar film](http://c10h14n2movie.com/) info page ([source](https://github.com/c10h14n2movie/c10h14n2movie.github.io)) |
| 49 | + - [Physical.media](http://physical.media/) teaser page (album release tracker) ([source](https://github.com/JoshM33k/PhysicalMedia-ComingSoon)) |
| 50 | + - [Helpers in Korea](https://itgame.github.io/) ([source](https://github.com/itgame/itgame.github.io)) |
| 51 | + - Zeno- internet for gamers original teaser page: ([source](https://github.com/zenoio/zenoio.github.io)) |
| 52 | + - Original DEVISSCHER web design page ([source](https://github.com/devisscher/templates/)) |
| 53 | +- **Resumes:** |
| 54 | + - [magiciansanfrancisco.com](http://magiciansanfrancisco.com) professional page ([source](https://github.com/strongrobert/MagicianSanFrancisco)) |
| 55 | + - [Sumedha Pramod](http://www.pramod.ninja/) resume ([source](https://github.com/pramodsum/pramodsum.github.io)) |
| 56 | + - [Lia Bogoev](https://bogoli.github.io/) UX designer from utah ([source](https://github.com/bogoli/bogoli.github.io)) |
| 57 | + - [Bill Ryan](http://www.yuanbin.me/)'s homepage is a snazzy personal example! ([source](https://github.com/billryan/homepage)) |
| 58 | + - [Emil Ahlbäck](https://mull.github.io/) resume ([source](https://github.com/mull/mull.github.io)) |
| 59 | + - [Christophe Gabard](http://christophe.gabard.net/) resume ([source](https://github.com/cgabard/cgabard.github.io)) |
| 60 | + - [Leppotone Electrical Recordings](http://www.nathanmclaughlin.com/leppotone/) temporary homepage ([source](https://github.com/nathanmclaughlin/leppotone)) |
| 61 | + - [Michael A. Schmidt](http://micha-a-schmidt.github.io/physics/) particle physics lecturer at the University of Sydney ([source](https://github.com/micha-a-schmidt/physics/)) |
| 62 | + - [Tim Beissinger](https://timbeissinger.github.io/) postdoc in Plant Sciences at UC Davis ([source](https://github.com/timbeissinger/timbeissinger.github.io)) |
| 63 | + - [Jin Li](https://just4jin.github.io/) MS student in Systems and Information Engineering @ UVA ([source](https://github.com/just4jin/just4jin.github.io)) |
| 64 | + - [Emil Ahlbäck](https://mull.github.io/) ([source](https://github.com/mull/mull.github.io)) |
| 65 | +- *Let me know of more!* |
| 66 | + |
| 67 | + |
| 68 | +## Why? |
| 69 | + |
| 70 | +Got some *killer app*, some *neat project*, a cool portfolio? Make an easy single-page site to show it all off. SinglePaged uses jekyll niceties to make a ***polished, modular, and beautiful* single page site**. |
| 71 | + |
| 72 | +- Each vertical section is a markdown file in **_posts/** directory. |
| 73 | + * They're sorted by 'date'. (we don't use date anywhere, it only sorts) |
| 74 | +- Each vertical section sets it's own **color**, **header icon** (or image), **title**, and easy-to-write markdown body. |
| 75 | +- Only **two things** to edit: |
| 76 | + 1. Edit `_config.yml` to set the site title, description, etc |
| 77 | + 2. Add _posts/*.md to make each vertical section. Copy some examples and add the sections from your README.md for a fast start! |
| 78 | +- Easy adding of **SEO terms**, **favicon** & such, and **google analytics token**. |
| 79 | + |
| 80 | +Sound good? Let's go! |
| 81 | + |
| 82 | +There are three way to get started: (links jump to that section) |
| 83 | + |
| 84 | +1. Make a [**user homepage**](#setup-as-user-homepage) (or organization) |
| 85 | +2. Make a [**standalone project**](#setup-as-standalone-project-page) page |
| 86 | +3. Make a [site under an **existing project**](#setup-inside-existing-project) |
| 87 | + |
| 88 | + |
| 89 | + |
| 90 | +------------------------- |
| 91 | + |
| 92 | +## Setup as user homepage |
| 93 | + |
| 94 | +- Go click **fork** on the [github project page](https://github.com/t413/SinglePaged) |
| 95 | +- Rename your new repository to `**username**.github.io`. (click settings in the right column) |
| 96 | +- Clone your repository, **cd into the project** |
| 97 | +- Run `git checkout publish && git branch -m master && git push -u origin master && git branch -D gh-pages` to get the *publish* branch as master for a clean, empty starting point. |
| 98 | +- On your github project page go to *settings* again and change your **default branch** to ***master*** |
| 99 | +- Run `git push origin --delete gh-pages` to delete your remote's development branch |
| 100 | + |
| 101 | +Now hop over to [Usage](#usage) to get it running with your own stuff! |
| 102 | + |
| 103 | +**When you publish changes use `git push -u origin master`** |
| 104 | + |
| 105 | +------------------------- |
| 106 | + |
| 107 | + |
| 108 | +## Setup as standalone project page |
| 109 | + |
| 110 | +- Go click **fork** on the [github project page](https://github.com/t413/SinglePaged) |
| 111 | +- Rename your new repository to `whatever you want`. (click settings in the right column) |
| 112 | + * It will go live at yourusername.github.io/**WhateverYouWant** |
| 113 | +- Clone your repository, cd into the project |
| 114 | +- Run `git checkout publish && git branch -D gh-pages && git branch -m gh-pages && git push -uf origin gh-pages` to swap the *publish* and *gh-pages* branch. |
| 115 | + |
| 116 | +Now hop over to [Usage](#usage) to get it running with your own stuff! |
| 117 | + |
| 118 | +**When you publish changes use `git push -u origin gh-pages`** |
| 119 | + |
| 120 | +------------------------- |
| 121 | + |
| 122 | + |
| 123 | +## Setup inside existing project |
| 124 | + |
| 125 | +This is the most complicated use-case .. but it's the coolest. |
| 126 | +Say you've got your kickass project `github.com/t413/kicker` and want to have |
| 127 | +some web presence to post about on [hacker news](http://news.ycombinator.com). |
| 128 | +This will create an orphan branch called `gh-pages` in your repository |
| 129 | +where you can publish changes, posts, images, and such. It won't alter your code at all. |
| 130 | + |
| 131 | +- `cd` into your project on the command line |
| 132 | +- use `git remote add -t publish singlepage [email protected]:t413/SinglePaged.git` to get access to this repository. |
| 133 | +- use `git fetch singlepage publish:gh-pages` to fetch the remote branch |
| 134 | +- use `git branch --set-upstream-to gh-pages singlepage/publish && git checkout gh-pages;` |
| 135 | + This creates and checks out an orphan branch called gh-pages that tracks the original and lets you make changes. |
| 136 | +- When you run `git push origin gh-pages` it'll be live at *yourusername.github.io/repositoryName* |
| 137 | + |
| 138 | +Now hop over to [Usage](#usage) to get it running with your own stuff! |
| 139 | + |
| 140 | +**When you publish changes use `git push -u origin gh-pages`** |
| 141 | + |
| 142 | + |
| 143 | + |
| 144 | +## Usage |
| 145 | + |
| 146 | +Alright, you've got a clean copy and are ready to push some schmancy pages for the world to ogle at. |
| 147 | + |
| 148 | +- Edit `_config.yml` to change your title, keywords, and description. |
| 149 | +- Create a new file in `_posts/` called `2014-01-01-intro.md` |
| 150 | + Edit it, and add: |
| 151 | + |
| 152 | +~~~ |
| 153 | + --- |
| 154 | + title: "home" |
| 155 | + bg: white #defined in _config.yml, can use html color like '#010101' |
| 156 | + color: black #text color |
| 157 | + style: center |
| 158 | + --- |
| 159 | +
|
| 160 | + # Example headline! |
| 161 | + and so on.. |
| 162 | +~~~ |
| 163 | + |
| 164 | +- Create a second post called `2014-01-02-art.md` with an divider image this time: |
| 165 | + |
| 166 | +~~~ |
| 167 | + --- |
| 168 | + title: "Art" |
| 169 | + bg: turquoise #defined in _config.yml, can use html color like '#0fbfcf' |
| 170 | + color: white #text color |
| 171 | + fa-icon: paint-brush |
| 172 | + --- |
| 173 | +
|
| 174 | + #### A new section- oh the humanity! |
| 175 | +~~~ |
| 176 | + |
| 177 | +**Note:** That part `fa-icon: paint-brush` will use a font-awesome icon of [paint-brush](http://fortawesome.github.io/Font-Awesome/icon/paint-brush/). You can use any icon from this [font-awesome icon directory](http://fortawesome.github.io/Font-Awesome/icons/). |
| 178 | + |
| 179 | +- install Jekyll with `sudo gem install github-pages` |
| 180 | +- run `jekyll serve -w` |
| 181 | + - visit [localhost:4000](http://localhost:4000) to see a live locally served preview. |
| 182 | +- Push changes and see them live! |
| 183 | + |
| 184 | + |
| 185 | + |
| 186 | + |
| 187 | +## Changing your colors |
| 188 | + |
| 189 | +- In each post file you can define `bg: mycolor` and `color: myothercolor` to change the background and text colors for that section. |
| 190 | +- **mycolor** can be a quoted html color like `'#0fbfcf'` or a key to a special color defined in **_config.yml** under 'colors'. |
| 191 | + - **Note:** Changes to _config.yml require a manual restart to your local server with `^C` and `jekyll serve -w`. |
| 192 | + |
| 193 | +Nifty, right! |
| 194 | + |
| 195 | + |
| 196 | + |
| 197 | +## Updating |
| 198 | + |
| 199 | +So you've got a copy running and there's some new update? Let's update! |
| 200 | + |
| 201 | +1. Checkout your github-pages branch |
| 202 | + - `git checkout gh-pages` for a standalone or existing page |
| 203 | + - `git checkout master` for a *username.github.io* page |
| 204 | +2. run `git remote | grep -q "singlepage" || git remote add -t publish singlepage https://github.com/t413/SinglePaged.git` to be sure you have access to this repository (you can run this command at any time). |
| 205 | +2. `git fetch singlepage` to fetch-in-place new changes. |
| 206 | +3. Update to the new base (using merge) |
| 207 | + 1. `git merge singlepage/publish` |
| 208 | +4. You can alternatively update using rebase. This *rewrites history* (**bad**), but it is cleaner. |
| 209 | + 1. `git rebase singlepage/publish` |
0 commit comments