Build Static Websites With NUXT.js: A static website is a simple website that is delivered to the user with static HTML, CSS, and JavaScript files. It doesn’t require a database or content management system (CMS). There will be no delay between the browser requesting a webpage and the webpage being received, as no calculations are performed in between.
If you’ve ever saved a webpage with a .html extension, it’s considered static. To open the file and access the information, simply double-click on it.
Building a static website on your own can be quite challenging. Fortunately, there are straightforward steps you can follow to begin creating your static website using Nuxt.js, a platform built on Vue.js specifically for website development.
Things You’ll Need
Before we begin creating our static website using Nuxt.js, there are a few prerequisites you should have in place.
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
Once you’ve finished setting up your environment, it’s time to start a project using nuxt.js. Let’s begin by installing vue-cli, which will allow us to easily create a turn-key app. This app can then serve as the basis for building a static site.
vue-cli Installation
To get started with our project, we’ll need to install the vue-cli. To install it, simply enter ‘npm install vue-cli -g’ in your terminal.
Nuxt Starter
Navigate to the desired directory in vue-cli to set up your project folder. Create a ‘repos’ directory in your user profile and enter the following command in 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
To interact with GitHub, we should initialize the folder as a git repository. Navigate to the main directory of your <your-project> library and enter the following command:
git init
git add .
git commit -m “Initial commit”
Create New Repository on GitHub
Visit github.com and click on the ‘+’ icon. Then, choose the ‘New Repository’ option. Let’s start by creating an empty repository. In the Repository Name field, simply enter the name of your project (for this example, let’s use “your-project”).
In the next step, you can skip readme and add a license for now, and click ‘create repository’.
GitHub offers clear instructions and commands for publishing your project to their platform. Enter these commands in your terminal and execute 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
Use this command to compile your files and set up a web server with webpack. Visit localhost:3000 to view the splash screen of your project.
In order to turn this page into your website, some customization is required. To edit index.html, open src/pages/index.vue in your preferred editor.
Here you can change content within the template tag and save it. The changes will be live in your browser.
To add a page, simply create a file with the .vue extension. 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
Simply enter ‘npm run generate’ in your terminal to gain access to prefetch and HTTP2 support. Nuxt.js converts your project into a static site that can be easily distributed on any HTTP server.
A folder called ‘/dist’ will be automatically created in the root directory to house your site.
Great news! Your code is functioning properly! However, at the moment, it is only stored on your computer and cannot be seen by anyone else. Time to deploy it on Netlify and go live!
Publishing
As stated, the website is currently with you and it’s important for the world to see it. In order to publish your static site using Nuxt.js, you will need to connect your Netlify account with your GitHub repository.
Link Netlify to GitHub
We are almost there. Follow the steps below to link your GitHub with Netlify and make your site live:
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.
After you have logged in, look for the ‘New site from Git’ button on the upper right corner of your Netlify dashboard.
Click on the button and choose ‘GitHub’ in the continuous deployment options.
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.
Select the repo we just created.
To deploy the site, Netlify needs to know where your site code is. Here is what you need to do.
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!
Your site will be assigned a random domain generated by Netlify. If you already have a domain, simply connect the DNS server to Netlify and you’re good to go!
It’s Live Now!
Anyone who has the link to your build static websites with NUXT.js and Vue, and is hosted on Netlify. Any modifications you make on GitHub will automatically appear on Netlify.
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
That’s all you need to build static websites with NUXT.js. Feel free to explore and experiment with this open-source library to its maximum capabilities.
