├── .editorconfig ├── .gitignore ├── README.md ├── assets ├── README.md └── style.css ├── components ├── Logo.vue ├── README.md └── TheNavbar.vue ├── layouts ├── README.md └── default.vue ├── middleware └── README.md ├── nuxt.config.js ├── package.json ├── pages ├── README.md ├── about.vue ├── contact.vue ├── index.vue └── posts │ └── _id.vue ├── plugins └── README.md ├── static ├── README.md └── favicon.ico └── yarn.lock /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) 2 | ### Node template 3 | # Logs 4 | logs 5 | *.log 6 | npm-debug.log* 7 | yarn-debug.log* 8 | yarn-error.log* 9 | 10 | # Runtime data 11 | pids 12 | *.pid 13 | *.seed 14 | *.pid.lock 15 | 16 | # Directory for instrumented libs generated by jscoverage/JSCover 17 | lib-cov 18 | 19 | # Coverage directory used by tools like istanbul 20 | coverage 21 | 22 | # nyc test coverage 23 | .nyc_output 24 | 25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 26 | .grunt 27 | 28 | # Bower dependency directory (https://bower.io/) 29 | bower_components 30 | 31 | # node-waf configuration 32 | .lock-wscript 33 | 34 | # Compiled binary addons (https://nodejs.org/api/addons.html) 35 | build/Release 36 | 37 | # Dependency directories 38 | node_modules/ 39 | jspm_packages/ 40 | 41 | # TypeScript v1 declaration files 42 | typings/ 43 | 44 | # Optional npm cache directory 45 | .npm 46 | 47 | # Optional eslint cache 48 | .eslintcache 49 | 50 | # Optional REPL history 51 | .node_repl_history 52 | 53 | # Output of 'npm pack' 54 | *.tgz 55 | 56 | # Yarn Integrity file 57 | .yarn-integrity 58 | 59 | # dotenv environment variables file 60 | .env 61 | 62 | # parcel-bundler cache (https://parceljs.org/) 63 | .cache 64 | 65 | # next.js build output 66 | .next 67 | 68 | # nuxt.js build output 69 | .nuxt 70 | 71 | # Nuxt generate 72 | dist 73 | 74 | # vuepress build output 75 | .vuepress/dist 76 | 77 | # Serverless directories 78 | .serverless 79 | 80 | # IDE 81 | .idea 82 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Static Site Generation with Nuxt.js 2 | 3 | [![](https://vueschool.s3.amazonaws.com/152dc4d1225eb65571767727eac4c0c7/static-site-generation.png)](https://vueschool.io/courses/static-site-generation-with-nuxtjs) 4 | 5 | This repository contains the example code for the [Static Site Generation with Nuxt.js](https://vueschool.io/courses/static-site-generation-with-nuxtjs) course. 6 | 7 | 8 | Prerendering or static site generation is an invaluable technique that every front-end developer should know. Compiling your application into static HTML files is a process that improves both performance and SEO. It can also drastically reduce your hosting cost. 9 | 10 | Nuxt.js has made it easy for us to generate static sites of both static routes and dynamic routes, even with data loaded asynchronously. 11 | 12 | After this course, you'll be familiar with: 13 | - What static site generation is 14 | - The difference between server-Side rendering and prerendering 15 | - How to prerender static routes 16 | - How to prerender dynamic routes 17 | - How to cache asynchronous data when generating dynamic routes 18 | 19 | Prerendering is not the same as server-side rendering. If you want to learn about server-side rendering and Nuxt, check out our [Async Data with Nuxt.js](https://vueschool.io/courses/async-data-with-nuxtjs) course. If you do not have experience with Nuxt.js yet, we recommend our [Nuxt.js Fundamentals](https://vueschool.io/courses/nuxtjs-fundamentals) course. 20 | 21 | This course is made **together** with Nuxt.js core member **Alexander Lichter**. 22 | 23 | [Click here to watch the course](https://vueschool.io/courses/static-site-generation-with-nuxtjs) 24 | 25 | 26 | 27 | --- 28 | 29 | ## Build Setup 30 | 31 | ``` bash 32 | # install dependencies 33 | $ yarn install 34 | 35 | # serve with hot reload at localhost:3000 36 | $ yarn run dev 37 | 38 | # build for production and launch server 39 | $ yarn run build 40 | $ yarn start 41 | 42 | # generate static project 43 | $ yarn run generate 44 | ``` 45 | 46 | For detailed explanation on how things work, checkout [Nuxt.js docs](https://nuxtjs.org). 47 | -------------------------------------------------------------------------------- /assets/README.md: -------------------------------------------------------------------------------- 1 | # ASSETS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your un-compiled assets such as LESS, SASS, or JavaScript. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked). 8 | -------------------------------------------------------------------------------- /assets/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --navy: #112F41; 3 | --teal: #068587; 4 | --teal-light: #4FB99F; 5 | --yellow: #F2B134; 6 | --main-bg-color: coral; 7 | } 8 | 9 | html { 10 | font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', 11 | Roboto, 'Helvetica Neue', Arial, sans-serif; 12 | word-spacing: 1px; 13 | -ms-text-size-adjust: 100%; 14 | -webkit-text-size-adjust: 100%; 15 | -moz-osx-font-smoothing: grayscale; 16 | -webkit-font-smoothing: antialiased; 17 | box-sizing: border-box; 18 | } 19 | 20 | *, 21 | *:before, 22 | *:after { 23 | box-sizing: border-box; 24 | margin: 0; 25 | } 26 | 27 | 28 | body { 29 | padding: 1rem; 30 | background: var(--navy); 31 | color: white; 32 | } 33 | 34 | a { 35 | color: var(--teal-light); 36 | text-decoration: none; 37 | transition: all 0.3s ease; 38 | } 39 | 40 | a:hover { 41 | color: var(--teal); 42 | } 43 | 44 | .container { 45 | margin: 0 auto; 46 | max-width: 900px; 47 | } 48 | 49 | .text-xs { 50 | font-size: 1.2rem; 51 | } 52 | .text-sm { 53 | font-size: 1.4rem; 54 | } 55 | 56 | .text-base { 57 | font-size: 1.6rem; 58 | } 59 | 60 | .text-lg { 61 | font-size: 1.8rem; 62 | } 63 | 64 | .text-xl { 65 | font-size: 2rem; 66 | } 67 | 68 | h1,h2,h3,h4 { 69 | color: var(--yellow); 70 | } 71 | -------------------------------------------------------------------------------- /components/Logo.vue: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /components/README.md: -------------------------------------------------------------------------------- 1 | # COMPONENTS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | The components directory contains your Vue.js Components. 6 | 7 | _Nuxt.js doesn't supercharge these components._ 8 | -------------------------------------------------------------------------------- /components/TheNavbar.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 27 | 28 | 61 | -------------------------------------------------------------------------------- /layouts/README.md: -------------------------------------------------------------------------------- 1 | # LAYOUTS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your Application Layouts. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/views#layouts). 8 | -------------------------------------------------------------------------------- /layouts/default.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 17 | 18 | 48 | -------------------------------------------------------------------------------- /middleware/README.md: -------------------------------------------------------------------------------- 1 | # MIDDLEWARE 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your application middleware. 6 | The middleware lets you define custom function to be ran before rendering a page or a group of pages (layouts). 7 | 8 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing#middleware). 9 | -------------------------------------------------------------------------------- /nuxt.config.js: -------------------------------------------------------------------------------- 1 | const pkg = require('./package') 2 | import axios from 'axios' 3 | module.exports = { 4 | mode: 'universal', 5 | 6 | generate: { 7 | async routes () { 8 | let response = await axios.get('https://jsonplaceholder.typicode.com/posts') 9 | return response.data.map(post => ({ 10 | route: `posts/${post.id}`, 11 | payload: post 12 | })) 13 | } 14 | }, 15 | 16 | /* 17 | ** Headers of the page 18 | */ 19 | head: { 20 | title: pkg.name, 21 | meta: [ 22 | { charset: 'utf-8' }, 23 | { name: 'viewport', content: 'width=device-width, initial-scale=1' }, 24 | { hid: 'description', name: 'description', content: pkg.description } 25 | ], 26 | link: [ 27 | { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' } 28 | ] 29 | }, 30 | 31 | /* 32 | ** Customize the progress-bar color 33 | */ 34 | loading: { color: '#fff' }, 35 | 36 | /* 37 | ** Global CSS 38 | */ 39 | css: [ 40 | '~/assets/style.css' 41 | ], 42 | 43 | /* 44 | ** Plugins to load before mounting the App 45 | */ 46 | plugins: [], 47 | 48 | /* 49 | ** Nuxt.js modules 50 | */ 51 | modules: [ 52 | '@nuxtjs/axios' 53 | ], 54 | 55 | /* 56 | ** axios configuration 57 | */ 58 | axios: { 59 | baseURL: 'https://jsonplaceholder.typicode.com' 60 | }, 61 | 62 | /* 63 | ** Build configuration 64 | */ 65 | build: { 66 | /* 67 | ** You can extend webpack config here 68 | */ 69 | extend(config, ctx) { 70 | 71 | } 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nuxt-fundamentals", 3 | "version": "1.0.0", 4 | "description": "My gnarly Nuxt.js project", 5 | "author": "Alex Kyriakidis", 6 | "private": true, 7 | "scripts": { 8 | "dev": "nuxt", 9 | "build": "nuxt build", 10 | "start": "nuxt start", 11 | "generate": "nuxt generate", 12 | "heroku-postbuild": "npm run build" 13 | }, 14 | "dependencies": { 15 | "@nuxtjs/axios": "^5.3.6", 16 | "axios": "^0.18.0", 17 | "cross-env": "^5.2.0", 18 | "nuxt": "^2.0.0" 19 | }, 20 | "devDependencies": { 21 | "nodemon": "^1.11.0" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /pages/README.md: -------------------------------------------------------------------------------- 1 | # PAGES 2 | 3 | This directory contains your Application Views and Routes. 4 | The framework reads all the `*.vue` files inside this directory and create the router of your application. 5 | 6 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing). 7 | -------------------------------------------------------------------------------- /pages/about.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 14 | 15 | 18 | -------------------------------------------------------------------------------- /pages/contact.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 10 | 11 | 14 | -------------------------------------------------------------------------------- /pages/index.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 49 | 50 | 78 | -------------------------------------------------------------------------------- /pages/posts/_id.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 41 | 42 | 60 | -------------------------------------------------------------------------------- /plugins/README.md: -------------------------------------------------------------------------------- 1 | # PLUGINS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your Javascript plugins that you want to run before mounting the root Vue.js application. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/plugins). 8 | -------------------------------------------------------------------------------- /static/README.md: -------------------------------------------------------------------------------- 1 | # STATIC 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your static files. 6 | Each file inside this directory is mapped to `/`. 7 | 8 | Example: `/static/robots.txt` is mapped as `/robots.txt`. 9 | 10 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#static). 11 | -------------------------------------------------------------------------------- /static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vueschool/nuxt-static-site-generation/c0b28e9df39de0021229f5890755f11cc4308bfc/static/favicon.ico --------------------------------------------------------------------------------