forked from neoascetic/rawgithack
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
195 lines (177 loc) · 11.8 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
195
<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>raw.githack.com</title>
<meta name="viewport" content="width=device-width">
<meta name="description" content="raw.githack.com serves raw files directly from GitHub, Bitbucket or GitLab with proper Content-Type headers.">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:400,700|Source+Code+Pro:400,700">
<link rel="stylesheet" href="//rawcdn.githack.com/neoascetic/rawgithack/3391fe1/rawgithack.css">
<link rel="search" type="application/opensearchdescription+xml" href="//rawcdn.githack.com/neoascetic/rawgithack/4558441/opensearch.xml" title="raw.githack.com">
<link rel="icon" href="//rawcdn.githack.com/neoascetic/rawgithack/4558441/sushi.png">
<header class="hd">
<h1 class="title">
<img class="logo" src="//rawcdn.githack.com/neoascetic/rawgithack/4558441/sushi.png">
<a href="/">raw.githack.com</a>
</h1>
<nav class="nav">
<ul>
<li><a href="#faq">FAQ</a></li>
<li><a href="https://github.com/neoascetic/rawgithack">Source</a></li>
<li>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top" class="donate">
<input type="hidden" name="cmd" value="_donations" />
<input type="hidden" name="business" value="i@neoascetic.me" />
<input type="hidden" name="currency_code" value="USD" />
<input type="submit" name="submit" title="Thank you!" value="Donate" />
</form>
</li>
</ul>
</nav>
</header>
<div class="bd">
<div class="content">
<p class="hero">
<strong>raw.githack.com</strong> serves raw files directly from GitHub, Bitbucket or GitLab with proper <strong>Content-Type</strong> headers
</p>
<div class="url-helper">
<div class="url-paste">
<p id="url-form">
<label for="url" class="offscreen">GitHub, Bitbucket or GitLab URL:</label>
<input id="url" class="url" type="url" value="<!--# echo var="arg_url" encoding="none" default="" -->" placeholder="Paste a GitHub, Bitbucket or GitLab file or gist URL here." autofocus tabindex="1">
</p>
<p style="text-align: center; font-size: small">Migrating from RawGit? You can convert their URLs here too!</p>
</div>
<div class="column">
<h2>Use this URL in <strong>production</strong></h2>
<p class="url-container">
<input id="url-prod" class="url" placeholder="https://rawcdn.githack.com/user/repo/tag/file" readonly tabindex="2">
<button id="url-prod-copy" class="url-copy-button" data-clipboard-target="#url-prod" title="Copy URL" disabled>
<img src="//rawcdn.githack.com/neoascetic/rawgithack/4558441/clippy.svg" alt="">
</button>
</p>
<ul>
<li><p>No traffic limits or throttling. Files are served via <a href="https://www.cloudflare.com/">CloudFlare</a>'s CDN.
<li><p>Files are automatically optimized.
<li><p>Use a specific tag or commit hash in the URL (not a branch). Files are cached permanently based on the URL. Query strings are ignored.
<li><p>The catch: this is a free service, so there are <a href="#no-uptime-guarantee">no uptime or support guarantees</a>.</p>
</ul>
</div>
<div class="column">
<h2>Use this URL for <strong>development</strong></h2>
<p class="url-container">
<input id="url-dev" class="url" placeholder="https://raw.githack.com/user/repo/branch/file" readonly tabindex="3">
<button id="url-dev-copy" class="url-copy-button" data-clipboard-target="#url-dev" title="Copy URL" disabled>
<img src="//rawcdn.githack.com/neoascetic/rawgithack/4558441/clippy.svg" alt="">
</button>
</p>
<ul>
<li><p>New changes you push to GitHub will be reflected within minutes.</p>
<li><p>Excessive traffic will be throttled.</p>
</ul>
</div>
</div>
<div class="faq" id="faq">
<div id="who" class="question">
<h2><a href="#who">Who runs this thing?</a></h2>
<p>
Hi, I'm <a href="http://neoascetic.me/">Pavel Puchkin</a>.
</p>
</div>
<div id="why" class="question">
<h2><a href="#why">Why is this necessary? Can't I just load files from GitHub, Bitbucket or GitLab directly?</a></h2>
<p>
When you request a file from <code>raw.githubusercontent.com</code>, <code>gist.githubusercontent.com</code>, <code>bitbucket.org</code> or <code>gitlab.com</code>, they are usually served (in the case of JavaScript, HTML, CSS, and some other file types) with a <code>Content-Type</code> of <code>text/plain</code>. As a result, most modern browsers won't actually interpret it as JavaScript, HTML, or CSS.
</p>
<p>
They do this because serving raw files from a git repo is relatively inefficient, so they want to discourage people from using their repos for static file hosting.
</p>
<p>
raw.githack.com acts as a caching proxy, forwarding requests to GitHub, Bitbucket or GitLab, caching the responses either for a short time (in the case of development URLs) or permanently (in the case of CDN URLs), and relaying them to your browser with the correct <code>Content-Type</code> headers.
</p>
<p>
The caching layer ensures that minimal load is placed on GitHub, Bitbucket or GitLab, and you get quick and easy static file hosting right from a repo. Everyone's happy!
</p>
</div>
<div id="associated-with-github" class="question">
<h2><a href="#associated-with-github">Is raw.githack.com associated with GitHub, Bitbucket or GitLab?</a></h2>
<p>
No, raw.githack.com is not associated with GitHub, Bitbucket or GitLab in any way. Please don't contact their support asking for help with raw.githack.com. They'll give you a weird look and back away slowly.
</p>
</div>
<div id="diff-between-rawgithack-and-cdn" class="question">
<h2><a href="#diff-between-rawgithack-and-cdn">What's the difference between development and CDN URLs?</a></h2>
<p>
When you make a request to a development URL, the server loads the requested file from GitHub, serves it to your browser with the correct <code>Content-Type</code> header, and caches it for a short time. If you push new changes to GitHub, you can reload and see them within a few minutes, which makes development URLs useful for low-traffic testing or sharing demos during development.
</p>
<p>
Requests to CDN are routed through <a href="http://cloudflare.com/">CloudFlare</a>'s content delivery network, and are cached <strong>for a year</strong> the first time they're loaded. This results in the best performance and reduces load on raw.githack.com and on underlying service, but it means that reloading won't fetch new changes. Furthermore, JS and CSS files will be minified for the sake of performance.
</p>
<p>
During development, when traffic is low and freshness is more important than performance, use development URLs. For anything you share with the public or push to production, use CDN URLs.
</p>
</div>
<div id="development-in-production" class="question">
<h2><a href="#development-in-production">Can I use a development URL on a production website?</a></h2>
<p>
No. Please use CDN URLs for anything that might result in heavy traffic. Only use development URLs for low-traffic testing and sharing temporary examples or demos during development. When people misuse the service, it costs me money. Please don't be a jerk.
</p>
</div>
<div id="what-happens-to-jerks" class="question">
<h2><a href="#what-happens-to-jerks">What will happen if I send large amounts of traffic to a development URL?</a></h2>
<p>
Bad things gonna happen. You'd better don't do that. Trust me. Remember, only use CDN URLs in production; never development one.
</p>
</div>
<div id="cdn-ttl" class="question">
<h2><a href="#cdn-ttl">How long does the CDN cache files? How can I make it refresh my file?</a></h2>
<p>
The CDN caches files for one year based on their path. It ignores query strings. This is done both to improve performance and to make it possible for the CDN to handle massive amounts of traffic without causing excessive load on raw.githack.com, GitHub's, Bitbucket's or GitLab's servers.
</p>
<p>
To ensure that the CDN always serves the version of the file you want, use a git tag or commit ref in the file's path instead of a branch name, and update the URL if you push a new version of the file.
</p>
<p>
So, instead of a URL like <code>/user/repo/BRANCH/file</code>, use a URL like <code>/user/repo/TAG/file</code> or <code>/user/repo/COMMIT/file</code>.
</p>
</div>
<div id="no-uptime-guarantee" class="question">
<h2><a href="#no-uptime-guarantee">I need guaranteed 100% uptime. Should I use raw.githack.com?</a></h2>
<p>
Probably not.
</p>
<p>
raw.githack.com is a free service and cannot provide any uptime or support guarantees, even for CDN URLs. While I do my best to keep things running, things sometimes go wrong. Sometimes there are network or provider issues outside my control, sometimes abusive traffic temporarily affects response times, and sometimes I break things (although I try really hard not to).
</p>
<p>
Since I run raw.githack.com in my spare time, with my own money and with free CDN hosting by <a href="http://cloudflare.com/">CloudFlare</a>, it has a budget that's probably less than you pay for coffee in a given month. My goal is to help other open source developers get their projects up and running, but if you need to serve files that are crucial to your business, you should probably pay for a host with well-funded infrastructure and uptime guarantees.
</p>
</div>
<div id="feedback" class="question">
<h2><a href="#feedback">I have feedback or want to report a bug! Who can I contact?</a></h2>
<p>
To report a critical issue like raw.githack.com being broken or to share general feedback, <a href="mailto:hi@neoascetic.me">send me a letter</a>. I try to respond quickly when I'm awake and near a computer, but sometimes I do have to sleep. To report a non-critical bug, please <a href="https://github.com/neoascetic/rawgithack/issues">file an issue</a>.
</p>
</div>
<div id="diff-between-rawgithack-and-rawgit" class="question">
<h2><a href="#diff-between-rawgithack-and-rawgit">How raw.githack.com differs from RawGit?</a></h2>
<p>
The idea of this service is inspired from <a href="http://rawgit.com">rawgit.com</a> (formerly rawgithub.com). I just realized that using a whole framework (node.js with express.js) for such simple thing as requests proxying is overkilling, and made same stuff using nginx only.
</p>
<p>
RawGit supports only GitHub while raw.githack.com supports Bitbucket and GitLab as well.
</p>
</div>
</div>
<script src="//rawcdn.githack.com/cdnjs/cdnjs/0971b44/ajax/libs/fetch/2.0.1/fetch.min.js"></script>
<script src="//rawcdn.githack.com/zenorocha/document.queryCommandSupported/v1.0.0/dist/queryCommandSupported.min.js"></script>
<script src="//rawcdn.githack.com/zenorocha/clipboard.js/v1.5.10/dist/clipboard.min.js"></script>
<script src="//rawcdn.githack.com/neoascetic/rawgithack/4558441/rawgithack.js"></script>
</div>
</div>
<footer class="ft">
<p>
© 2016 Pavel Puchkin
<br>
<a href="http://thenounproject.com/noun/sushi/#icon-No14497">Sushi icon</a> designed by <a href="http://thenounproject.com/lnakanishi">Linda Yuki Nakanishi</a> from The Noun Project.
</p>
</footer>