Skip to content
My landing page / blog.
Vue JavaScript HTML
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
components Added a new SVG but will have to change more things than expected, wi… May 29, 2019
content/blog Update Post “2019-02-27-how-to-international-api-i18n-validation-in-n… Mar 6, 2019
layouts Documentation: Added a Code of Conduct, a Licence, finished the Readm… Mar 2, 2019
pages Updated the index's title and text May 28, 2019
static
.editorconfig
.eslintrc.js Cleaned up the files, eliminated all the bloat, installed dependencie… Feb 16, 2019
.gitignore 3:47, test Feb 21, 2019
.nvmrc 3:50, added my node version into Netlify Feb 21, 2019
CODE_OF_CONDUCT.md Updated the email Apr 18, 2019
LICENSE Added the year to the Licence Apr 18, 2019
README.md Added a link Apr 18, 2019
app.html performance test, again Feb 16, 2019
netlify.toml 3:47, test Feb 21, 2019
nuxt.config.js Modified a styling issue with the icons placement in the footer, remo… Apr 9, 2019
nuxtdown.config.js Documentation: Added a Code of Conduct, a Licence, finished the Readm… Mar 2, 2019
package-lock.json Feat: Lazy loading fonts to increase performance Mar 5, 2019
package.json Feat: Lazy loading fonts to increase performance Mar 5, 2019

README.md

My personal webpage with blog

Netlify Status

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

Hosted in

You can’t perform that action at this time.