Building a Personal Site with Nuxt.js

A step by step guide for developers

A personal site is essential for professional developers, and is often one of the first major projects we undertake.

It’s important to build your site around a specific purpose. Since we are developers, our personal sites will really reflect our own abilities. Take the time to build it right and take pride in it.

A great developer site combines great design and functionality with a purposeful intent. Are you looking for clients? Selling courses? Trying to get a job?

Tailor your personal site to your goals.

What should we use to build it?

Don’t stress over this any more than necessary. Static site generators are a very popular way to build personal sites for developers, as well as projects.

They’ve been around for a while, but have recently starting gaining some serious steam.

I’ve been looking into static site generators for a few days now, and they’ve got me really excited.

I’ve always had my issues with using a CMS like Wordpress. For the clunkiness, overhead, and security issues, among other pains.

I’ve recently been wanting to revamp my personal site, so I decided it might be a good time to try using one of the these static site generators.

They’ve got all kinds of benefits, including:

• Speed
• Security
• Ease of use
• Flexibility
• Developer happiness

Netlify is one of the companies leading the charge to using static sites. And Smashing Magazine recently announced they are moving from Wordpress to a static site generator.

There’s a lot of people who think that static site generators are the future of building websites. Large migrations like Smashing Magazine hint that this may be true.

I don’t know what the future holds, but they sure do look cool and promising.

After looking through the options, I settled on Nuxt.js, a JavaScript framework designed to make it super easy to build apps with Vue.

Nuxt isn’t only a static site generator, but that is one of its main features. It was inspired by Next.js, which is built on top of React.

However, as far as I know, Next.js doesn’t have static site generation feature.

As far as hosting the files, you have plenty of options here. You can go with a free option like Surge.sh or GitHub Pages, or a paid option like Netlify.

For my site, I’ll be using Surge.sh, since I’ve always wanted to try it out. But if I was building a higher traffic site, I would go with a paid service that utilizes a CDN such as Netlify.

Planning Out My Site

The first thing I need to do is plan out how I want my site to look. Since I focus on helping developers further their careers, I’ll build my site around that singular goal.

The main layout will be very simple, and I’m actually only going to have one page for my site.

Most of my business is conducted through Medium and my email list, so my site is really just going to be a simple online summary of me and what I do.

With this layout, I’ve got my top priority right there in front, and it’s obvious where the user should go next depending on what they want to know more about.

I’m a fan of keeping things as simple as possible, and omitting anything that doesn’t directly contribute to my site’s goal.

Now that I have a rough idea of how I want it to look, let’s get building.

If you want to use my site as inspiration for your own, or just see how it’s set up, it’s open source:

Getting the Site Up

Nuxt is super easy to get going, and they have a starter kit to get you going.

First, make sure you have nom installed, and the install the Vue CLI with

npm install -g vue-cli

After you have the Vue CLI installed, you can create the new site with

vue init nuxt/starter [PROJECT_NAME]

Now if we switch into the directory of our new site and run

npm install

to install our dependencies, we’ll be all set up.

The last step is to run

npm run dev

We can see our site running at localhost:3000

The default Nuxt starter application

Woo!

Now we’ve got our Nuxt site up and running.

If we open up our text editor we can check out the directory structure.

Most of what we’ll be doing will take place inside the pages directory. Looking around and playing with the starter project is a great way to see how Nuxt works.

Nuxt is really cool in that all we have to do is create a simple component ending in .vue, and it will automatically route that to a pretty URL.

For example, if we create an about.vue page in the pages folder, that will map the page to localhost:3000/about.

But for this site all I need is the index page, so I’m going to modify the index.vue file to get some text displaying, then I can handle the styling.

I’ll put all of my styling directly in the index.vue component.

The assets directory is where uncompiled assets are stored.

Building the Site

When creating the content for your pages, don’t take layout or styling into account at first.

Think about that page, what its main purpose is, and write content that serves that purpose.

Always keep the context of the goal your site is trying to accomplish in mind when writing your content.

For example, on your about page, write about yourself in a way that communicates your value to the people you are trying to target with your products or services.

After you have written the content, you can design around it and tweak it if necessary.

My content is very minimal and simple, and there isn’t much to it other than basic information, so styling will be simple and minimal as well.

First I’m going to change the title and description in the nuxt.config.js file.

Changing the site’s config file

Other than that, there is some default styling in the main default.vue file inside the layouts folder that I’ll get rid of.

After that I’ll set up the contents and styling of the file itself.

My Finished Site

My finished site is up at KenRogers.co if you want to check it out.

My site was intentionally simplistic and minimal. I just wanted a quick site to put up where people could learn more about me.

I’m a big fan of having sites only focus on the highest priorities. For me, that’s communicating that I write stuff and make courses for developers.

Write your content and build your site based on your specific priorities.

I used surge.sh to deploy my site, which is super awesome and simple.

It only takes a few commands, and you can use a custom domain for free. Awesome stuff.

Deploying Your Site

After your site is built, it’s ready to be deployed for all the world to see.

Note: I want to use Surge to deploy it, but I want my own custom domain name, so I’ll need to set up a new CNAME with my domain provider. If you’re following along, go ahead and do that before deploying.

Open up your terminal, shut down the development server and generate your static site with

npm run generate

That will generate your ready-to-deploy site in a dist folder, now we can deploy it using Surge.

If you don’t have surge installed already install it with

npm install -g surge

Then all you have to do is run surge from inside the dist directory that Nuxt generated. If you want to publish it to a custom domain, specify that domain here.

surge /dist kenrogers.co

Surge will prompt you to create an account right from the command line and deploy your site. If your CNAME record has propagated, you should be able to visit that URL to see your site.

And with that we can see the completed site at kenrogers.co

From now on, whenever I want to update my site, all I need to do is make the changes run the npm run generate command, and then run the surge command.

Take Action

The best way to learn something is to build it. Even if you don’t go with Nuxt, try using one of these static site generators to build either your own personal site or some other project.

It might be a great addition to your developer tool belt.

Having a personal site is an important part of becoming a professional developer.