GitLab Digital Experience, 19 Feb 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Child topic page migration working session

Description

Working session of a child topic page migration to new Netlify CMS template.
https://gitlab.com/gitlab-com/www-gitlab-com/-/merge_requests/75400

A

Okay, so we're going to migrate a child topic page over to the new template and I'm just going to run through the process for this. This is the page that will be migrating. What is developer security? It's an application security child topic page. I have my local repository here.

A

This is the markdown file that we will be migrating. It is uh index.html.md.

A

So if you see a topic child topic page um with that style of ending we'll have to set a redirect as well, I have my local middleman fired up along with the admin so I'll just bring up here's my admin child topic page and we're going to use this snazzy tool.

A

I like to have the file open in my editor too, just to sometimes make it fast. um This description uh is the seo description.

A

Canonical path here is the part that we're actually going to be changing and I'm actually going to grab the full url from a.

A

I have the full url in a window over here, um I'm gonna edit it here, but instead of the dot index html, it's just gonna be a hard path like that canonical path. This is what the new canonical path will be: parent topic, application security.

A

This is just what we want the data file to be named and the final url path, um social share image.

A

Unless one is uh designated over in the child topic page we're just using the blog blog cover default grab the title.

A

Header body, this doesn't really have a header body, um so I'm just gonna go ahead and grab all this body content.

A

And we're gonna skip the header body and we're just gonna pop this body content in here, and we have this uh cool editor, so you can just change to the markdown mode and pop it in right there at the bottom. We've got this learn more about devsecops.

A

Let's see learn more, do we have a section that got related content? Those are those links at the top which usually link to other topics pages. These are not. These are linking to looks like resources, content um and we've got a resources block here awesome.

A

So, let's add perfect. So let's do the resources. Title first learn more about devsecops, we're going to add our first resource, which is best practice.

A

And that's the url!

A

I'm going to actually open this url to see free, download.

A

In this article so looks like it's an article or an ebook, what do we get?

A

Look? We got articles awesome on to the next resource.

A

A

Solutions, we don't have a solutions type, so I'm going to actually open that over here solutions.

A

Well, this looks like a cta module actually.

A

So I'm gonna actually put that in a separate one, so we're gonna just come back to that one, because it's a cta, we're gonna do this final.

A

A

um We see webcast in the url there so make a webcast um cta banner. Here we go so let's make a cta out of this. That links to solution within our.

A

Site and cta button, we know that's the url.

A

And I'm just going to go with the learn more. This might be something um when I'm making a call like this I'll, definitely reach back out to tina double check that that was right, move or not, and okay, so that looks. Okay, we're gonna, publish it, so our work is saved.

A

Oh, so we need a header body.

A

Let's see um I'm going to go ahead and call this the header body and I'll remove it from the body.

A

Try publishing again yeah, we got the green and we go up to our data child topic. um Children topic uh we can see. This is the data file that was just created.

A

The final thing we're going to do is add a redirect because we're actually creating created a new url. The original url was this thing with this ugly index.html. At the end, we don't want our urls, like that, and.

A

A

Our new url is going to be this beautiful thing, with the hard slash.

A

And um I can view this locally. uh My local middleman site here is rebuilding.

A

Oh man looks like I've got something missing: neil clap, nil class. I know what it is. um Our cta block needs.

A

A

Yeah this cta banner.

A

Yeah, so that's bug on my part: um let's see what is devsecops.

A

Let's grab the first that we'll see if that fixes it, but we do know that the url is right, since it gave us the hammer warning if I'm still getting a middle class. After that, then I'm going to have to go.

A

Look at it and the way that I um deterred. That is, if we go down to.

A

Templates we're all using the topic topic detailed includes cms.

A

A

Yeah, so in a separate, mr I'm going to add, we just need a nil class to actually fix it. So if article does not have um a body, then don't put out the cram down if it does do it, but that should be what was causing this ugly hammer error.

A

A

Rebuilding over here in the cms we can see that page has been migrated.

A

Here you can see locally. This is like the first step at the migration.

A

Here you can see that's that cta block got some resources.

A

Yeah, it looks looks good enough.

A

I mean it's a pretty big improvement from that.

A

I'm gonna add the changes.

A

A

A

And I'm gonna push that up.

A

And here is the mr: that's gonna get it pushed up, probably gonna take a little while um so the next steps would be to let the pipeline run, and I actually have a another mr opened here um that I just did the same thing, but once the pipeline runs- and you see that it's green in order to test these redirects you're going to want to make sure to run this job um apply redirects to review apps, and that will allow us to double check that it's all good.

A

So that's the general process, it's kind of fun. You can just run through them. One mr per child topic page, because it'll probably be a dialogue about each one, and if that migration is complete, okay, see ya.