|
1 | | -Fancy jekyll powered single page site |
| 1 | +The squirrelnode.com Web site |
2 | 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 git@github.com: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