Building Static Websites With NUXT.js

A static website is a website that will be served to the client with static assets of HTML, CSS, and JavaScript without any database or CMS. Here, there will be no time taken between the browser requesting a webpage and the time the webpage is received since there is no calculation done between.

If you have ever ‘saved’ a webpage with a .html extension, it is static. You just double-click on it and the file will open with the information inside.

Creating a static website yourself is a challenge though. However, you can follow some simple steps to start building your static website with Nuxt.js, the platform based on Vue.js for developing websites.

Things You’ll Need

Before we start building our static website with Nuxt.js, here are some things you need to have to get started.

• Git – Installed on your device
• GitHub Account
• Netlify Account Linked To GitHub
• node and npm – Installed on your device

If you have got them, let’s start with creating a project.

Creating A Project

It’s time to set up a project based on nuxt.js once you are done setting up your environment. We will start with installing vue-cli to create a turn-key app, on top of which a static site can be built.

vue-cli Installation

For setting up the necessary parts of our project, we need to install the vue-cli. This is how you will install it, by typing ‘npm install vue-cli -g’ into your terminal.

Nuxt Starter

In vue-cli, go to the directory where you want to host your project folder. You can have a ‘repos’ directory in your user profile, and type the following into the terminal:

vue init nuxt/starter <your-project>

  # Follow the command line instructions

  # (see if the defaults are okay) press enter a few times

cd <your-project>

npm install

Here, <your-project> will have the name of your project. Don’t forget how you have named the project, as it will come in handy, later.

Initialize the git

We need to initialize the folder as a git repository to interact with GitHub. Get to the root of your <your-project> library and type this:

git init

git add .

git commit -m “Initial commit”

Create New Repository on GitHub

Go to github.com and click on the ‘+’ icon and select the ‘New Repository’ option. We will be creating an empty repository here, and in the Repository Name field, we will enter our project name (your-project in this example)

In the next step, you can skip readme and add a license for now, and click ‘create repository’.

GitHub will provide you with instructions and commands to publish your project to GitHub. In your terminal, type in those commands and push them.

See if your code is published on GitHub.

Building A Static Site

Now, let’s start building a static site and see if we can have a look at what we create.

run dev

To develop the website locally, vue-cli will need this command. 

npm run dev

This command will help you compile your files and initialize a web server using the webpack. Go to localhost:3000 and you will be able to see the splash screen of your project.

For this page to become your website, we need to customize this page. Open src/pages/index.vue in your choice of editor to edit index.html. 

Here you can change content within the template tag and save it. The changes will be live in your browser.

If you want to add a page, you will need to create a file for that page with the .vue extension and place your HTML between <template></template> tags at the top of the file. 

For example, if you want to create www.yourproject.com/aboutproject, you will create aboutproject.vue.

Generating the Code

Type ‘npm run generate’ into your terminal, and you will get access to prefetch and HTTP2 support. Nuxt.js automatically converts your project to a static site that you can distribute on any HTTP server.

In the root, there will be a folder created automatically, named ‘/dist’, and that’s where your site is placed.

So, your code is working! But currently, it is just on your computer and won’t be visible to anyone else. Let’s publish it to Netlify and make it live!

Publishing

As mentioned, the site is currently sitting with you and the world needs to see it. To publish your static site with Nuxt.js, you need to link your Netlify to GitHub.

Link Netlify to GitHub

We are almost there. Follow the steps below to link your GitHub with Netlify and make your site live:

 

1. Log in to app.netlify.com. To make things easier, register with your GitHub profile. This will help Netlify to know where to get your code.
2. After you have logged in, look for the ‘New site from Git’ button on the upper right corner of your Netlify dashboard.
3. Click on the button and choose ‘GitHub’ in the continuous deployment options.
4. Give access to your repositories to Netlify by authorizing them when asked, and you will be able to see the list of all your repos.
5. Select the repo we just created.
6. To deploy the site, Netlify needs to know where your site code is. Here is what you need to do.
7. Select the Branch to deploy as ‘Master’. In the Build command, there should be ‘npm run generate’, and the publish directory should be ‘dist’. 

 

These are the same commands we typed to generate the site locally. Netlify will wait until your code is generated and the output will be fetched to Netlify’s servers.

Your site is now live!

There will be a random domain assigned to your site, generated by Netlify. If you have a domain, link the DNS server with Netlify, and that’s taken care of, too!

It’s Live Now!

Anyone with the link to your static site can see this site created with Nuxt.js and Vue with Netlify. All the changes you make on GitHub will be reflected in Netlify automatically.

To summarize, this is what we did:

To Create a Project

-Install vue-cli

-Create Nuxt Starter

-Initialize the Git

-Create an Empty Repository on GitHub

To Build Your Static Site with Nuxt.js

-Run the dev server

-Generate the static site code

To Publish Your Site

-Link your GitHub repo to Netlify

And that’s all it requires to build your static site using Nuxt. Go ahead and practice some of your own projects using this open-source library to its fullest potential.

---