loading...

Why I'm using Surge and not GitHub Pages

bholmesdev profile image Ben Holmes ใƒป4 min read

Update
Will leave a small disclaimer here that Surge hasn't seen many updates to its repo recently so be aware of that. Certainly safe to use now (haven't seen any vulnerability warnings), but worth looking out for in the future. If the project ends dying off Netlify and Zeit Now are great alternatives that offer similar benefits over GitHub Pages ๐Ÿ‘

Hm, so what's a "surge" exactly? ๐Ÿค”

GitHub Pages is so prolific at this point it likely needs no introduction. Surge, on the other hand, is a much lower profile project. It accomplishes the same goal as GitHub Pages, allowing one to publish their static site on an accessible URL of whatever name they choose complete with an "https." Where surge differs is in how that website gets put on the world wide web.

Surge lets you get from 0 to published in the command line without any extra setup. Once you install the package, you can use their CLI in your project directory to whip up an account...

๐Ÿ‘‰ surge

    Welcome to surge!
    Please login or create an account by entering email and password:

    email: jamesKPolk@napoleonofthestump.gov
    password: 
Enter fullscreen mode Exit fullscreen mode

enter your domain to deploy to...

    domain: forgottenpresidents.club
Enter fullscreen mode Exit fullscreen mode

and boom ๐Ÿ’ฅ! You're up and running. Note I'm using a custom URL extension here as well. You can of course specify this if you have the rights to that domain, but you can omit the extension to use the totally free surge.sh.

Looks easy, but where are my git hooks?

The beauty of GitHub Pages is it will simply track your master branch and rebuild / publish your site whenever it gets updated. Thankfully, surge offers the option to hook into pushes and commits with a little addition to your package.json. This snippet will do the trick for redeploying on push:

"devDependencies": { "surge": "latest", "git-scripts": "0.2.1" },
    "git": { 
        "scripts": { "pre-push": "surge --project ./ 
        --domain forgottenpresidents.surge.sh" }
       }
Enter fullscreen mode Exit fullscreen mode

Neat. But what are the benefits exactly?

Surge offers a few niceties that GitHub Pages won't out of the box. For one, you obviously don't need to use GitHub to manage your version control, so you can use any custom solution you desire and still deploy with the same surge command.

Another is an advantage that Zeit Now also fails to address: client side routing fallbacks.

Extending our James K. Polk example, say we deployed a simple project folder with a few html files:

    ./build
      - index.html
      - what_i_stand_for.html
      - donate_now.html
      - 200.html
Enter fullscreen mode Exit fullscreen mode

Notice our 200.html added at the bottom. This acts as a fallback to serve up whenever a given route is invalid. Assuming these are all the html files in our build, we know someone visiting, say, forgottenpresidents.club/sendfanmail would get a 404 since that file doesn't exist. However, since we have a 200.html, Surge knows to just serve up this page instead since it's a fallback. This is more flexible than the traditional 404.html to catch errors since we sometimes don't want certain paths to result in a 404, like a dynamic username in the URL that gets handled in JavaScript but should always route to the same base page. This makes routing a bit cleaner whether you're using a library like React router or just tapping into the browser's history API on your own, since we don't have to deal with redirects anymore ๐ŸŽ‰

The last major benefit is one shared by Zeit Now: deploying whenever you want in a matter of seconds. Rather than dirtying up your commit history, you can just deploy your changes instantly and see how they look. This was super useful recently when testing out a mobile layout for a site I was developing, where mobile Safari was being a bit more finicky than my mobile viewer in Chrome. I could just deploy my changes to whatever URL I chose and see my edits as soon as I refreshed the page!

Okay I'm starting to see it. What are the limitations?

So Surge was built to be really good at doing a very specific task. If you have anything more than a static site or client side application, there's sadly not much you can do with this tool. Any fancy backend you have would need to be deployed separately, or you can use the aforementioned Zeit Now to deploy everything in one place. Now is a much more flexible tool that's quickly gaining traction, but I've stayed loyal to Surge because of the routing niceties and lack of any necessary config files.

Of course you should use whatever tool that works best in your workflow. But the next time you're building v175 of your portfolio site, consider giving Surge a try ๐Ÿ˜Š

Thanks for reading!

I'm a frontend webdev-in-training always tinkering with something. I'll try to post regularly here, so drop a follow if you enjoyed :)

Discussion

pic
Editor guide
Collapse
ben profile image
Ben Halpern

Great first post! Your tweet was spot on

โค๏ธ

Collapse
m1guelpf profile image
Miguel Piedrafita

Welcome to DEV.to! I turned this article into audio using Blogcast

If you want, you can add this๐Ÿ‘† player to your article by adding the following code to the top:

{% blogcast 413 %}

You can also add this embed to medium pasting the URL https://blogcast.host/embedly/413 on a newline ๐Ÿ˜‰

Collapse
bholmesdev profile image
Ben Holmes Author

Woah this is great! Thanks for making this

Collapse
marek profile image
Marek Zaluski

I've used Netlify and Zeit Now and I can confirm that they're great alternatives in the same space.

Zeit Now is not quite as simple to start with but if you happen to be using something like Next.js then it makes a great combination (Next.js is also developed by the Zeit team).

Collapse
vekzdran profile image
Vedran Mandiฤ‡

Excellent entry, thanks for the review. I've tried surge.sh, loved the simplicity just as you described. Just yesterday seen thanosjs.org/ (bragging at the bottom that it was built with drag and drop netlify) deployed on netlify which is really gaining momentum in the static web dev world (reddit, twitter...) + new features like this seem promising. Do you know if they offer 200 redirect also or similar nice to have feats? Thanks again.

Collapse
jacobmgevans profile image
Jacob Evans

Followed you. Hope to see more content of this quality and passion. RT'd as well. Great work!

Collapse
bholmesdev profile image
Ben Holmes Author

Thanks so much! Yep, have a couple ideas on the backburner :)

Collapse
bangau1 profile image
Agung Pratama

Great post. I also very recently migrated my blog from Gitlab Page to Netlify. I have my own reasons, please check it out at my blog post blog.agung.io/post/2019-03-06-my-b...

Collapse
bholmesdev profile image
Ben Holmes Author

Will leave a small disclaimer here that Surge hasn't seen many updates to its repo recently so be aware of that. Certainly safe to use now (haven't seen any vulnerability warnings), but worth looking out for in the future. If the project ends dying off Netlify and Zeit Now are great alternatives that offer similar benefits over GitHub Pages ๐Ÿ‘

Collapse
andreasvirkus profile image
ajv

What I absolutely love about Netlify is that in their .toml file you can duplicate your routes (given you don't have a zillion of them, otherwise it gets cumbersome) and have those serve your entry file. Anything else you can catch with a wildcard, return a 404 status and still display your SPA to handle the error page. Of course an SSG would defeat this purpose, but it's great if you have a very dynamic API driven SPA or the likes. Also Netlify allows you to configure security headers and other nifty bits.

(No affiliation, just an avid user in love with a service)

Collapse
qm3ster profile image
Mihail Malo

What would you say is the killer advantage over Netlify?

Collapse
bholmesdev profile image
Ben Holmes Author

Great question! Honestly haven't experimented too much with the Netlify CLI, but looking it over it seems really nice. Guess you could argue Surge gets you going in literally 1 command and Netlify takes a couple more seconds but that's really nit-picky ๐Ÿ˜Š The 200.html fallback is still really nice to have in Surge, but will confess it does not work in subdirectories which is disappointing.

Overall I'd say, especially since Surge hasn't gotten any updates recently but the Netlify community is going strong, Netlify is a great choice.

Collapse
qm3ster profile image
Mihail Malo

Netlify redirects are simply divine ๐Ÿ˜ฉ๐Ÿ‘Œ

I'm a bit disappointed with Zeit, because there are breaking changes too often, and now they're deprecating long-running containers completely, which many use.

Collapse
jsrn profile image
James

Great post! I've been happily using GitHub pages for so long that I've never bothered to learn much about the alternatives.

Thanks for the thorough review of Surge!

Collapse
papagoat profile image
Terence Lucas Yap

git-scripts wasn't working for Windows machine last I tried. Doesn't seem to be updated.

github.com/nkzawa/git-scripts/issu...

Collapse
bholmesdev profile image
Ben Holmes Author

Aw, that's really a shame. Looks like the git-hooks project being used for this isn't being maintained well. Thankfully there are alternatives independent from Surge that can get the job done. Here's a list of options, or a way to get it working on your own

Collapse
michaeltharrington profile image
Michael Tharrington (he/him)

Excellent song reference! ๐Ÿ˜€

Collapse
bholmesdev profile image
Ben Holmes Author

Heyyy someone caught it! I remember that song from history class back in middle school and it stuck with me ever since.

Collapse
steelwolf180 profile image
Max Ong Zong Bao

This is awesome I didn't know that is something like this.

Collapse
bayuangora profile image
Bayu Angora

How to build and deploy GitHub repo to Surge via mobile?