Complete CMS & Deployment

Finalize the blog CMS with SEO features, caching, and deployment preparation — complete the capstone that ties together all PHP concepts.

45 min•By Priygop Team•Last updated: Feb 2026

Polish & SEO

SEO-Friendly URLs: RewriteEngine On, RewriteRule ^post/([a-z0-9-]+)$ index.php?route=post&slug=$1 — Apache mod_rewrite converts /post/my-first-blog to PHP route. Nginx uses try_files
Meta Tags: Dynamic <title> and <meta description> per page — $pageTitle = htmlspecialchars($post['title']) . ' | My Blog'; Output in layout: <title><?= $pageTitle ?></title>
Sitemap: Generate XML sitemap dynamically — <?xml version='1.0'?><urlset> with <url><loc>/post/$slug</loc><lastmod>$date</lastmod></urlset>. Submit to Google Search Console
RSS Feed: header('Content-Type: application/rss+xml'); — generate RSS XML from latest posts. Readers can subscribe to your blog. Include title, link, description, pubDate for each item
Caching: Store rendered HTML in /cache/ directory — $cacheFile = 'cache/' . md5($uri) . '.html'; if (file_exists($cacheFile) && filemtime($cacheFile) > time() - 3600) { readfile($cacheFile); exit; }
Error Pages: Custom 404 and 500 pages — http_response_code(404); include 'views/errors/404.php'; exit; — user-friendly error pages with consistent design, not raw PHP errors

Try It Yourself: PHP Blog System

Try It Yourself: PHP Blog SystemHTML

HTML Editor

✓ ValidTab = 2 spaces

<!DOCTYPE html>
<html><head>
<style>
  body { font-family: Arial, sans-serif; padding: 20px; background: #f0f4ff; }
  h2 { color: #4f46e5; }
  .card { background: white; padding: 20px; border-radius: 10px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); max-width: 550px; margin: 12px 0; }
  .post { border-left: 4px solid #4f46e5; padding-left: 12px; margin: 12px 0; }
  .post h3 { margin: 0; font-size: 16px; color: #1e293b; }
  .post p { color: #64748b; font-size: 13px; margin: 4px 0; }
  .meta { color: #94a3b8; font-size: 12px; }
  input, textarea { width: 100%; padding: 8px; border: 2px solid #e0e7ff; border-radius: 6px; margin: 4px 0; box-sizing: border-box; }
  button { background: #4f46e5; color: white; border: none; padding: 10px 20px; border-radius: 6px; cursor: pointer; font-weight: bold; margin-top: 8px; }
  .tag { background: #e0e7ff; color: #4338ca; padding: 2px 8px; border-radius: 10px; font-size: 11px; margin: 2px; display: inline-block; }
</style></head><body>
<div class="card">
  <h2>📝 Mini Blog CMS</h2>
  <input id="title" placeholder="Post title..." />
  <textarea id="body" rows="3" placeholder="Post content..."></textarea>
  <button onclick="addPost()">Publish Post</button>
</div>
<div class="card" id="posts">
  <h2>📰 Recent Posts</h2>
  <div class="post"><h3>Welcome to PHP Blog</h3><p>This is a sample blog built with PHP concepts.</p><div class="meta">Jan 1, 2025 <span class="tag">PHP</span><span class="tag">Tutorial</span></div></div>
</div>
<script>
function addPost() {
  const t = document.getElementById('title').value;
  const b = document.getElementById('body').value;
  if (!t || !b) return alert('Fill both fields');
  const d = new Date().toLocaleDateString('en-US', {month:'short',day:'numeric',year:'numeric'});
  const html = '<div class="post"><h3>'+t+'</h3><p>'+b+'</p><div class="meta">'+d+' <span class="tag">New</span></div></div>';
  document.getElementById('posts').innerHTML += html;
  document.getElementById('title').value = '';
  document.getElementById('body').value = '';
}
</script></body></html>

<!DOCTYPE html>
<html><head>
<style>
  body { font-family: Arial, sans-serif; padding: 20px; background: #f0f4ff; }
  h2 { color: #4f46e5; }
  .card { background: white; padding: 20px; border-radius: 10px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); max-width: 550px; margin: 12px 0; }
  .post { border-left: 4px solid #4f46e5; padding-left: 12px; margin: 12px 0; }
  .post h3 { margin: 0; font-size: 16px; color: #1e293b; }
  .post p { color: #64748b; font-size: 13px; margin: 4px 0; }
  .meta { color: #94a3b8; font-size: 12px; }
  input, textarea { width: 100%; padding: 8px; border: 2px solid #e0e7ff; border-radius: 6px; margin: 4px 0; box-sizing: border-box; }
  button { background: #4f46e5; color: white; border: none; padding: 10px 20px; border-radius: 6px; cursor: pointer; font-weight: bold; margin-top: 8px; }
  .tag { background: #e0e7ff; color: #4338ca; padding: 2px 8px; border-radius: 10px; font-size: 11px; margin: 2px; display: inline-block; }
</style></head><body>
<div class="card">
  <h2>📝 Mini Blog CMS</h2>
  <input id="title" placeholder="Post title..." />
  <textarea id="body" rows="3" placeholder="Post content..."></textarea>
  <button onclick="addPost()">Publish Post</button>
</div>
<div class="card" id="posts">
  <h2>📰 Recent Posts</h2>
  <div class="post"><h3>Welcome to PHP Blog</h3><p>This is a sample blog built with PHP concepts.</p><div class="meta">Jan 1, 2025 <span class="tag">PHP</span><span class="tag">Tutorial</span></div></div>
</div>
<script>
function addPost() {
  const t = document.getElementById('title').value;
  const b = document.getElementById('body').value;
  if (!t || !b) return alert('Fill both fields');
  const d = new Date().toLocaleDateString('en-US', {month:'short',day:'numeric',year:'numeric'});
  const html = '<div class="post"><h3>'+t+'</h3><p>'+b+'</p><div class="meta">'+d+' <span class="tag">New</span></div></div>';
  document.getElementById('posts').innerHTML += html;
  document.getElementById('title').value = '';
  document.getElementById('body').value = '';
}
</script></body></html>

Result

Click ▶ Run to see the result

Edit the code on the left, then click Run

HTML|36 lines|2058 chars|✓ Valid syntax

UTF-8

Quick Quiz — PHP Project

Next Module →