1. Home
2. Solutions
3. Tutorials

Delivering your website through a CDN gives your users a faster and more reliable experience. The server hosting your content (your origin) may be far away from your users, causing latency when they visit your site. Fastly caches your content closer to users and delivers it to them directly instead having to fetch it from the origin every time you have a visitor. By reducing data transfer from cloud storage services, caching also makes your site more efficient and scalable!

This tutorial will help you deliver your website through Fastly in just a few short steps. Here's what you'll need:

• Your origin hostname - this is the address where your content is hosted.
• A domain - If you're using your own domain, you'll need access to your DNS records.

If you don't have an existing site you want to use Fastly CDN with, you can remix our Glitch project made specifically for this tutorial. You'll be able to use the Glitch project as your origin. Plus, all of the instructions are in the project README, so you can follow the steps in Glitch or here in the tutorial.

Create a CDN service

Sign up for a free Fastly account if you haven't already. Then, create a CDN service:

1. Click Create service and select CDN.
2. Give your service any name you like.
3. Add the domain you plan to route through the CDN, for example www.your-domain.com. Users visiting your domain won't be sent through Fastly until you update your DNS records. If you don't have a domain you're ready to use with Fastly, you can use a Fastly test domain(your-test-site.global.ssl.fastly.net).

   HINT: If you're using Glitch, you can set the name of your Glitch project as the first section of the Fastly test domain. For example, learn-website-delivery.global.ssl.fastly.net.

4. Enter your origin host.

• If you’re using a developer platform like Glitch or Amazon S3, the origin hostname will be a subdomain assigned to your project or bucket. For example:
  • your-new-website.glitch.me
  • your-bucket.s3.us-east-2.amazonaws.com
• If you bought a hosting package from a provider who perhaps also sold you your domain, your origin host will be either at the apex domain or at a subdomain you created, for example:
  • your-domain.com (without the www)
  • origin.your-domain.com

    HINT: Using Glitch? Grab the .glitch.me address from your Glitch editor preview using the three dots at the top right, removing https:// from the start and the trailing slash (/) from the end when you paste it into Fastly.

1. Leave the default settings in place and click Activate!

Fastly will open your service config. Click the Test domain link to open your deployed site. The service might not be available immediately, so if you see an error, wait a minute and try again.

(Optional) Test your site performance

Try out a performance benchmark on your origin website and compare it to your Fastly deployed version. You can use your web browser to carry out performance tests - the available tools will depend on your browser.

In Chrome, with your origin site open (it'll end .glitch.me if you're using the Glitch project), navigate to your developer tools using View > Developer > Developer Tools. Open the Network tab and reload the page. Select the site homepage address at the top of the Name list, then open Timing.

With your Fastly domain open (the address will end .global.ssl.fastly.net), carry out the same performance test and compare the time to your origin test. Note that the first time you load your Fastly domain, the site may take longer because the content has not yet been stored in the Fastly cache. Once it's in cache it will hopefully be faster!

Sending domain traffic to Fastly

Ready to send visitors to your domain through Fastly? Great, you can do that with free TLS and a couple of updates to your DNS records.

Add your domain to a service

If you haven't added a domain to the service yet, do so now by editing the service configuration. Go to Domains > Create domain. Enter the www version of your domain, or a subdomain you want to send through Fastly. Click Add then activate your service.

Set up TLS for your domain

To set up TLS, go to Security > TLS Management > Manage TLS Certificates, then click either Get started or Secure another domain depending on whether it's your first time setting up TLS.

Fill out the fields as follows:

1. Enter your domain name and click Add.
2. Select Certainly.
3. Leave all other fields set to their default values then click Submit.

Now you'll need to verify your domain ownership by copying some info from Fastly into your DNS records. You'll access these wherever you registered the domain. The exact flow will vary a little depending on your provider.

• In your Fastly TLS subscription, click Verification options.
• Copy the ACME DNS challenge CNAME (_acme-challenge followed by your domain name) and value (a string of characters followed by fastly-validations.com).
• In your DNS account, add a new CNAME record with the _acme-challenge value you copied as the as the hostname, and the fastly-validations.com value as the address. Save your new record.
• Back in Fastly, with any luck you'll soon see your domain being validated and your certificate will be issued.

Direct traffic to Fastly

To send your domain traffic through Fastly, you'll need to get the CNAME record from your new certificate – it will be one character followed by .sni.global.fastly.net.

• Back in your DNS settings, add or edit a CNAME record for www (or whichever subdomain you want to use). Enter the value you copied from your certificate and save your record.

For more detail on setting up your certificate, refer to the TLS quick start guide and Routing traffic to Fastly.

What happens when users visit your domain

When someone requests the domain, they'll be sent to Fastly, and Fastly will return a response to the visitor based on the service config that includes the domain.

• If the content is in the cache, Fastly will return it without visiting the origin.
• If the content is not in cache, Fastly will fetch it from the origin and store it in cache (if it's cacheable content).

What to try next

• Discover CDN info in your browser
  • With your Fastly site open, use your browser tools Network tab to find Headers like X-Cache and X-Served-By to find out which Fastly POP is delivering the content.
• Purge the cache
  • When you make a change to your origin and your website has been cached by Fastly, your users may continue to receive the cached version. You can configure caching policies in your site implementation, but you can also purge the cache manually through the Fastly control panel.
• Create a synthetic response
  • Synthetic responses give your users a more reliable experience if something goes wrong on your origin server. You can add a response for specific errors, such as 404s your origin returns if the user requests a page that doesn't exist.