GitLab Digital Experience, 14 Jan 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: CSM Content Migration Working Session 2

Description

Digital Experience team working session for content migration of GitOps topics page to new Netlify CMS template.

https://gitlab.com/gitlab-com/marketing/inbound-marketing/growth/-/issues/826

A

Hello how's it going hello, I'm laura barker, I'm here with tyler williams and we're going to do take two of our uh topics: page migration, to our new netlife cms template.

B

Yeah, that's gonna work super great.

B

Why are we gonna? I won't either so we're gonna do this. um We mentioned the all. The reasons went through them on the last video.

B

um Specifically, uh we want to show um a little bit for content creators about, what's going on under the hood in nullify, cms and sort of like how how you can edit content, create content locally using that tool and then, but I think, some of the more detailed stuff on this call is going to be really useful for the development team and people who are helping out specifically with migrating content into netlify cms.

B

So we have to move existing content into the structured format that our netlife cms system expects and that we have to find so this will kind of go over those internals.

B

In the first video we had a couple bugs, so we couldn't uh successfully complete the task we got really close and this time we will successfully complete that task.

A

We can fix the bugs and we're ready to go ready.

B

A

um So, like the the what technical, what we're doing um we're gonna migrate, existing um get ops uh topic, page content into a data file using netlify cms locally, and then uh we might preview the page locally. If we have enough time for middleman to rebuild um and that's what we're going to do.

B

Excellent well cool. I will share my screen. I will drive and lauren will navigate desktop 2, all right that moved all of my stuff around cool.

B

Okay, I'm ready to go so I'm looking at uh here's our agenda here, but this is the issue we will be working on we're going to be targeting this gitops page and get started so I'm on master and the repo I'm in the repo I'm going to pull just to get the most recent.

B

That might take a moment. I've pulled up our netlify cms like developer, specific documentation, there's a markdown file in doc, and it's linked out in the readme of the repo. This is much more specific to like folks who are likely to be working with the code side of things on netlify cms. We will release a handbook page specifically for content editors later on, but this has some useful commands that I will be referring to. So I got the poll, and so now I'm going to check out a new branch.

B

uh I am for inbound marketing, 826 migrate, get ops topic page to netlify, cms, excellent and we're on the new branch yeah, um and so uh it's useful to know that even with netlify cms, it's still a git based editorial workflow, especially this local um workflow. So we do still have to check out and commit and do all the same sort of content, editing things uh that we're used to here. um So, first up, I'm going to start the middleman server, so I've got to change into the marketing directory.

B

I'm going to open up. I've got two terminals here, because so we've got middleman server on the right, that's running and then the netlify cms proxy server on the left. These commands are in this uh markdown file under how can I use it locally.

C

B

Cool and so that'll take a moment to spin up, and I will go to you so in my browser we can go to localhost four five. Six, seven slash admin uh trailing slash required. uh You will run into bugs, if you don't add the trailing slash which we showcased in the last video, where I showcased in the video with tina middleman is still running.

A

It's great to see the documentation there that was uh recently deployed.

B

A

B

And I've watched my I've watched my screen. I don't know if that just showed my uh my screen lock.

B

Yeah I've got the hot corner on the right which is, and I'm like constantly. I have a kvm switch on my work, computer, which is a macbook and my personal, which is a pc uh and the x button is in the top right for my pc stuff. So I always.

D

B

Up hot cornering that um all right, we're we're up and running, got a nice little notification, telling us that again uh same port four, five, six, seven slash admin- and here we are um do we do. I still not have these topic pages. We would.

D

B

Have seen okay yeah what's going on, I wonder um so. No uh sites marketing.

A

Yeah, I saw your comment on this. It works um for me locally, but it's not.

B

Happening also look at the config, so this expects it thinks that it should yeah it's. It feels like it's a um something about like how it's navigating these relative file paths. I also wonder if oh hey, this is on me.

B

I did not read I'm going to add this to the documentation I have been so I see in this config file. It asks to run the npx notify proxy.

D

B

Directory and I've been going for marketing- this has been my fault the whole time, and I am extremely apologetic about this. Oh yeah.

A

B

A

You're gonna have to do take three of them.

B

No, this is wow, uh I sincere apologies as everyone who's watched all of these videos, we've been making um I've.

A

Just been on the.

B

A

I'm glad we caught it at the beginning of this one. Instead of.

B

Instead of like 20 minutes in yeah,.

A

B

Well, I think if folks stick with us here, hey there, it is phenomenal.

C

Yeah absolutely phenomenal.

B

Okay wow there.

C

B

Again, apologies um and I will uh make sure to I'm gonna, make a note to.

D

Makes me so happy.

B

uh Update docs to be extremely clear about where to run lfi.

D

B

um And perhaps perhaps a yarn script, uh maybe we just add something to the uh package json scripts, so that, like there's just one command and then we always control it, and we can like ensure that people are in the right directory like running it from the correct directory. Something like that and.

A

Many many users um have never run two terminals. At the same time,.

B

Yeah yeah yeah, we could even do we could maybe yeah. We could maybe make a nice little script there that like runs them simultaneously cool okay. Well, here we are.

B

So now we can see like all this excellent stuff here in the topics pages we're in the admin panel, um and I am going to let you navigate a little bit more, because this is still a touch new to me. Now.

A

We are going to add a new topic: okay, yeah, and what we're going to want to do is probably pull that get ops page from the live site over to. uh So you should go side by side with the admin and the live page and we're just going to cut and paste that content into um the admin.

A

Yeah topics- um yeah excellent, cool, great, so we're gonna start with the seo description. um This you either look at the code source or the generated code in um our.

B

Repo, oh, that might be a little faster for me in this moment,.

A

Yeah, whatever works for you.

A

And I believe I made the seo description required, so we gotta have it there yep.

B

All right seo description that looks correct here. That's in our description.

A

Bag yeah and I would, um in your netify admin, hit that little eyeball so.

B

A

Goes to the the single panel we haven't worked on the preview, rendering yet canonical path.

B

And this I always get turned around with like canonical absolute relative. This we want it to be like the canonical means. If someone asks me what the live link is, that is the link, so it.

A

B

A

I would not include, don't include the um first part.

B

Okay and so okay, so this is this gets generated with the domain, so it should just be like relative and like assume that about.getlab.com gets filled in.

A

Yes- and you want ford the first slash, we're gonna touch base with shane, rice and hannaf on this as well, because we're gonna want to put a better description under there cool excellent. What we're looking for, but currently that's how it's in use right now.

B

And then just forward slash uh the first one. Yeah keep.

A

B

A

Yeah um the final, so this um final url path is what the file name is going to be, how the data file is going to be saved, and it's also what that final slash is going to be in the url. So for this one, it's git ops got.

B

It- and I um I was working with this yesterday and like this- is the the useful bit of information there to me because, like for for different pages, this is for the topics collections, but for different collections, we're likely to have different url structures. So just knowing like oh, this is like this capital. Url is what this value will be is useful and.

A

We'll have to iterate on this when we start doing child topic pages right, so that that url's dynamically built cool social share, yep.

B

Hey this is awesome.

A

This links to a specific directory- I don't know if we have that git ops, social share image in there um yeah that looks.

B

D

B

Looks good enough.

A

B

Use this one yeah.

A

Let's use that one: okay.

B

At least for demonstration purposes, the.

A

Demonstration is, you know, that's close enough. Yeah.

B

Cool then moving forward title, I'm just grabbing from the title here, yeah the body we did this last time. We did um a link to we took this button and we turned it into the link yep. So it was like in here all.

A

And with the header the way this ux is right now we really do want to have like a little blurb and then a link, um but we could just do the link for now, when you see our preview, you'll it'll, look a little wonky, so we'll add some stuff there. After we get the initial migration done, cool.

B

I'm going to make this a relative link as well.

C

B

Excellent, okay and that's all for the header body, correct yeah, cool, uh really excuse me related content, um and so that is since it's here. That's these correct! No.

A

That is a lot. So if you go open the cicd topics page in another browser window, um we'll see these related content links, and it's in the header underneath the more on this topic um back to the top.

B

A

B

It right- and these are, I think these are like anchor links to the body.

A

Those are different, so if this get ops page doesn't have any of those header links, so we don't need to add any and if um none are detected, then our template won't build those in.

B

Cool awesome. What would where would I find that, like in a page that, in the existing page that had those, what would they look like? Would they be around this area? Would they be.

A

Down here right now, it's a sidebar.

B

It's a sidebar, okay, cool.

A

Yeah side, rail with um other links, cool.

B

So it'll kind of look like this.

A

Yeah and we're working with um ux and content on future iterations of how to handle those cool, excellent cover image.

A

Let's, what's in here in our topics, page there's already something close enough: um if not we'll just move it.

B

I see well that's ansible specific there's a blog series about get ups yeah.

A

Let's go ahead and grab um oh wait. Go down. I.

B

Saw other things this looks this one on yeah: let's use that cool, yeah, excellent cool.

C

And I think that's.

B

Yeah this that's this one here is.

A

That there we go it's already there. It's already.

D

There, okay, it's coming from inside that repository.

C

So I'm getting excited.

A

About small things like that,.

B

Yeah, it's very it's I it's yeah, it's so useful um and then from here I'm just copying. So this.

A

B

Body so I'm going to grab all these things.

A

Paste and you're cutting paste into a markdown editor here. um Don't yeah stop at the benefits. That's the next new block.

B

See what we pulled in so this did not pull in any of that formatting yeah.

C

B

These, oh wait. Oh that's! Not a header.

A

And the linking is off if you open that page in your ide, I think that content might already be in markdown sites sites, marketing topics, uh githubs.

C

B

Git ops index- I think, oh, it's all in the hammel. I think it might be a little faster just to manually drop these things in. That's fine, uh get up to overview.

B

uh How do teams? It looks like an h3 and.

A

Let's go back and do the the links in the content um after this video.

B

After the video got it yeah, let's, we won't do too much there um get ups. I will quote this.

A

Other way cool and then let's do the.

C

A

Block styling um in the main content: oh there, it is, it's already block, quoted cool.

B

Excellent and then so we'll go back, we'll fill in these links um and it covers some formatting there as well, um but we'll do that off video and then benefits. So now, that's a new block, correct.

A

B

Cool so we'll skip so there's no pull quote here, but there might be in some places, yep benefits title is this.

B

Description here we don't have one. I would. A description would be like another, like paragraph underneath that.

A

B

And then to the list we add it.

B

So adding the title adding the description I see these are optional, so that's great in case things.

A

Are image directory.

B

Hey look at that.

A

All the pretty icons.

B

Yeah, uh let's see, if collaboration does what I thought a little.

A

It might not be there.

B

A little bit of trial and error- maybe um maybe I'll, go back and get all the correct ones after video, so we don't spend a whole video searching. So I will just grab this first collaboration. One choose yeah. What.

A

We'll want to do eventually is take all these these, especially these new icons that we brand has been building and place them in this icons directory, so they're, all in one place and easily navigating navigatable, but you'll have to when you move that image go and update the paths wherever it's used elsewhere.

A

B

um Do you want to so that's that's, adding a benefit. We can add a second one.

A

Do a second one just so we can see um in the demonstration the start of that block, yeah and then control.

B

Access, I'm just going to use this one yeah cool and you can- and these are draggable correct. So I can change the ordering yeah and sort of see in the yeah excellent, oh and it bumps me all the way to the top cool. Oh and you can collapse them and drag as well, which is nice.

A

What's that benefits.

B

uh After benefits, here we have some more body, challenges, get ups work and then so I see resources title here.

A

Yeah, let's fall under the resources block, so the res: uh no, not resources the cta banner okay. This cta banner is another content block that can go underneath the benefits block. Okay and it's also configured um to add ctas, but it doesn't have to have ctas.

B

Cool, so if I do this title and this body here.

A

Yeah yeah and I can.

B

A

Add another one for the make get ops work.

B

Cool okay, that's really useful to know.

A

B

I like that, I like that it's so flexible. I think that like since so much of this content is like very similar, you know not getting too hung up on the labels uh yeah. This is where.

A

You we can add some fancy cta buttons, you can see, there's a field there to add something. That's.

B

Here, cool and now we're on to resources, yeah, so grab the title got a description. um Did we confirm if this tweet.

A

B

A

Gotta, add the please share your tweets there. It's it's not built in the template cool, whatever. Whatever you decide to put there.

B

Cool and then so these are now. These are resources.

A

But are these blog articles.

B

uh This looks like I don't get my it's not showing me my preview uh yep. This looks like blog blog, blog, correct and then oh and.

C

A

Are the resources yeah.

B

A

um Let's, um under go back up to the what um this get ops page is calling resources we're now calling this suggested content right.

C

Okay, I'm gonna.

A

Copy that down into that block.

B

Cool so yeah, so there's so I will do.

A

You know the um actual blog link.

B

Yeah yeah so in the suggested content, so I have to add it oh cool and this pulls from and this we want it to be relative correct. So it's slash blog yep cool there's. This helpful hint text there um and we would do that for each of these and it'll pull the title and the images.

A

For each one, I'll just add another as a quick.

B

Example, that's super useful copy link address.

A

And then, let's now go add some of the resources. I guess we can keep the resources text there.

B

Yeah that feel it feels like it's kind of the same block right just so. We flip these two blogs and resources. Let's.

A

Add um one of each type of resource cool.

B

Copy link address so this is a webcast yeah, and so here it's probably like use judgment about. I don't know how many external resources there are, or perhaps like youtube videos, but like relative urls for things on about doculab.com and.

D

B

Like the full urls for things like is this yeah like this is not right, so this is.

D

B

The url is on page.getlab.com, so we'll use the.

A

You know it's not gonna break the whole website. If you do put the whole about get lab url in there. The review app just won't work.

B

That makes sense, um cool and then white paper. This is white papers and ebooks.

C

B

And then videos, I will grab.

B

Oh no, it's gonna make me open this link. Anyways, I tried to be smart about it. Okay, add a resource.

B

I think I double added cool this one. um What uh should I do? The.

A

Yeah, I need the title.

B

Needs the title: okay, it says it's optional. Is that not the case.

A

Oh sorry hold on right now to um it's optional, to add resources, but if you are adding a resource, it does need these fields, so I can change um those to required in the admin.

C

A

B

Cool sweet there we are, I think, that's just about everything.

A

B

And so from here we're gonna, publish and publish now yep is there. I haven't played hey it worked.

B

I have um I haven't played with the like other options under publish there's like create new and something else. um What do those do.

A

Super cool, if you go uh click on the button, so we can see what those other options are.

B

Oh this, I think it's now.

A

And that's um publish and create new, so that will actually create the data file and start another one, and oh duplicate will um copy everything that you've just entered and opened a new one with all the same data.

A

So you can just make sure when we turn on the editorial workflow- and this is hooked to our uh about gitlab.com url, there's going to be a mode that says draft and when you click on that, it's going to take all of your changes, create a branch and then push them up to get lab and then open a merge request with all those changes.

A

And then it's going to fire up a review, app cool which was going to be so cool and then you can navigate in the admin all of the drafts that are open um associated with this content.

A

We still have um some iterations to work on that process plus we need we're waiting on infrastructure to get that oauth application turned on.

B

Cool um yeah, that's super! That's super! I was looking at that stuff last night. It looks awesome. I'm really excited.

A

B

People are going to like it. It's going to be really cool.

A

B

A

D

B

Yeah um well cool, so we created that I I hopped I've gone back and forth in this main view to see that, like the publish options, um but I went back into git ops, which is what we just made um and everything is published. We see changes saved, published up here um and then I'm gonna hit. So this is the live on the right here. This is what's.

D

B

And I'm gonna hit my localhost, um I think middleman is rebuilding or perhaps something is off.

A

See what the data file is saved as let's get off.

C

B

I'm gonna move this window here.

B

um So I know there's something going on. Oh you know why? Because I just changed the um domain, and I just I'm not serving this with an ssl certificate for my local host. It should just be now.

A

It's doing something.

B

I tried to be super clever and, like that's always not the right answer. Let's open.

A

um Just like a page that we know oh exists, that's thinking.

B

Okay, there I see it on in my terminal here now it's doing a thing: hey look at it. This is phenomenal.

B

Cool awesome, this.

A

Is first iteration through we can see, um there's still more work to be done, like the header probably want some more content up there. So it's not so blank this header image may or may not use it anymore. um So this would be we'd push. These changes up once we're happy with them up to an mr and then hand that over to the content team, and they can advise us how to continue massaging the data to make it look good, but this is the initial initial migration yeah, the related blog posts at the bottom.

A

I'm really excited about this. Oh.

B

Wow this is so nice and this is yeah. This is awesome. I have I really. I really love like this little block. I love these icons here, they're, so fun, yeah, excellent, well, cool um and another note too. So this gets saved so when I just went to like double check to see what was going on so this gets saved up. So you can see.

B

I've got like my sort of like um get highlighting going on in my left hand panel here and so the data file at the root of the directory, uh oops not builds um and then under topic, because that's how we've configured it and then it made gitops.yaml and that's what we're looking at here. All of this behavior is defined.

B

So if you get turned around like, I did many times in all of these videos, um but we can go into the netlify cms configuration and see these things. So this is, you know the folder and that's precisely where we are in getups.

A

And that here's.

B

All the content.

A

Yaml file that that's really the the heart of how our cms is going to work. It allows us to configure many many things. Yeah.

B

Cool I was successful, and so from here you know, like you said, like same workflow as I would you know, uh add it and get push it up. Make an mr assign it to the correct people iterate as needed.

A

Yeah awesome super cool, okay,.

B

Cool. Thank you see ya.