Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(blog): agility - fix brand names #23151

Merged
merged 2 commits into from
Apr 16, 2020
Merged

fix(blog): agility - fix brand names #23151

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7eeebf7
fix brand names
muescha Apr 15, 2020
aec5d09
fix brand name StackPath
muescha Apr 15, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 12 additions & 12 deletions docs/blog/2020-04-13-upgrading-to-jamstack-with-agility/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,14 @@ tags:

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).

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.
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.

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.
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.

## Goals

- Build the new home page using [Gatsby](https://www.gatsbyjs.org/)
- Re-use much of the existing site content from [our headless cms](https://agilitycms.com/)
- Re-use much of the existing site content from [our headless CMS](https://agilitycms.com/)
- Zero downtime

## tl;dr
Expand All @@ -40,17 +40,17 @@ What's really cool is that this workflow isn't just for upgrading Agility websit

## Step 1: Get it running locally with Gatsby

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.
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.

```shell
git clone https://github.com/agility/agility-gatsby-starter.git
```

Now, find your API keys on the Getting Started page of the [Agility CMS Content Manager](https://manager.agilitycms.com/)
Now, find your API Keys on the Getting Started page of the [Agility CMS Content Manager](https://manager.agilitycms.com/)

![Agility CMS Getting Started landing page](post-image-1.png "Agility CMS Screenshot")

Put your keys into the **.env.development** and **.env.production** files. They look something like this and have instructions about which values go where.
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.

```text
# Your Instance Id
Expand Down Expand Up @@ -212,11 +212,11 @@ In the end, you're going to end up with a URL to your new home page in Netlify.

We can use Edge computing to decide whether to route to the new website or the old one, depending on the page.

In this example, I decided to use a [Stackpath](https://www.stackpath.com/) Script to do this for us.
In this example, I decided to use a [StackPath](https://www.stackpath.com/) Script to do this for us.

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.
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.

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.
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.

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.

Expand Down Expand Up @@ -267,9 +267,9 @@ async function handleRequest(request) {
}
```

You can now test this whole thing with the unique Stackpath URL that you get (123xyz.stackpathcdn.com).
You can now test this whole thing with the unique StackPath URL that you get (123xyz.stackpathcdn.com).

Once you are happy with everything, you simply switch your DNS to point to Stackpath.
Once you are happy with everything, you simply switch your DNS to point to StackPath.

That's it—you’re finished!

Expand All @@ -281,6 +281,6 @@ I encourage you to go ahead and use this technique as the starting point for one

## BONUS CONTENT!

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.
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.

[![Migrating a website to JAMstack with Gatsby](https://res.cloudinary.com/marcomontalbano/image/upload/v1586464859/video_to_markdown/images/youtube--WSIzYKDgJuE-c05b58ac6eb4c4700831b2b3070cd403.jpg)](https://www.youtube.com/embed/WSIzYKDgJuE "Migrating a website to JAMstack with Gatsby")