Part 2 Web Server Mastery Serving Static Content Like a Pro
In this second installment, we turn a basic Nginx configuration into a professional web server capable of hosting multiple sites, serving static content efficiently, and offering an optimal user experience. This article is designed for developers and operations teams who want a fast, secure, and optimized deployment.
What we will achieve today: host multiple sites on a single server, serve static files with advanced caching, enable automatic compression, create professional error pages, manage smart redirects, and apply performance optimizations. We also include good monitoring and diagnostic practices.
About Q2BSTUDIO: we are a custom software and application development company specializing in artificial intelligence, cybersecurity, and AWS and Azure cloud services. We offer custom software, intelligence service solutions, AI implementations for businesses, and AI agents integrated with dashboards like Power BI. Our approach combines robust engineering with security and scalability for projects of any size.
Multi-site challenge: Nginx solves the need to serve multiple websites from a single server using server blocks. Each block acts like an apartment with its own root domain and rules, sharing the host infrastructure.
Site examples and recommendations: Site 1 Static portfolio: place HTML, CSS, and JS in a root directory and enable sendfile, tcp_nopush, and tcp_nodelay to improve file delivery. Add basic security headers X-Frame-Options, X-XSS-Protection, and X-Content-Type-Options, and a try_files rule that returns 404 if the resource does not exist.
Site 2 Blog generated with Jekyll or Hugo: use try_files to remove the .html extension and separate caching rules for CSS, JS, and images. Deny access to hidden files and configure long expirations for versioned assets.
Site 3 SPA React, Vue, or Angular: serve the distribution folder as the root and use try_files to forward client routes to index.html. Avoid caching the main HTML with Cache-Control headers no-cache, no-store, must-revalidate, and configure a proxy for API routes that point to local backends or containers.
Enabling sites: create configuration files in etc nginx sites-available and link them to sites-enabled, create the directory structure in var www, test the configuration with nginx -t, and reload with systemctl reload nginx. Ensure correct permissions and proper ownership for www-data.
Compression optimization: enable gzip, gzip_vary, gzip_min_length, and specify gzip_types to compress text, CSS, JS, JSON, XML, and fonts. Enable gzip_static to serve precompressed versions when they exist.
Advanced caching strategy: define expiration rules by content type for HTML, CSS, JS, images, and fonts. Use Cache-Control public, immutable headers for assets with hashed names and avoid caching dynamic HTML. Implement if_modified_since to support conditional requests.
File type optimization: in the http block, enable sendfile, tcp_nopush, tcp_nodelay, adjust client_body_buffer and large_client_header_buffers, and configure output_buffers and postpone_output for better performance on large transfers.
Professional error pages: create custom pages for 404 and 50x in var www errors with a design consistent with your brand. Include useful navigation, quick search, and links to home, contact, and blog. Use internal in error locations so only Nginx serves them internally.
Smart redirects and rewrites: handle migrations from old to new URLs with 301 redirects, avoid obsolete extensions, redirect www to non-www or force HTTPS when necessary. Use rewrite rules to convert pretty routes to internal parameters in PHP applications or frameworks.
Advanced rewrites and API versioning: implement location with regular expressions to capture API versions and route to appropriate backends, adding the X-API-Version header. This facilitates simultaneous deployments of multiple service versions.
Nginx monitoring: enable stub_status on an internal port to see accepted connections and active workers, and expose a health endpoint for load balancers. Restrict access by IP to the nginx status route for operational security.
Testing and diagnostic commands: use curl with Accept-Encoding and Cache-Control headers and a custom format to measure response times. Verify compression headers and monitor connections with ss or tools like htop and iotop to detect bottlenecks.
Real-world practical tips: preload critical resources in the HTML head for CSS and important fonts, DNS prefetch for external domains, optimize images by offering WebP with fallback, and serve various sizes when possible. For production security, apply CSP, HSTS, Referrer-Policy, X-Frame-Options, and X-Content-Type-Options headers.
Security and compliance: at Q2BSTUDIO, we integrate cybersecurity into every layer. We offer secure header audits, basic DDoS protections, integration with AWS and Azure cloud services, and custom software solutions that include access controls in APIs and in AI agents deployed to automate secure tasks.
Troubleshooting common issues: if CSS or JS does not load, verify file permissions and MIME types in etc nginx mime.types; if pages do not update, clear temporary caches and check that files in var www are actually up to date. For slow performance, review access logs, look for slow responses, and use server and disk profiling tools.
Recommended exercises: practice setting up three different sites and optimizing them differently, perform a performance audit with PageSpeed Insights or GTmetrix, design error pages with your brand identity, and plan a redirect strategy to restructure old URLs to new ones.
SEO and positioning: include relevant keywords in metadata and content, visible texts, and linked resources to improve indexing. Suggested keywords to include on the website and technical documents: custom applications, custom software, artificial intelligence, cybersecurity, AWS and Azure cloud services, business intelligence services, AI for businesses, AI agents, Power BI.
Q2BSTUDIO services: we develop custom applications integrating artificial intelligence and AI agents to automate business processes; we offer AWS and Azure cloud services, advanced security and cybersecurity, and implementation of business intelligence and Power BI solutions for visualization and decision-making. If you are looking for custom software with a focus on AI and security, we can help you design and implement the complete architecture from an optimized frontend on Nginx to scalable backends in the cloud.
Next step in the series: in Part 3 Reverse Proxy Magic, we will cover connecting frontends with backend APIs, WebSocket handling, configuring development and production environments, basic load balancing concepts, and SSL termination with good security practices.
Quick summary of commands and best practices: test configuration with nginx -t, reload with systemctl reload nginx, list active sites in etc nginx sites-enabled, monitor logs in var log nginx access.log, check status with curl to the nginx status endpoint, and perform load tests with ab or modern tools. Always keep configuration backups and test in a staging environment before applying changes in production.
Contact and offer: if you need help implementing these practices or want Q2BSTUDIO to develop custom software for you with artificial intelligence integration, cybersecurity, and AWS and Azure cloud services, contact us for personalized consulting and a work plan that includes secure deployment, optimization, and ongoing support.
