Unlocking SEO Potential - A Beginner's Guide to Nuxt.js Static Content Websites
With static HTML and the ultimate SEO support such as Sitemap, Feed, static websites are still a choice for those who like simplicity and minimum maintenance.
Introduction
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 can recommend for use in your static website. Nuxt.js is a free and open-source web application framework based on Vue.js, Node.js, Webpack, and Babel.js. The community support was fantastic, Evan You Creator of Vue.js, and all the people behind Nuxt are also great and supportive.
Static content in Nuxtjs can generate a wide variety of possible content and applications, even with data visualization using charts. Nuxtjs easily integrates plugins into your web projects portfolio.
Nuxt offers you built-in content generators and great community modules, that 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.
Front matter in static website generators is provided to writer to setup their content. This is the sample of front matter in Nuxt.js
---
title: Getting Started with Nuxt.js Content, an Alternative for Static Websites and Upload to Free Hosting
description: And of course, the blaze fast-loading HTML with the ultimate SEO support such as Sitemap, static websites are still a choice for those who like simplicity and minimum maintenance.
img: https://cdn-images-1.medium.com/max/1600/0*_xKYdKt9m0joUxvO
alt: Person blogging on probably a static website
author:
name: Dykraf
bio: Theme Author and Developer
img: static/img/logo.jpg
tags:
- web development
- nuxtjs
- seo
---
All I have to do is having a Git repo (Bitbucket/Github) account, write my stuff and commit the changes. With some adjustment and setting in Netlify, it will handle the rest for deploying your new content to the public. That's it, and I could have my content on my Git repo as a backup also. No server or database, just plain text files. Cheers!
Getting Started
Start the Nuxt.js project with node module packages such as @nuxt/content and other supporting packages in package.json below the list of the packages:
{
"name": "nuxt-static-content",
"version": "1.0.0",
"description": "Static Content from Nuxt.js Official",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"lint:js": "eslint --ext .js,.vue --ignore-path .gitignore .",
"lint:style": "stylelint **/*.{vue,css} --ignore-path .gitignore",
"lint": "yarn lint:js && yarn lint:style"
},
"lint-staged": {
"*.{js,vue}": "eslint",
"*.{css,vue}": "stylelint"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"dependencies": {
"@nuxt/content": "^1.11.1",
"nuxt": "^2.14.12",
"prism-themes": "1.5.0"
},
"devDependencies": {
"@nuxtjs/amp": "^0.5.4",
"@nuxtjs/date-fns": "^1.5.0",
"@nuxtjs/eslint-config": "^5.0.0",
"@nuxtjs/eslint-module": "^3.0.2",
"@nuxtjs/google-analytics": "^2.4.0",
"@nuxtjs/stylelint-module": "4.0.0",
"@nuxtjs/sitemap": "^2.4.0",
"@nuxtjs/tailwindcss": "^3.4.2",
"babel-eslint": "10.1.0",
"eslint": "^7.17.0",
"eslint-config-prettier": "^7.1.0",
"eslint-plugin-nuxt": "^2.0.0",
"eslint-plugin-prettier": "^3.3.1",
"husky": "^4.3.7",
"lint-staged": "^10.5.3",
"prettier": "^2.2.1",
"stylelint": "13.8.0",
"stylelint-config-prettier": "8.0.2",
"stylelint-config-standard": "20.0.0"
},
"browserslist": [
">0.3%",
"not ie 11",
"not dead",
"not op_mini all",
"last 3 version",
"Chrome >= 35",
"Firefox >= 38",
"Edge >= 10",
"Explorer >= 10",
"ie >= 10",
"iOS >= 8",
"Safari >= 8",
"Android 2.3",
"Android >= 4",
"Opera >= 12"
]
}
I added browserslist because by default Nuxt.js already had postcss autoprefixer for browsers prefixes.
Also, we need to write some config for the modules in nuxt.config.js to set up the target content and build target:
export default {
modules: [
// Doc: https://github.com/nuxt/content
'@nuxt/content',
// Doc: https://sitemap.nuxtjs.org/guide/setup
'@nuxtjs/sitemap'
],
content: {
markdown: {
prism: {
theme: 'prism-themes/themes/prism-material-oceanic.css'
}
},
nestedProperties: ['author.name']
}
}
Directory structures:
Several things to highlight are; it has a little bit different structures when using Nuxt.js as a site static content generator. As we will using text files for our contents, the modules will be reading contents in a directory called /contents. This directory will be the place for all of our content.
.
├── README.md
├── assets
│ └── README.md
├── components
│ ├── ColorMode.vue
│ ├── Footer
│ │ └── Footer.vue
│ ├── Header
│ │ └── Header.vue
│ ├── Logo.vue
│ ├── Navigation
│ │ ├── Bottom.vue
│ │ └── Top.vue
│ └── README.md
├── content
│ ├── articles
│ │ ├── write-first-article-in-this-website.md
│ │ └── write-second-article-in-this-website.md
│ └── pages
│ ├── about.md
│ ├── homepage.md
│ └── services.md
├── jest.config.js
├── layouts
│ ├── README.md
│ └── default.vue
├── middleware
│ └── README.md
├── nuxt.config.js
├── package.json
├── pages
│ ├── README.md
│ ├── dashboard.vue
│ └── index.vue
├── plugins
│ └── README.md
├── static
│ ├── README.md
│ └── favicon.ico
├── store
│ └── README.md
├── tailwind.config.js
├── test
│ └── Logo.spec.js
└── yarn.lock
15 directories, 30 files
Nuxt.js Content
For this use, I am using Markdown .md files for the data source contents. Markdown is a lightweight markup language use in a plain text editor. The used of Markdown files typically for technical documentations. But in any circumstances they can be use for any kind of text based contents. Read furthermore about Markdown in here. Yes, people! .md (Markdown) is the developer's best friend.
Nuxt.js has a feature to support customizable HTML Head tags, these include title, description, and other head tags.
To support friendly SEO Head tags, we can just put all the necessary items into a component and import it as a default SEO Head component to use in any Nuxt.js pages. The head() will return any HTML Head tags that are defined in the returning objects. You can write a file in ./components/SeoHead.vue and put all the SEO head tags in it.
For a more optimized way, you can put all the SEO Head Tags in just one component ./components/SeoHead.vue and call them on the layout and the Nuxt.js pages:
Import ./components/SeoHead.vue and write all the SEO head tags content in the Nuxt.js SEO Head Tag component in the Nuxt.js pages:
Here is the sample on GitHub of the Nuxt.js SEO Head components and here is the demo
Writing Contents
Each content will be in the ./contents directory, and will be served as other contents if you add any directory and .md inside it. The most important was always to put the front matter on top of the files.
Create a Homepage.md file in ./pages and the front-matter for the page following the Markdown content below it:
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.
Serving Static Contents
The HTML static pages will be built and generated in the /dist directory. In the terminal to serving the static content pages type yarn generate or npm run generate and wait until it finishes and then type yarn start or npm run start. That's it, your static website is ready to visit.
Upload to Free Hosting
There 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 the 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.
Netlify project setting in a repository host:
Vercel project setting in a repository host:
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 a great limited free hosting to getting started your website online with great CLI commands. Install the CLI node package and ready to upload your website online and follow the instruction for login 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.
You can learn more about the services provided by Vercel and Netlify by reading our blog post titled Vercel and Netlify Platforms: A Complete Comparison and Similarities.
If all went well all you have to do is just type vercel --prod or netlify deploy --dir=dist --prod in your project root directory for uploading your website into production.
Or for a better workflow, you could just connect your website repository (Github, Bitbucket, and others) into Vercel project settings and set some things (.env, branch, and others) and Vercel will automate the website deployment from your commit changes written from the repository.
There are several ways to deploy your Nuxtjs static content website, you could use you own server, any hosting service provider or use free static website hosting like Vercel and Netlify.
I have been using these hosting service provider for quite some time for publish several of my web projects. As a web developer, these hosting providers have been extremely helpful in terms of hosting my static websites.
For private server deployment, you can utilize PM2 for Node.js process management when deploying your Nuxt.js or Next.js web application. You can find more information in our blog here.
Demos and source code
Visit this link for the demos on Nuxt.js static content website, and this link is for the source code.