This site is 100% serverless! 🎉
Built using react and gatsby this site is statically built and hosted on the netlify CDN for 🔥blazingly fast performance and scale.
The docs, and blog are hosted on github, so if you see a typo or error feel free to contribute back!
API calls are made with the serverless framework pinging AWS lambda functions. User Authentication is handled via Auth0. Site search handled by Algolia.
- See the site 👉 View the SRC Luke
- Check out the blog 👉 Contribute to the blog
- Read the docs 👉 Contribute to the docs
1. Make sure that you have the Gatsby CLI program installed:
npm install --global gatsby-cli@1.1.582. Clone down the site
git clone git@github.com:serverless/site.git3. Install site dependencies
npm install3. Run site on your local computer
npm run devOpen your browser to http://localhost:8000
Run npm run syncProd or npm run syncLocal to pull in the blog and docs repos (if the postinstall command doesn't run for you). These 2 commands pull in the external content sources the site uses.
Refer directory structure doc
Fork the site and submit a pull request!
When you start the site with npm run dev it will start watching for file changes and they will be automatically refreshed in the site on http://localhost:8000
To make edits to blog posts, edit the files in ./serverless-blog/posts (this directory is added on npm i)
To make edits to framework docs, edit the files in ./serverless/docs (this directory is added on npm i)
To make edits to other pages, browse through the ./pages directory, find the file with the name as the url of the page you want to edit. Then, open the file and edit the content.
For example, if you want to edit the contents of /framework, then look at framework.js inside ./pages directory and edit.
Write react components with the components from serverless-design-system. Do not use basic html tags like div, span, h1 and etc. Use serverless-design-system components instead. To know more about the design-system components, refer the docs at design-system-serverless.netlify.com.
If you dont see a component in design-system to acheive the design needed, then you can write a new component with styled-components. For example: If you want to set a CSS property user-select to none for a Box component from design-system, then you can write a new component like this.
import styled from 'styled-components'
export default styled(Box)`
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
`
1. Test the build command locally
npm run build2. If build command succeeds, push up your changes to a new branch
We are using netlify to distribute the site.
When pushing up to a new branch, netlify will automatically publish that change to a unique subdomain, like: https://[lowercase-branch-name]--serverless.netlify.com
For example the branch updateDocsSetup published to https://updatedocssetup--serverless.netlify.com
Successful deploys are published to the notifications slack channel
Note: The master branch is the live site. Never push directly to the master branch!
3. Review your live site changes
If everything looks good on your unique netlify subdomain, you can go ahead and merge your branch to master on github.
Merging branches into master will trigger a site rebuild and serverless.com will be updated.