{"id":305436,"date":"2021-07-22T15:00:41","date_gmt":"2021-07-22T12:00:41","guid":{"rendered":"https:\/\/en.buradabiliyorum.com\/how-to-deploy-static-websites-for-free-with-surge-sh-cloudsavvy-it\/"},"modified":"2021-07-22T15:00:41","modified_gmt":"2021-07-22T12:00:41","slug":"how-to-deploy-static-websites-for-free-with-surge-sh-cloudsavvy-it","status":"publish","type":"post","link":"https:\/\/buradabiliyorum.com\/en\/how-to-deploy-static-websites-for-free-with-surge-sh-cloudsavvy-it\/","title":{"rendered":"#How to Deploy Static Websites For Free With Surge.sh \u2013 CloudSavvy IT"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6a2599f48ee5e\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #dd3333;color:#dd3333\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #dd3333;color:#dd3333\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6a2599f48ee5e\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-deploy-static-websites-for-free-with-surge-sh-cloudsavvy-it\/#First_Run\" >First Run<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-deploy-static-websites-for-free-with-surge-sh-cloudsavvy-it\/#Using_Your_Own_Domain_Name\" >Using Your Own Domain Name<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-deploy-static-websites-for-free-with-surge-sh-cloudsavvy-it\/#Managing_HTTPS_Redirects\" >Managing HTTPS Redirects<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-deploy-static-websites-for-free-with-surge-sh-cloudsavvy-it\/#Configuring_Your_Site\" >Configuring Your Site<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-deploy-static-websites-for-free-with-surge-sh-cloudsavvy-it\/#Automating_Surge_Deployments\" >Automating Surge Deployments<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-deploy-static-websites-for-free-with-surge-sh-cloudsavvy-it\/#Summary\" >Summary<\/a><\/li><\/ul><\/nav><\/div>\n<p><strong>&#8220;#How to Deploy Static Websites For Free With Surge.sh \u2013 CloudSavvy IT&#8221;<\/strong><\/p>\n<div id=\"article-content-area\">\n<img loading=\"lazy\" decoding=\"async\" class=\"type:primaryImage aligncenter size-full wp-image-12925\" srcset=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2021\/07\/c9bda2ca.jpg?width=398&amp;trim=1,1&amp;bg-color=000&amp;pad=1,1 400w, https:\/\/www.cloudsavvyit.com\/p\/uploads\/2021\/07\/c9bda2ca.jpg?width=1198&amp;trim=1,1&amp;bg-color=000&amp;pad=1,1 1200w\" sizes=\"auto, 400w, 1200w\" src=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2021\/07\/c9bda2ca.jpg?width=1198&amp;trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"Illustration showing the Surge.sh logo\" width=\"1200\" height=\"676\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>Surge.sh is a free static website host which you interact with from your command line. It makes it quick and easy to get new sites and <a href=\"https:\/\/buradabiliyorum.com\/en\/category\/download-scripts-themes-apps\/\" data-internallinksmanager029f6b8e52c=\"9\" title=\"Download Scripts &amp; Themes &amp; Apps\" target=\"_blank\" rel=\"noopener\">app<\/a>s online, either manually or as part of your CI build process. Here\u2019s how to get started using the service.<\/p>\n<h2 id=\"first-run\"><span class=\"ez-toc-section\" id=\"First_Run\"><\/span>First Run<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>We\u2019ll assume you\u2019ve already got a directory of files you want to deploy to the web. If you haven\u2019t, create a new folder, add an <code>index.html<\/code>, and some simple starter content.<\/p>\n<p><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/surge.sh\">Surge\u2019s binary<\/a> is a JavaScript application distributed via npm. Make sure you\u2019ve <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/nodejs.org\/en\/download\">got Node.js<\/a> installed on your system before you continue. Begin by using npm to install Surge:<\/p>\n<pre><code>npm install --global surge<\/code><\/pre>\n<p>Installing Surge globally means you can use the <code>surge<\/code> command anywhere, even if your working directory lacks a <code>package.json<\/code> file. Omitting the <code>--global<\/code> flag will add the package as a project dependency instead, letting you lock the Surge version used for individual sites.<\/p>\n<p>Now change directory into your website\u2019s repository. Run the <code>surge<\/code> command to start the deployment process. A <a href=\"https:\/\/buradabiliyorum.com\/en\/category\/watch-movies-tv-seriess\/\" data-internallinksmanager029f6b8e52c=\"8\" title=\"Watch Movies &amp; TV Series\" target=\"_blank\" rel=\"noopener\">series<\/a> of interactive prompts will be displayed, starting with your email address to setup a Surge account.<\/p>\n<p>Next, confirm the filesystem path to your project. This defaults to your working directory so you can usually press return to continue.<\/p>\n<p>The following prompt asks for a domain name. A random <code>.surge.sh<\/code> subdomain is selected automatically. You can choose a different subdomain, or one of your own domains, by entering it here. If you\u2019re using your own domain, the following sections explain how to finish setting it up.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-12927\" src=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2021\/07\/2f4770b0.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"\" width=\"597\" height=\"395\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>After you\u2019ve supplied a domain name, press enter to begin the deployment. The progress will be displayed in your terminal as the Surge CLI uploads your files and makes them available on the web. Visit your domain in your browser to see your content live!<\/p>\n<p>Site updates are applied by running the <code>surge<\/code> command again. The contents of your project directory will be synced up to your live website.<\/p>\n<p>Everything in your folder is uploaded by default. You can exclude specific paths by creating a <code>.surgeignore<\/code> file. This has the same syntax as <code>.gitignore<\/code>. Files and folders <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/surge.sh\/help\/ignoring-files-and-directories\">commonly created<\/a> by other developer tools, such as Git and npm, are automatically omitted.<\/p>\n<h2 id=\"using-your-own-domain-name\"><span class=\"ez-toc-section\" id=\"Using_Your_Own_Domain_Name\"><\/span>Using Your Own Domain Name<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Surge offers <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/surge.sh\/help\/adding-a-custom-domain\">custom domain support<\/a> via <code>CNAME<\/code> records. This comes at no extra cost over the standard service. Add a <code>CNAME<\/code> record in your domain provider\u2019s control panel. Point the <code>@<\/code> and <code>www<\/code> hostnames to <code>na-west1.surge.sh<\/code>. Supply your domain name when running <code>surge<\/code> to deploy your site.<\/p>\n<p>You\u2019ll be prompted for your domain each time you run the <code>surge<\/code> command. You can avoid this by adding the <code>--domain<\/code> flag to <code>surge<\/code> commands. Alternatively, create a <code>CNAME<\/code> file in your project directory. Write your domain name into this file.<\/p>\n<pre><code>surge --domain example.com&#13;\n&#13;\necho \"example.com\" &gt; CNAME<\/code><\/pre>\n<h2 id=\"managing-redirects\"><span class=\"ez-toc-section\" id=\"Managing_HTTPS_Redirects\"><\/span>Managing HTTPS Redirects<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Surge has automatic HTTPS support but this does not handle HTTP to HTTPS redirects by default. Explicitly deploy to the <code>https<\/code> variant of your domain to force all visitors to use a secured connection. Enabling redirects is advisable for all publicly accessible websites.<\/p>\n<pre><code>surge --domain https:\/\/example.com<\/code><\/pre>\n<p>You\u2019ll need to supply an SSL certificate if you\u2019re using your own domain. This feature is only available as part of the paid <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/surge.sh\/plus\">Surge Plus<\/a> plan.<\/p>\n<p>Surge also gives you control of bare domain to <code>www<\/code> redirects. The default behavior sees <code>www.example.com<\/code> redirect to <code>example.com<\/code>. You can reverse this by explicitly including the <code>www<\/code> portion in your deployment domain.<\/p>\n<pre><code>surge --domain https:\/\/www.example.com<\/code><\/pre>\n<h2 id=\"configuring-your-site\"><span class=\"ez-toc-section\" id=\"Configuring_Your_Site\"><\/span>Configuring Your Site<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Surge offers several built-in convenience functions which help it stand out against other similar platforms. You can add a <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/surge.sh\/help\/adding-a-custom-404-not-found-page\">404 page<\/a>, <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/surge.sh\/help\/adding-a-custom-404-not-found-page\">password protection<\/a>, and <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/surge.sh\/help\/enabling-cross-origin-resource-sharing\">CORS support<\/a>, all using special files in your project.<\/p>\n<p>The 404 page is enabled by creating a <code>404.html<\/code> file. That\u2019s all there is to it \u2013 Surge will serve the file when there\u2019s no direct match for the requested URI.<\/p>\n<p>Password protection is enabled by an <code>AUTH<\/code> file. This accepts a simple list of usernames and passwords.<\/p>\n<pre><code>cloudsavvy:howtogeek<\/code><\/pre>\n<p>You\u2019ll be prompted to enter a username and password using HTTP Basic Authentication each time you access your site. This feature is only available on the paid Surge Plus plan.<\/p>\n<p>Another Surge Plus feature is manual routing rules. You can create a <code>ROUTER<\/code> file to define custom redirects, either within your site or externally.<\/p>\n<pre><code>301 \/moved-page \/new-link<\/code><\/pre>\n<p>Surge supports <code>301<\/code> (moved permanently) and <code>307<\/code> (moved temporarily) status codes for the first column. The last column can be a relative link within your site, or an absolute link to another domain (<code>https:\/\/www.google.com<\/code>).<\/p>\n<p>One final configuration file is <code>CORS<\/code>. This lets you permit cross-origin access to your site. Add a <code>*<\/code> to the file to accept cross-origin requests from any origin. You can write individual domains instead to limit the allowed origins.<\/p>\n<h2 id=\"automating-surge-deployments\"><span class=\"ez-toc-section\" id=\"Automating_Surge_Deployments\"><\/span>Automating Surge Deployments<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Surge is entirely controlled by text files and terminal commands. It\u2019s easy to integrate into CI pipelines to deploy websites automatically on each commit.<\/p>\n<p>Automating Surge requires use of API tokens. This lets you avoid the interactive login prompts. First, login to Surge on your development machine. Run <code>surge token<\/code> to get your API token.<\/p>\n<p>In your CI pipeline, set the <code>SURGE_LOGIN<\/code> and <code>SURGE_TOKEN<\/code> environment variables. The former should be your email address while the latter takes your API token. Now you can deploy non-interactively using the <code>--project<\/code> and <code>--domain<\/code> flags:<\/p>\n<pre><code>surge --project $PWD --domain example.com<\/code><\/pre>\n<h2 id=\"summary\"><span class=\"ez-toc-section\" id=\"Summary\"><\/span>Summary<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Surge makes it simple to get static websites live on the web. The basic service is free to use. Upgrading to the Plus plan gives you authentication, redirects and more configurable HTTPS.<\/p>\n<p>Unlike other contenders, Surge is fully terminal-driven. This makes it ideal for quick developer-centric sites managed via Git repositories and CI pipelines. It cuts out the server configuration so you can focus on building your site\u2019s content.<\/p>\n<p>For more advanced use cases, Surge even lets you add multiple contributors. Run <code>surge --add user@example.com<\/code> to give friends, guests, and colleagues access to your site. They\u2019ll be able to deploy by running <code>surge<\/code> and supplying the same domain name you\u2019ve been using.\n<\/div>\n<blockquote><p><strong><span style=\"color: #ff6600;\">If you liked the article, do not forget to share it with your friends. Follow us on\u00a0<span style=\"color: #ff0000;\"><a style=\"color: #ff0000;\" href=\"https:\/\/news.google.com\/publications\/CAAqBwgKMLG0nwswvr63Aw\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Google News<\/a><\/span>\u00a0too, click on the star and choose us from your favorites.<\/span><\/strong><\/p><\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\">For forums sites go to <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/forum.buradabiliyorum.com\/\" target=\"_blank\" rel=\"noopener\">Forum.BuradaBiliyorum.Com<\/a><\/span><\/strong><\/p>\n<\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\"><strong>If you want to read more like this article, you can visit our <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/en.buradabiliyorum.com\/technology\/\" target=\"_blank\" rel=\"noopener\">Technology category.<\/a><\/span><\/strong><\/p>\n<\/blockquote>\n<p><span style=\"color: black;\"><a style=\"color: #ff9900;\" href=\"https:\/\/www.cloudsavvyit.com\/12924\/how-to-deploy-static-websites-for-free-with-surge-sh\/\" target=\"_blank\" rel=\"noopener\">Source<\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>&#8220;#How to Deploy Static Websites For Free With Surge.sh \u2013 CloudSavvy IT&#8221; Surge.sh is a free static website host which you interact with from your command line. It makes it quick and easy to get new sites and apps online, either manually or as part of your CI build process. Here\u2019s how to get started&#8230;<\/p>\n","protected":false},"author":1,"featured_media":305437,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2021\/07\/c9bda2ca.jpg","fifu_image_alt":"","footnotes":""},"categories":[18],"tags":[],"class_list":["post-305436","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technology"],"_links":{"self":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/305436","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/comments?post=305436"}],"version-history":[{"count":0,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/305436\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media\/305437"}],"wp:attachment":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media?parent=305436"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/categories?post=305436"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/tags?post=305436"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}