Hashnode: Site Customization with Blog Starter Kit

Japanese Edition
https://daisuke.masuda.tokyo/article-2025-11-03-1222

This presentation is a comprehensive guide to building and customizing a technical blog using Hashnode's Blog Starter Kit. It begins with an introduction to the Hashnode platform and covers six core features, the innovative headless mode, three theme options (with a particular focus on the Personal theme), the complete setup process, detailed customization methods using TailwindCSS and Next.js, leveraging the GraphQL API, deployment and operational best practices, and real-world company success stories. Each slide features a professional design optimized for technical presentations to engineering teams.

Transcript

1. Hashnode: Site Customization with Blog Starter Kit Building a Fully Customizable Headless Blog with Next.js + TailwindCSS 2025-11-03
2. What is Hashnode? Hashnode is a next-generation blogging and documentation platform designed for developers and teams. Used by over 1 million developers worldwide with 3.5 million monthly unique readers. Access a global developer community while maintaining full ownership of your content and domain.  Completely free to use. No ads or paywalls, run on your own domain  FreeCodeCamp、Vercel、MindsDBAdopted by prominent companies and communities  As de facto standard for technical blogs、Maximize developer productivity
3. Six Core Features of Hashnode Block-based Editor Fast Publishing & SEO AI Assistance Real-time Collaboration Public GraphQL API Proven at Scale  Notion-like editor with drag-and-drop support for code blocks, images, and embeds  One-click publish with automatic sitemap generation and optimized meta tags  Auto-generate article summaries, tag suggestions, and SEO metadata  Co-edit articles with team members, inline comments and version history  Fetch content programmatically, build custom frontends with any framework  Powers major tech blogs like FreeCodeCamp, handles millions of monthly pageviews
4. Key Features of Hashnode WYSIWYG Markdown Editor AI-Assisted Writing SEO Optimization Team Collaboration Hashnode provides features that maximize developer productivity. With an intuitive editor, AI assistance, SEO optimization, and team collaboration, you can build a professional blog in minutes.  Block-based editor for intuitive placement of code blocks, images, and embedded content.  Generate, rephrase, and research content within the editor. Dramatically improves productivity.  Improve search engine visibility with meta tags, structured data, and fast loading.  Streamline collaboration with real-time editing, inline comments, and multi-author management.
5. Three Theme Options in Detail Enterprise Hashnode Personal Blog Starter Kithas monorepo structure、according to purpose3themes to choose from。Easy setup by specifying one at deployment。  robust for corporate sitesUI。feature-rich and sophisticated design。Focus on team and business features # simple and versatile design。Hashnodestandard style。 Flexibility for many use cases  Ideal for individual developer branding。Build personal brand with simple yet expressive layout
6. Personal Theme Overview Establish Personal Brand Readability First Best Suited For Personaltheme is、Theme optimized for individual developer branding。With simple yet expressive layout、 Build personal brand effectively。  Emphasize personal brand with profile image and social links、close the distance with readers  Focus on articles with single-column layout、eliminate unnecessary decoration and focus on content  Individual developer portfolios, technical article publishing, side projects and freelance promotionideal for
7. Personal Theme Design Features Header Layout Article List Footer  Profile image, horizontal menu, social links, RSS feed  Single-column minimal design with vertical article list  Large readable fonts displaying date, views, and comment count  Branding display, copyright notice, sitemap links
8. How to Customize Personal Theme Profile Image & Branding Navigation Menu Color Scheme Layout src="/avatar.png" alt="Profile" width={48} height={48} className="rounded-full" /> const nav = [ { href: "/", label: "Home" }, { href: "/blog", label: "Blog" }, { href: "https://hashnode.com/@yourname", label: "Hashnode" } ]; theme: { extend: { colors: { primary: "#3B82F6", secondary: "#10B981" } Learn how to customize the Personal theme to match your brand. You can adjust profile, navigation, color scheme, and more.  Place images in /public folder and configure in header component  Customize menu items in components/Header.tsx and add external links  Define brand colors in tailwind.config.js with dark mode support  pages/index.tsxfor homepageLayoutand change article list styles Navigation Menu Color Scheme（tailwind.config.js）
9. Innovation of Headless Mode GraphQL API Full Design Freedom Performance Optimization Hashnode's headless mode is an innovative feature that allows you to fully customize frontend design and user experience while leveraging a powerful content management system and editor.  Fetch articles, user profiles, and metadata via a public GraphQL endpoint  Build custom UI with Next.js, React, Vue, or any framework of your choice  Leverage SSG/ISR with Next.js for lightning-fast page loads and optimal SEO
10. Blog Starter Kit Overview modernTech Stack 3preset themes GraphQL APIintegrate with The Hashnode Blog Starter Kit is an open-source starter kit that lets you leverage headless mode immediately. With over 620 stars and 914 forks on GitHub, it's backed by an active community.  Next.js、Tailwind CSS、TypeScriptadopts。Vercel、Netlify、 AWS Amplifyetc、Deploy to any platform  for personal blogs「Personal」、for corporate blogs 「Enterprise」、Hashnodeofficial style「Hashnode」provides  Hashnode GraphQL Public APIFetch content using。 Adaptable to custom design systems
11. Setup Preparation: Subpath Configuration (Optional) method1: Vercelconfiguration method2: Cloudflare Worker validationmethod async rewrites() { return [{ source: "/blog", destination: "https://your-blog.vercel.app/blog" }, { source: "/blog/:path*", destination: "https://your-blog.vercel.app/blog/:path*" }]; } const subpath = '/blog'; const blogBaseUrl = 'https://your-blog.vercel.app'; addEventListener('fetch', event => { if(new URL(event.request.url) .pathname.startsWith(subpath)){ return event.respondWith(proxyBlog(event.request)); } }); Useful when integrating blog as part of existing site。for example、yourdomain.com/blogCan serve blog as。  next.config.jswithrewritesconfigure、configure proxy  Worker scriptProxy blog requests with  /blogand/blog/Verify article paths display correctly。links、image paths、APIValidate requests aren't broken next.config.js（Vercel） Cloudflare Worker
12. Setup Guide 1. GitHubfork 2. Vercel Deployment 3. environment variable configuration 4. Enable Headless Mode 5. local development Starter KitSetup is surprisingly simple。GitHubfork from、 Deploy to Vercelsimply by、Production-level blog ready in minutes。  repositoryfork、3Choose from themes  VercelCreate new project in、specify theme directory  GraphQLendpointandblogURLset as environment variables  HashnodeEnable headless mode in dashboard  pnpm install and pnpm dev start local environment with
13. Customization Basics: Monorepo Structure Monorepo Structure Local Development Main Edit Points packages/blog-starter-kit/themes/ ├── enterprise/ ├── hashnode/ └── personal/ $ cd packages/blog-starter-kit/themes/enterprise $ pnpm install $ pnpm dev app/layout.tsx # Metadata and Layout app/page.tsx # Homepage Structure components/* # UIComponents styles/globals.css # Global Styles The Blog Starter Kit is a highly customizable open- source framework built with Next.js and TailwindCSS. Start by understanding environment variables and configuration to create a flexible blog UI.  Three themes in separate directories  Start dev environment with pnpm install and pnpm dev  app/layout.tsx、app/page.tsx、components/*、 styles/globals.css Directory Structure Setup Commands Main Files
14. Design Customization with TailwindCSS Changing Primary Color Color Paletteutilization Dark Mode Support Design Consistency module.exports = { content: ['./components/**/*.tsx'], darkMode: 'class', theme: { extend: { colors: { 'accent-1': '#FAFAFA', 'accent-2': '#EAEAEA', primary: colors.blue, // ← change }, }, }, } By using Tailwind CSS, you can easily customize the entire site's color scheme by simply editing the tailwind.config.js file. Build a consistent design system in minutes.  Change primary: colors.blue to colors.red to update the entire site's color scheme  TailwindstandardColor Paletteusing、Consistent Designachieve  darkMode: 'class'With configuration、Manual theme switching available  Accent Colors、background color、Centralized text color management tailwind.config.js
15. Customization: Components and Layout Independent Components Tailwindadjust with classes newAdding Components TypeScriptsupport Each component is independent and can be finely customized by adjusting Tailwind classes. All elements including cards, buttons, navigation, and footer are editable.  Each UI element is independent and can be edited individually without affecting others  Each component'sTailwindby changing classes、Freely customize styles  components/Create new files in directory、easily extend functionality  Type safety guaranteed、improved development experience。Detect errors in advance
16. Example: Header Component Customization Next.js Linkcomponent TailwindCSSclass backdrop-blureffect Responsive Design import Link from "next/link"; const nav = [ { href: "/blog", label: "Blog" }, { href: "/docs", label: "Docs" }, { href: "/about", label: "About" } ]; export default function Header() { return ( <header className="border-b border-brand-500/20 bg-white/70 backdrop-blur"> <div className="max-w-5xl mx-auto px-4"> {nav.map(item => ( <Link key={item.href} href={item.href} className="text-brand-600"> {item.label} </Link> ))} </div> </header> ); navigation、logo、Customize theme switching to match brand。Next.jsandTypeScriptLet's look at implementation examples using。  SPAachieve transitions、Navigation items defined in array  border-brand-500/20andtext-brand-600reference brand colors with  Modern scroll experience with semi-transparent background  max-w-5xlcenter with、Support all screen sizes p
17. Example: Customizing Colors and Fonts 1. tailwind.config.jswithBrand Colorsdefinition 2. globals.csswithGoogle Fontsload 3. componentwithapply theme: { extend: { colors: { brand: { 500: "#1E3A8A", 600: "#1E40AF" } }, fontFamily: { sans: ["Noto Sans JP", "sans-serif"] } } } @import url('https://fonts.googleapis.com/css2? family=Noto+Sans+JP:wght@400;700&display=swap'); @tailwind base; @tailwind components; @tailwind utilities; <h1 className="font-sans text-3xl text-brand-600"> blog title /h1> TailwindconfigurationandCSScombine、Achieve brand-aligned colors and typography。Japanese fonts can also be configured properly。  colors.brandwithBrand Colorsdefine、fontFamilyConfigure Japanese fonts with  Noto Sans JPimport、@tailwindAdd directives  font-sansandtext-brand-600Apply styles with classes globals.css component
18. Customization: Theme Switcher Implementation Package Installation ThemeProvider Setup SVGicon creation Switcher Component import { ThemeProvider } from 'next-themes' export default function MyApp({ Component, pageProps }) { return ( <ThemeProvider attribute="class"> <Component {...pageProps} /> </ThemeProvider> ); } By using the next-themes package, you can implement dark/light mode switching functionality with just a few lines of code. This significantly enhances user experience.  Add theme management package with pnpm install next- themes  pages/_app.tsxtoThemeProvideradd、 attribute="class"configure  Sun and moon iconsSVGCreate as component  useThemeGet current theme with hook、Toggle with click pages/_app.tsx
19. GraphQL API: Practical Use Cases 1. Fetching Blog Posts 2. Fetching Specific Article Details 3. Fetching User Information Endpoint https://gql.hashnode.com 4. Searching Articles by Tag 5. Publishing Articles (Mutation)  your ownAutomatically display latest articles on portfolio site。 publication Get article list with queries  full article text、metadata、fetch statistics。post Access detailed content with queries  Retrieve profile, social links, and published articles。user display author info with query Authentication: Personal Access Token (PAT)  Search articles on specific topics。searchPostsOfPublication fetch articles matching conditions with  Publish articles from programs。publishPost Auto-posting possible with mutations
20. GraphQL API: Implementation with Next.js fetchExecute queries with functions React Componentwithuse Pagination Support const ENDPOINT = 'https://gql.hashnode.com'; export async function getRecentPosts(host) { const query = ` query Publication($host: String!) { publication(host: $host) { posts(first: 5) { edges { node { title brief url } } } } } `; const res = await fetch(ENDPOINT, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ query, variables: { host } }) }); Next.jswithHashnode GraphQL APIIntroduce specific methods to implement。  standardfetch APIusingGraphQLto endpointPOSTrequest  useEffectFetch article data with hooks、 statewithmanage  Implement infinite scroll with cursor-based pagination lib/hashnode.js - Data Fetching Function
21. Deployment and Operations Tips Updating Environment Variables Performance Monitoring Team Collaborationflow Blog Starter KitUnderstand key points for long-term operations。environment variables、performance、By understanding collaboration best practices、Smooth operations become possible。  VercelManual redeployment required after updating environment variables。Auto-deploy doesn't detect environment variable changes  Web Vitalsscore、404/500errors、regularly check image optimization。when introducing subpathCanonicalandOGalways validate settings  GitHubwithPRcreate→Vercel Previewwithvisual verification→reflect to production after merge。GraphQLbe careful with schema changes
22. Leveraging GraphQL API content fetching custom query creation flexible feature extension Starter Kitis、Hashnode GraphQL APIFetch content using。 articleslist、individual articles、comments、tags、search functionality etc、everythingAPIavailable through。  articles、comments、tags、search resultsGraphQLefficiently fetch with queries  Filter with specific conditions、Freely define required data structure  Add custom features and widgets、Provide experience beyond standard blogs query Publication { publication(host: "yourblog.hashnode.dev") { posts(first: 10) { edges { node { title brief } } } } }
23. Real-World Use Cases FreeCodeCamp Collaborate on books and tutorials with public workflow。「improved productivity、 significant time savings」 Outerbase 「Documentation and collaboration10times easier。editor is world-class、UIis beautiful」 MindsDB APIfor documentation and product guidesHashnodeadopts。Improved quality of developer documentation Vercel CEO Guillermo RauchMr.「Developers amazed by speed of launching blog on custom domain」 Pangea Cloud adopted as corporate blog foundation。 Platform trusted by security companies
24. Summary and Next Steps By combining Hashnode's writing and collaboration environment with the customizability of the Blog Starter Kit, you can build an ideal blogging environment. Fully leverage the latest Next.js technology.  Start immediately by forking the demo → deploying to Vercel → enabling headless mode  Adjust colors, spacing, and typography to match your brand with TailwindCSS  Extend components (Header/Footer/Card), add AI search, and publish themes for uniqueness Start building your own technical blog today. Visit docs.hashnode.com for details.