You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/blog/2020-04-13-upgrading-to-jamstack-with-agility/index.md
+12-12Lines changed: 12 additions & 12 deletions
Original file line number
Diff line number
Diff line change
@@ -11,14 +11,14 @@ tags:
11
11
12
12
I've been preaching about JAMStack for a while now, and lately I've been talking a lot about how you can [move your website to JAMStack without rebuilding everything](https://agilitycms.com/resources/posts/migrate-to-jamstack-now-no-excuses).
13
13
14
-
I decided it was time to take my own advice and upgrade my company's website, [agilitycms.com](https://agilitycms.com), starting with the home page, and adding pages and sections over time. Agility CMS is a headless content management system running in the cloud (Microsoft Azure). The current website is built on ASP.Net Core. Our marketing team came to me with a request to build a brand new home page which included not only updating content, but a brand new design, new modules, and new integrations with mar-tech.
14
+
I decided it was time to take my own advice and upgrade my company's website, [agilitycms.com](https://agilitycms.com), starting with the home page, and adding pages and sections over time. Agility CMS is a headless content management system running in the cloud (Microsoft Azure). The current website is built on ASP.NET Core. Our marketing team came to me with a request to build a brand new home page which included not only updating content, but a brand new design, new modules, and new integrations with mar-tech.
15
15
16
-
This was just the opportunity I’d been looking for: A chance to practice what I've been preaching! What's also great is the current .net website is already built using a headless CMS, so I don't have to rewrite or migrate any content.
16
+
This was just the opportunity I’d been looking for: A chance to practice what I've been preaching! What's also great is the current .NET website is already built using a headless CMS, so I don't have to rewrite or migrate any content.
17
17
18
18
## Goals
19
19
20
20
- Build the new home page using [Gatsby](https://www.gatsbyjs.org/)
21
-
- Re-use much of the existing site content from [our headless cms](https://agilitycms.com/)
21
+
- Re-use much of the existing site content from [our headless CMS](https://agilitycms.com/)
22
22
- Zero downtime
23
23
24
24
## tl;dr
@@ -40,17 +40,17 @@ What's really cool is that this workflow isn't just for upgrading Agility websit
40
40
41
41
## Step 1: Get it running locally with Gatsby
42
42
43
-
It's really easy to get started creating a Gatsby website with Agility CMS. Just clone the [starter repo from github](https://github.com/agility/agility-gatsby-starter), open up the folder in [VS Code](https://code.visualstudio.com/) and pop in your API Keys.
43
+
It's really easy to get started creating a Gatsby website with Agility CMS. Just clone the [starter repo from GitHub](https://github.com/agility/agility-gatsby-starter), open up the folder in [VS Code](https://code.visualstudio.com/) and pop in your API Keys.
Now, find your API keys on the Getting Started page of the [Agility CMS Content Manager](https://manager.agilitycms.com/)
49
+
Now, find your API Keys on the Getting Started page of the [Agility CMS Content Manager](https://manager.agilitycms.com/)
50
50
51
51

52
52
53
-
Put your keys into the **.env.development** and **.env.production** files. They look something like this and have instructions about which values go where.
53
+
Put your API Keys into the **.env.development** and **.env.production** files. They look something like this and have instructions about which values go where.
54
54
55
55
```text
56
56
# Your Instance Id
@@ -212,11 +212,11 @@ In the end, you're going to end up with a URL to your new home page in Netlify.
212
212
213
213
We can use Edge computing to decide whether to route to the new website or the old one, depending on the page.
214
214
215
-
In this example, I decided to use a [Stackpath](https://www.stackpath.com/) Script to do this for us.
215
+
In this example, I decided to use a [StackPath](https://www.stackpath.com/) Script to do this for us.
216
216
217
-
You set up a Stackpath site just like normal, but pointing to your OLD website's unique hostname. It can't be your public DNS name - you need to have another unique way to address that site. For example, since our website is hosted in an Azure App Service, we get an azurewebsites.net URL.
217
+
You set up a StackPath site just like normal, but pointing to your OLD website's unique hostname. It can't be your public DNS name - you need to have another unique way to address that site. For example, since our website is hosted in an Azure App Service, we get an azurewebsites.net URL.
218
218
219
-
Now you create a Script in Stackpath to do the routing. In our case, we ONLY want to route requests to the home page, plus any Gatsby-specific stuff, to our new website.
219
+
Now you create a Script in StackPath to do the routing. In our case, we ONLY want to route requests to the home page, plus any Gatsby-specific stuff, to our new website.
220
220
221
221
You can also see that I'm only allowing for 60 seconds on caching in the CDN for all requests. This is because we don't have anything built into this workflow to clear the cache in this CDN, and I don't want my content team to have to wait too long to see their changes. I'll take care of that later.
222
222
@@ -267,9 +267,9 @@ async function handleRequest(request) {
267
267
}
268
268
```
269
269
270
-
You can now test this whole thing with the unique Stackpath URL that you get (123xyz.stackpathcdn.com).
270
+
You can now test this whole thing with the unique StackPath URL that you get (123xyz.stackpathcdn.com).
271
271
272
-
Once you are happy with everything, you simply switch your DNS to point to Stackpath.
272
+
Once you are happy with everything, you simply switch your DNS to point to StackPath.
273
273
274
274
That's it—you’re finished!
275
275
@@ -281,6 +281,6 @@ I encourage you to go ahead and use this technique as the starting point for one
281
281
282
282
## BONUS CONTENT!
283
283
284
-
As a companion to this article, I recorded a video that walks you through the steps I took and the different tools involved. I also highlight some of the really neat features of Agility CMS, Gatsby, Netlify, and Stackpath.
284
+
As a companion to this article, I recorded a video that walks you through the steps I took and the different tools involved. I also highlight some of the really neat features of Agility CMS, Gatsby, Netlify, and StackPath.
285
285
286
286
[](https://www.youtube.com/embed/WSIzYKDgJuE"Migrating a website to JAMstack with Gatsby")
0 commit comments