|
| 1 | +--- |
| 2 | +type: GUIDE |
| 3 | +title: 'JAMstack and CD pipelines: Create a blog with Nuxt, Netlify CMS and Netlify' |
| 4 | +summary: >- |
| 5 | + Setting up your own personal blog is easier than ever with Nuxt.js. Take |
| 6 | + advantage of the JAMstack and leave the problems that server-side CMS have |
| 7 | + with Netlify CMS' solution while simplifying your development experience with |
| 8 | + Netlify's Continous Development. |
| 9 | +description: >- |
| 10 | + Guide to understand how to setup a static website built with Vue.js, compiled |
| 11 | + with Nuxt.js, that includes Netlify CMS and is served through Netlify's |
| 12 | + server's using their Continuous Development pipeline. |
| 13 | +keywords: >- |
| 14 | + vue.js jamstack netlify cms blog how-to tutorial guide nuxt.js netlifycms cd |
| 15 | + continuous development vue nuxt |
| 16 | +date: '2019-03-01T21:15:00-06:00' |
| 17 | +thumbnail: /images/uploads/john-barkiple-539580-unsplash-micro.jpeg |
| 18 | +--- |
| 19 | +## The "old" ways |
| 20 | +Say you wanted to create a blog, you'd could easily run a Wordpress site, with a linux server distributing your content. On each page load, the server would generate the webpages, and serve them to the user. |
| 21 | +Every request puts the server to work. |
| 22 | +It's a perfectly viable option, although slower compared to more modern options, more insecure as you have to be doing the updates on your server (or paying more for a managed server), and it requires using PHP and having a database running. |
| 23 | + |
| 24 | +## JAMstack to the rescue! |
| 25 | +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/). |
| 26 | + |
| 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. |
| 28 | +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. |
| 29 | +The performance is definitely worth mentioning again, as it is quite easy to make your site super fast. |
| 30 | + |
| 31 | +There is one caveat though. Every time you change anything, you have to rebuild your assets, and deploy them... ugh... **but wait!**, as that's were a CD pipeline comes into play! |
| 32 | + |
| 33 | +## CD pipelines...? |
| 34 | +You've probably heard the terms CI/CD being thrown around, with CD sometimes referring to Continuous Delivery or Continuous Deployment. Arguments get quite long when debating about the PRECISE meaning of these words, as you can see in [this Stack Overflow](https://stackoverflow.com/questions/28608015/continuous-integration-vs-continuous-delivery-vs-continuous-deployment) question. |
| 35 | + |
| 36 | +In my case, I'm talking about Continuous Deployment, as explained by Netlify [here](https://www.netlify.com/docs/continuous-deployment/). |
| 37 | +> _Continuous deployment works by connecting a Git repository to a Netlify site and keeping the two in sync._ |
| 38 | +
|
| 39 | +Easy peasy. We want our repo to be in sync with our site. |
| 40 | + |
| 41 | +### But how? |
| 42 | +Netlify is an amazing [PaaS](https://en.wikipedia.org/wiki/Platform_as_a_service/) that has SO MANY FEATURES, really, just to mention a few: |
| 43 | +- Automated builds and deployments via webhooks straight from your Git repository. |
| 44 | +- Rollbacks, as previous deployments are not erased. |
| 45 | +- Continuous Integration tests. |
| 46 | +- Deployment previews from Pull Requests. |
| 47 | +- Free SSL certificates. |
| 48 | +- A CDN. |
| 49 | +- AND S O, M U C H, M O R E. |
| 50 | + |
| 51 | +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). |
| 53 | + |
| 54 | + |
| 55 | +## 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!_ . |
| 57 | + |
| 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! |
| 59 | + |
| 60 | +## Netlify CMS |
| 61 | +Last but not least. How can you manage your content like this? |
| 62 | +Remember that the [JAMstack best practices](https://jamstack.org/best-practices/) mention that ideally everything lives on your git, so anyone can, with a couple of clicks, get going and contribute to your project. |
| 63 | + |
| 64 | +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. |
| 65 | +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. |
| 66 | + |
| 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 | + |
| 69 | + |
| 70 | +## Getting started |
| 71 | +For this, we'll only be needing: |
| 72 | +- Github account |
| 73 | +- Netlify account |
| 74 | +- Vue/Nuxt understanding |
| 75 | + |
| 76 | +## Fork the repo |
| 77 | +Using your Github account, go ahead and [click here](https://github.com/israelmuca/israelmuca.dev/fork) to fork the repo or just [clone it](https://github.com/israelmuca/israelmuca.dev). |
| 78 | + |
| 79 | +## Build Setup |
| 80 | +Install all the dependencies |
| 81 | +``` bash |
| 82 | +npm i |
| 83 | +``` |
| 84 | + |
| 85 | +Now, you can run the code in development with: |
| 86 | +``` bash |
| 87 | +npm run dev |
| 88 | +``` |
| 89 | +This will serve your page in `localhost:3000` with hot reload. |
| 90 | + |
| 91 | +Once you're ready to generate your static assets for production: |
| 92 | +``` bash |
| 93 | +npm run generate |
| 94 | +``` |
| 95 | +This will create a `/dist` folder with the assets. This folder is not committed. |
| 96 | +This is what Netlify will be building on their server, and then uploading the results to their CDN. *We don't need to do this manually ever.* We just do it for the sake of watching what happens inside Netlify. |
| 97 | + |
| 98 | +## Configure your *new* repo |
| 99 | + |
| 100 | +### 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 | + |
| 103 | +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. |
| 104 | + |
| 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 | + |
| 107 | +### Routes |
| 108 | +In here, both Nuxt and Nuxtdown work together to create the routes in the website. |
| 109 | + |
| 110 | +In the `pages` directory, you'll find an `index.vue` which is, as the name implies, the index of our site. |
| 111 | +**This is handled by Nuxt**. |
| 112 | + |
| 113 | +The `pages/blog/` directory will work as a directory in our site as well (israelmuca.dev/blog/... in my case), which will hold all the blog posts that are created using the `_blogpost.vue` template inside. It will be compiled once for each `.md` in the `content/blog/` directory. You can see how the content is fetched inside of that `.vue` file. |
| 114 | +**This is handled by Nuxtdown**. |
| 115 | + |
| 116 | +You can configure Nuxtdown in: `nuxtdown.config.js`, and please go ahead and check the [Nuxtdown Documentation](https://github.com/joostdecock/nuxtdown-module/blob/master/README.md) to further understand what is happening or to change the functionality. |
| 117 | + |
| 118 | +### The rest of the site |
| 119 | +The rest of the site is a regular Vue + Nuxt app, I tried to comment the code where I think it's needed the most, and you can configure Nuxt in: `nuxt.config.js`, also, as usual, please check the [Vue.js](https://vuejs.org/v2/guide/) and [Nuxt.js](https://nuxtjs.org/guide/) documentation to further understand this code if you have any questions. |
| 120 | + |
| 121 | + |
| 122 | +## Congratulations |
| 123 | +By this point, you should have a fully functional Nuxt generated, Netlify hosted, blog site. |
| 124 | + |
| 125 | +## Issues |
| 126 | +If you have any problems implementing this, please don't hesitate and create a Github Issue or send me a [tweet](https://twitter.com/IsraelMuCa). |
| 127 | + |
| 128 | +## Thanks |
| 129 | +There's a phrase that I love and always try and remember: |
| 130 | +> _If I have seen further it is by standing in the shoulders of Giants_ |
| 131 | +> Isaac Newton |
| 132 | +
|
| 133 | +Being true to that phrase, I have to acknowledge the many people that in one way or another contributed to this specific repo: |
| 134 | +- [Andrea Gomez - with her design](https://twitter.com/acgomezu) |
| 135 | +- [Vue.js](https://vuejs.org/) |
| 136 | +- [Nuxt.js](https://nuxtjs.org/) |
| 137 | +- [Netlify CMS](https://www.netlifycms.org/) |
| 138 | +- [Nuxtdown](https://www.npmjs.com/package/nuxtdown) |
| 139 | +- [Bulma](https://www.bulma.io) |
| 140 | +- [Prism](https://prismjs.com/) |
| 141 | +- [renestalder's template](https://github.com/renestalder/nuxt-netlify-cms-starter-template) |
| 142 | +- [Netlify](https://www.netlify.com/) |
| 143 | + |
| 144 | +Thanks again, and read ya'll soon! |
0 commit comments