You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Feb 25, 2021. It is now read-only.
A [Nuxt.js](https://github.com/nuxt/nuxt.js) starter project template without the distraction of a complicated development environment.
3
+
> Build server-less, static websites with Vue.js and Netlify CMS.
4
4
5
-
Live demo: https://starter.nuxtjs.org
5
+
This is a fork of the [Nuxt.js starter project](https://github.com/nuxt-community/starter-template) with the goal, to extend it with [Netlify CMS](https://www.netlifycms.org) for building pre-rendered, server-less websites. See the [Further explanation](#further-explanation) section for more information.
6
+
7
+
Live demo: Coming soon.
6
8
7
9
## Prerequisites
8
10
9
-
Make sure to have `node 8.0+` and `npm 5.0+` installed
11
+
* Make sure to have `node 8.0+` and `npm 5.0+` installed
12
+
* You know what Netlify CMS and Nuxt.js is.
10
13
11
14
## Installation
12
15
13
16
This is a project template for [vue-cli](https://github.com/vuejs/vue-cli).
*`nuxt.config.js` contains the default parameters pls an additional variable to define the route matching between Netlify CMS and Nuxt.js.
32
+
***Netlify CMS**: Please follow the documentation of Netlify CMS to get it up and running with your repository.
33
+
26
34
### Development
27
35
28
36
```bash
@@ -34,15 +42,106 @@ Go to [http://localhost:3000](http://localhost:3000)
34
42
35
43
### Production
36
44
37
-
```bash
38
-
# build for production and launch the server
39
-
$ npm run build
40
-
$ npm start
41
-
```
42
-
43
-
### Generate
44
-
45
45
```bash
46
46
# generate a static project
47
47
$ npm run generate
48
48
```
49
+
50
+
While the other commands from Nuxt.js remain in this starter kit, we clearly focus on serving static HTML files, thus the `generate` command is our task to create the website for production.
51
+
52
+
## Further explanation
53
+
54
+
The goal of this boilerplate is to allow creating websites server-less and enable content management
55
+
with a CMS at the same time. It's all about saving time, saving money and especially keep to front-end work, while allowing people to edit content.
56
+
57
+
### What it does
58
+
59
+
*[x]**Pre-rendering:** Uses Nuxt.js to pre-render your Vuejs website to static HTML files.
60
+
*[x]**Easy dynamic route rendering**: Allows to map glob patterns to your Nuxt.js page paths.
61
+
This (partially) removes the need to define all dynamic routes by hand.
62
+
[]**Automatic mapping dynamic routes for pre-render:**: No more need to define dynamic routes manually.
63
+
Netlify CMS and Nuxt.js sync their routes automatically.
64
+
*[x]**CMS:** Allows to edit content without the need of a server, thanks to Netlify CMS.
65
+
66
+
### How it works
67
+
68
+
For this particular example we use following libraries and frameworks:
69
+
70
+
***Vue.js with Nuxt.js**: Vue.js for building our application and Nuxt.js for pre-rendering it.
71
+
In general, this could be anything here as long it can read json or markdown files and is can be
72
+
pre-rendered.
73
+
***Netlify CMS**: A CMS which is built on JavaScript and connects to the Git repository.
74
+
It defines the content models and edits the content files in the repository.
75
+
76
+
Basically, we use the default Nuxt.js boilerplate, add Netlify CMS files and extend the Nuxt.js config
77
+
to collect all content files and add those routes automatically to your Nuxt.js files.
78
+
79
+
Nuxt.js doesn't pre-render dynamic routes, e.g. blog/post/my-blog-post-2. But it allows to add the urls to those
80
+
pages manually to your config. Since you don't want to add a route to your config everytime you publish a blog post,
81
+
we allow to set dynamic paths with a glob in the Nuxt.js config. Those define glob folders are grabbed and
82
+
all files are added as routes to the Nuxt.js generate.route config_.
83
+
84
+
#### Principles
85
+
86
+
A pragmatic overview what this does.
87
+
88
+
1. You have a plain Vue.js and Nuxt.js website. That's fine and it works, but you want your pages to
89
+
be SEO optimized. So you have two choices: Getting a node server for rendering your website server-side or
90
+
you use pre-rendering, which converts all your pages to static HTML pages. This boilerplate does the second one.
91
+
2. You add Netlify CMS and connect it to your repository. Now you can create content as json that is stored in
92
+
a content folder in your repository.
93
+
3. Through webpack, you import the content into your pages and show it to the users.
94
+
4. In addition, you run Nuxt.js' generate command to make all this rendered as static HTML files.
95
+
5. Everytime a file changes in the repository, the generate command has to be run so the static files of the
96
+
website are up to date. _This is not part of this boilerplate. I assume you know how this works with your
97
+
favourite CI.
98
+
99
+
### Why?
100
+
101
+
Tired of the time investment needed to setup a website that needs to be progressive enhanced,
102
+
SEO friendly, accessible and allows to access all content on client-side to benefit from doing additional
103
+
UX improvements like page transitions, this is an attempt to make the process for building small or medium sizes
104
+
CMS websites fast, easy to edit and easy to use.
105
+
106
+
You can do all this with CMS like WordPress if you're willing to invest your time:
107
+
You have to get an Apache server with PHP, setup WordPress, somehow setup the custom post types
108
+
and custom fields (probably by installing ACF), setup the WordPress JSON API, write your templates
109
+
in PHP + probably even a second time so you can render them with client-side technology. And then,
110
+
at the end, having a website that maybe changes once in a couple of weeks.
111
+
112
+
This looks like a lot of work for sharing content with the internet.
113
+
114
+
Second, plain old HTML is still the best. The technology stack in this boilerplate exactly
115
+
does that, but gives you the additional tools for content editing and for building advanced web experiences.
116
+
117
+
In the end, you don't need Vue.js or Nuxt.js. You can get rid of it. You can pre-render your vanilla JavaScript
118
+
with Webpack, for sure. You don't need Netlify CMS. Authors could edit Markdown and JSON files directly in the repository.
119
+
BUT this is not what we want. We don't want people to get to know Git, we don't want them to edit JSON or Markdown files
120
+
without validate their entries.
121
+
122
+
### Uncertain
123
+
124
+
#### Build performance with a big amount of pages (e.g. 20'000)
125
+
126
+
While I've read a while ago that the Nuxt.js documentation is built pre-rendered with up to 20'000 pages.
127
+
It's not clear at this point how long such a build takes and how a partial build process could look like.
128
+
129
+
#### Building different sizes of images
130
+
131
+
This certainly is an easy one since you could check folders of images and could create a task in webpack or your
132
+
CI system to create additional image sizes. Also here, this would have to be a task that partially resizes images
133
+
only if they changed.
134
+
135
+
#### No error check for missing globs
136
+
137
+
The build might fail all over if you map routes to content that doesn't exist. This will be easy to fix.
138
+
139
+
### When not to use a static server-less system like this
140
+
141
+
When your website changes a lot. For example, if you're building news websites whose content changes all 5 minutes,
142
+
this would mean, that the whole website is re-generated all 5 minutes. Certainly not the best idea. In this case
143
+
you might be better with something more dynamic. But the good part is: If you're building your website on a framework like
144
+
Nuxt.js, you can simply switch to server-rendering as soon
145
+
as the static, server-less behaviour does not longer fit
146
+
your needs. It's as easy as switching two commands in your
147
+
build system (and probably changing those window instances that don't work server-side).
"body": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea **takimata sanctus** est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
0 commit comments