forked from VIP000/netlify-home
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathwhy-static.html
104 lines (100 loc) · 6.29 KB
/
why-static.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
---
layout: default
title: Why Static? Netlify's State of Affairs
---
<div class="bg-light-muted-2">
<div class="content content--narrow">
<section class="bb">
<header class="text-center">
<h1 class="mega mt-110 mb-0">Why Static?</h1>
<p class="highlight mb-40">Netlify’s State of Affairs March. 11, 2015</p>
<h2 class="bold highlight mb-60">Ladies and Gentlemen</h2>
</header>
<div class="l-2-col-auto mb-40 muted">
<p>
The current web is a mess. Seriously though. Every week we go to Hackernews and follow a broken link. Not long ago 12 million Drupal sites were infected with malware. 79% of all Wordpress sites are vulnerable to known exploits.
</p>
<p>
The emergence of mobile means a lot of slow loading sites with towering bounce rates and loss of business to follow.
</p>
<p>
We should do better. We must actually. Because we can.
</p>
<p>
Static websites have always been faster, safer, simpler and cheaper.
</p>
<p>It’s just that browsers and hosting services weren’t good enough, so there were too many compromises. Making the slow, vulnerable and expensive traditional “dynamic” sites the best alternative.
</p>
<p>
But no more. The browser is all grown-up, and CDNs have really seen the light of day.
</p>
<p>
Though not all static glimmers in gold. There is still no CMS, so updating is developer-only. And though static sites are faster in theory, it’s still been a complex process to set it up just right. Which is the whole motivation behind Netlify. We want static sites to be as easy to make as possible, while still gaining all the speed, etc., that static sites promise to deliver.
</p>
</div>
</section>
<section class="bb">
<header class="text-center">
<h2 class="bold highlight mb-60 mt-60">What is a static site?</h2>
</header>
<div class="l-2-col-auto mb-40 muted editorial-text">
<p>
Static websites are faster, safer, simpler and cheaper. Here we explain how. Static sites are simple, but today they can do almost anything a traditional (dynamic) site can.
Basically it’s CSS, HTML, Javascript, and likewise.
</p>
<p>
What it isn’t is: PHP, Mysql, .net, Ruby, etc. You can use in all of those in creating the site with for example a static site generator. But you can’t actually use them in your hosting environment.
</p>
<p>
A traditional (dynamic) site needs to be hosted on a server, and it needs to render every single time a user visits.
The difference with a “static” site is that you build it BEFORE you deploy it. So what’s live are only already rendered files. So there are no so-called movable parts live and you get to host the site on a CDN. (Content Delivery Network). Anything that still needs rendering will be done so by the browser. Pretty cool if you think about it.
</p>
<p>
This all means a number of things. All of them good if you are going static.
</p>
<p>
<strong>1. Speed & Performance.</strong> That your site will be served from a CDN instead of a single server means much lower latency and much higher uptime (if one CDN server goes down, traffic just goes somewhere else, but when your Godaddy or One.com server goes down, your site goes offline).
</p>
<p>
<strong>2. Security.</strong> As there is no movable parts, no php or scripts being exectuted, there is no way to inject malware. Malware and the inherent structure of traditional web tech is becoming a major issue (we wrote an article about it)
</p>
<p>
<strong>3. Simplicity.</strong> Again there are no moving parts. You don’t need to optimize your how fast your code will be rendered, as it’s already rendered when you deploy it. So no need to worry about server updates breaking your site, etc. When it’s live it’s live, and you can go on to doing other things. Like ponder what’s up with cheese, or if you should sign that petition against the use of daylight savings. (You should. Only God gets to mess with time).
</p>
<p>
<strong>4. Cost.</strong> It’s way way way cheaper to scale. And it all happens automatically. So no having to cover yourself by buying into a larger hosting service than you need, or having your servers cave to traffic spikes. As a developer or agency producing just a small amount of sites per year, this alone could be saving you thousands of dollars.
</p>
</div>
</section>
<section class="bb mb-80">
<header class="text-center">
<h2 class="bold highlight mb-60 mt-60">What sites should / could be static?</h2>
</header>
<div class="l-2-col-auto mb-40 muted">
<p>
Most sites would benefit from being “static”. Right now there are two exceptions:
</p>
<p>
Those that need a CMS (major exception we know, but check in with us regularly - we are working on something huge), and those that need constant updating.
</p>
<p>
Building a static site takes a while - typically perhaps 20 seconds - and that’s too long a wait if you are updating lets say every minute.<br/>
So if you are making a new stack overflow where the site is updated constantly you are fresh out of luck. If not, keep reading!
</p>
</div>
</section>
</div>
</div>
<section class="bg-dark-cover inverse text-center">
<div class="content content--narrow">
<!-- Newsletter -->
<section class="mt-90 mt-120 mb-120">
<header>
<h1 class="alpha mb-30 muted">Sign up for our newsletter and stay tuned on all that’s static</h1>
<p class="zeta p--wide muted">Sign up for our awesome newsletter, if you want to hear about exciting things happening in the world of static websites, and of new Netlify features that are around the corner.</p>
</header>
{% include newsletter-form.html %}
<p class="x-small mt-30 mb-30 p--full-w muted">We send out aprox. twice a month. Go ahead, we won’t give away your address or anything, and each email is handwritten (on a keyboard).</p>
</section>
</div>
</section>