Advertisement Contact for advertisement: proainexsupport@gmail.com // Loading...1. Download the ZIP file from your purchase/downloads section
2. Extract the ZIP file to your desired folder
3. You will see the following structure:
your-project-folder/
├── index.html
└── uploads/
└── blog.json
1. Simply double-click on index.html file 2. The website will open in your default browser 3. All demo blog content will be visible immediately 4. No server required for basic preview
1. Open the uploads/blog.json file in any text editor (Notepad, VS Code, Sublime Text)
2. Each blog post follows this format:
{
"id": 1,
"title": "Your Blog Title Here",
"excerpt": "Short excerpt shown on blog cards (2-3 lines max)",
"content": "<p>Your full article content with HTML tags</p>",
"author": "Your Name",
"authorInitials": "YN",
"date": "2026-06-10",
"category": "Technology",
"tags": ["Tag1", "Tag2", "Tag3"],
"image": "https://your-image-url.com/image.jpg",
"readTime": "5 min read",
"comments": [
{
"name": "Commenter Name",
"initials": "CN",
"text": "Comment text here",
"date": "2026-06-10"
}
]
}
3. Copy this format for each new blog post
4. Separate multiple posts with commas
5. Save the file
6. Refresh your browser to see changes
OPTION A - Use External URLs (Recommended for beginners):
"image": "https://picsum.photos/800/400"
OPTION B - Use Local Images:
1. Create an 'images' folder in your project root
2. Place your images inside
3. Update JSON like this:
"image": "images/my-blog-image.jpg"
OPTION C - Use Unsplash:
"image": "https://source.unsplash.com/800x400/?technology"
OPTION D - Use Placeholder Services:
"image": "https://placehold.co/800x400"
1. Open index.html in a code editor 2. Find the :root CSS section (around line 15-25) 3. Modify these color variables: --accent: #7c3aed; /* Purple - Main brand color */ --accent2: #a78bfa; /* Light Purple - Hover effects */ --bg: #fafafa; /* Light gray - Background */ --surface: #ffffff; /* White - Cards & sections */ --text: #18181b; /* Dark - Main text */ --gradient-1: linear-gradient(135deg, #7c3aed 0%, #6366f1 50%, #4f46e5 100%); 4. For dark mode customization, find [data-theme="dark"] 5. Save and refresh to see changes
1. Find the Google Fonts link in the <head> section 2. Replace with your preferred fonts from fonts.google.com Current: Inter + Merriweather To change: Visit fonts.google.com → Select fonts → Copy embed code → Paste in <head> 3. Update font variables: --font-sans: 'Your Sans Font', sans-serif; --font-serif: 'Your Serif Font', serif;
CHANGE WEBSITE NAME: - Search for "InkFlow" in index.html - Replace with your blog name (appears in header, footer, titles) CHANGE AUTHOR INFO: - Search for "Arjun Mehta" - Replace with your name and bio - Update profile section with your details CHANGE SOCIAL LINKS: - Find footer social section - Replace onclick handlers with your actual social media URLs CHANGE NEWSLETTER: - The newsletter form currently shows a toast message - To connect with real email service, add your API endpoint
OPTION A - GitHub Pages (FREE): 1. Create a GitHub account at github.com 2. Create a new repository 3. Upload your files (index.html + uploads folder) 4. Go to Settings → Pages 5. Select branch: main → Save 6. Your site will be live at: yourusername.github.io/repository-name OPTION B - Netlify (FREE): 1. Go to netlify.com and sign up 2. Click "Add new site" → "Deploy manually" 3. Drag and drop your project folder 4. Site goes live instantly with a netlify.app URL OPTION C - Vercel (FREE): 1. Go to vercel.com and sign up 2. Click "New Project" 3. Import your project folder 4. Deploy with one click OPTION D - Hostinger/Bluehost (PAID): 1. Buy hosting + domain 2. Use File Manager or FTP 3. Upload all files to public_html folder 4. Your site is live on your domain
TO CONNECT WITH PHP BACKEND: - Replace JSON fetch with PHP API call - Create blog posts in MySQL database - Update fetch URL in JavaScript TO CONNECT WITH WORDPRESS: - Use WordPress REST API - Fetch posts from /wp-json/wp/v2/posts - Map the response to match blog card format TO CONNECT WITH FIREBASE: - Create Firebase project - Store blogs in Firestore - Use Firebase SDK to fetch real-time data
ISSUE: Blog posts not showing FIX: - Check if uploads/blog.json file exists - Validate JSON syntax at jsonlint.com - Check browser console (F12) for errors - Make sure each blog post has an 'id' field ISSUE: Images not loading FIX: - Verify image URLs are accessible - Check file path if using local images - Ensure images folder is in correct location ISSUE: Search not working FIX: - Clear browser cache (Ctrl+Shift+R) - Check if blog.json has proper data - Look for JavaScript errors in console ISSUE: Dark mode not persisting FIX: - Make sure localStorage is enabled in browser - Check if any browser extensions blocking storage ISSUE: Mobile menu not opening FIX: - Check if you modified the hamburger button HTML - Verify JavaScript is not blocked - Test in incognito/private mode
Each blog post MUST have these fields: FIELD TYPE REQUIRED DESCRIPTION ───────────────────────────────────────────────────── id Number YES Unique number for each post title String YES Blog post title excerpt String YES Short description for cards content String YES Full article (HTML allowed) author String YES Author name authorInitials String YES 2-letter initials (e.g., "AM") date String YES Format: YYYY-MM-DD category String YES Single category name tags Array YES Array of tag strings image String YES Image URL or path readTime String YES e.g., "5 min read" comments Array YES Array of comment objects (can be empty []) OPTIONAL FIELDS: slug String NO URL-friendly title (auto-generated if missing)
□ All blog posts added to blog.json □ JSON syntax validated (no errors) □ All images loading properly □ Author information updated □ Social media links updated □ Website name changed from "InkFlow" □ Colors customized to your brand □ Tested on mobile phone □ Tested on Chrome, Firefox, Safari □ Dark mode working properly □ Search functionality tested □ All links and buttons working □ Newsletter form tested □ Page loads under 3 seconds □ No console errors (F12 → Console) □ Deployed to hosting platform
If you face any issues: 1. Check the FAQ section below 2. Watch the setup video tutorial (link) 3. Contact support at: your-email@example.com 4. Include screenshots of the issue 5. Mention your browser and operating system
To add new blog posts: 1. Open uploads/blog.json 2. Add new object with unique id 3. Save the file 4. Upload to your server (replace old file) 5. New post appears automatically - no code changes needed!
HTML5, CSS3, JavaScript
InkFlow is a modern, fully responsive blog website template built with pure HTML, CSS, and JavaScript. It features dynamic blog loading from a JSON file, single blog view with comments, author profile page, real-time search, category filtering, dark mode toggle, and newsletter subscription. No frameworks or libraries required - just download and deploy.
Basic HTML knowledge is helpful but not mandatory. You can easily add blog posts by editing the uploads/blog.json file in any text editor like Notepad. Each blog post follows a simple format with title, excerpt, content, category, and tags. The template comes with demo content that you can replace with your own. For advanced customization like changing colors or fonts, basic CSS knowledge is recommended.
Adding new blog posts is simple: 1) Open the uploads/blog.json file in any text editor. 2) Copy an existing blog post object. 3) Paste it and update the title, excerpt, content, category, tags, and image URL. 4) Give it a unique id number. 5) Save the file. 6) Refresh your browser - the new post appears automatically on the homepage and blog listing page.
Yes, InkFlow is fully responsive and mobile-friendly. It features a hamburger menu for mobile devices, flexible grid layouts that adapt to any screen size, optimized typography for readability on small screens, touch-friendly buttons and navigation, and responsive images that scale properly. The template has been tested on iOS, Android, tablets, and all modern browsers including Chrome, Firefox, Safari, and Edge.
Yes, you can use this template for both personal and commercial projects. Whether you're building a personal blog, a company news section, a content creator portfolio, or a client project, this template is suitable for all purposes. You can customize colors, fonts, content, and branding to match your requirements. No attribution required.
Yes, InkFlow comes with a built-in dark mode toggle. Users can switch between light and dark themes by clicking the moon/sun icon in the header. The preference is automatically saved in the browser's localStorage, so when visitors return to your site, their preferred theme is remembered. Both themes are fully styled with smooth transitions and high contrast for readability.
You can deploy this blog template for free using several platforms: GitHub Pages (upload to a repository and enable Pages in settings), Netlify (drag and drop your project folder for instant deployment), Vercel (import your project with one click), or any traditional web hosting like Hostinger or Bluehost using FTP. Since the template uses only HTML, CSS, and JavaScript, no server-side setup is required.
Yes, while the template currently loads content from a JSON file, you can easily modify the JavaScript fetch function to connect with any backend or CMS. You can integrate it with WordPress REST API, Firebase Firestore, a custom PHP/MySQL backend, Contentful headless CMS, Strapi, or any API that returns JSON data. The code is well-commented and the fetch logic is clearly separated for easy modification.
InkFlow includes: dynamic blog loading from JSON, single blog view with full article display, author profile page with stats, real-time search functionality, category and tag filtering, dark/light mode toggle, responsive design for all devices, newsletter subscription form, comment system demo, related posts section, scroll to top button, keyboard shortcuts (Ctrl+K for search, Esc to go back), smooth animations, SEO optimized structure, and toast notifications for user feedback.
Yes, your purchase includes lifetime access to future updates. If any bugs are found or new features are added, you'll receive the updated version. Basic support is also included - if you face any installation or setup issues, you can reach out via the support channel, and we'll help you get your blog up and running within 24-48 hours.
