You might be one of those developer who are looking where to deploy their portfolio websites. This tutorial will help you out on how to deploy your static website using Nuxt.js for free.

Why Cloudflare?

Cloudflare is renowned for its global CDN, security features, and performance optimization. With Cloudflare Pages, you can deploy static sites with ease, and Cloudflare Workers allow you to run JavaScript code on the edge, making it an excellent choice for serverless applications.

Step 1: Login to your cloudflare account

Go to the Cloudflare dashboard and log in. If you do not have an account yet, you can proceed to their Sign up page.

Step 2: Create a New Project

Navigate to the Workers & Pages section in the Cloudflare dashboard. Click Create

Step 3: Connect to Repository

We will be using repository, but you can directly upload your project. Cloudflare Pages integrates with GitHub, GitLab, and Bitbucket. Choose the appropriate option and authorize Cloudflare to access your repository. Select the repository containing your Nuxt.js project.

Step 4: Configure Your Build Settings

• For Build Command, use npm run build or yarn build (make sure this command is set to generate the static files in the dist directory).
• For Build Output Directory, set it to dist.

Step 5: Deploy your Site

Click Deploy Site. Cloudflare Pages will build and deploy your site, making it accessible via a Cloudflare subdomain.

Step 6: (Optional) Configure a Custom Domain

If you want to use a custom domain:

1. Add Your Domain: Go to the Custom Domains section in Cloudflare Pages and add your custom domain.
2. Update DNS Settings: Follow the instructions to update your DNS settings to point to Cloudflare’s servers.
3. Verify: Ensure that your domain points to the Cloudflare Pages deployment by visiting your site.

Conclusion

Deploying a Nuxt.js application to Cloudflare is a straightforward process that leverages Cloudflare’s powerful CDN and free hosting options. By following the steps outlined above, you can take advantage of Cloudflare Pages to serve your static Nuxt.js site with minimal cost and high performance. And if your project requires server-side functionality, Cloudflare Workers provide a versatile platform to handle more complex tasks.

Happy deployment!