DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

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

Posted on

Redirect GH-Pages to Netlify

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)

DEV

Thank you.

Β 
Thanks for visiting DEV, we’ve worked really hard to cultivate this great community and would love to have you join us. If you’d like to create an account, you can sign up here.