[{"data":1,"prerenderedAt":557},["ShallowReactive",2],{"tech-build-blog-nuxt-content-tailwind":3},{"id":4,"title":5,"author":6,"body":7,"category":541,"date":542,"description":543,"extension":544,"image":545,"meta":546,"navigation":137,"path":547,"readingTime":548,"seo":549,"stem":550,"tags":551,"__hash__":556},"tech\u002Ftech\u002Fbuild-blog-nuxt-content-tailwind.md","Bikin Blog Statis dengan Nuxt Content — Dari Nol Sampai Live","Zainul Fanani",{"type":8,"value":9,"toc":527},"minimark",[10,15,19,38,41,47,50,53,57,68,74,76,80,85,88,145,149,160,203,213,217,224,231,235,238,242,245,247,251,254,335,341,343,347,450,453,455,459,466,503,509,523],[11,12,14],"h2",{"id":13},"kenapa-ngga-medium-aja","Kenapa Ngga Medium Aja?",[16,17,18],"p",{},"Pertanyaan yang wajar. Medium praktis — tinggal tulis, publish, done. Tapi...",[20,21,22,26,29,32,35],"ul",{},[23,24,25],"li",{},"❌ Kamu nggak punya konten sendiri (Medium bisa ganti policy kapan aja)",[23,27,28],{},"❌ Custom domain bayar $50\u002Ftahun",[23,30,31],{},"❌ SEO terbatas — artikel milik Medium, bukan kamu",[23,33,34],{},"❌ Iklan dan pop-up yang nggak kamu kontrol",[23,36,37],{},"❌ Loading lambat karena scripts Medium",[16,39,40],{},"WordPress? Lebih bebas, tapi hosting, security patch, update plugin, database maintenance... Males banget buat blog sederhana.",[16,42,43],{},[44,45,46],"strong",{},"Solusi: Static blog dengan Nuxt Content.",[16,48,49],{},"Tulis di Markdown, deploy gratis, kecepatan insane, dan 100% milik kamu.",[51,52],"hr",{},[11,54,56],{"id":55},"arsitektur-simpel-tapi-powerful","Arsitektur — Simpel Tapi Powerful",[58,59,64],"pre",{"className":60,"code":62,"language":63},[61],"language-text","📄 content\u002F           ← Tulis artikel di sini (Markdown)\n  └── tech\u002F           ← Kategori artikel\n      ├── artikel-1.md\n      └── artikel-2.md\n\n🧩 components\u002F        ← UI components (Vue)\n  ├── AppHeader.vue\n  ├── CodeBlock.vue   ← Syntax highlighting\n  └── SearchModal.vue\n\n🎨 layouts\u002F\n  └── default.vue     ← Layout utama\n\n⚡ nuxt.config.ts     ← Konfigurasi Nuxt\n","text",[65,66,62],"code",{"__ignoreMap":67},"",[16,69,70,71],{},"Segitu aja. Nggak ada database. Nggak ada backend. Nggak ada CMS yang berat. ",[44,72,73],{},"Markdown = Database.",[51,75],{},[11,77,79],{"id":78},"fitur-fitur-yang-bikin-beda","Fitur-Fitur yang Bikin Beda",[81,82,84],"h3",{"id":83},"️-markdown-based-content","✍️ Markdown-Based Content",[16,86,87],{},"Tulis artikel pakai Markdown biasa. Code blocks, images, tables, links — semua auto-render. Support frontmatter buat metadata:",[58,89,93],{"className":90,"code":91,"language":92,"meta":67,"style":67},"language-markdown shiki shiki-themes github-light github-dark","---\ntitle: \"Judul Artikel\"\ndescription: \"Deskripsi singkat\"\ndate: 2026-04-03\ntags: [nuxt, tutorial]\n---\n\nKonten artikel kamu di sini...\n","markdown",[65,94,95,103,109,115,121,127,132,139],{"__ignoreMap":67},[96,97,100],"span",{"class":98,"line":99},"line",1,[96,101,102],{},"---\n",[96,104,106],{"class":98,"line":105},2,[96,107,108],{},"title: \"Judul Artikel\"\n",[96,110,112],{"class":98,"line":111},3,[96,113,114],{},"description: \"Deskripsi singkat\"\n",[96,116,118],{"class":98,"line":117},4,[96,119,120],{},"date: 2026-04-03\n",[96,122,124],{"class":98,"line":123},5,[96,125,126],{},"tags: [nuxt, tutorial]\n",[96,128,130],{"class":98,"line":129},6,[96,131,102],{},[96,133,135],{"class":98,"line":134},7,[96,136,138],{"emptyLinePlaceholder":137},true,"\n",[96,140,142],{"class":98,"line":141},8,[96,143,144],{},"Konten artikel kamu di sini...\n",[81,146,148],{"id":147},"syntax-highlighting-cantik-fungsional","🎨 Syntax Highlighting — Cantik & Fungsional",[16,150,151,152,159],{},"Buat blog tech, code blocks itu wajib cakep. Pakai ",[153,154,158],"a",{"href":155,"rel":156},"https:\u002F\u002Fshiki.style\u002F",[157],"nofollow","Shiki"," yang built-in di Nuxt Content:",[58,161,165],{"className":162,"code":163,"language":164,"meta":67,"style":67},"language-js shiki shiki-themes github-light github-dark","\u002F\u002F Auto-highlighted, auto-themed\nconst greeting = \"Hello, Nuxt Content!\"\nconsole.log(greeting)\n","js",[65,166,167,173,190],{"__ignoreMap":67},[96,168,169],{"class":98,"line":99},[96,170,172],{"class":171},"sJ8bj","\u002F\u002F Auto-highlighted, auto-themed\n",[96,174,175,179,183,186],{"class":98,"line":105},[96,176,178],{"class":177},"szBVR","const",[96,180,182],{"class":181},"sj4cs"," greeting",[96,184,185],{"class":177}," =",[96,187,189],{"class":188},"sZZnC"," \"Hello, Nuxt Content!\"\n",[96,191,192,196,200],{"class":98,"line":111},[96,193,195],{"class":194},"sVt8B","console.",[96,197,199],{"class":198},"sScJk","log",[96,201,202],{"class":194},"(greeting)\n",[204,205,206],"blockquote",{},[16,207,208,209,212],{},"💡 ",[44,210,211],{},"Bonus:"," Tambahkan tombol copy-paste di setiap code block. User cukup klik sekali, code langsung ke clipboard. Small detail, big UX win.",[81,214,216],{"id":215},"dark-mode","🌙 Dark Mode",[16,218,219,220,223],{},"Dark mode bukan lagi nice-to-have — itu ",[44,221,222],{},"mandatory",". Apalagi buat blog tech yang banyak code. Mata reader nggak akan terima kasih kalo harus menatap white background full code jam 12 malam.",[16,225,226,227,230],{},"Implementasi bisa via Tailwind ",[65,228,229],{},"dark:"," classes atau library seperti Darkmode.js. Pilihan di tangan kamu — yang penting jalan.",[81,232,234],{"id":233},"client-side-search","🔍 Client-Side Search",[16,236,237],{},"Pakai Fuse.js untuk fuzzy search langsung di browser. Nggak perlu backend, nggak perlu Algolia. Ketik \"nuxt blog\" langsung nemu artikel terkait — bahkan kalo typo sedikit.",[81,239,241],{"id":240},"rss-feed","📡 RSS Feed",[16,243,244],{},"RSS mungkin terdengar old-school, tapi newsletter reader dan RSS reader masih dipakai jutaan orang. Nuxt Content bisa generate RSS feed otomatis dari konten markdown kamu.",[51,246],{},[11,248,250],{"id":249},"deploy-gratis-kilat","Deploy — Gratis & Kilat",[16,252,253],{},"Blog statis = bisa deploy di mana aja yang gratis:",[255,256,257,276],"table",{},[258,259,260],"thead",{},[261,262,263,267,270,273],"tr",{},[264,265,266],"th",{},"Platform",[264,268,269],{},"Kecepatan",[264,271,272],{},"SSL",[264,274,275],{},"Custom Domain",[277,278,279,295,308,321],"tbody",{},[261,280,281,287,290,293],{},[282,283,284],"td",{},[44,285,286],{},"Vercel",[282,288,289],{},"⚡⚡⚡",[282,291,292],{},"✅",[282,294,292],{},[261,296,297,302,304,306],{},[282,298,299],{},[44,300,301],{},"Netlify",[282,303,289],{},[282,305,292],{},[282,307,292],{},[261,309,310,315,317,319],{},[282,311,312],{},[44,313,314],{},"Cloudflare Pages",[282,316,289],{},[282,318,292],{},[282,320,292],{},[261,322,323,328,331,333],{},[282,324,325],{},[44,326,327],{},"GitHub Pages",[282,329,330],{},"⚡⚡",[282,332,292],{},[282,334,292],{},[16,336,337,338],{},"Khusus blog pribadi, Vercel atau Cloudflare Pages adalah pilihan terbaik. Push ke GitHub, auto-deploy. ",[44,339,340],{},"Zero downtime, zero maintenance.",[51,342],{},[11,344,346],{"id":345},"kenapa-nuxt-content-bukan-alternatif-lain","Kenapa Nuxt Content Bukan Alternatif Lain?",[255,348,349,367],{},[258,350,351],{},[261,352,353,355,358,361,364],{},[264,354],{},[264,356,357],{},"Nuxt Content",[264,359,360],{},"Hugo",[264,362,363],{},"Jekyll",[264,365,366],{},"Astro",[277,368,369,386,403,418,433],{},[261,370,371,374,377,380,383],{},[282,372,373],{},"Bahasa",[282,375,376],{},"Vue\u002FTS",[282,378,379],{},"Go Template",[282,381,382],{},"Liquid",[282,384,385],{},"Astro\u002FJS",[261,387,388,391,394,397,400],{},[282,389,390],{},"Learning Curve",[282,392,393],{},"Rendah (kalo familiar Vue)",[282,395,396],{},"Tinggi",[282,398,399],{},"Sedang",[282,401,402],{},"Rendah",[261,404,405,408,411,414,416],{},[282,406,407],{},"SSR\u002FSSG",[282,409,410],{},"Keduanya",[282,412,413],{},"SSG only",[282,415,413],{},[282,417,410],{},[261,419,420,423,426,429,431],{},[282,421,422],{},"Hot Reload",[282,424,425],{},"✅ Instan",[282,427,428],{},"❌ Perlu restart",[282,430,428],{},[282,432,292],{},[261,434,435,438,441,444,447],{},[282,436,437],{},"Ekosistem",[282,439,440],{},"Vue\u002FNuxt luas",[282,442,443],{},"Go ecosystem",[282,445,446],{},"Ruby ecosystem",[282,448,449],{},"Growing",[16,451,452],{},"Kalau kamu udah familiar dengan Vue\u002FNuxt, Nuxt Content itu pilihan paling natural. Plus ekosistem Nuxt itu gila lengkap.",[51,454],{},[11,456,458],{"id":457},"kesimpulan","Kesimpulan",[16,460,461,462,465],{},"Bikin blog sendiri itu ",[44,463,464],{},"investasi konten",". Setiap artikel yang kamu tulis di platform milik orang lain, itu aset yang nggak kamu pegang. Dengan static blog:",[20,467,468,475,482,489,496],{},[23,469,470,471,474],{},"🏠 ",[44,472,473],{},"100% milik kamu"," — konten, domain, desain",[23,476,477,478,481],{},"⚡ ",[44,479,480],{},"Super cepat"," — static HTML, CDN-ready",[23,483,484,485,488],{},"🔒 ",[44,486,487],{},"Aman"," — nggak ada database yang bisa di-hack",[23,490,491,492,495],{},"💰 ",[44,493,494],{},"Gratis"," — hosting, domain bayar doang",[23,497,498,499,502],{},"🛠️ ",[44,500,501],{},"Full control"," — mau tambah fitur apa aja bisa",[16,504,505,506],{},"Mulai dari nol mungkin terasa overwhelming, tapi setelah setup sekali — tulis, commit, push, live. ",[44,507,508],{},"Itu ketenangan yang nggak bisa Medium kasih.",[204,510,511],{},[16,512,513,514,517,518],{},"📎 ",[44,515,516],{},"Source:"," Tutorial lengkap di ",[153,519,522],{"href":520,"rel":521},"https:\u002F\u002Fgithub.com\u002Ffanani-radian\u002Fopenclaw-sumopod\u002Fblob\u002Fmain\u002Ftutorials\u002Fbuild-blog-nuxt-content-tailwind.md",[157],"GitHub OpenClaw Sumopod",[524,525,526],"style",{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}",{"title":67,"searchDepth":105,"depth":105,"links":528},[529,530,531,538,539,540],{"id":13,"depth":105,"text":14},{"id":55,"depth":105,"text":56},{"id":78,"depth":105,"text":79,"children":532},[533,534,535,536,537],{"id":83,"depth":111,"text":84},{"id":147,"depth":111,"text":148},{"id":215,"depth":111,"text":216},{"id":233,"depth":111,"text":234},{"id":240,"depth":111,"text":241},{"id":249,"depth":105,"text":250},{"id":345,"depth":105,"text":346},{"id":457,"depth":105,"text":458},"tech","2026-04-03","Tired of Medium dan WordPress? Bikin blog sendiri dengan Nuxt Content + Tailwind CSS. Markdown-based, dark mode, search, RSS — semuanya gratis dan kamu yang pegang kendali.","md","\u002Fimages\u002Fposts\u002Femail-setup-og.jpg",{},"\u002Ftech\u002Fbuild-blog-nuxt-content-tailwind","4",{"title":5,"description":543},"tech\u002Fbuild-blog-nuxt-content-tailwind",[552,553,554,555],"nuxt","blog","tailwind","tutorial","Rnd_WMFamrmqY_dqNOIuKLpu7jyXRAOgXFqO4pwz-Kw",1775317693189]