Getting started overview
Statically provides a Content Delivery Network (CDN) service that caches and serves static assets such as images, CSS, and JavaScript files from a global network of edge locations. This process is designed to reduce latency, improve website loading speeds, and decrease the load on origin servers. The primary method of integration involves updating the URLs of your static assets to point to Statically's servers, which then handle the caching and delivery. Statically's service includes real-time image optimization, allowing for adjustments to format, quality, and size via URL parameters without modifying the original file.
The typical workflow for integrating Statically includes creating an account, identifying the URLs of your existing static assets, and then modifying these URLs to utilize Statically's CDN. For example, an image located at https://yourdomain.com/images/photo.jpg would be transformed into a Statically URL like https://cdn.statically.io/img/yourdomain.com/images/photo.jpg to leverage its caching and optimization features. This transformation can often be automated through plugins for platforms like WordPress or manually applied to static HTML assets.
Statically offers a free tier of service that provides up to 10GB of bandwidth per month for basic usage, with paid plans available for higher bandwidth requirements and additional features.
Create an account and get keys
Statically itself does not typically require an API key for its primary CDN functionality, as it operates by transforming existing asset URLs. However, specific premium features or integrations might involve authentication. For the core CDN service, the process primarily involves understanding the URL structure needed to request assets through Statically.
Account Creation Steps
- Visit the Statically Website: Navigate to the Statically homepage.
- Sign Up/Log In: While the basic free CDN functionality does not strictly require an account, signing up for a Statically Pro account provides access to usage analytics, custom domains, and support. The sign-up process typically involves providing an email address and creating a password.
- Familiarize with Documentation: Review the Statically documentation to understand the various URL transformation options and features.
Unlike many API-driven services that issue unique API keys for authentication, Statically's public CDN functionality is largely open, relying on URL-based requests. For example, if your original image is hosted at https://example.com/assets/image.jpg, you would access it via Statically using a URL like https://cdn.statically.io/img/example.com/assets/image.jpg. There is no specific key to generate or manage for this basic setup.
Your first request
Making your first request with Statically involves constructing a URL that points to your static asset through the Statically CDN. This process doesn't require an API key or complex authentication; it's a direct URL transformation.
Prerequisites
- An existing static asset (e.g., an image, CSS file, JavaScript file) hosted on an accessible web server.
- The full URL of that static asset.
Steps to make your first request
-
Identify Your Asset URL: Locate the direct URL of the static asset you wish to serve via Statically. For example:
https://yourdomain.com/assets/my-image.jpg. -
Construct the Statically URL: Prepend the Statically CDN base URL and the service type (e.g.,
img/for images) to your asset's domain and path. The general format ishttps://cdn.statically.io/[service]/[your-original-domain-and-path].For an image, the URL structure is typically:
https://cdn.statically.io/img/yourdomain.com/assets/my-image.jpgFor other assets like CSS or JavaScript, you might use:
https://cdn.statically.io/css/yourdomain.com/assets/style.css https://cdn.statically.io/js/yourdomain.com/assets/script.jsStatically's documentation provides details on URL parameters for optimizing images, such as specifying width, quality, and format. For instance, to resize an image to 500 pixels wide:
https://cdn.statically.io/img/w=500/yourdomain.com/assets/my-image.jpg -
Test the URL in a Browser: Open a web browser and paste the constructed Statically URL. The asset should load, indicating that Statically is serving it. You can inspect the network tab in your browser's developer tools to confirm the request is being served from
cdn.statically.io. -
Integrate into Your Project: Once confirmed, update the
srcattributes of your<img>tags,hrefattributes of your<link>tags, orsrcattributes of your<script>tags in your website or application to use the Statically-generated URLs.
This direct URL manipulation is the core mechanism for leveraging Statically's CDN and optimization capabilities without needing traditional API calls or server-side SDKs for basic integration.
Quick Reference: Statically First Request
| Step | What to Do | Where |
|---|---|---|
| 1. Identify Asset | Locate the full URL of your static file. | Your website/server |
| 2. Construct Statically URL | Prepend https://cdn.statically.io/[service]/ to your asset URL. |
Browser/Editor |
| 3. Test Request | Open the Statically URL in a web browser. | Web browser |
| 4. Implement | Update asset URLs in your website's HTML, CSS, or JS. | Your project files |
Common next steps
After successfully serving your first asset through Statically, consider these common next steps to further optimize your website and integrate Statically more deeply:
-
Integrate with WordPress: If you are using WordPress, Statically offers dedicated plugins to automate the URL rewriting process for all your media files. This simplifies the management of assets and ensures that new uploads are also served via the CDN. The Statically WordPress documentation provides detailed instructions.
-
Explore Image Optimization Parameters: Statically supports various URL parameters for image manipulation, including resizing (
w=,h=), quality adjustment (q=), and format conversion (f=). Experiment with these parameters to find the optimal balance between image quality and file size for different use cases on your site. -
Configure Custom Domains: For Pro plan users, Statically allows you to use your own domain (e.g.,
cdn.yourdomain.com) instead ofcdn.statically.io. This can improve brand consistency and potentially mitigate issues with ad blockers. Setting up a custom domain typically involves configuring DNS CNAME records. -
Cache Busting and Purging: Understand how Statically handles caching and how to trigger a cache purge if you need to update an asset immediately. While Statically generally detects changes in origin files, manual purging might be necessary for critical updates. Consult the Statically cache management documentation for details.
-
Monitor Usage: If you are on a Statically Pro plan, regularly monitor your bandwidth usage to stay within your plan limits and to understand traffic patterns. The Statically dashboard provides these analytics.
-
Review Security Best Practices: While Statically handles some security aspects, ensure your origin server and static assets are protected. For general web security, practices like using HTTPS for your origin and implementing Edge Certificates are critical. Review your overall website security posture following guidance from reputable sources like Mozilla's web security documentation.
Troubleshooting the first call
If your first request to Statically does not work as expected, here are common troubleshooting steps:
-
Verify Original Asset Accessibility: Ensure that your original asset (e.g.,
https://yourdomain.com/assets/my-image.jpg) is publicly accessible directly in a browser. If the original asset cannot be reached, Statically will not be able to retrieve and serve it. Check for typos in the original URL or server configuration issues. -
Check Statically URL Format: Double-check the construction of your Statically URL. Common errors include:
- Missing the service prefix (e.g.,
/img/,/css/,/js/). - Incorrectly placing the domain or path.
- Typos in
cdn.statically.io.
Refer to the Statically usage guidelines for correct URL syntax.
- Missing the service prefix (e.g.,
-
Inspect HTTP Status Codes: Use your browser's developer tools (Network tab) to inspect the HTTP status code of the request to Statically.
- A
200 OKstatus indicates success. - A
404 Not Foundsuggests Statically couldn't locate the original asset, often due to an incorrect original URL or the asset being genuinely missing. - A
5xxerror (e.g.,500,502,504) could indicate a temporary issue with Statically's servers or a problem communicating with your origin server.
- A
-
Consider Origin Server Restrictions: Some origin servers might have security measures (e.g., IP whitelisting, hotlink protection, strict
robots.txtrules) that prevent Statically from accessing assets. Ensure your server is not blocking requests from Statically's network. -
Time for Caching: For the very first request of an asset via Statically, there might be a slight delay as Statically fetches and caches the asset from your origin. Subsequent requests should be faster.
-
Review Statically Status Page: If you suspect a widespread issue, check the Statically status page (usually linked from their homepage or documentation) for any reported outages or performance issues.