Skip to content

Commit 69a9b03

Browse files
authored
Merge pull request israelmuca#5 from israelmuca/cms/2019-02-27-jamstack-and-cd-pipelines-create-a-blog-with-nuxt-netlify-cms-and-netlify
Automatically generated. Merged on Netlify CMS.
2 parents c70c1b7 + 2d9bf50 commit 69a9b03

File tree

1 file changed

+8
-7
lines changed

1 file changed

+8
-7
lines changed

content/blog/2019-02-27-jamstack-and-cd-pipelines-create-a-blog-with-nuxt-netlify-cms-and-netlify.md

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ It's a perfectly viable option, although slower compared to more modern options,
2424
## JAMstack to the rescue!
2525
So what is JAMstack? It stands for **J**avaScript, **A**PIs and **M**arkup. A modern way of writing webpages that are compiled to static assets right before deploying. JavaScript handles the dynamics in your page, what were server-side processes, are now abstracted into APIs if needed, and your markup is compiled during deploys. Go ahead and read all about it on the [official webpage](https://jamstack.org/).
2626

27-
The benefits that this approach has is that your webpage ends up being blazing fast and with all of your content precompiled, nothing has to be fetched every time the page is served and, you can host it in many many more places (and it's way cheaper (or even free, with [Netlify](https://netlify.com)), as it is only HTML and JS files all while getting improved SEO with your page.
27+
The benefits that this approach has is that your webpage ends up being blazing fast and with all of your content precompiled, nothing has to be fetched every time the page is served and, you can host it in many many more places (and it's way cheaper (or even free, with [Netlify](https://netlify.com))), as it is only HTML and JS files all while getting improved SEO with your page.
2828
Your page is also more secure! Since you don't have exposed APIs, you could even use Wordpress as a CMS but without the security risks or performance problems of running Wordpress itself.
2929
The performance is definitely worth mentioning again, as it is quite easy to make your site super fast.
3030

@@ -49,13 +49,14 @@ Netlify is an amazing [PaaS](https://en.wikipedia.org/wiki/Platform_as_a_service
4949
- AND S O, M U C H, M O R E.
5050

5151
Check out their [features](https://netlify.com/features/) or dive straight into the [documentation](https://www.netlify.com/docs/) pleeeeeaaaase. As everything I mentioned is included in their VERY generous free tier.
52-
So for our use case, we'll can be using their automated build and deployment (as I am).
52+
So for this guide, we'll be using their automated build and deployment service (as I am).
5353

5454

5555
## Nuxt.js + Netlify, a match made in heaven
56-
In my case, I've been working with [Vue.js](https://vuejs.org) and I wanted to build my blog with Vue, so for that, I used [Nuxt.js](https://nuxtjs.org) which is a framework built on top of Vue that offers both Server Side Rendering (you need a Nuxt instance running, thus a server as well, a no-go for our project) and also offers Static Site Generator, which **compiles** all of your fancy Vue code into plain HTML and JS. That's exactly what we need for Netlify! _OH YEAH!_
56+
In my case, I've been working with [Vue.js](https://vuejs.org) and I wanted to build my blog with it, so for that, I used [Nuxt.js](https://nuxtjs.org) which is a framework built on top of Vue that offers both Server Side Rendering (you need a Nuxt instance running, thus a server as well, a no-go for our project) and also offers Static Site Generator, which **compiles** all of your fancy Vue code into plain HTML and JS. That's exactly what we need for Netlify! _OH YEAH!_
5757

58-
Every time you push your code to the repo, Netlify pulls the latest version, and in my case, runs ```nuxt generate``` and then uploads the ```/dist``` folder into their CDN. And that's it! Your latest version is live in a minute or two. No need to upload anything manually or check what version is uploaded... Everything is *automated* now... Continuous Deployment FTW!
58+
Every time you push your code to the repo, Netlify get's notified through a webhook, then pulls the latest version, and in my case, runs ```nuxt generate``` and then uploads the ```/dist``` folder into their CDN. And that's it!
59+
Your latest version is live in a minute or two. No need to manually upload anything or check what version is uploaded... Everything is *automated* now... Continuous Deployment FTW!
5960

6061
## Netlify CMS
6162
Last but not least. How can you manage your content like this?
@@ -64,7 +65,7 @@ Remember that the [JAMstack best practices](https://jamstack.org/best-practices/
6465
That's where [Netlify's CMS](https://www.netlifycms.org/) comes in. It's an Open Source Software, that helps you use your Github as a 'database' in a sense. Allowing you to create blog posts directly into ```.md``` files, which you can push into the repo to trigger the builds, creating new blog posts just like that.
6566
They have an easy to use interface, and even have an editorial workflow, that set articles to be deployed as Pull Requests on your Github, allowing you or your team to review them (using Netlify) before merging them.
6667

67-
All in all, these are amazing tools that let us create blazing fast sites, in a modern environment and require very little configuration for such an amazing final product.
68+
All in all, these are amazing tools that let us create blazing fast sites, in a modern environment that require very little configuration for such an amazing final product.
6869

6970

7071
## Getting started
@@ -98,11 +99,11 @@ This is what Netlify will be building on their server, and then uploading the re
9899
## Configure your *new* repo
99100

100101
### Netlify CMS
101-
You'll need to define your fields and files for your content. I'm using defaults very similar to what you can see in [dev.to](https://dev.to). Mostly covering the title, description and keywords for SEO purposes, also a little summary of the post as well as a main image which is used both in the ArticleCard.vue and the Header.vue in the blog post page.
102+
You'll need to define your fields and files for your content. I'm using defaults very similar to what you can see in [dev.to](https://dev.to). Mostly covering the title, description and keywords for SEO purposes, also a little summary of the post as well as a main image which is used both in the `ArticleCard.vue` and the `Header.vue` in the blog post page.
102103

103104
You can configure these fields in: `static/admin/config.yml`, and feel free to check the [Netlify CMS Documentation](https://www.netlifycms.org/docs/configuration-options/) for extra customization.
104105

105-
While your local server is running, you can access [localhost:3000/admin/](localhost:3000/admin/) to modify the content of your blog. You can also do it once it's deployed when you have the Netlify's address that's given to you.
106+
While your local server is running, you can access [localhost:3000/admin/](localhost:3000/admin/) to modify the content of your blog. You can also do it once it's deployed when you have the Netlify's address that's given to you, so it'd look something like: https://yourrepo.netlify.com/admin/
106107

107108
### Routes
108109
In here, both Nuxt and Nuxtdown work together to create the routes in the website.

0 commit comments

Comments
 (0)