Integrations

Google Cloud Storage

Using GCS as your origin

Follow to steps below to configure Google Cloud Storage (GCS) as your origin with Warpache.

If you need help setting up your GCS bucket, click here for Google’s guides and here are some tips about naming your bucket.

Step 1: Configure your GCS account

  1. Sign up for a GCS account and follow the basic setup.
  2. Create a bucket to hold the data.
  3. Add the files to your bucket and make them public.

    Tip

    Click the dots top right and select Edit object default permissions. Then, set user to allUsers and reader. This will make the whole bucket publicly readable.

Google Bucket Permissions

Create a Vhost in the Warpcache control panel

  1. Log into the Warpcache control panel on my.warpcache.com
  2. In the menu on the left click Vhosts.
  3. In the Vhost screen, press the blue Add new vhost button.
  4. Fill in:
    • A label for your Vhost (e.g. <bucket name>)
    • The location of your content in the Origin URL field (e.g. https://storage.googleapis.com//)
    • Add a path to a small property in your bucket (e.g. /image.png)
    • Your alias (e.g. cdn.example.com)
  5. Click the Create vhost button to finish.

Amazon S3

Using Amazon S3 as your origin

To use your Amazon S3 bucket(s) as your origin, follow the steps below.

If you need help creating an S3 bucket, click here for Amazon’s guides.

Create a Vhost in the Warpcache control panel

  1. Log into the Warpcache control panel on [my.warpcache.com(https://my.warpcache.com)
  2. In the menu on the left click Vhosts.
  3. In the Vhost screen, press the blue Add new vhost button
  4. Fill in:
    • A label for your Vhost (e.g. <bucket name>)
    • The location of your content in the **Origin (e.g. e.g. https://.s3.amazonaws.com, or e.g. https://..amazonaws.com)
    • Add a path to a small property in your bucke (e.g. /image.png)
    • Your alias (e.g. cdn.example.com)
  5. Click the Create vhost button to finish.

Wordpress

Before integrating with Wordpress, you’ll need an alias - either use the one we provided you with in the control panel (<label>.cdn.warpcache.net), or the one you setup via your DNS provider (e.g. cdn.example.com).

Step 1: Installing the W3 Total Cache plugin

We’ll need to download and install the W3 Total Cache plugin.

  1. Sign in to your Wordpress administration panel.
  2. In the menu on the left, select Plugins and click Add New.
  3. Top right, search for W3 Total Cache.
  4. Click the Install Now button.
  5. Once the installation is complete, press Activate.

The plugin can be used for free.

Step 2: Activate the plugin and set up CDNs

After activation, a new menu item will have been added on the left called Performance.

  1. Hit Performance and navigate to General Settings.
  2. Scroll down to the bottom of the page, to the CDN settings.
  3. Check the Enable CDN checkbox.
  4. Select Generic Mirror in the CDN Type drop-down menu.
  5. You should now see a red error box on the top of the page saying: ‘A configuration issue prevents CDN from working. The “Replace default hostname with” field cannot be empty. Specify it here’
  6. Click on Specify it here to configure host name. You will be directed to the CDN menu item under Performance.

W3 Total Cache error

Step 3: Configuration

If you completed the quick-start guide, we have provided you with an alias (e.g. <label>.cdn.warpcache.net). Alternatively, you can use your own alias (e.g. cdn.example.net), retrieved via your hosting provider. To set up your own alias, follow this guide on setting up your DNS.

In this example we’ll use example.cdn.warpcache.com. The alias can be found by clicking on your Vhost in the Warpcache control panel, in the Vhost section.

  1. Copy your CNAME from the Warpcache control panel, or use the custom alias you set up. Vhost overview
  2. Switch back to Wordpress and click the Performance tab, and then CDN.
  3. Scroll down to Configuration and paste your CNAME or alias in the field next to “Replace site’s hostname with:“.
  4. Click the Test Mirror button. If all went well you should get a green message saying that the test passed. Test mirror
  5. Hit Save all settings.

In case the test does not pass, try waiting a few minutes before testing again. If you just created your own alias it might take some time before the DNS has propagated. View our tips on testing your Vhost here.

From now on, Wordpress will use Warpcache to serve out all static content on your website.

Magento

Before integrating with Magento, you must have completed our quick-start guide.

Step 1: Configuration

  1. Log into your Magento control panel
  2. Go to Configuration, under the System tab
  3. Click General in the menu on the left, then Web Magento configuration

If you intend to use HTTP proceed to Step 2, otherwise Step 3 for HTTPS.

Step 2: Setting up HTTP

  1. Click the Unsecure section in Web
  2. Enter the following information:
    • Base URL: your site URL e.g. http://www.example.com
    • Base Link URL: this field should be pre-populated with your Base URL
    • Base Skin URL: your CNAME or alias, followed by the skin folder e.g. http://<label>.cdn.warpcache.net/skin/ or http://cdn.example.com/skin/
    • Base Media URL: your CNAME or alias, followed by the media folder e.g. http://<label>.cdn.warpcache.net/media/ or http://cdn.example.com/media/
    • Base JavaScript URL: your CNAME or alias, followed by the JavaScript folder e.g. http://<label>.cdn.warpcache.net/js/ or http://cdn.example.com/js/ unsecure config
  3. Click the orange Save Config button

    Note

    In some cases JavaScript might not run if the CDN domain is not a subdomain of the your site. Should this issue occur, it’s likely you haven’t configured CORS headers. Find our more here

Step 3: Setting up HTTPS

In order to use HTTPS, you can either enable the feature in our control panel which sets up https for <label>.cdn.warpcache.net, or you can upload your own certificate via https://my.warpcache.com/ssl/.

  1. Click the Secure section in Web
  2. Enter the following information:
    • Base URL: your site URL e.g. https://www.example.com
    • Base Link URL: this field should be pre-populated with your Base URL
    • Base Skin URL: your CNAME or alias, followed by the skin folder e.g. https://<label>.cdn.warpcache.net/skin/ or https://cdn.example.com/skin/
    • Base Media URL: your CNAME or alias, followed by the media folder e.g. https://<label>.cdn.warpcache.net/media/ or https://cdn.example.com/media/
    • Base JavaScript URL: your CNAME or alias, followed by the JavaScript folder e.g. https://<label>.cdn.warpcache.net/js/ or https://cdn.example.com/js/
  3. Set Use Secure URL in Frontend to Yes
  4. Set Use Secure URL in Admin to Yes
  5. Don’t change Offloader header secure config
  6. Click the orange Save Config button

    Note

    In some cases JavaScript might not run if the CDN domain is not a subdomain of the your site. Should this issue occur, it’s likely you haven’t configured CORS headers. Find our more here

Step 4: Testing

Verify whether the URL rewrite was successful by checking the HTML code of your site:

  1. Search for favicon.ico
  2. If the rewrite was successful, you will find <label>.cdn.warpcache.net/favicon.ico or cdn.example.com/favicon.ico in your HTML code