Blog Post Creation Checklist

Blog Post Creation Checklist

✅ Required Steps for New Blog Posts

1. Create Blog Post File

• Create HTML file in /blog/ directory
• Use descriptive filename: post-name.html
• Include proper HTML structure with header/footer
• Add Google Analytics tracking code
• Use absolute paths for all assets (/images/, /styles.css, etc.)

2. Update Blog Index

• Add post to blog.html with proper card structure
• Use absolute path for link: /blog/post-name.html
• Add appropriate badges and metadata
• Include excerpt and “Read More” button

3. CRITICAL: Update SPA Navigation

• Open shell-navigation.js
• Find blogPosts object (around line 28)
• Add new post mapping:

  const blogPosts = {
      'post-name': '/blog/post-name.html',
      // ... existing posts
  };
  

4. Test Functionality

• Test “Read More” button works (SPA navigation)
• Verify post loads without full page refresh
• Check header/footer persist during navigation
• Test on both desktop and mobile
• Verify all internal links work

5. Commit and Deploy

• Add all files to git: git add .
• Commit with descriptive message
• Push to main branch: git push origin main
• Test on live site (GitHub Pages)

🚨 Common Mistakes to Avoid

❌ Don’t Forget shell-navigation.js

Problem: “Read More” button doesn’t work Solution: Always add new blog post to blogPosts object in shell-navigation.js

❌ Don’t Use Relative Paths

Problem: Links work locally but break on GitHub Pages Solution: Always use absolute paths (/blog/post-name.html)

❌ Don’t Skip Testing

Problem: Issues only discovered after deployment Solution: Test thoroughly before committing

📝 Example: Adding “My New Post”

1. Create file: /blog/my-new-post.html
2. Update blog.html:

   <a href="/blog/my-new-post.html" class="btn btn-outline-primary btn-sm">Read More</a>
   

3. Update shell-navigation.js:

   const blogPosts = {
       'my-new-post': '/blog/my-new-post.html',
       // ... existing posts
   };
   

4. Test: Click “Read More” → should load via SPA navigation

🔧 Quick Fix for Broken “Read More” Button

If “Read More” button isn’t working:

1. Check if post is in shell-navigation.js:

   grep "post-name" shell-navigation.js
   

2. If missing, add it:

   'post-name': '/blog/post-name.html',
   

3. Test and commit changes

📞 Need Help?

• Check QUICK_REFERENCE.md for common issues
• Review DEVELOPMENT.md for detailed troubleshooting
• Test locally before deploying to GitHub Pages