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
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>
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"
Then I had to the Github repo as the remote origin:
git remote add origin https://github.com/charlesLoder/hebrewTransliteration.git
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
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)