[{"data":1,"prerenderedAt":424},["ShallowReactive",2],{"blog-\u002Fblog\u002Fcreating-a-static-blog-with-nuxt":3,"$f35yj0940chm6n":417},{"id":4,"title":5,"author":6,"backfeed":7,"body":9,"date":407,"description":408,"draft":8,"extension":334,"meta":409,"navigation":155,"path":410,"reply":411,"seo":412,"shortId":413,"sitemap":414,"stem":415,"__hash__":416},"blog\u002Fblog\u002Fcreating-a-static-blog-with-nuxt.md","Creating a Static Blog with Nuxt","Sylvester Duda",{"twitter":8,"github":8,"mastodon":8,"flickr":8},false,{"type":10,"value":11,"toc":399},"minimark",[12,16,21,33,37,48,59,63,74,78,89,95,109,249,260,323,330,347,358,362,369,382,386,395],[13,14,15],"p",{},"There comes a time when we finally get around to setting up that new blog\u002Fsite that we have always wanted to create. For whatever reason we may have wanted to create one, to market oneself, to have an online journal, to publicly display and talk about our portfolio, to consolidate the engagement we get online, etc., the hardest part can be figuring out how we want to host or deploy it. So in this post I am going to talk about my thought process and how I went about it",[17,18,20],"h2",{"id":19},"choosing-nuxt","Choosing Nuxt",[13,22,23,24,28,29,32],{},"Over the past 5 years, I have worked extenively in Vue and Nuxt and I ",[25,26,27],"strong",{},"love"," both frameworks. Vue, in my opinion, lowers the barrier of entry to modern web design as we know it compared to other popular web development frameworks like React and Angular. Nuxt is built on Vue to host a Server-Side Rendered version of your Vue web app, but we're here to talk about ",[25,30,31],{},"static sites",". Over the years, Nuxt's static site generation has gotten better and better. This site was entirely built with Nuxt and some of Nuxt's official modules or \"add-ons\".",[17,34,36],{"id":35},"installing-nuxt","Installing Nuxt",[13,38,39,40,47],{},"To install the latest and most powerful version of Nuxt (v3) start by following Nuxt's installation guide ",[41,42,46],"a",{"href":43,"rel":44},"https:\u002F\u002Fv3.nuxtjs.org\u002Fgetting-started\u002Finstallation\u002F",[45],"nofollow","here"," or just follow along below:",[49,50,55],"pre",{"className":51,"code":53,"language":54},[52],"language-text","npx nuxi init nuxt-app\ncd nuxt-app\nnpm install\nnpm run dev\n","text",[56,57,53],"code",{"__ignoreMap":58},"",[17,60,62],{"id":61},"choosing-content","Choosing Content",[13,64,65,66,69,70,73],{},"Tada 🎉, we have a working Nuxt web app! But out of the box, Nuxt does not give us good tools to write blog content. If we take a look at modern blog examples, each paragraph, heading, list, code block, etc. is wrapped with some html and styling. Just imagine having to wrap every single piece of your content with html code every single time! Seems tedious, right? We want some kind of add-on that allows us to write in plain-text or more specifically ",[25,67,68],{},"markdown"," that will get converted to HTML on build. We're in luck! There is an official Nuxt package that we can use called ",[56,71,72],{},"@nuxt\u002Fcontent",".",[17,75,77],{"id":76},"installing-content","Installing Content",[13,79,80,81,83,84,88],{},"You can install ",[56,82,72],{}," by following the installation guide for Nuxt v3 ",[41,85,46],{"href":86,"rel":87},"https:\u002F\u002Fcontent.nuxtjs.org\u002Fget-started",[45]," or you can follow along below:",[49,90,93],{"className":91,"code":92,"language":54},[52],"npm install --save-dev @nuxt\u002Fcontent\ncd nuxt-app\nnpm install\nnpm run dev\n",[56,94,92],{"__ignoreMap":58},[13,96,97,98,100,101,104,105,108],{},"Then, add ",[56,99,72],{}," to the ",[56,102,103],{},"modules"," section of ",[56,106,107],{},"nuxt.config.ts",":",[49,110,114],{"className":111,"code":112,"language":113,"meta":58,"style":58},"language-ts shiki shiki-themes material-theme-lighter github-light github-dark","import { defineNuxtConfig } from 'nuxt'\n\nexport default defineNuxtConfig({  \n    modules: [    \n        '@nuxt\u002Fcontent'  \n    ],  \n    content: {    \n        \u002F\u002F https:\u002F\u002Fcontent.nuxtjs.org\u002Fapi\u002Fconfiguration  \n    }\n})\n","ts",[56,115,116,150,157,178,190,203,214,227,234,240],{"__ignoreMap":58},[117,118,121,125,129,133,136,139,143,147],"span",{"class":119,"line":120},"line",1,[117,122,124],{"class":123},"sVHd0","import",[117,126,128],{"class":127},"sP7_E"," {",[117,130,132],{"class":131},"su5hD"," defineNuxtConfig",[117,134,135],{"class":127}," }",[117,137,138],{"class":123}," from",[117,140,142],{"class":141},"sjJ54"," '",[117,144,146],{"class":145},"s_sjI","nuxt",[117,148,149],{"class":141},"'\n",[117,151,153],{"class":119,"line":152},2,[117,154,156],{"emptyLinePlaceholder":155},true,"\n",[117,158,160,163,166,169,172,175],{"class":119,"line":159},3,[117,161,162],{"class":123},"export",[117,164,165],{"class":123}," default",[117,167,132],{"class":168},"sGLFI",[117,170,171],{"class":131},"(",[117,173,174],{"class":127},"{",[117,176,177],{"class":131},"  \n",[117,179,181,185,187],{"class":119,"line":180},4,[117,182,184],{"class":183},"skxfh","    modules",[117,186,108],{"class":127},[117,188,189],{"class":131}," [    \n",[117,191,193,196,198,201],{"class":119,"line":192},5,[117,194,195],{"class":141},"        '",[117,197,72],{"class":145},[117,199,200],{"class":141},"'",[117,202,177],{"class":131},[117,204,206,209,212],{"class":119,"line":205},6,[117,207,208],{"class":131},"    ]",[117,210,211],{"class":127},",",[117,213,177],{"class":131},[117,215,217,220,222,224],{"class":119,"line":216},7,[117,218,219],{"class":183},"    content",[117,221,108],{"class":127},[117,223,128],{"class":127},[117,225,226],{"class":131},"    \n",[117,228,230],{"class":119,"line":229},8,[117,231,233],{"class":232},"sutJx","        \u002F\u002F https:\u002F\u002Fcontent.nuxtjs.org\u002Fapi\u002Fconfiguration  \n",[117,235,237],{"class":119,"line":236},9,[117,238,239],{"class":127},"    }\n",[117,241,243,246],{"class":119,"line":242},10,[117,244,245],{"class":127},"}",[117,247,248],{"class":131},")\n",[13,250,251,252,255,256,259],{},"Create a catch-all document in your ",[56,253,254],{},"pages\u002F"," directory called ",[56,257,258],{},"[...slug].vue"," and add the following code:",[49,261,265],{"className":262,"code":263,"language":264,"meta":58,"style":58},"language-vue shiki shiki-themes material-theme-lighter github-light github-dark","\u003Ctemplate>\n    \u003Cmain>    \n        \u003CContentDoc \u002F>  \n    \u003C\u002Fmain>\n\u003C\u002Ftemplate>\n","vue",[56,266,267,279,292,305,314],{"__ignoreMap":58},[117,268,269,272,276],{"class":119,"line":120},[117,270,271],{"class":127},"\u003C",[117,273,275],{"class":274},"sQzsp","template",[117,277,278],{"class":127},">\n",[117,280,281,284,287,290],{"class":119,"line":152},[117,282,283],{"class":127},"    \u003C",[117,285,286],{"class":274},"main",[117,288,289],{"class":127},">",[117,291,226],{"class":131},[117,293,294,297,300,303],{"class":119,"line":159},[117,295,296],{"class":127},"        \u003C",[117,298,299],{"class":274},"ContentDoc",[117,301,302],{"class":127}," \u002F>",[117,304,177],{"class":131},[117,306,307,310,312],{"class":119,"line":180},[117,308,309],{"class":127},"    \u003C\u002F",[117,311,286],{"class":274},[117,313,278],{"class":127},[117,315,316,319,321],{"class":119,"line":192},[117,317,318],{"class":127},"\u003C\u002F",[117,320,275],{"class":274},[117,322,278],{"class":127},[13,324,325,326,329],{},"Place your markdown files inside the ",[56,327,328],{},"content\u002F"," directory in the root directory of your project.",[49,331,335],{"className":332,"code":333,"language":334,"meta":58,"style":58},"language-md shiki shiki-themes material-theme-lighter github-light github-dark","# Hello Content\n","md",[56,336,337],{"__ignoreMap":58},[117,338,339,343],{"class":119,"line":120},[117,340,342],{"class":341},"sDZcc","# ",[117,344,346],{"class":345},"s4Q2S","Hello Content\n",[13,348,349,350,352,353,73],{},"If your app is still running in development, you should be able to now route to the title of the markdown file in your local dev server. For more information about how routing works with ",[56,351,72],{}," check the ",[41,354,357],{"href":355,"rel":356},"https:\u002F\u002Fcontent.nuxtjs.org\u002Fguide\u002Fwriting\u002Fcontent-directory",[45],"content directory docs",[17,359,361],{"id":360},"final-build","Final Build",[13,363,364,365,368],{},"In order to generate your full static site you will need to run ",[56,366,367],{},"nuxi run generate",". You may notice that some of your content files are not included in your final build.",[13,370,371,372,374,375,378,379,381],{},"This is because, by default, ",[56,373,72],{}," does not build any files within content that are not referenced anywhere else in your project meaning you must use a ",[56,376,377],{},"NuxtLink"," or a direct link to it somewhere in your project. To get around this you can add each file that you want to include in your ",[56,380,107],{}," file. This is not ideal and in a later post we will automate this and add new features.",[17,383,385],{"id":384},"deployment","Deployment",[13,387,388,389,394],{},"There are a couple of ways that you can deploy your app to the web. The easiest of these is to follow Nuxt's ",[41,390,393],{"href":391,"rel":392},"https:\u002F\u002Fv3.nuxtjs.org\u002Fguide\u002Fdeploy\u002Fpresets#deployment-presets",[45],"guide"," on pushing apps. In a later blog post, we will go over nginx configurations that will allow us to serve our content much faster than these methods can.",[396,397,398],"style",{},"html pre.shiki code .sVHd0, html code.shiki .sVHd0{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#D73A49;--shiki-default-font-style:inherit;--shiki-dark:#F97583;--shiki-dark-font-style:inherit}html pre.shiki code .sP7_E, html code.shiki .sP7_E{--shiki-light:#39ADB5;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .su5hD, html code.shiki .su5hD{--shiki-light:#90A4AE;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sjJ54, html code.shiki .sjJ54{--shiki-light:#39ADB5;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s_sjI, html code.shiki .s_sjI{--shiki-light:#91B859;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sGLFI, html code.shiki .sGLFI{--shiki-light:#6182B8;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .skxfh, html code.shiki .skxfh{--shiki-light:#E53935;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sutJx, html code.shiki .sutJx{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#6A737D;--shiki-default-font-style:inherit;--shiki-dark:#6A737D;--shiki-dark-font-style:inherit}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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 .sQzsp, html code.shiki .sQzsp{--shiki-light:#E53935;--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sDZcc, html code.shiki .sDZcc{--shiki-light:#39ADB5;--shiki-light-font-weight:inherit;--shiki-default:#005CC5;--shiki-default-font-weight:bold;--shiki-dark:#79B8FF;--shiki-dark-font-weight:bold}html pre.shiki code .s4Q2S, html code.shiki .s4Q2S{--shiki-light:#E2931D;--shiki-light-font-weight:inherit;--shiki-default:#005CC5;--shiki-default-font-weight:bold;--shiki-dark:#79B8FF;--shiki-dark-font-weight:bold}",{"title":58,"searchDepth":159,"depth":159,"links":400},[401,402,403,404,405,406],{"id":19,"depth":152,"text":20},{"id":35,"depth":152,"text":36},{"id":61,"depth":152,"text":62},{"id":76,"depth":152,"text":77},{"id":360,"depth":152,"text":361},{"id":384,"depth":152,"text":385},1663366162000,"A guide to building a blogging site from scratch with Nuxt and Nuxt Content",{},"\u002Fblog\u002Fcreating-a-static-blog-with-nuxt",null,{"title":5,"description":408},"u8gO",{"loc":410},"blog\u002Fcreating-a-static-blog-with-nuxt","pogU4ypMqEu0uop5Xwzyz50Gu_Ty_Zk_z3Bey2rJtaU",{"type":418,"name":419,"children":420,"paging":421},"feed","Webmentions",[],{"per-page":422,"page":423,"total":423,"total-pages":423},20,0,1792276862180]