Nuxt.js Dynamic Sitemap and Feed for Static Websites
The ultimate Nuxt.js modules that support Sitemap and Feed for static websites
I have a portfolio website that has blog pages and other common things that a website has. When using CMS like WordPress or Joomla and other generators, there is some requirement such as a server and database and some stuff to set up the domain.
For all the hype about Jamstack, Nuxt.js was one that I could recommend for use in your static website. Nuxt.js is a free open-source web application framework based on Vue.js, Node.js, Webpack, and Babel.js. The community support was fantastic, Evan You the creator of Vue.js, and all the people behind Nuxt are also great and supportive.
Nuxt.js offers you built-in content generators and great community modules, so you do not have to have a database to store your contents, all you need is just a plain markdown .md or just text files, and a Node.js runtime on your computer. It is great for static sites, documentation, or blog site.
Front Matter in static website generators is provided to a writer to set up their content just like in Jekyll or Gatsby. This is the sample of the front matter in Nuxt.js content:
All I have to do is have a Git repo (Bitbucket/Github) account, write my stuff, and commit the changes. With some adjustments and settings in Netlify or Vercel, it will handle the rest for deploying my new content to the public. That’s it, and I could also have my content on my Git repo as a backup. No server or database, just plain text files. Cheers!
Getting Started
Start the Nuxt.js project with node module packages to add some Nuxt.js handy modules such as @nuxt/content , @nuxtjs/sitemap and other supporting packages in package.json below are the list of the packages:
I added browerslist because by default Nuxt.js already had PostCSS with Autoprefixer built-in for browser prefixes.
Also, we need to write some config for the Feed and Sitemap modules in nuxt.config.js to set up the target content and builds:
Directory structures
Several highlight areas have different structures when using Nuxt.js as a site static content generator. As we will use text files for our contents, the modules will be reading contents in a directory called /content. This directory will be the place for all of our content.
Next, I will import the functions into nuxt.config.js and place them in their own sections:
Write sitemap setup in nuxt.config.js to read all sitemap routes:
Now when you execute yarn build or yarn generate and lastly, you type yarn start the Nuxt.js will generate and serve your sitemap.xml and feed.xml in your static website root directory just in the example below:
When you browse feed.xml with chrome, the browser will detect the xml and will pop up the RSS feed reader on the screen, just like in this screenshot:
Nuxt.js Content
For this use, I am using Markdown .md files for the data source contents. Markdown is a lightweight markup language used in a plain text editor. The use of Markdown files is typically for technical documentation. But in any circumstances, they can be used for any kind of text-based content. Read furthermore about Markdown here.
Writing Contents
Each content will be in the ./contents directory and will be served as other content if you add any files in the directory with .md extension inside it. The most important was always to put the front-matter on top of the content files.
Note: Whenever creating content such as
.mdfiles, the files will also hold your content slug url page. Be very careful on naming.mdcontent files, it might be lost on 404 not found page warning in the search engine result if you decided to rename the contents. Unless you have an alternative slug naming field this will be not a problem or you have your own error handling on page not found.
Create homepage content and the front matter ./content/homepage.md :
Serving Static Contents
The HTML static pages will be built and generated in the /dist directory. In the terminal to serve the static content pages type yarn generate or npm run generate and wait until it finishes and then types yarn start or npm run start. That’s it, your static website is ready to visit.
Upload to Free Hosting
There are several ways to upload your website, you could use any hosting service provider or you could use free static website hosting like Vercel and Netlify. Both of these hosts provide free SSL (Secure Sockets Layer) certificates for free and let your website have https:// which is excellent for search engines to improve your website rankings.
Both Vercel and Netlify hosting have built-in features to scan and read your project repository on any git-hosted server. All you have to do is sign-up to their website, set up permission on reading your git-hosted repository, point, and select to set up any project that you want to serve on the host. Typically they had an automatic detection of what framework you have on the project repository.
To set up the Nuxt.js project into these static hosts, all we need is the generate, build and the start command.
If you push your code changes into the main repository of the project for example main or master branch will be triggered into build mode and pushed into the production build.
Free was not always free, there is some limitation that you could have in your hosting. Some host providers such as Netlify and Vercel have great limited free hosting to get started your website online. Install the CLI node package, upload your website online, and follow the instructions for logging in to your hosting account. If using Vercel npm i -g vercel or npm install netlify-cli -g for Netlify and set up your login account session.
If all went well all you have to do in the terminal is just type vercel --prod or netlify deploy --dir=dist --prod in your project root directory for uploading your website into the production host.
Read also
The Sitemap and the Feed module in Nuxt.js are really handy for adding SEO and accessibility tools to your website. A static website with Nuxt.js is a choice for some people to begin with.
That is all from me, I hope this will give you insight for your next web development in Nuxt.js.
You can get full access to every story on Medium for just $5/month by signing up through this link.
Your membership fee will directly support me and other writers on Medium to keep creating helpful content for you. :)
