[{"data":1,"prerenderedAt":331},["ShallowReactive",2],{"lastUpdated":3,"blog-nuxt4-alicerce-en":4},"2026-09-08",{"post":5,"displayLang":330,"isFallback":319,"hasOtherLang":317},{"id":6,"title":7,"body":8,"category":313,"date":314,"description":315,"extension":316,"featured":317,"meta":318,"navigation":317,"path":320,"seo":321,"stem":322,"tags":323,"__hash__":329},"blog_en/en/blog/nuxt4-alicerce.md","Welcome to My First Blog Post! And My Site is Finally Live!",{"type":9,"value":10,"toc":305},"minimark",[11,16,20,28,33,41,48,51,55,61,73,82,87,90,125,224,228,235,238,263,271,275,282,298,301],[12,13,15],"h1",{"id":14},"building-my-portfolio-with-nuxt-4-and-nuxt-content","Building My Portfolio with Nuxt 4 and Nuxt Content",[17,18,19],"p",{},"It had been a very long time since I last maintained a personal website. If memory serves me right, the last time was years ago — perhaps hosted on good old GitHub Pages? It was something very simple, serving only to display my CV and nothing more.",[17,21,22,23,27],{},"Recently, I caught myself thinking: ",[24,25,26],"em",{},"\"Why not build a new one? But this time, something serious?\""," I decided to return to formal studies (a postgraduate degree), expand my presence in the tech community, stay updated, and put my work out into the world. The first logical step was having my own space on the internet.",[29,30,32],"h2",{"id":31},"the-challenge-simplicity-vs-functionality","The Challenge: Simplicity vs. Functionality",[17,34,35,36,40],{},"The premise was clear: the website needed to be ",[37,38,39],"strong",{},"simple to maintain",", but I wanted it to function like a full CMS (Content Management System).",[17,42,43,44,47],{},"Building one from scratch with a custom database, API, and admin dashboard? Sure, AI all the way! But five minutes later, reality hit: ",[24,45,46],{},"\"Wait... what a chore. It has to stay simple!\"",".",[17,49,50],{},"The classic alternative would be WordPress. However, I wanted to stay within the modern web ecosystem and tech stack I use daily as a Software Engineer. I started brainstorming with AI tools (specifically Gemini) to explore architecture ideas, but no initial suggestion clicked. I wanted a live CV homepage, a project portfolio showcase, and a technical blog.",[29,52,54],{"id":53},"discovering-nuxt-content","Discovering Nuxt Content",[17,56,57,58],{},"Until I vaguely remembered a Nuxt extension I had seen in the past. I asked the AI about it, and the answer was immediate: ",[37,59,60],{},"Nuxt Content!",[17,62,63,64,67,68,72],{},"Reading through the documentation, I realized it did ",[37,65,66],{},"exactly"," what I wanted: it transformed Markdown (",[69,70,71],"code",{},".md",") files and YAML Frontmatter into highly optimized HTML. It was the perfect marriage between the Developer Experience (DX) I wanted and the publishing simplicity I needed.",[74,75,76],"blockquote",{},[17,77,78,81],{},[37,79,80],{},"💡 The Secret Sauce:"," With Nuxt Content v3, the site behaves like a complete static CMS. Zero database, zero maintenance headache. Content is processed at build time (SSG), guaranteeing a 100 score on Lighthouse performance.",[83,84,86],"h3",{"id":85},"the-technical-stack-i-chose","The Technical Stack I Chose",[17,88,89],{},"To bring this idea to life, the foundation was built with the best tools in the Vue ecosystem:",[91,92,93,104,113,119],"ul",{},[94,95,96,99,100,103],"li",{},[37,97,98],{},"Nuxt 4:"," Taking advantage of the new folder structure (",[69,101,102],{},"app/",") that logically separates application code from configuration.",[94,105,106,109,110,112],{},[37,107,108],{},"Nuxt Content v3:"," The engine that parses ",[69,111,71],{}," files and provides type-safe content directly to Vue components.",[94,114,115,118],{},[37,116,117],{},"Tailwind CSS + Typography Plugin:"," Ensuring markdown-rendered HTML looks clean, responsive, and dark-mode friendly effortlessly.",[94,120,121,124],{},[37,122,123],{},"Shiki:"," High-quality syntax highlighting for code blocks.",[126,127,132],"pre",{"className":128,"code":129,"language":130,"meta":131,"style":131},"language-typescript shiki shiki-themes github-light github-dark","// Example of how clean code blocks render in posts!\nconst techStack: string[] = ['Nuxt 4', 'Nuxt Content', 'Tailwind', 'Shiki'];\nconst isHappy = techStack.every(tech => tech.isAwesome);\n","typescript","",[69,133,134,143,193],{"__ignoreMap":131},[135,136,139],"span",{"class":137,"line":138},"line",1,[135,140,142],{"class":141},"sJ8bj","// Example of how clean code blocks render in posts!\n",[135,144,146,150,154,157,160,164,167,170,174,177,180,182,185,187,190],{"class":137,"line":145},2,[135,147,149],{"class":148},"szBVR","const",[135,151,153],{"class":152},"sj4cs"," techStack",[135,155,156],{"class":148},":",[135,158,159],{"class":152}," string",[135,161,163],{"class":162},"sVt8B","[] ",[135,165,166],{"class":148},"=",[135,168,169],{"class":162}," [",[135,171,173],{"class":172},"sZZnC","'Nuxt 4'",[135,175,176],{"class":162},", ",[135,178,179],{"class":172},"'Nuxt Content'",[135,181,176],{"class":162},[135,183,184],{"class":172},"'Tailwind'",[135,186,176],{"class":162},[135,188,189],{"class":172},"'Shiki'",[135,191,192],{"class":162},"];\n",[135,194,196,198,201,204,207,211,214,218,221],{"class":137,"line":195},3,[135,197,149],{"class":148},[135,199,200],{"class":152}," isHappy",[135,202,203],{"class":148}," =",[135,205,206],{"class":162}," techStack.",[135,208,210],{"class":209},"sScJk","every",[135,212,213],{"class":162},"(",[135,215,217],{"class":216},"s4XuR","tech",[135,219,220],{"class":148}," =>",[135,222,223],{"class":162}," tech.isAwesome);\n",[29,225,227],{"id":226},"about-the-development-journey","About the Development Journey",[17,229,230,231,234],{},"The most interesting part of this journey was that it didn't take months of writing complex code or integrating obscure APIs. The real challenge was ",[37,232,233],{},"organizing information",", defining data structures (what fields the Markdown frontmatter required), and designing the site's Information Architecture.",[17,236,237],{},"Today, my workflow for publishing a new article or project is seamless:",[239,240,241,247,250,260],"ol",{},[94,242,243,244,246],{},"Copy and paste a pre-formatted ",[69,245,71],{}," template.",[94,248,249],{},"Write content naturally in my favorite markdown editor.",[94,251,252,253,256,257,47],{},"Run ",[69,254,255],{},"git commit"," and ",[69,258,259],{},"git push",[94,261,262],{},"My local Home Lab CI/CD intercepts the push and builds/deploys automatically.",[74,264,265],{},[17,266,267,270],{},[37,268,269],{},"⚠️ Spoiler Alert:"," Setting up my local Home Lab with GitLab CI and Node is a longer story that will definitely get a dedicated post in the future!",[29,272,274],{"id":273},"conclusion","Conclusion",[17,276,277,278,281],{},"I am extremely happy with the result. I built exactly what I wanted using tools I love, and the ongoing publishing workflow is completely frictionless. This portfolio is not just a site; it's a ",[24,279,280],{},"living lab"," where I can showcase my work and share insights.",[17,283,284,285,292,293,297],{},"I hope you enjoy browsing the site! Feel free to share your feedback. Reach out on ",[286,287,291],"a",{"href":288,"rel":289},"https://www.linkedin.com/in/rafadpedrosa",[290],"nofollow","LinkedIn"," or send me an email at (",[286,294,296],{"href":295},"mailto:rafadpedrosa@gmail.com","rafadpedrosa@gmail.com",").",[17,299,300],{},"Cheers!",[302,303,304],"style",{},"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 .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}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);}",{"title":131,"searchDepth":145,"depth":145,"links":306},[307,308,311,312],{"id":31,"depth":145,"text":32},{"id":53,"depth":145,"text":54,"children":309},[310],{"id":85,"depth":195,"text":86},{"id":226,"depth":145,"text":227},{"id":273,"depth":145,"text":274},"Web Development","2026-02-25","Building my headless static CMS website using Markdown, Nuxt 4, and Tailwind CSS.","md",true,{"isOnReview":319},false,"/en/blog/nuxt4-alicerce",{"title":7,"description":315},"en/blog/nuxt4-alicerce",[324,325,326,327,328],"Nuxt","Vue","Frontend","Static site","CMS","Jb-kl7R589250sy_Mb3z5HuphvgeIaSNaV1R23vs3ZQ","en",1789775732480]