serverless/docs/getting-started.md
Adam Jones cad5a689c8
Update getting started page
Made two changes:

1. Improves link hitboxes by having the `a` tag wrap the whole `docsSection` instead of just the image and title. Currently hovering over the `docsSection` makes it change colour, but not actually become clickable which I thought was weird behavior.
2. Orders `menuItem`s in same order as main page content.
2019-03-03 21:36:21 +00:00

122 lines
4.6 KiB
Markdown

<!--
title: Serverless Getting Started Guide
menuText: Getting Started
layout: Doc
menuOrder: 0
menuItems:
- {menuText: AWS Guide, path: /framework/docs/providers/aws/guide/quick-start}
- {menuText: Azure Functions Guide, path: /framework/docs/providers/azure/guide/quick-start}
- {menuText: Apache OpenWhisk Guide, path: /framework/docs/providers/openwhisk/guide/quick-start}
- {menuText: Google Functions Guide, path: /framework/docs/providers/google/guide/quick-start}
- {menuText: Kubeless Guide, path: /framework/docs/providers/kubeless/guide/quick-start}
- {menuText: Spotinst Guide, path: /framework/docs/providers/spotinst/guide/quick-start}
- {menuText: Fn Guide, path: /framework/docs/providers/fn/guide/quick-start}
- {menuText: Cloudflare Workers Guide, path: /framework/docs/providers/cloudflare/guide/quick-start}
-->
# Getting Started with Serverless
First things first, let's get the Serverless framework installed on your machine.
```bash
# Installing the serverless cli
npm install -g serverless
# Updating serverless from a previous version of serverless
npm install -g serverless
```
Next up, it's time to choose where you'd like your serverless service to run.
## Choose your compute provider
<div class="docsSections">
<a href="/framework/docs/providers/aws/guide/quick-start">
<div class="docsSection">
<div class="docsSectionHeader">
<img src="https://s3-us-west-2.amazonaws.com/assets.site.serverless.com/images/aws-black.png" width="250"
draggable="false" />
</div>
<div style="text-align:center;">
<span>Amazon Web Services<br />Quick Start Guide</span>
</div>
</div>
</a>
<a href="/framework/docs/providers/azure/guide/quick-start">
<div class="docsSection">
<div class="docsSectionHeader">
<img src="https://s3-us-west-2.amazonaws.com/assets.site.serverless.com/images/azure-black.png" width="250"
draggable="false" />
</div>
<div style="text-align:center;">
<span>Azure Functions<br />Quick Start Guide</span>
</div>
</div>
</a>
<a href="/framework/docs/providers/openwhisk/guide/quick-start">
<div class="docsSection">
<div class="docsSectionHeader">
<img src="https://s3-us-west-2.amazonaws.com/assets.site.serverless.com/images/openwhisk-black.png" width="250"
draggable="false" />
</div>
<div style="text-align:center;">
<span>Apache OpenWhisk<br />Quick Start Guide</span>
</div>
</div>
</a>
<a href="/framework/docs/providers/google/guide/quick-start">
<div class="docsSection">
<div class="docsSectionHeader">
<img src="https://s3-us-west-2.amazonaws.com/assets.site.serverless.com/images/gcf-black.png" width="250"
draggable="false" />
</div>
<div style="text-align:center;">
<span>Google Cloud Functions<br />Quick Start Guide</span>
</div>
</div>
</a>
<a href="/framework/docs/providers/kubeless/guide/quick-start">
<div class="docsSection">
<div class="docsSectionHeader">
<img src="https://s3-us-west-2.amazonaws.com/assets.site.serverless.com/docs/kubeless-logos-black.png"
width="250" draggable="false" />
</div>
<div style="text-align:center;">
<span>Kubeless<br />Quick Start Guide</span>
</div>
</div>
</a>
<a href="/framework/docs/providers/spotinst/guide/quick-start">
<div class="docsSection">
<div class="docsSectionHeader">
<img src="https://s3-us-west-2.amazonaws.com/assets.site.serverless.com/docs/spotinst-logos-black-small.png"
width="250" draggable="false" />
</div>
<div style="text-align:center;">
<span>Spotinst<br />Quick Start Guide</span>
</div>
</div>
</a>
<a href="/framework/docs/providers/fn/guide/quick-start">
<div class="docsSection">
<div class="docsSectionHeader">
<img src="https://s3-us-west-2.amazonaws.com/assets.site.serverless.com/docs/fn-logo-black.png" width="250"
draggable="false" />
</div>
<div style="text-align:center;">
<span>Fn<br />Quick Start Guide</span>
</div>
</div>
</a>
<a href="/framework/docs/providers/cloudflare/guide/quick-start">
<div class="docsSection">
<div class="docsSectionHeader">
<img src="https://s3-us-west-2.amazonaws.com/assets.site.serverless.com/docs/cloudflare/cf-logo-v-dark-gray.png"
width="250" draggable="false" />
</div>
<div style="text-align:center;">
<span>Cloudflare Workers<br />Quick Start Guide</span>
</div>
</div>
</a>
</div>