Skip to content

Commit 57fce0c

Browse files
Initial commit
Created from https://vercel.com/new
0 parents  commit 57fce0c

File tree

4 files changed

+130
-0
lines changed

4 files changed

+130
-0
lines changed

README.md

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
name: HTML Starter
3+
slug: html-starter-with-analytics
4+
description: HTML5 template with analytics and advanced routing configuration.
5+
deployUrl: https://vercel.com/new/clone?repository-url=https://github.com/vercel/examples/tree/main/solutions/html&project-name=html
6+
relatedTemplates:
7+
- nextjs-boilerplate
8+
---
9+
10+
# HTML Starter
11+
12+
This is a starter HTML5 templates which is configured with Vercel Analytics (through a `script` tag), advanced routing with [Vercel Edge Middleware](https://vercel.com/docs/concepts/functions/edge-middleware), as well as some basic styles
13+
14+
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/examples/tree/main/solutions/html&project-name=html)

index.html

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<script defer src="/_vercel/insights/script.js"></script>
7+
<link
8+
rel="stylesheet"
9+
href="https://cdn.jsdelivr.net/npm/@exampledev/[email protected]/new.min.css"
10+
/>
11+
<title>Vercel HTML Starter</title>
12+
<meta
13+
name="description"
14+
content="High-performance HTML based website template."
15+
/>
16+
</head>
17+
<body>
18+
<h1>Vercel HTML Starter</h1>
19+
<p>
20+
This template is a simple, but powerful single
21+
<code>index.html</code> file deployed to
22+
<a href="https://vercel.com">Vercel</a>. When your site is deployed, all
23+
static assets (like HTML, JavaScript, CSS, images, and more) are deployed
24+
globally to every
25+
<a href="https://vercel.com/docs/concepts/edge-network/overview"
26+
>Vercel Edge Network</a
27+
>
28+
region.
29+
</p>
30+
<h2>Simple, privacy-friendly analytics</h2>
31+
<p>
32+
Want to understand your visitor traffic? Vercel Analytics gives you
33+
first-party, privacy-friendly traffic analytics for your HTML site. This
34+
template is already configured using the following script:
35+
</p>
36+
<pre><code>&lt;script defer src="/_vercel/insights/script.js"&gt;&lt;/script&gt;</code></pre>
37+
<p>
38+
Learn more about
39+
<a href="https://vercel.com/analytics">Vercel Analytics</a>.
40+
</p>
41+
<h2>Integrated with git</h2>
42+
<p>
43+
Deploying updates to your site is as simple as
44+
<code>git push</code> thanks to Vercel's advanced
45+
<a href="https://vercel.com/docs/concepts/git">Git Integration</a>.
46+
Support for GitHub, GitLab, Bitbucket is zero-configuration, and with the
47+
flexible Vercel CLI and API, you can integrate with any tool possible.
48+
</p>
49+
<p>
50+
Learn more about
51+
<a href="https://vercel.com/docs/concepts/git">Git Integration</a>.
52+
</p>
53+
<h2>Fast <code>gzip</code> compression</h2>
54+
<p>
55+
To help ensure the smallest possible file sizes for your static assets,
56+
the Vercel Edge Network compresses files by default using
57+
<code>gzip</code>. You can also optionally use
58+
<code>brotli</code> compressesion if you prefer.
59+
</p>
60+
<p>
61+
Learn more about
62+
<a href="https://vercel.com/docs/concepts/edge-network/compression"
63+
>compression</a
64+
>.
65+
</p>
66+
<h2>Advanced routing configuration</h2>
67+
<p>
68+
Vercel gives you a variety of ways to configure the routing of your
69+
website. For example, adding redirects, rewrites, or headers to your page.
70+
While you can use <code>vercel.json</code> to define these through JSON,
71+
you can also express your routing configuration as code using
72+
<a href="https://vercel.com/docs/concepts/functions/edge-middleware"
73+
>Vercel Edge Middleware</a
74+
>.
75+
</p>
76+
<p>
77+
Middleware runs before the
78+
<a href="https://vercel.com/docs/concepts/edge-network/caching"
79+
>Vercel Edge Network Cache</a
80+
>, so you can configure routing exactly as your application needs. For
81+
example, this template uses <code>middleware.js</code> defined in the root
82+
of the repository to add additional security headers to the site:
83+
</p>
84+
<pre><code>referrer-policy: origin-when-cross-origin
85+
strict-transport-security: max-age=31536000; includeSubDomains; preload
86+
x-content-type-options: nosniff
87+
x-dns-prefetch-control: on
88+
x-frame-options: DENY</code></pre>
89+
<p>
90+
Learn more about
91+
<a href="https://vercel.com/docs/concepts/functions/edge-middleware"
92+
>Vercel Edge Middleware</a
93+
>.
94+
</p>
95+
</body>
96+
</html>

middleware.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { next } from '@vercel/edge';
2+
3+
export default function middleware(req) {
4+
return next({
5+
headers: {
6+
'Referrer-Policy': 'origin-when-cross-origin',
7+
'X-Frame-Options': 'DENY',
8+
'X-Content-Type-Options': 'nosniff',
9+
'X-DNS-Prefetch-Control': 'on',
10+
'Strict-Transport-Security':
11+
'max-age=31536000; includeSubDomains; preload',
12+
},
13+
});
14+
}

package.json

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"private": true,
3+
"dependencies": {
4+
"@vercel/edge": "^0.1.2"
5+
}
6+
}

0 commit comments

Comments
 (0)