My personal webpage with blog

A Nuxt.js static website with a blog

Features

• Nuxt.js Static Site Generation for easy hosting.
• Netlify CMS on /admin to modify the posts.
• Nuxtdown to compile the blogpost pages from each Markdown files in /content/blog/.
• Netlify compilation on each commit, with automatic deployment to their CDN (once you finish all the steps).

Getting started

Check out this guide for a more thorough reading, or jump straight ahead for more concise instructions.

What's needed

• Github account
• Netlify account
• Vue/Nuxt understanding

Fork the repo

Using your Github account, go ahead and click here to fork the repo or just clone it.

Build Setup

Install all the dependencies

npm i

Now, you can run the code in development with:

npm run dev

This will serve your page in localhost:3000 with hot reload.

Once you're ready to generate your static assets for production:

npm run generate

This will create a /dist folder with the assets. This folder is not committed.
This is what Netlify will be building on their server, and then uploading the results to their CDN.

Configure your repo

Netlify CMS

• Define your fields and files for your content.
• Go to static/admin/config.yml.
• Check the Netlify CMS Documentation.
• Also, while your local server is running, you can access localhost:3000/admin/ to modify the content of your blog. You can also do it once it's deployed.

Routes

• Nuxt will build every page inside of the /pages directory, but the _blogpost.vue is a special file, thats handled by Nuxtdown.
• In this case:
  • index.vue: It's the / route, will be compiled once.
  • _blogpost.vue: For each blog post, gets compiled once for each .md in the content/blog/ directory.
• Configure Nuxtdown in: nuxtdown.config.js.
• Check the Nuxtdown Documentation.

The rest of the site

• It's a regular Vue + Nuxt app.
• The code is commented to try to assist anyone in modifying the views.
• Configure Nuxt in: nuxt.config.js.
• Check the Vue.js and Nuxt.js documentation.

I'm ready, now what?

If you run npm run dev and you like what you see, you're ready to deploy to Netlify!

Go to Netlify

• Go to Netlify
• Choose Github and authorize Netlify, if you haven't already
• Choose this repo
• Leave the settings as they are and click on Deploy Site

You're done!

Now, with every commit you do, Netlify will compile your site with npm run generate and deploy it on their CDN.

Issues

If you have any problems implementing this, please don't hesitate and create a Github Issue or send me a tweet.

Built with

• Andrea Gomez' design
• Vue.js
• Nuxt.js
• Netlify CMS
• Nuxtdown
• Bulma
• Prism
• renestalder's template
• ❤️

Hosted in

• Netlify