# amp-by-example
**Repository Path**: mirrors_cloudflare/amp-by-example
## Basic Information
- **Project Name**: amp-by-example
- **Description**: A hands-on introduction to Accelerated Mobile Pages (AMP) focusing on code and live samples.
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-08-08
- **Last Updated**: 2026-02-28
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
[](https://travis-ci.org/ampproject/amp-by-example)
#AMP by Example
[ampbyexample.com](http://ampbyexample.com/) gives you a hands-on introduction to Accelerated Mobile Pages based on code and live samples. Learn how to create websites with AMP and how to effectively make use of the different AMP components.
In case we are missing any examples, feel free to [let us know](https://github.com/ampproject/amp-by-example/issues/new). Have you got any good examples you would like to contribute? Read on, it’s very easy to add new examples.
## Installation
1. Fork the repository.
2. Install [NodeJS](https://nodejs.org). You will need version 4.0.0 or above.
3. Install [Gulp](http://gulpjs.com/) via `npm`. You may need to use `sudo` depending on your Node installation.
```none
$ npm install -g gulp
```
4. Set up the repository:
```none
$ git clone https://github.com/YOUR_GITHUB_NAME/amp-by-example.git
$ cd amp-by-example
$ npm install
```
5. Build and run the site:
```none
$ gulp
```
6. If everything went well, `gulp` should now be running the site on
## Creating a new sample
Create a new example with `gulp create`. Set the title via `--name` or `-n` and add it to an existing section using `--dest` or `-d`:
```none
$ gulp create --name amp-img --dest src/20_Components
$ vim src/20_Components/amp-img.html
```
For more descriptive example names including whitespaces use quotes:
```none
$ gulp create --name 'Hello World' --dest src/10_Introduction
$ vim src/10_Introduction/Hello_World.html
```
If you want to create a new sample category, use `--category` or `-c`. Prefix the name with two digits followed by a space to define the sort order:
```none
$ gulp create --name amp-awesome --category "50 More Awesomeness"
$ vim src/50_More_Awesomeness/amp-awesome.html
```
Run validate to validate all examples against AMP spec:
```none
$ gulp validate
```
Run build to generate all examples:
```none
$ gulp build
```
While working on an example you can start a local webserver with auto-reload on by running `gulp`:
```none
$ gulp
```
Some components, like [this one](src/30_Advanced/amp-user-notification_with_server_endpoint.html) require an additional server endpoint.
## Writing the sample
Use HTML comments (``) to document your sample code:
```html
```
This works for elements in the header as well:
```html
...
```
Every HTML comment creates a separate example section spanning the following HTML element.
```html
```
Nested comments are not supported:
```html
```
#### Formatting
You can use [markdown](https://help.github.com/articles/github-flavored-markdown/) to format your documentation:
```html
```
#### Drafts
You can mark samples as drafts if they are still work-in-progress. This means the samples won't show up in the start page.
```json
```
#### Experimental Features
If your sample is using one or more experimental features, you can add a metadata section (``) with the JSON variable `experiments` to specify which experiments to enable. This will skip its validation and add an experimental note with instructions to your sample:
```json
```
#### Preview Mode
Visually rich examples can provide a preview mode like [this](https://ampbyexample.com/samples_templates/news_article/preview/). Enable via metadata in the sample:
```json
```
It is possible to make the preview mode the default version via:
```json
```
There is a special preview mode for AMP Ad samples:
```json
```
#### Single Column Layout
If your sample looks better with a single column layout, you can disable the code and preview columns adding the following flags to your sample file:
```json
```
## Running the backend server
If you need to run or write a sample that depends on the backend server, you can run a local version.
1. Install the [Google App Engine SDK](https://cloud.google.com/appengine/downloads) for Go and follow the instructions for adding `goapp` to your `PATH`.
2. Run the backend server in watch mode so it will recompile on change.
```none
$ gulp backend:watch
```
If you get an error message `can't find import: "golang.org/x/net/context"`, you have to manually install and configure the GO appengine environment:
```none
# install the google.goland.org/appengine package
$ go get google.golang.org/appengine
# explicitly set the GOROOT and APPENGINE_DEV_APPSERVER env vars
$ export GOROOT=$HOME/local/google-cloud-sdk/platform/google_appengine/goroot
$ export APPENGINE_DEV_APPSERVER=$(which dev_appserver.py)
```
3. If everything went well, the full site should now be running on
### Adding backend functionality
Sample specific backend endpoints should be defined in their own file, e.g. for a sample `amp-my-component.html` the backend should be `backends/amp-my-component.go`.
#### How to style examples
You can’t reference external stylesheets when creating samples. AMP by Example provides a [default styling](https://github.com/ampproject/amp-by-example/blob/master/templates/css/styles.css) for common elements (p, h1, h2, h3, a, ...) which you should use. Sample specific styles must live in the head of the document using the tag `