Coding

Final Touches & Deploying the Blog | Nuxt.js & Storyblok – Building a Complete Blog

  • 00:00:02 welcome to this video by the end of this
  • 00:00:04 video we'll have our example next and
  • 00:00:07 story block block deployed I will show
  • 00:00:10 this at the example of AWS as free but
  • 00:00:12 any static hosts can be used because
  • 00:00:15 we'll finish this app up do some nice
  • 00:00:19 well fine tuning steps and also ensure
  • 00:00:23 that we can build our application both
  • 00:00:26 in development and production mode that
  • 00:00:28 we can publish our posts on story block
  • 00:00:32 previously we only worked in draft mode
  • 00:00:34 now we'll we'll use that publish button
  • 00:00:36 up here and that we also are able to
  • 00:00:39 preach generate the page with this nice
  • 00:00:42 generate property in the next config
  • 00:00:45 where we dynamically fetch dynamic
  • 00:00:47 routes a lot of grounds to cover so
  • 00:00:49 let's dive right into that
  • 00:00:54 so let's start preparing our application
  • 00:00:57 for production first thing I want to do
  • 00:00:59 is in story block in our block folder
  • 00:01:02 right now the a second post post works
  • 00:01:05 fine in the preview right we we see
  • 00:01:07 everything the way we wanted to see
  • 00:01:09 however if I go to our first post we
  • 00:01:13 can't find that page and the reason for
  • 00:01:15 that is that here in the URL we still
  • 00:01:17 have slash blog as part of the path now
  • 00:01:20 we fix this for the second post by going
  • 00:01:23 to the Advanced section here and
  • 00:01:25 defining a real path which was just our
  • 00:01:28 first post now the problem is that we
  • 00:01:31 effectively have to do that for all
  • 00:01:33 posts we create which of course we can
  • 00:01:36 do but of course we can also organize
  • 00:01:38 our content differently here on story
  • 00:01:41 block to circumvent this issue or to be
  • 00:01:44 very precise what I want to do is we're
  • 00:01:46 on the blog path here so we can go back
  • 00:01:49 to our next project and in our pages
  • 00:01:53 here we could also add a block folder
  • 00:01:56 here in that block folder we add an
  • 00:01:58 index dot view file and we move our
  • 00:02:00 underscore post id folder into the blog
  • 00:02:03 folder so I'm kind of rebuilding the
  • 00:02:06 structure as we structure our content in
  • 00:02:08 the content management system on our
  • 00:02:11 next project tube so now we got the
  • 00:02:13 pages laid out like this of course this
  • 00:02:16 index dot view page here in my block
  • 00:02:18 should now receive the content I
  • 00:02:20 currently have in my main index of view
  • 00:02:23 file so I'll move that over here so then
  • 00:02:26 now I simply copied the content from the
  • 00:02:28 root and it's the view file into my blog
  • 00:02:30 in next review fall and with that we're
  • 00:02:33 fine we can now still fetch our stories
  • 00:02:35 as we did before we don't need to change
  • 00:02:37 that now in our main index or view file
  • 00:02:41 I'll also leave it as it is but the big
  • 00:02:44 advantage is that now our blog posts are
  • 00:02:46 indeed loaded under their ID as a sub
  • 00:02:50 part of our blog folder so now if I save
  • 00:02:53 that and I go to our first post this now
  • 00:02:57 actually works because now our path on
  • 00:02:59 the front-end includes the block segment
  • 00:03:02 tube and for second post I now need to
  • 00:03:05 fix this by going to advanced
  • 00:03:07 and removing this a real par value after
  • 00:03:11 I had safe there it now all the works
  • 00:03:13 now of course this is only an option if
  • 00:03:16 it's fine for you to replicate your
  • 00:03:18 back-end conte instruction your
  • 00:03:20 front-end but you typically want to have
  • 00:03:22 these two in sync because the logic by
  • 00:03:25 which you structure your content
  • 00:03:26 typically is the same and here I'm
  • 00:03:29 perfectly fine with having slash block
  • 00:03:31 as an additional path so back on our
  • 00:03:33 page we can reload the main page but if
  • 00:03:36 I click on a post this doesn't work
  • 00:03:39 anymore
  • 00:03:39 because now I obviously need to update
  • 00:03:41 my links there in my post preview
  • 00:03:44 component here there I'm linking to just
  • 00:03:48 ID now this simply has to be slash block
  • 00:03:52 slash and then the ID so like this if we
  • 00:03:58 add this year and we now reload our main
  • 00:04:01 page like that now we can go to our blog
  • 00:04:05 page and of course this now all works if
  • 00:04:08 I now go to just blog here then I'm
  • 00:04:12 loading the same page and I can navigate
  • 00:04:14 there too so now this is working
  • 00:04:16 whenever think we could work on is that
  • 00:04:18 all posts now brings us back to slash
  • 00:04:21 blog instead of the root page even
  • 00:04:24 though that's the same here but if we
  • 00:04:25 wanted to fix it we can go to the header
  • 00:04:28 and there we have all posts that we
  • 00:04:31 could navigate to blog here one
  • 00:04:33 advantage of this technique is that now
  • 00:04:36 if I go to a single post I can enforce
  • 00:04:40 this to be highlighted just as if I'm
  • 00:04:43 just on slash blog because if we inspect
  • 00:04:46 this item in the navigation if I
  • 00:04:49 selected here inspected we can see that
  • 00:04:53 slash blog actually has this nav link
  • 00:04:59 next link active class added to the list
  • 00:05:01 item when I'm on slash block and we can
  • 00:05:04 take advantage of that we actually do
  • 00:05:07 already do that here we're assigning our
  • 00:05:09 or a color here border bottom I need to
  • 00:05:12 adjust this though to not have to exact
  • 00:05:15 in it because I now actually want to
  • 00:05:17 color it like this always
  • 00:05:19 even if I'm loading a sub-segment of
  • 00:05:21 / block so now I'm just removing the –
  • 00:05:25 exact part from my next link active or
  • 00:05:28 exact active classes and with that you
  • 00:05:31 can already see now it's marked as
  • 00:05:32 active if I'm on a blog post as well as
  • 00:05:36 if I'm on the here are all blog posts
  • 00:05:39 page now one other thing we can also
  • 00:05:41 notice is that if I shrink this page the
  • 00:05:44 blog posts don't have an equal width so
  • 00:05:46 back to post preview there on the
  • 00:05:50 overall post preview there we're setting
  • 00:05:53 the width to 90% and on bigger screens
  • 00:05:55 to 25m now theoretically you would say
  • 00:05:58 this looks good right they should all
  • 00:06:01 have to equal width the problem just is
  • 00:06:03 that if we go back and inspect this all
  • 00:06:05 we're setting these with settings on the
  • 00:06:08 post preview CSS class which is attached
  • 00:06:11 to the article element however these
  • 00:06:13 articles are wrapped by a link and that
  • 00:06:16 link actually is not a block level
  • 00:06:21 element it doesn't take 100% of the page
  • 00:06:23 width and therefore the width in here
  • 00:06:26 90% refers to the width of our anchor
  • 00:06:30 tag which is an inline element which is
  • 00:06:32 only as wide as it needs to be to fit
  • 00:06:35 the content into itself and therefore
  • 00:06:37 these 90 percent don't have any effect
  • 00:06:40 at least they're not relating to the
  • 00:06:41 page width so if we one relate to the
  • 00:06:44 page width we have to ensure that we
  • 00:06:46 style these anchor text differently and
  • 00:06:48 one of the easiest ways of getting the
  • 00:06:51 result you want is to simply take our
  • 00:06:53 class which is attached to the article
  • 00:06:55 and simply add it to the next link
  • 00:06:58 instead if we do that and we saved at
  • 00:07:01 all and we reload now we get the style
  • 00:07:04 we want on both mobile and desktop
  • 00:07:06 devices because now we're styling this
  • 00:07:09 anchor tag differently and Disney n is
  • 00:07:12 the wrapping container holding our whole
  • 00:07:14 post preview here so this also is an
  • 00:07:17 important change I definitely want to
  • 00:07:19 put into place with that our application
  • 00:07:22 is taking shape and now when I prepare
  • 00:07:24 it to get published now to publish the
  • 00:07:27 application or our blog there are two
  • 00:07:29 steps which are important the first step
  • 00:07:32 is performed or done on storey block
  • 00:07:35 our posts here they're still in draft
  • 00:07:37 mode so we can go to a post and click
  • 00:07:40 that publish button up here to publish
  • 00:07:42 it that's all now you see that this
  • 00:07:45 green bullet here is lit up and I can do
  • 00:07:49 the same for the first post and now this
  • 00:07:51 means that we can fetch them on a
  • 00:07:53 different API instead of fetching our
  • 00:07:56 blog posts with the draft version we can
  • 00:07:59 fetch fetch them with the published
  • 00:08:02 version however I don't want to replace
  • 00:08:05 this manually here instead in
  • 00:08:07 development mode I want to use the draft
  • 00:08:10 version so that whilst I'm working on my
  • 00:08:12 code here or if I'm spinning the server
  • 00:08:14 up to see a preview on story blog when
  • 00:08:16 I'm drafting posts that I already see
  • 00:08:19 the draft the posts and not just a
  • 00:08:21 published ones if I build for production
  • 00:08:24 though I of course want to use the
  • 00:08:25 published version and now we can take
  • 00:08:28 advantage of another feature offered by
  • 00:08:30 next next actually tells us in which
  • 00:08:33 mode were running our application it
  • 00:08:36 switches the mode to production whenever
  • 00:08:39 we're building or generating our next
  • 00:08:42 project if we're just running it with
  • 00:08:44 the development server in the package of
  • 00:08:46 JSON file that's the case if we run the
  • 00:08:48 def command so just next year indirectly
  • 00:08:51 then we'll be in the development mode in
  • 00:08:54 build and generate will be in the
  • 00:08:57 production mode the generate will become
  • 00:08:59 important in a second so we're in
  • 00:09:02 development mode right now and we can
  • 00:09:04 get access to the information which mode
  • 00:09:06 we are through an environment variable
  • 00:09:08 debts injected into this build process
  • 00:09:11 so to say by next we access this
  • 00:09:14 environment variable in a node.js style
  • 00:09:17 by accessing process and now there's a
  • 00:09:22 simply global variable we can access in
  • 00:09:25 our build process it's populated by next
  • 00:09:28 and it gives us access to an environment
  • 00:09:31 property which holds environment
  • 00:09:33 variables which are set up by next and
  • 00:09:35 they're on the other hand we can access
  • 00:09:38 the node and environment variable now
  • 00:09:42 note n is either production in this case
  • 00:09:47 I want to switch this to
  • 00:09:49 published or it's not productions
  • 00:09:55 development then I want to use draft so
  • 00:09:57 this is one way of getting that version
  • 00:09:59 and therefore respecting the environment
  • 00:10:01 in which we're running an alternative is
  • 00:10:05 that we can also use the context
  • 00:10:08 variable or argument here I'll show this
  • 00:10:10 in the block index here here we're
  • 00:10:13 fetching the blocks and I also need to
  • 00:10:15 pass the version here now we can access
  • 00:10:17 context and there there was a is def
  • 00:10:20 property this is either true if we're in
  • 00:10:24 development mode then I want to use
  • 00:10:25 draft or it's false if we're in
  • 00:10:27 production mode then I want to use
  • 00:10:29 published so just as in my index table
  • 00:10:33 you fall in the post addy folder but now
  • 00:10:35 with a different approach a both can be
  • 00:10:38 used this environment variable file is
  • 00:10:40 available everywhere this context based
  • 00:10:43 approach is only available in async data
  • 00:10:46 where we get to context now I need to
  • 00:10:50 copy that code here into our route in
  • 00:10:52 next review file because here we're also
  • 00:10:54 fetching our blog posts and I'm adding
  • 00:10:57 it there too and with that we now have a
  • 00:10:59 setup that should actually still work
  • 00:11:01 fine in development mode and it does we
  • 00:11:06 can still fetch our content here oh we
  • 00:11:09 also need to update this in the about
  • 00:11:11 page there we also should use that
  • 00:11:14 either the environment variable or
  • 00:11:15 context and with that we got an
  • 00:11:18 application that works fine in
  • 00:11:19 development but that should all the work
  • 00:11:21 fine in production and now that's the
  • 00:11:24 other part I want to build this
  • 00:11:26 application for production of course I
  • 00:11:28 want to serve it from a real web host
  • 00:11:31 now preparing our CDN links here to
  • 00:11:36 fetch the right data is one important
  • 00:11:38 step another important step of course is
  • 00:11:40 to simply build and optimize our
  • 00:11:42 application now thankfully next gives us
  • 00:11:45 the entire production build process out
  • 00:11:48 of the box with all the optimizations
  • 00:11:50 already configured we don't need to do
  • 00:11:52 anything about that we just have to run
  • 00:11:54 a command and now we actually have queue
  • 00:11:57 commands for building our next step we
  • 00:11:59 can either deploy our entire prod
  • 00:12:02 check folder here two web hosting
  • 00:12:05 service that runs node.js and then we
  • 00:12:08 can run NPM start to use next start
  • 00:12:11 indirectly which will spin up a node
  • 00:12:13 server provided by next which will
  • 00:12:16 render our pages on the fly so then
  • 00:12:19 we'll have our application on a node.js
  • 00:12:21 server the alternative is that we pre
  • 00:12:25 generate all the pages so that we can
  • 00:12:28 deploy a bunch of static HTML Javascript
  • 00:12:32 and CSS files to any static host like
  • 00:12:35 AWS s3 like firebase hosting this is the
  • 00:12:39 approach I want to use because this
  • 00:12:41 allows us to host our application in a
  • 00:12:43 very cost-efficient way on hosts that
  • 00:12:46 only charge us for actual requests
  • 00:12:48 instead of for uptime so I will quit my
  • 00:12:52 development server here and I will run
  • 00:12:55 npm run generate this will execute this
  • 00:12:59 highlighted script here and now it will
  • 00:13:01 try to generate all our routes like the
  • 00:13:04 about page ends on so first of all it
  • 00:13:06 builds the project and once it's done
  • 00:13:10 building it renders everything and get
  • 00:13:13 an error here now let's see where this
  • 00:13:15 is coming from if we scroll up we see
  • 00:13:17 for the about page we get a 404 error
  • 00:13:20 and the same for the just slash nothing
  • 00:13:23 page now this makes sense because whilst
  • 00:13:28 we did change the version we're fetching
  • 00:13:31 we did not update the token we're using
  • 00:13:34 for fetching this if we go to the next
  • 00:13:36 contact we see we're always using data
  • 00:13:39 access token here now that access token
  • 00:13:41 if we go back to story Block in to the
  • 00:13:43 dashboard this is our preview token
  • 00:13:46 which we can only fight use to fetch
  • 00:13:48 draft versions now we can create a
  • 00:13:51 public where token for published
  • 00:13:54 versions by selecting public in this
  • 00:13:56 drop-down and clicking create token now
  • 00:13:58 this is DX is token we actually have to
  • 00:14:01 use to fetch our content in production
  • 00:14:04 now of course we can switch the access
  • 00:14:07 token like this now if we rerun npm run
  • 00:14:10 generate here
  • 00:14:13 then we still get an error because the
  • 00:14:15 problem wasn't really that token it was
  • 00:14:19 a 404 error right not for a one for
  • 00:14:21 unauthorized now that 404 error is also
  • 00:14:24 coming from the fact that at the about
  • 00:14:26 page isn't published so if we publish it
  • 00:14:29 and then we run this again and we
  • 00:14:32 replaced to token then we indeed do
  • 00:14:35 fetch our content correctly so let's try
  • 00:14:38 this again let's see if this now
  • 00:14:39 finishes successful
  • 00:14:43 now does looks better but of course we
  • 00:14:46 have a problem in the next config we
  • 00:14:48 hard coded that production token in
  • 00:14:50 there but if we ever want to test our
  • 00:14:52 application again want to run it in
  • 00:14:54 development mode or maybe just want to
  • 00:14:56 spin up the development server for the
  • 00:14:58 preview on story block then this won't
  • 00:15:00 work because now we have to publish
  • 00:15:02 token and with that fetching draft
  • 00:15:04 versions will be hard we can only fetch
  • 00:15:06 published versions so we should go back
  • 00:15:09 to the dashboard and story block and
  • 00:15:11 fetch our preview token again and now in
  • 00:15:14 the access token field we actually want
  • 00:15:17 to swap that token dynamically and we
  • 00:15:19 can again use a an environment variable
  • 00:15:22 for this so again process enth
  • 00:15:24 and now it's no 10 so that's the same
  • 00:15:26 approach we used Nia next or do you file
  • 00:15:28 any post ID folder and now we can again
  • 00:15:31 check whether this is production in
  • 00:15:36 which case I want to use that production
  • 00:15:38 token we just hard-coded in there
  • 00:15:40 otherwise I want to use that development
  • 00:15:43 token I just fetched again from story
  • 00:15:45 block and now we can try running npm run
  • 00:15:48 death again and this should not work
  • 00:15:50 with the preview tokens with token that
  • 00:15:53 allows us to work with our unpublished
  • 00:15:58 posts too and it should also still work
  • 00:16:02 if we generate again then it will
  • 00:16:05 automatically take that public token
  • 00:16:07 which allows us to fetch published
  • 00:16:10 content from story block and now we have
  • 00:16:13 a really dynamic setup where we are
  • 00:16:15 using different tokens and different
  • 00:16:17 versions for fetching our story block
  • 00:16:20 content now npm run generate gives us
  • 00:16:23 this dist folder which holds all the
  • 00:16:25 content we need to deploy so we only
  • 00:16:27 need to deploy a color of that folder
  • 00:16:29 nothing else to a web host however in
  • 00:16:33 that folder if we watch closely we got
  • 00:16:35 the block subfolder which makes sense
  • 00:16:37 but in there we only got the index.html
  • 00:16:40 file now in their index.html file if we
  • 00:16:43 scroll to the right we seem to have our
  • 00:16:45 blog posts in there that's looking good
  • 00:16:47 but one thing is missing
  • 00:16:49 we don't have subfolders for the
  • 00:16:53 individual blog post pages if we were to
  • 00:16:56 deploy
  • 00:16:57 the content of the dist folder we could
  • 00:16:59 only directly navigate to block to the
  • 00:17:02 block root folder here not to the
  • 00:17:04 individual blog post we would get in 404
  • 00:17:06 error there because these pages haven't
  • 00:17:09 been pre generated by the generate
  • 00:17:11 command the reason for this is that
  • 00:17:13 these pages have a dynamic title dynamic
  • 00:17:17 ID underscore post ID now at runtime
  • 00:17:20 when we're clicking around in our next
  • 00:17:22 application and it therefore runs like a
  • 00:17:25 single page application then this
  • 00:17:27 doesn't matter because then this will be
  • 00:17:29 loaded on the fly and rendered in the
  • 00:17:31 browser for pre-rendering however so for
  • 00:17:34 pre generating the pages we need to
  • 00:17:37 configure which dynamic pages we have
  • 00:17:39 the problem with that of course is how
  • 00:17:42 do we notice an advanced worthy
  • 00:17:44 developer we don't know which content
  • 00:17:46 will eventually exist thankfully we can
  • 00:17:49 fetch the content dynamically from
  • 00:17:51 within the next config
  • 00:17:53 there we can add a new property which is
  • 00:17:57 called generate generate is simply added
  • 00:18:01 to the route object in that next config
  • 00:18:03 and it holds a JavaScript object as a
  • 00:18:06 value now in generate we specify which
  • 00:18:10 routes should be generated for this we
  • 00:18:13 add a routes property and that object
  • 00:18:16 and that in turn holds an array it can
  • 00:18:19 also hold a function that returns an
  • 00:18:21 array by the way and in that array we
  • 00:18:24 specify which routes well we want to
  • 00:18:26 render now we don't know these routes in
  • 00:18:28 advance so we need to dynamically fetch
  • 00:18:30 them for that I will indeed add a
  • 00:18:33 function as a value so that we can
  • 00:18:35 execute code here and now here I want to
  • 00:18:39 actually fetch my routes from from story
  • 00:18:43 block I want to find out which posts we
  • 00:18:45 have so to find out we need to make an
  • 00:18:48 HTTP request and we can do that in NOx
  • 00:18:51 conflict this Java JavaScript file which
  • 00:18:54 it is in the end is executed dynamically
  • 00:18:57 during the build process now for that I
  • 00:18:59 want to use access we can't use the
  • 00:19:02 story block API in here in that
  • 00:19:04 javascript file because it's not part of
  • 00:19:07 the next project so I will simply import
  • 00:19:10 Axios from and now it's just from axis
  • 00:19:16 like this we do have that folder in the
  • 00:19:20 node modules folder we should have it
  • 00:19:22 there at least if we go to node modules
  • 00:19:24 you should have this X is folder because
  • 00:19:27 it's a dependency of next is X's of that
  • 00:19:31 module so we're importing X is here and
  • 00:19:34 now with that and this function we can
  • 00:19:37 use access to make a get request and now
  • 00:19:41 we want to make that act that get
  • 00:19:43 request to that story block API to which
  • 00:19:47 you can find the URL in the official
  • 00:19:48 Docs but the URL is just HTTP slash
  • 00:19:52 slash API dot story block comm /v 1 / CD
  • 00:20:00 n slash stories and here we now need to
  • 00:20:06 specify our version which is published
  • 00:20:09 here we don't need to switch this
  • 00:20:11 dynamically because will only run this
  • 00:20:12 if we want to publish our application
  • 00:20:14 will add a token that token will be our
  • 00:20:19 publish token here so this first one so
  • 00:20:23 we'll specify this here and we need to
  • 00:20:25 add an extra parameter CV for a cache
  • 00:20:29 version this should be a timestamp for
  • 00:20:32 that I'll use the logic the story block
  • 00:20:35 SDK uses you can look up its source code
  • 00:20:38 it's public open source they use a
  • 00:20:41 formula which is math.floor and then
  • 00:20:44 date now / when e free so this should
  • 00:20:51 give us a number which is passed here
  • 00:20:54 this just ensures that we're always
  • 00:20:55 fetching the latest version and I'll add
  • 00:20:58 one thing in front of that and that
  • 00:20:59 starts with block because we of course
  • 00:21:04 only want to fetch the content which is
  • 00:21:05 in the block subfolder now this will
  • 00:21:08 give us a promise and in there we get
  • 00:21:11 our response of course now that response
  • 00:21:14 will hold all the blog posts we have so
  • 00:21:17 now here we can infer which routes we
  • 00:21:19 got in the end so I will return access
  • 00:21:23 yet so that this function X
  • 00:21:24 you should we'll wait for this promise
  • 00:21:26 to resolve and in here in this den block
  • 00:21:28 I want to return my routes array which
  • 00:21:31 should be rendered dead will be an array
  • 00:21:34 and in there we just pass a bunch of
  • 00:21:37 strings for example we have just slash
  • 00:21:39 we want to render the route route we
  • 00:21:41 want to render slash block and we also
  • 00:21:44 want to render slash about so these are
  • 00:21:47 the pages it would have rendered anyways
  • 00:21:48 but we specify them again here but now
  • 00:21:52 we can also add our dynamically fetched
  • 00:21:54 routes so we got that in the response
  • 00:21:57 data so block posts can be fetched from
  • 00:22:02 response data this will be a JavaScript
  • 00:22:05 object and there will have a story's
  • 00:22:07 property which holds an array of all our
  • 00:22:10 blog posts and this array is in the end
  • 00:22:13 what I want to add here however I'll map
  • 00:22:16 it because I only need to extract one
  • 00:22:18 piece here so this will be mine dividual
  • 00:22:20 blog post and I want to return blog
  • 00:22:23 posts like this will just be the URL ID
  • 00:22:27 thingy off the blog post so now will
  • 00:22:30 return or will get an array which only
  • 00:22:33 contains these slacks so these strings
  • 00:22:35 and I can use the spread operator to add
  • 00:22:38 this to my array of routes here with
  • 00:22:41 that we should have a setup which
  • 00:22:42 actually fetches all the blog posts and
  • 00:22:44 then returns an array off the routes you
  • 00:22:47 want to generate let's give this a try
  • 00:22:48 by running npm run generate again we get
  • 00:22:51 an error right away
  • 00:22:55 yeah we're in a no js' follower this
  • 00:22:59 JavaScript father's executed Bruno chess
  • 00:23:01 so of course here we got access which we
  • 00:23:04 actually require so like this so wrong
  • 00:23:09 import this is using nodejs requires
  • 00:23:12 syntax here because no tre has execute
  • 00:23:14 set file
  • 00:23:15 so with that updated import statement up
  • 00:23:17 there let's see if it now works still we
  • 00:23:21 get an error could not resolve routes
  • 00:23:24 let's see what's wrong we got a typo in
  • 00:23:27 that URL here in the next config file
  • 00:23:30 there should be a question mark after
  • 00:23:32 stories before version because it's the
  • 00:23:34 first query parameter so now with that
  • 00:23:36 if we run and can run generate again now
  • 00:23:40 this is looking a bit better though we
  • 00:23:42 still get arrows here for our sub pages
  • 00:23:46 this page could not be found
  • 00:23:47 the reason is because we should use the
  • 00:23:52 full slug here full underscore slack
  • 00:23:54 this will include the slash block so not
  • 00:23:56 just a – second – post which is too
  • 00:23:59 slack but full slack contains the full
  • 00:24:01 path which includes the blog subfolder
  • 00:24:03 that of course needs to be added sorry
  • 00:24:05 about that so now finally with that it
  • 00:24:08 should work by using the full path as it
  • 00:24:11 is stored on story block so now with
  • 00:24:14 that if we run generate again now this
  • 00:24:18 looks way better now if we inspect the
  • 00:24:20 dist folder and go to block we see
  • 00:24:22 subfolders for the blog posts and in
  • 00:24:25 there we have our pre-populated HTML
  • 00:24:28 files so finally this is the finished
  • 00:24:31 set up and now we can deploy this for
  • 00:24:34 this I will use AWS as free but you can
  • 00:24:37 use any static host as free is really
  • 00:24:39 comfortable or convenient to use though
  • 00:24:41 in there you simply create a new bucket
  • 00:24:44 something like next story block YouTube
  • 00:24:51 she was a region that should be fine we
  • 00:24:54 can skip the other steps and just click
  • 00:24:57 create then we can go to that bucket and
  • 00:25:01 now we'll simply upload all the content
  • 00:25:04 from this test folder so you simply
  • 00:25:07 navigate into that dist folder
  • 00:25:08 and select all the content which is in
  • 00:25:10 there including the subfolders so simply
  • 00:25:14 click open and now the subfolders are
  • 00:25:17 missing so let me quickly drag-and-drop
  • 00:25:19 that all in there it's a bit easier so
  • 00:25:23 all the content including the subfolder
  • 00:25:26 should go there uploaded thereafter so
  • 00:25:28 that you have the content of the dist
  • 00:25:30 folder in that bucket and now you just
  • 00:25:32 need to configure it to serve as a web
  • 00:25:34 host for this we go to properties an
  • 00:25:37 able static website hosting use this
  • 00:25:40 bucket to host a website now ensure that
  • 00:25:43 you do indeed surf the index.html file
  • 00:25:45 as your root document and we don't have
  • 00:25:48 that here but if you have an error page
  • 00:25:50 you can of course create one you should
  • 00:25:52 point to that here too
  • 00:25:53 here I'll just point to an XHTML and hit
  • 00:25:57 save and now under permissions we need
  • 00:25:59 to provide public access to this bucket
  • 00:26:02 we can do this with a bucket policy
  • 00:26:04 there you can click on documentation at
  • 00:26:07 the bottom to see some examples like a
  • 00:26:09 policy examples here we want to have the
  • 00:26:13 read-only permission to anonymous users
  • 00:26:16 copy that bucket policy here go back to
  • 00:26:20 the bucket and paste it in there and now
  • 00:26:22 example bucket has to be replaced with
  • 00:26:25 next – story block – YouTube or whatever
  • 00:26:28 your bucket name is of course hit save
  • 00:26:31 thereafter and now we have public paksas
  • 00:26:35 which is fine of course we want to host
  • 00:26:36 it back on static website this is the
  • 00:26:39 link if we click on that we can see our
  • 00:26:43 working web page here and if we reload a
  • 00:26:45 page this will work too because now
  • 00:26:48 we're really just fetching the
  • 00:26:49 statically generated content and this is
  • 00:26:52 all this is all I wanted to show you
  • 00:26:53 this is our very simple block which we
  • 00:26:56 built with next and story block finished
  • 00:26:59 now we have everything in there which we
  • 00:27:01 need we have our content management
  • 00:27:03 system story block which works headless
  • 00:27:05 which uses an API so that we can get
  • 00:27:08 access to the content and we built a
  • 00:27:10 nice front-end which will work like a
  • 00:27:12 single page application after the first
  • 00:27:15 page load but which will also take
  • 00:27:18 advantage of pre rendering or pre
  • 00:27:20 generating our pages
  • 00:27:22 so that we always fetch the pre-rendered
  • 00:27:24 version which of course is great for a
  • 00:27:26 search engine optimization I hope you
  • 00:27:29 like this and I hope this was helpful of
  • 00:27:30 course you can tweak there's a justice
  • 00:27:33 styling dive deeper definitely play
  • 00:27:35 around with next and with story block I
  • 00:27:38 hope this gave you some ideas and
  • 00:27:40 something you can use in your next
  • 00:27:42 projects bye