-
Notifications
You must be signed in to change notification settings - Fork 43
/
index.html
194 lines (149 loc) · 14 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
<!DOCTYPE html>
<html lang="en">
<!-- The language defaults to English - update accordingly if necessary -->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="fork-n-go, github pages forkable by design, sheetsee.js">
<meta name="author" content="jlord">
<title>Fork-n-Go</title>
<link rel="icon" type="image/png" href="img/favicon.png">
<link rel="stylesheet" href="css/style.css">
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,900|Lato:900' rel='stylesheet' type='text/css'>
</head>
<body>
<img class="banner" src="img/badge3.png" width="200">
<header>
<h1>Fork-n-Go!</h1>
<p class="dictionary">
<span class="ss"><em>| fôrk en gō |</em> adjective</span>
Forking a website repository on GitHub designed to be easily used by others.
</p>
</header>
<div id="how" class="parts">
<div class="how-to-create thirds">
<h2>Part I: GitHub Pages</h2>
<p><strong>GitHub Pages</strong> is free web hosting for files on a branch named <code>gh-pages</code> in a repository. They can be found served up (like this site) at: <code>username.github.io/repository</code>.</p>
</div>
<div class="how-to-use thirds">
<h2>Part II: Fork</h2>
<p>Open source GitHub repositories can be <strong>forked</strong> by anyone else on GitHub. This creates a copy of that repository on your account. When you fork a website, you get a website.</p>
</div>
<div class="how-to-use thirds">
<h2>Part III: Commit</h2>
<p>Edit the <code>index.html</code> to make the changes you need to make it your own. Then <strong>commit</strong> (like saving) and your website will be live. You can do all this through <a href="https://www.github.com">github.com</a>!</p>
</div>
<div class="thirds tac"><small><a href="#examples">Examples</a> ・ <a href="#moreinfo">About</a> ・ <a href="#contribute">Contribute</a></small></div>
</div>
<div id="examples">
<h1>Examples</h1>
<p>Click on the GitHub repository links for the full <code>README.md</code>.</p>
<div id="Type-on-Strap" class="examples thirds">
<h2><br>Type on Strap</h2>
<a href="https://sylhare.github.io/Type-on-Strap/" target="_blank"><img src="img/type-on-strap.jpg"></a>
<p>A free open source jekyll theme. Easily customisable, with a lot of features — By <a href="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/Sylhare" target="_blank">Sylhare</a>.</p><a class="button" href="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/Sylhare/Type-on-Strap" target="_blank">GitHub Repository</a><a class="button-nested" href="https://sylhare.github.io/Type-on-Strap/" target="_blank">Demo</a>
</div>
<div id="personal-page" class="examples thirds">
<h2><br>Simple Personal Page</h2>
<a href="https://jlord.github.io/hello" target="_blank"><img src="img/hellopage.png"></a>
<p>A simple personal page with a bio, two theme options or customize the HTML/CSS to your hearts content. — By <a href="https://twitter.com/jllord" target="_blank">@jllord</a>.</p><a class="button" href="https://www.github.com/jlord/hello" target="_blank">GitHub Repository</a><a class="button-nested" href="https://jlord.github.io/hello" target="_blank">Demo</a>
</div>
<div id="jekyll-now" class="examples thirds">
<h2><br>Jekyll Now</h2>
<a href="https://www.jekyllnow.com" target="_blank"><img src="img/jekyll-now.jpg"></a>
<p>Jekyll Now makes it easier to create a Jekyll blog, by eliminating a lot of the up front setup. — By <a href="https://www.barryclark.co" target="_blank">Barry Clark</a>.</p><a class="button" href="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/barryclark/jekyll-now" target="_blank">GitHub Repository</a><a class="button-nested" href="https://www.jekyllnow.com" target="_blank">Demo</a>
</div>
<div id="poole" class="examples thirds">
<h2><br>Poole, the Jekyll Butler</h2>
<a href="https://getpoole.com" target="_blank"><img src="img/poole.png"></a>
<p>Makes getting going with Jekyll easy peasy with example templates, pages, posts, and styles. <a href="https://hyde.getpoole.com/" target="_blank">Hyde</a> and <a href="https://lanyon.getpoole.com/" target="_blank">Lanyon</a> themes. — By <a href="https://twitter.com/mdo" target="_blank">@mdo</a>.</p><a class="button" href="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/poole/poole" target="_blank">GitHub Repository</a><a class="button-nested" href="https://getpoole.com" target="_blank">Demo</a>
</div>
<div id="lending-library" class="examples thirds">
<h2>Tool Lending Library from a Spreadsheet</h2>
<a href="https://jlord.github.io/lending-library" target="_blank"><img src="img/tool-lending.png"></a>
<p>Manage tool (or anything, really) lending with a group using a Google spreadsheet and this site. — By <a href="https://twitter.com/jllord" target="_blank">@jllord</a>.</p><a class="button" href="https://www.github.com/jlord/lending-library" target="_blank">GitHub Repository</a><a class="button-nested" href="https://jlord.github.io/lending-library" target="_blank">Demo</a>
</div>
<div id="map" class="examples thirds">
<h2>Fullscreen Map from Spreadsheet</h2>
<a href="https://jlord.github.io/mappy" target="_blank"><img src="img/fullscreen-map.png"></a>
<p>Takes a link to a Google Spreadsheet with coordinates and maps them fullscreen with <a href="https://jlord.github.io/sheetsee.js" target="_blank">Sheetsee.js</a> and <a href="https://www.mapbox.com/mapbox.js/api/v1.6.4/" target="_blank">Mapbox.js</a>. — By <a href="https://twitter.com/jllord" target="_blank">@jllord</a>.</p><a class="button" href="https://www.github.com/jlord/mappy" >GitHub Repository</a><a class="button-nested" href="https://jlord.github.io/mappy" target="_blank">Demo</a>
</div>
<div id="hack-spots" class="examples thirds">
<h2>Interactive locations from Spreadsheet</h2>
<a href="https://jlord.github.io/hack-spots" target="_blank"><img src="img/hackspots.png"></a>
<p>Connects to a Google Spreadsheet with coffee shop locations and details. An interactive map and table for searching the spots using <a href="https://jlord.github.io/sheetsee.js" target="_blank">Sheetsee.js</a>. — By <a href="https://twitter.com/jllord" target="_blank">@jllord</a>.</p><a class="button" href="https://www.github.com/jlord/hack-spots" target="_blank">GitHub Repository</a><a class="button-nested" href="https://jlord.github.io/hack-spots" target="_blank">Demo</a>
</div>
<div id="kickstarter" class="examples thirds">
<h2>Site for Kickstarter Campaign</h2>
<a href="https://muan.github.io/kickstarter" target="_blank"><img src="img/kickstarter.png"></a>
<p>A simple Jekyll-based site to support a Kickstarter campaign. — By <a href="https://twitter.com/muanchiou" target="_blank">@muanchiou</a>.</p><a class="button" href="https://www.github.com/muan/kickstarter" target="_blank">GitHub Repository</a><a class="button-nested" href="https://muan.github.io/kickstarter" target="_blank">Demo</a>
</div>
<div id="calendar" class="examples thirds">
<h2>Calendar from Spreadsheet</h2>
<a href="https://jlord.github.io/sheetsee-calendar" target="_blank"><img src="img/sheetsee-calendar.png"></a>
<p>Creates a monthly calendar from a spreadsheet with event dates and details. — By <a href="https://twitter.com/jllord" target="_blank">@jllord</a> and <a href="https://twitter.com/muanchiou" target="_blank">@muanchiou</a>.</p><a class="button" href="https://www.github.com/jlord/sheetsee-calendar" target="_blank">GitHub Repository</a><a class="button-nested" href="https://jlord.github.io/sheetsee-calendar" target="_blank">Demo</a>
</div>
<div id="pocket" class="examples thirds">
<h2>Archived Pocket Articles with IFTTT & Sheets</h2>
<a href="https://jlord.github.io/sheetsee-pocket" target="_blank"><img src="img/pocketreader.png"></a>
<p>Searchable and sortable list of your archived Pocket articles. Uses <a href="https://www.ifttt.com/" target="_blank">IFTTT.com</a> to send archive to Google Spreadsheets and <a href="https://jlord.github.com/sheetsee.js" target="_blank">Sheetsee.js</a> to build it on the site. — By <a href="https://twitter.com/jllord" target="_blank">@jllord</a>.</p><a class="button" href="https://www.github.com/jlord/sheetsee-pocket" target="_blank">GitHub Repository</a><a class="button-nested" href="https://jlord.github.io/sheetsee-pocket" target="_blank">Demo</a>
</div>
<div id="iftt-personal-page" class="examples thirds">
<h2>Page Instagram & Tweets from IFTTT & Sheets</h2>
<a href="https://jlord.github.io/person-page" target="_blank"><img src="img/person-page.png"></a>
<p>Use <a href="https://www.ifttt.com/" target="_blank">IFTTT.com</a> to archive Instagram and Twitter on Google Spreadsheets and then send them to a simple personal site. — By <a href="https://twitter.com/jllord" target="_blank">@jllord</a>.</p><a class="button" href="https://www.github.com/jlord/person-page" target="_blank">GitHub Repository</a><a class="button-nested" href="https://jlord.github.io/person-page" target="_blank">Demo</a>
</div>
<div id="noddity" class="examples thirds">
<h2>Noddity: a markdown-based wiki/blog</h2>
<a href="https://tehshrike.github.io/noddity" target="_blank"><img src="img/noddity.png"></a>
<p>It's like a blog backed by markdown files, but with a few features that make it work really well as a wiki. Click around the demo site, see how quickly pages come up! — By <a href="https://twitter.com/TehShrike" target="_blank">@TehShrike</a>.</p><a class="button" href="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/TehShrike/noddity" >GitHub Repository</a><a class="button-nested" href="https://tehshrike.github.io/noddity" target="_blank">Demo</a>
</div>
<div id="map" class="examples thirds">
<h2>DOCter: a template for project documentation</h2>
<a href="https://cfpb.github.io/DOCter" target="_blank"><img src="img/DOCter.png"></a>
<p>Quickly build out project pages and documentation with configurable navigation and styles. — By <a href="https://twitter.com/CFPB" target="_blank">@cfpb</a>.</p><a class="button" href="https://www.github.com/cfpb/DOCter" >GitHub Repository</a><a class="button-nested" href="https://cfpb.github.io/DOCter" target="_blank">Demo</a>
</div>
<p>Have an example? Add it with a <a href="">pull request</a>. Want a badge/ribbon thing? <a href="https://github.com/jlord/forkngo/tree/gh-pages/badges">Here</a> are some spiffy colors.</p>
</div>
<div id="moreinfo">
<div class="thirds">
<h2>What's this all about?</h2>
</div>
<div class="twothirds">
<h3>Free hosting and a live site in a few clicks.</h3>
<p><strong>GitHub's <a href="https://pages.github.com" target="_blank">Pages</a> (free hosting) and <a href="https://help.github.com/articles/fork-a-repo" target="_blank">fork</a> (copying a project to another account) features are awesome tools that can lower the bar to getting started in web development.</strong></p>
<p>Besides being a tool for tinerking-to-learn, it also makes having a live and hosted website more acessisble to those who may think it can't possibly be so easy.</p>
<p>I'd love to see Fork-n-Go pages that can be used for non profits and community groups. Tool lending libraries, directories of services...</p>
<h3>Designer wanting to get involved in open source?</h3>
<p>If you're a designer and know HTML/CSS then you can create a template site that can be used for open source projects or non-profits.</p>
<p>You can even fork this <a href="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/jlord/gh-pages-template">blank GitHub Pages template</a> to get started!</p>
<h3>Sheetsee.js Spreadsheet Fork-n-Gos</h3>
<p>Fork-n-Go sites that use <a href="https://jlord.github.io/sheetsee.js">Sheetsee.js</a> and connect the site to a spreadsheet make it easy to have your own website <strong>connected to your own data source</strong>.</p>
<p>If you create your own spreadsheet and copy the column headers from the original, you can then replace the old spreadsheet URL (or key) in the <code>index.html</code> of your fork and start using your own data.</p>
<h3>Jekyll Fork-n-Gos</h3>
<p><a href="https://jekyllrb.com/" target="_blank">Jekyll</a> is a static site generator (it builds HTML files and has them ready <em>before</em> the browser requests one) that's tuned for making blogs and <strong>Jekyll is supported by <a href="https://pages.github.com/" target="_blank">GitHub Pages</a></strong>. This means you can use Jekyll on a project and it will be supported by GitHub Pages.</p>
<p>This also means that users can fork designed Jekyll template repositories on GitHub and get going with their own blog in just a few clicks. Boom!</p>
</div>
</div>
<div id="contribute">
<div class="thirds">
<h2>Want to Contribute?</h2>
</div>
<div class="twothirds">
<p>Contributing is easy! <strong>Create a Fork-n-Go project</strong> or <strong>add an existing one to this page</strong>. For the latter, there are full <a href="https://github.com/jlord/forkngo/blob/gh-pages/CONTRIBUTING.md" target="_blank">contributing guidelines</a> in the repository.</p>
</div>
</div>
<footer>
<p><a href="https://i.chzbgr.com/maxW500/6375276544/hF28629FD/" target="_blank">Weee</a> | <a href="https://www.twitter.com/jllord" target="_blank">@jllord</a> | <a href="https://www.github.com/jlord" target="_blank">gh/jlord</a> | <a href="https://www.github.com/jlord/forkngo" target="_blank">Site Source</a><p>
</footer>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-53476440-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>