A step-by-step guide for creating and deploying a website.
From time to time, people ask me to create a simple, SEO friendly website that’s both fast and good-looking. The first question that arises is: which technologies can help me to accomplish this?
In this article, we‘ll have a closer look at SEO, NuxtJS, and Netlify. In the end, you’ll be able to create a static search engine optimized website yourself. The website will be linked to your personal Git account and will be deployed to your website domain automatically.
SEO in short
SEO stands for search engine optimization. It is a collection of techniques that improve your website so that search engines can find it better. This means that search engines such as Google, Yahoo, Bing… can easily read your website and assess its value. Let’s take a look at the main pillars for SEO:
- Content: Of course, content is the main concern of your website. When you don’t have content, the search engines have nothing to read, its estimated value will be low and therefore your website will not be ranked high. No one knows what the ideal length for a webpage is. But according to this study, the average Google first page result contains 1,447 words.
- Keywords: These can range from a single word to an entire phrase. These keywords define the content of your website and make it possible for people to find your website on search engines. Think, for example of a balloon store. They will often use the word balloon and other words linked to what they sell on their website. In short, words that can lead your target audience to your website.
- Metatags: Within these tags, we define more information about the HTML page and the data we have. Previously mentioned keywords can be placed in here, along with the page title, character set, page description, author, etc. The metadata will not be visible to the user, but the browser will interpret it, and again, it is a way to optimize your site for search engines. More info can be found at the official Nuxt documentation about meta tags.
What is Nuxt.js?
NuxtJS is a framework on top of Vue. So if you’re familiar with Vue, you’re already one step ahead. But nothing to be feared, because Vue/Nuxt is lightweight, easy to learn, and pleasant to work with.
Nuxt allows you to use all the features Vue has and offers a lot of additional development features such as server-side rendering, generating static websites, automatically generating routes for every page, meta tags management, and SEO improvement.
Next up, we’ll zoom in on generating a static website. Nuxt helps us to generate our HTML pages and deliver them straight to the browser. This means that when a user/crawler visits our website, it will receive a fully rendered web page. The big advantage of this is that our webpage can be read easily by crawlers, which benefits search engine optimization.
Another advantage of a static website compared to single-page applications is the faster loading time. This has the greatest impact on slow devices or devices with a slow internet connection. There is no need to wait for all JavaScript to load and execute in order to display the web page. This will result in a better user experience.
How to create a Nuxt application?
To get started quickly, we use the create-nuxt-app package. It allows you to create a Nuxt project within seconds. In this example, I’ll use yarn as a package manager, but also npx or npm can do the trick.
yarn create nuxt-app <my-project>
The command-line interface will guide you through a couple of questions to configure the application. Most of these settings are not important at this moment and can be configured according to your preferences, except for the rendering mode and the deployment target. We want a static, SEO friendly website, so we choose Universal (SSR/SSG) as rendering mode and Static hosting as the deployment target.
Project Structure
After running this CLI-command we end up with a brand-new project. Let’s have a closer look at the project structure.
Nuxt assumes that we are new to the framework and gives an explanation for every directory it generates for us. This explanation can be found in each directory in the README.md file.
The most important directory to us at this moment is the pages directory. This directory contains our application views, simply said, every route or page we want on our website. The framework will read this directory and create a route for every vue file found in the directory.
Another file the framework generated is the nuxt.config.js file. When we open the file, the first thing we see is target: 'static' . This configuration property is derived from the deployment target we passed earlier in the CLI and is important when we’re going to make our application production-ready.
The framework also added some meta tags to the nuxt.config.js file which ensures that our basic website will be optimized for search engines from the beginning. We only have to change one little thing to make our website 100% SEO ready.
Have a look at this configuration:
head: {
title: 'nuxt-netlify-example',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
}
The description content is still empty. It’s important that we add a description here since the search engine will use this meta property to generate the description of the website and tell the users what the website is about. This is at a global level. Every property in here can also be defined on page-level, to have a more precise description for every page. If they are not defined on page-level, it will fall back to the global configuration.
How to check our SEO score?
Now you’re curious how well this website is going to score in terms of SEO, aren’t you? Let’s build it for local development and generate a Lighthouse report.
In the package.json we can find the scripts available for this project. The dev script will start a local dev-server that allows you to visit the website locally:
yarn dev
Visit the website at localhost:3000 , and open the page-inspector. Under the Lighthouse tab, we can generate a new desktop report on our website. One of the available categories is SEO, be sure to mark this one. Optionally you can also mark the other options because a statically generated website with Nuxt also scores very good on performance, best practices, and accessibility. Just uncheck the PWA option, since we’re not building a progressive web app. Then generate the report and wait for a few seconds…
Not bad at all, don’t you think? Our website scores 100 points out of 100. The framework delivered us the best score we can get, now it’s up to you to make sure this stays that way during the further development of your website.
How to deploy on Netlify?
The first step in the process of the Netlify deployment is pushing our website to a Git repository. Netlify supports GitHub, GitLab, and Bitbucket.
Visit https://app.netlify.com/ and login with the Git account where you just pushed your website. It’ll go through a few steps to set up your team.
When the Netlify team setup is done, you get access to the team-overview page. This is where you’re able to create a new site, guess what, by clicking on the New site from Git button. Netlify will ask for permissions to access your account which is needed to set up the deployment. When everything worked out as expected, you will get an overview of the projects present in your Git account, including the repository we pushed a few minutes ago.
After selecting your repository you need to configure the deployment settings for your website. Choose the branch for deployment, normally this would be main, but this can be configured differently if you want to.
Configuring the basic build settings will be sufficient, no need for the advanced settings in this case. The build command is one of the commands found in the package.json , preceded by the package manager of your choice (yarn/npm). For local development, we used the dev command. Now we want a production-ready application so we use another command, namely generate. This command will create a dist directory with everything inside ready to be deployed on Netlify. This will be the publish directory.
Just click on the deploy site button and go get a coffee while Netlify handles all the magic…
It takes Netlify about a minute to build and deploy your website. It provides you with a randomly generated domain. If you own a custom domain, just follow the getting started steps and add your domain. Netlify will handle the redirects and even HTTPS to secure your website automatically with a Let’s Encrypt certificate.
As of now, you can continue your development. Every push to main (or the custom deploy branch) will trigger a Netlify deploy and update the website directly on the live URL.
Conclusion
Today, websites are used more than ever before. Think of the grocery shop on the corner of your street. You want to know when they are open. The first thing you do is enter their shop name in Google hoping to find their website including opening hours. And then you can only hope for the best, namely that they have used Nuxt to generate their static, search engine optimized website because then it will appear as one of the top results… And if it doesn’t, it is a possible chance for you to go to this shop and fix it for them. By now, it should be clear that if you’re using Nuxt and Netlify it’s only a matter of minutes.
Wouter Adriaens
Frontend Crafter
Wouter Adriaens is Frontend Crafter and co-organizer of the BEL Vue (Vue.js) user group for Belgium with a Bachelor in Applied Computer Science. Wouter loves everything that has to do with building JavaScript based web applications and he has experience with Vue.js, Nuxt.js and Angular.
