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.
Before we start building our static website with Nuxt.js, here are some things you need to have to get started.
If you have got them, let’s start with 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.
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.
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
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.
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 add .
git commit -m “Initial commit”
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.
Now, let’s start building a static site and see if we can have a look at what we create.
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.
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!
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.
We are almost there. Follow the steps below to link your GitHub with Netlify and make your site live:
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!
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
-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.
You can visit our news and projects on a weekly basis. Or you can subscribe to email for regular email updates.