DEV Community

Cover image for Redirect GH-Pages to Netlify
Charles Loder
Charles Loder

Posted on

Redirect GH-Pages to Netlify

#netlify #jamstack

I recently changed a personal site from being hosted in gh-pages to Netlify (gh-pages is great, but Netlify functions are hard to beat).

The old site used a regular gh-pages url:

It gets the job done, but it's not easy to remember.

The latest iteration got a slick new url:

I wanted to make sure links to the old site redirected to the new site, but without a server it felt a little tricky.

Netlify has redirects but that's only for pages on that domain. They won't help us here.

The workaround I came up with is relatively simple, even if it's a bit hacky.

Netlify build

Like most Netlify projects, pushes to the main branch trigger a build.

Easy peasy, which means I no longer had to worry about the gh-pages branch.

Create a new project

Next, I had to create a new project locally that looked like this:

 . ├── README.md ├── dist │   └── index.html ├── package-lock.json └── package.json
Enter fullscreen mode Exit fullscreen mode

The only dependency is push-dir

*in reality, no dependencies are necessary. But I like to have a /dist directory, so I use push-dir for that

Set up the redirect

In order to redirect users, this is all that's needed:

 <head> <title>Hebrew Transliteration</title> <meta http-equiv="refresh" content="3; url = https://hebrewtransliteration.app" /> </head>
Enter fullscreen mode Exit fullscreen mode

The key is the http-equiv attribute.

With this attribute set to "refresh", by setting the content to 3 after 3 seconds the page will redirect to the url.

I also threw in some content letting the user know they were being redirected.

Git & GitHub

Once I had it the way I liked it, I had to initialize a git repository and commit.

 git init git add . git commit -m "Init commit"
Enter fullscreen mode Exit fullscreen mode

Then I had to the Github repo as the remote origin:

 git remote add origin https://github.com/charlesLoder/hebrewTransliteration.git
Enter fullscreen mode Exit fullscreen mode

Most importantly, don't push anything yet!

Now, push!

Remember, this is only going to be on the gh-pages branch.

Using the push-dir package, I ran:

 npx push-dir --dir=build --branch=gh-pages
Enter fullscreen mode Exit fullscreen mode

It's pretty straightforward, the dist directory was pushed to the gh-pages branch of origin.

Surprisingly, there is very little about this that I could find. This blog was the closest thing, but it was little help.

Perhaps this was painfully obvious to others, but not to me...

If you know of a better/different method, let me know in the comments!

Top comments (0)