Building This Site

June 1, 2020

A walk through on how I built this site with Nuxt and Storyblok

I built this site using Nuxt; which is built on top of VueJs, and Bootstrap for styling. I added Storyblok, the headless CMS, and deployed it on Netlify. The entire process took about 4 days, but in defense of that, I spent the better part of 2 ½ days playing with layout and colors. Using NPM through Visual Studio Code, I ran the following command “npx create-nuxt-app harbisonApps-blog” . Once the skeleton of the project was generated, I ran “npm i storyblok-nuxt” to install the required dependencies. Then opening the nuxt.config.js file, I added my Storyblok access tokens. One token is used in development, this very handy for previewing how things look prior to deployment. The second token is used during deployment and differentiates between published and draft content. After finishing my pages and components in Visual Studio Code, I pushed my code to a new GitHub repository, this serves three purposes. First, it gives me version control over my code. Secondly, it serves as central storage location. Finally, that repo will be where Netlify will pull my code from. Netlify employs Continuous Deployment, so every time I make a change to my code base, Netlify uses a build hook and deploys my new code automatically. Nuxt's greatest strength, is to compile your code and generate all the required pages and assets. Even though each individual blog post is built dynamically, Nuxt will reach out to Storyblok and look for and generate all of your published content. So after hooking up my Netlify and GitHub and adding the “npm run generate” command, I no longer need to touch Netlify or GitHub to deploy a new version of my site. So what happens when I make a change, or publish a new blog post? How does a static site know there is something new that needs to be added? Netlify and Storyblok have you covered. All you need to do is create a build hook on Netlify and added it in your Storyblok settings. To create one, open your site’s dashboard on Netlify and navigate to the settings section: Under Settings > Build & deploy > Continuous deployment > Build hooks Click add build hook, give it a name and the click save. The copy the link generated and paste it into Storyblok under: Settings > Webhooks > Story published & unpublished Now every time I publish a new blog post or make changes to content, Storyblok triggers a new build on Netlify. The entire process of building this site was straight forward and was a lot of fun. I will be posting new stuff on a weekly basis. If you have any questions, don't hesitate to hit me up. Brian