[{"data":1,"prerenderedAt":261},["ShallowReactive",2],{"blog-post-/blog/deploy-nuxt-for-github-pages/":3},{"id":4,"title":5,"body":6,"description":238,"extension":239,"meta":240,"navigation":255,"path":256,"seo":257,"sitemap":258,"stem":259,"__hash__":260},"content/blog/deploy-nuxt-for-github-pages.md","Deploying a Nuxt 3 Project on GitHub Pages",{"type":7,"value":8,"toc":227},"minimark",[9,13,17,22,27,30,56,59,73,80,84,87,91,109,113,168,172,186,190,197,201,220,223],[10,11,5],"h1",{"id":12},"deploying-a-nuxt-3-project-on-github-pages",[14,15,16],"p",{},"In order to publish this blog project I prepared with Nuxt 3, I went through many sources and finally learned to publish the Nuxt 3 project on GitHub Pages. Since it is not available in many places, I will show you.",[18,19,21],"h2",{"id":20},"steps-to-deploy-a-nuxt-3-project-on-github-pages","Steps to Deploy a Nuxt 3 Project on GitHub Pages",[23,24,26],"h3",{"id":25},"_1-generate-static-files","1. Generate static files",[14,28,29],{},"For Server Side Rendering (SSR):",[31,32,37],"pre",{"className":33,"code":34,"language":35,"meta":36,"style":36},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npm run build\n","bash","",[38,39,40],"code",{"__ignoreMap":36},[41,42,45,49,53],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sBMFI","npm",[41,50,52],{"class":51},"sfazB"," run",[41,54,55],{"class":51}," build\n",[14,57,58],{},"For Static Generation:",[31,60,62],{"className":33,"code":61,"language":35,"meta":36,"style":36},"npm run generate\n",[38,63,64],{"__ignoreMap":36},[41,65,66,68,70],{"class":43,"line":44},[41,67,48],{"class":47},[41,69,52],{"class":51},[41,71,72],{"class":51}," generate\n",[14,74,75,76,79],{},"This creates a ",[38,77,78],{},"dist"," folder with the generated static files.",[23,81,83],{"id":82},"_2-create-a-github-repository","2. Create a GitHub repository",[14,85,86],{},"Create a new repository on GitHub and initialize it with a README file.",[23,88,90],{"id":89},"_3-install-gh-pages","3. Install gh-pages",[31,92,94],{"className":33,"code":93,"language":35,"meta":36,"style":36},"npm install gh-pages --save-dev\n",[38,95,96],{"__ignoreMap":36},[41,97,98,100,103,106],{"class":43,"line":44},[41,99,48],{"class":47},[41,101,102],{"class":51}," install",[41,104,105],{"class":51}," gh-pages",[41,107,108],{"class":51}," --save-dev\n",[23,110,112],{"id":111},"_4-add-deploy-script-to-packagejson","4. Add deploy script to package.json",[31,114,118],{"className":115,"code":116,"language":117,"meta":36,"style":36},"language-json shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\"scripts\": {\n  \"deploy\": \"gh-pages -d dist\"\n}\n","json",[38,119,120,138,162],{"__ignoreMap":36},[41,121,122,126,129,131,135],{"class":43,"line":44},[41,123,125],{"class":124},"sMK4o","\"",[41,127,128],{"class":51},"scripts",[41,130,125],{"class":124},[41,132,134],{"class":133},"sTEyZ",": ",[41,136,137],{"class":124},"{\n",[41,139,141,144,148,150,153,156,159],{"class":43,"line":140},2,[41,142,143],{"class":124},"  \"",[41,145,147],{"class":146},"spNyl","deploy",[41,149,125],{"class":124},[41,151,152],{"class":124},":",[41,154,155],{"class":124}," \"",[41,157,158],{"class":51},"gh-pages -d dist",[41,160,161],{"class":124},"\"\n",[41,163,165],{"class":43,"line":164},3,[41,166,167],{"class":124},"}\n",[23,169,171],{"id":170},"_5-deploy","5. Deploy",[31,173,175],{"className":33,"code":174,"language":35,"meta":36,"style":36},"npm run deploy\n",[38,176,177],{"__ignoreMap":36},[41,178,179,181,183],{"class":43,"line":44},[41,180,48],{"class":47},[41,182,52],{"class":51},[41,184,185],{"class":51}," deploy\n",[23,187,189],{"id":188},"_6-configure-github-pages-source","6. Configure GitHub Pages source",[14,191,192,193,196],{},"Go to your repository Settings → Pages → select the ",[38,194,195],{},"gh-pages"," branch as your source.",[23,198,200],{"id":199},"_7-add-nojekyll-file","7. Add .nojekyll file",[14,202,203,207,208,211,212,215,216,219],{},[204,205,206],"strong",{},"Important:"," Add an empty file named ",[38,209,210],{},".nojekyll"," to the root of your GitHub Pages branch. Without this, GitHub Pages will ignore files starting with ",[38,213,214],{},"_"," (like Nuxt's ",[38,217,218],{},"_nuxt"," folder).",[14,221,222],{},"Once you complete the deployment, your GitHub Pages site will be live!",[224,225,226],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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 .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}",{"title":36,"searchDepth":140,"depth":140,"links":228},[229],{"id":20,"depth":140,"text":21,"children":230},[231,232,233,234,235,236,237],{"id":25,"depth":164,"text":26},{"id":82,"depth":164,"text":83},{"id":89,"depth":164,"text":90},{"id":111,"depth":164,"text":112},{"id":170,"depth":164,"text":171},{"id":188,"depth":164,"text":189},{"id":199,"depth":164,"text":200},"Step-by-step guide to deploy a Nuxt 3 project on GitHub Pages using gh-pages. Covers static generation, .nojekyll file, and GitHub Actions configuration.","md",{"author":241,"date":242,"image":243,"category":244,"tags":245,"featured":254,"draft":254},"Aysegul Karadan","2023-02-21T10:00:00.000Z","/img/Nuxt3-Github-pages/Picture1.png","Web Development",[246,247,248,195,249,250,251,252,253],"nuxt","github-pages","deployment","nuxt3-deploy","deploy-nuxt-github-pages","how-to-deploy-nuxt3","nuxt3-static-generation","github-pages-nuxt3",false,true,"/blog/deploy-nuxt-for-github-pages",{"title":5,"description":238},{"loc":256},"blog/deploy-nuxt-for-github-pages","aTAvHJZRK-izZ3HDBj8ZhQnCd7gbS6odW2Dh1PjcXlQ",1782986781100]