{"componentChunkName":"component---src-templates-post-template-js","path":"/2020/04/19/url-shortener-with-nowsh/","result":{"data":{"mdx":{"frontmatter":{"title":"Make a simple, personal, URL shortener with Now.sh","date":"2020 April 19th"},"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"date\": \"2020-04-19T00:00:00.000Z\",\n  \"title\": \"Make a simple, personal, URL shortener with Now.sh\",\n  \"tags\": [\"information\", \"learning\", \"guide\"],\n  \"published\": true\n};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar YouTube = makeShortcode(\"YouTube\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"Remember services like \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://bitly.com\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"Bitly\"), \" and \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://tinyurl.com\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"TinyURL\"), \"? Yeah, they still exist,\\nshortening your URLs for you, they\\u2019ve been around for a long time too.\"), mdx(\"p\", null, \"Bitly founded in 2008 and TinyURL founded in 2002 \\uD83D\\uDE31\"), mdx(\"p\", null, \"In this post I\\u2019m detailing how I made my own Bitly with Now.sh.\"), mdx(\"p\", null, \"You can make your own one too as I\\u2019m about to detail the process here,\\nor you can \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, mdx(\"a\", _extends({\n    parentName: \"strong\"\n  }, {\n    \"href\": \"#-heres-a-video-detailing-the-process\"\n  }), \"TL;DR\")), \" for the video.\"), mdx(\"p\", null, \"What you need:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Node (to run the now CLI)\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"The \", mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://vercel.com/download\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"now CLI\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://vercel.com/signup\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"Vercel.com account\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://github.com/join\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"GitHub account\"), \" (not essential)\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Yor own domain (not essential)\")), mdx(\"h2\", {\n    \"id\": \"examples-why-would-i-use-a-short-url\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#examples-why-would-i-use-a-short-url\",\n    \"aria-label\": \"examples why would i use a short url permalink\",\n    \"className\": \"anchor before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  })))), \"Examples, why would I use a short URL?\"), mdx(\"p\", null, \"I use short URLs for sharing my content, if you take a look at this\\nblog post URL is quite long and not something you can reel off quickly\\nto someone.\"), mdx(\"p\", null, \"There\\u2019s a talk I did about Gatsby, titled \\u201CBuild-time and Client\\nRun-time Data Fetching in Gatsby\\u201D the URL for it is:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://gatsby-build-and-run-time-data-fetching-talk.now.sh\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"https://gatsby-build-and-run-time-data-fetching-talk.now.sh\"))), mdx(\"p\", null, \"With a short URL I can condense it down a bit:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://ss10.dev/gatsby-data-fetching\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"https://ss10.dev/gatsby-data-fetching\"))), mdx(\"p\", null, \"Not massively shorter, and granted the original URL has no place being\\nthat long!\"), mdx(\"p\", null, \"Other examples could be the \\u201CBuild a coding blog from scratch with\\nGatsby and MDX\\u201D guide I did at the end of last year:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Full URL \", mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://thelocalhost.blog/2019/10/31/build-an-mdx-blog\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"https://thelocalhost.blog/2019/10/31/build-an-mdx-blog\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Short URL \", mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://ss10.dev/bab-guide\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"https://ss10.dev/bab-guide\"))), mdx(\"p\", null, \"Or if you have a crazy URL no one is going to be able to recite from\\nmemory, like my YouTube channel URL:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Full URL \", mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://www.youtube.com/channel/UCnngLXpLSFsKkDhFoO9Ct3w\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"https://www.youtube.com/channel/UCnngLXpLSFsKkDhFoO9Ct3w\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Short URL \", mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://ss10.dev/youtube\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"https://ss10.dev/youtube\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Shorter still \", mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://ss10.dev/yt\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"https://ss10.dev/yt\"))), mdx(\"p\", null, \"I do have a vanity URL for my YouTube channel which is\\n\", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://www.youtube.com/c/ScottSpencePlease\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"https://www.youtube.com/c/ScottSpencePlease\"), \", but it\\u2019s case sensitive.\\n\\uD83E\\uDD26\\u200D\\u2642\"), mdx(\"h2\", {\n    \"id\": \"do-i-have-to-use-vercel-\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#do-i-have-to-use-vercel-\",\n    \"aria-label\": \"do i have to use vercel  permalink\",\n    \"className\": \"anchor before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  })))), \"Do I have to use Vercel? \\uD83E\\uDD14\"), mdx(\"p\", null, \"No, you can use Netlify as well. There\\u2019s a great \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://www.youtube.com/watch?v=HL6paXyx6hM\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"Kent C Dodds example\\nwith Netlify\"), \" that I used before moving to Vercel.\"), mdx(\"p\", null, \"You don\\u2019t have to use Netlify either, you do you. \\uD83D\\uDE38\"), mdx(\"p\", null, \"There\\u2019s many ways to do it and the best way for you may be different\\nto me. You will need a domain name and a hosting service, that\\u2019s what\\nI\\u2019m doing with Vercel here.\"), mdx(\"h2\", {\n    \"id\": \"redirects\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#redirects\",\n    \"aria-label\": \"redirects permalink\",\n    \"className\": \"anchor before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  })))), \"Redirects\"), mdx(\"p\", null, \"The way I\\u2019m doing this is with redirects, so it will be like in the\\nexamples earlier, give a path to your URL then use a redirect rule.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-json\"\n  }), \"{\\n  \\\"source\\\": \\\"/yt\\\",\\n  \\\"destination\\\": \\\"https://www.youtube.com/channel/UCnngLXpLSFsKkDhFoO9Ct3w\\\"\\n}\\n\")), mdx(\"h2\", {\n    \"id\": \"get-set-up-\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#get-set-up-\",\n    \"aria-label\": \"get set up  permalink\",\n    \"className\": \"anchor before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  })))), \"Get set up \\uD83D\\uDEE0\"), mdx(\"p\", null, \"If you don\\u2019t have a machine set up for web development I have written\\nabout getting set up \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://thelocalhost.blog/2018/12/24/wsl-bootstrap-2019/\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"for Windows\"), \".\"), mdx(\"p\", null, \"There\\u2019s also a video I\\u2019ve made to go from scratch to Create React App\\non Ubuntu 19.04.\"), mdx(YouTube, {\n    youTubeId: \"eSAsdQuQ-1o\",\n    mdxType: \"YouTube\"\n  }), mdx(\"p\", null, \"If you\\u2019re following along and you haven\\u2019t done so already, you\\u2019ll need\\nto install the Vercel CLI:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-bash\"\n  }), \"# if you're using npm, then\\n# npm i -g now\\nyarn global add now\\n\")), mdx(\"p\", null, \"Then you\\u2019ll need to authenticate with the CLI:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-bash\"\n  }), \"now login\\n\")), mdx(\"p\", null, \"You will be prompted with a phrase, something like \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Handsome Turtle\"), \"\\nthat should match the phrase in the email Vercel sends you. You can\\nauthenticate by clicking the link in the email.\"), mdx(\"h2\", {\n    \"id\": \"create-the-project\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#create-the-project\",\n    \"aria-label\": \"create the project permalink\",\n    \"className\": \"anchor before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  })))), \"Create the project\"), mdx(\"p\", null, \"I\\u2019m going to create a directory for the project to live in, then\\nchange into that directory and make the project with \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"yarn init -y\"), \".\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-bash\"\n  }), \"mkdir short-urls # create directory\\ncd short-urls # change to newly created dir\\nyarn init -y # initialise the project\\n\")), mdx(\"p\", null, \"That\\u2019s going to create my \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"package.json\"), \" file with the project details\\nin it.\"), mdx(\"p\", null, \"Next to create the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"now.json\"), \" file this is going to be where all the\\nredirects live:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-bash\"\n  }), \"touch now.json\\n\")), mdx(\"p\", null, \"In the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"now.json\"), \" file I\\u2019m going to add the Vercel Now platform\\nversion then the redirects array with the first redirect being where I\\nwant my domain to default to.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-json\"\n  }), \"{\\n  \\\"version\\\": 2,\\n  \\\"redirects\\\": [\\n    {\\n      \\\"source\\\": \\\"/\\\",\\n      \\\"destination\\\": \\\"https://scottspence.me\\\"\\n    }\\n  ]\\n}\\n\")), mdx(\"h2\", {\n    \"id\": \"deploy-the-project\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#deploy-the-project\",\n    \"aria-label\": \"deploy the project permalink\",\n    \"className\": \"anchor before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  })))), \"Deploy the project\"), mdx(\"p\", null, \"That is all the configuration I need for now, now I\\u2019m going to deploy\\nthe project using the CLI this will push the project to the Vercel\\nhosting service.\"), mdx(\"p\", null, \"To deploy the current directory I\\u2019ll do the following command:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-bash\"\n  }), \"now\\n\")), mdx(\"p\", null, \"As this is the first time I\\u2019ve deployed this project there will be a\\nlot of prompts from the CLI, I\\u2019ll answer the default answer to all of\\nthese questions:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-text\"\n  }), \"- Set up and deploy project?: y\\n- Which scope (this is my user account): Scott Spence\\n- Link to an existing project?: n\\n- Whats your project name (hit return): short-urls\\n- In which directory is your code located (hit return)?: /\\n- Want to override the settings?: n\\n\")), mdx(\"p\", null, \"The CLI will output two URLs, the first to my project on Vercel Now\\nand the second for the actual project. I\\u2019ll click on the first one and\\nand inspect the project.\"), mdx(\"p\", null, \"As I set the root of the redirect to go to my portfolio site that\\u2019s\\nwhat I have in my project overview in Vercel.\"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"640px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/920be865823e277d7de4076c16bf0cef/47aef/vercel-project-overview.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"53.75%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/svg+xml,%3csvg%20xmlns=\\\\'http://www.w3.org/2000/svg\\\\'%20width=\\\\'400\\\\'%20height=\\\\'214\\\\'%20viewBox=\\\\'0%200%20400%20214\\\\'%20preserveAspectRatio=\\\\'none\\\\'%3e%3cpath%20d=\\\\'M0%20107v107h401V0H0v107m21-51v59l1%2057h186V56l-93-1-94%201m86%2041c-10%206-9%2020%203%2026%204%202%205%201%202-3l-2-6v-8l1-1h7l-4-1c-4-1-5-2-2-4s7%200%208%204a25%2025%200%20010%2011l-2%205c-4%204-1%204%205%201%2011-7%205-26-8-26l-8%202m-63%2059c-1%204%200%204%2016%204%2013%200%2015%200%2016-2%202-3-1-4-16-4-12%200-15%200-16%202m37-1v3c0%202%201%202%2016%202h16v-5l-16-1-16%201m36%201c-1%204%200%204%2016%204s18%200%2016-4c0-2-3-2-16-2-12%200-15%200-16%202m37%200c-2%203%201%204%2016%204h16v-5l-16-1c-14%200-16%200-16%202\\\\'%20fill=\\\\'%23d3d3d3\\\\'%20fill-rule=\\\\'evenodd\\\\'/%3e%3c/svg%3e')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"picture\", {\n    parentName: \"a\"\n  }, \"\\n        \", mdx(\"source\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"srcSet\": [\"/static/920be865823e277d7de4076c16bf0cef/60a22/vercel-project-overview.webp 160w\", \"/static/920be865823e277d7de4076c16bf0cef/4c812/vercel-project-overview.webp 320w\", \"/static/920be865823e277d7de4076c16bf0cef/0ba47/vercel-project-overview.webp 640w\", \"/static/920be865823e277d7de4076c16bf0cef/e46b2/vercel-project-overview.webp 960w\", \"/static/920be865823e277d7de4076c16bf0cef/0ca5b/vercel-project-overview.webp 1063w\"],\n    \"sizes\": \"(max-width: 640px) 100vw, 640px\",\n    \"type\": \"image/webp\"\n  })), \"\\n        \", mdx(\"source\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"srcSet\": [\"/static/920be865823e277d7de4076c16bf0cef/69538/vercel-project-overview.png 160w\", \"/static/920be865823e277d7de4076c16bf0cef/72799/vercel-project-overview.png 320w\", \"/static/920be865823e277d7de4076c16bf0cef/6af66/vercel-project-overview.png 640w\", \"/static/920be865823e277d7de4076c16bf0cef/d9199/vercel-project-overview.png 960w\", \"/static/920be865823e277d7de4076c16bf0cef/47aef/vercel-project-overview.png 1063w\"],\n    \"sizes\": \"(max-width: 640px) 100vw, 640px\",\n    \"type\": \"image/png\"\n  })), \"\\n        \", mdx(\"img\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"src\": \"/static/920be865823e277d7de4076c16bf0cef/6af66/vercel-project-overview.png\",\n    \"alt\": \"vercel project overview\",\n    \"title\": \"vercel project overview\",\n    \"loading\": \"lazy\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    }\n  })), \"\\n      \"), \"\\n  \"), \"\\n    \")), mdx(\"p\", null, \"I can now take that URL (now-short-urls-fzph462o0.now.sh) add it to a\\nbrowser and it will redirect to \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://scottspence.me\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"https://scottspence.me\"), \".\"), mdx(\"p\", null, \"Now when I deploy this with the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"--prod\"), \" flag in the Vercel CLI it\\nwill use the project URL (now-short-urls.now.sh).\"), mdx(\"p\", null, \"Ok so that was quite straightforward, right?\"), mdx(\"p\", null, \"Now each time I want to add a short URL I\\u2019ll add it to the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"now.json\"), \"\\nfile and run the Vercel CLI again to deploy the project.\"), mdx(\"p\", null, \"But I can take out the deployment part and leave that to the Vercel\\nGitHub integration.\"), mdx(\"p\", null, \"So, better get that project on GitHub!\"), mdx(\"h2\", {\n    \"id\": \"add-the-project-to-github\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#add-the-project-to-github\",\n    \"aria-label\": \"add the project to github permalink\",\n    \"className\": \"anchor before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  })))), \"Add the Project to GitHub\"), mdx(\"p\", null, \"Go to GitHub, click on the plus icon next to my profile picture,\\nselect \\u2019\", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://github.com/new\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"New repository\"), \"\\u2018.\"), mdx(\"p\", null, \"Enter the new project name and click the \\u2018Create repository\\u2019 button.\"), mdx(\"p\", null, \"GitHub supplies the git commands to get the project onto GitHub.\"), mdx(\"p\", null, \"Before that I\\u2019m going to initialise my project and add what I have to\\ngit:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-bash\"\n  }), \"git init\\ngit add .\\ngit commit -m 'init \\uD83D\\uDD25'\\n\")), mdx(\"p\", null, \"Then add the remote repository and push to it:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-bash\"\n  }), \"git remote add origin git@github.com:spences10/short-urls.git\\ngit push -u origin master\\n\")), mdx(\"p\", null, \"That\\u2019s it the project is now on GitHub and I can start using the\\nVercel GitHub integration.\"), mdx(\"h2\", {\n    \"id\": \"use-vercel-for-github\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#use-vercel-for-github\",\n    \"aria-label\": \"use vercel for github permalink\",\n    \"className\": \"anchor before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  })))), \"Use Vercel for GitHub\"), mdx(\"p\", null, \"Vercel has a GitHub integration so that you can deploy automatically\\nfrom a push to your master branch on your project or via a pull\\nrequest.\"), mdx(\"p\", null, \"The Vercel documentation for this is really good so I\\u2019m going to link\\nthat \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://vercel.com/docs/v2/git-integrations/vercel-for-github\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"here\"), \".\"), mdx(\"p\", null, \"The docs will walk you through setting up the GitHub integration with\\nyour GitHub account and linking a project.\"), mdx(\"p\", null, \"There are also integrations available for \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://vercel.com/docs/v2/git-integrations/vercel-for-gitlab\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"GitLab\"), \" and \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://vercel.com/docs/v2/git-integrations/vercel-for-bitbucket\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"Bitbucket\"), \".\"), mdx(\"p\", null, \"Now each time I add a short url to my project all I have to do is git\\ncommit and push to GitHub and the Vercel GitHub integration will take\\ncare of the rest.\"), mdx(\"h2\", {\n    \"id\": \"add-my-domain-to-vercel\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#add-my-domain-to-vercel\",\n    \"aria-label\": \"add my domain to vercel permalink\",\n    \"className\": \"anchor before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  })))), \"Add my domain to Vercel\"), mdx(\"p\", null, \"Now I\\u2019m going to add my own domain to Vercel from the \\u2018Settings\\u2019 panel\\nof my project I can select \\u2018Domains\\u2019 and add in my own domain.\"), mdx(\"p\", null, \"My domain isn\\u2019t supplied by Vercel so I will need to configure the DNS\\nsettings in my domain provider by adding the custom DNS configuration\\nsupplied here by Vercel.\"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"640px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/1a61d18a56f360b8fc4d92ed3767365b/cd78c/vercel-domains-settings.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"61.875%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/svg+xml,%3csvg%20xmlns=\\\\'http://www.w3.org/2000/svg\\\\'%20width=\\\\'400\\\\'%20height=\\\\'247\\\\'%20viewBox=\\\\'0%200%20400%20247\\\\'%20preserveAspectRatio=\\\\'none\\\\'%3e%3cpath%20d=\\\\'M0%20124v123h401V0H0v124M107%205c0%201-2%202-8%202l-8-1-2-1c-3%200-3%200-3%203%200%202%202%204%204%202h2c2%201%206%201%206-1l1%201%201%202v-2c0-2%200-2%201-1%201%202%209%202%2010%200h1c0%203%204%202%205-1%200-2-1-2-4-2-3%201-4%200-4-1l-1-1-1%201\\\\'%20fill=\\\\'%23d3d3d3\\\\'%20fill-rule=\\\\'evenodd\\\\'/%3e%3c/svg%3e')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"picture\", {\n    parentName: \"a\"\n  }, \"\\n        \", mdx(\"source\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"srcSet\": [\"/static/1a61d18a56f360b8fc4d92ed3767365b/60a22/vercel-domains-settings.webp 160w\", \"/static/1a61d18a56f360b8fc4d92ed3767365b/4c812/vercel-domains-settings.webp 320w\", \"/static/1a61d18a56f360b8fc4d92ed3767365b/0ba47/vercel-domains-settings.webp 640w\", \"/static/1a61d18a56f360b8fc4d92ed3767365b/e46b2/vercel-domains-settings.webp 960w\", \"/static/1a61d18a56f360b8fc4d92ed3767365b/5b1dd/vercel-domains-settings.webp 1236w\"],\n    \"sizes\": \"(max-width: 640px) 100vw, 640px\",\n    \"type\": \"image/webp\"\n  })), \"\\n        \", mdx(\"source\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"srcSet\": [\"/static/1a61d18a56f360b8fc4d92ed3767365b/69538/vercel-domains-settings.png 160w\", \"/static/1a61d18a56f360b8fc4d92ed3767365b/72799/vercel-domains-settings.png 320w\", \"/static/1a61d18a56f360b8fc4d92ed3767365b/6af66/vercel-domains-settings.png 640w\", \"/static/1a61d18a56f360b8fc4d92ed3767365b/d9199/vercel-domains-settings.png 960w\", \"/static/1a61d18a56f360b8fc4d92ed3767365b/cd78c/vercel-domains-settings.png 1236w\"],\n    \"sizes\": \"(max-width: 640px) 100vw, 640px\",\n    \"type\": \"image/png\"\n  })), \"\\n        \", mdx(\"img\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"src\": \"/static/1a61d18a56f360b8fc4d92ed3767365b/6af66/vercel-domains-settings.png\",\n    \"alt\": \"vercel domains settings\",\n    \"title\": \"vercel domains settings\",\n    \"loading\": \"lazy\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    }\n  })), \"\\n      \"), \"\\n  \"), \"\\n    \")), mdx(\"p\", null, \"The cool thing with Vercel is that I can have many domains pointing to\\nthe same project.\"), mdx(\"h2\", {\n    \"id\": \"heres-a-video-detailing-the-process-\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#heres-a-video-detailing-the-process-\",\n    \"aria-label\": \"heres a video detailing the process  permalink\",\n    \"className\": \"anchor before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  })))), \"Here\\u2019s a video detailing the process \\uD83D\\uDCFA\"), mdx(YouTube, {\n    youTubeId: \"y807T6Q1qqw\",\n    mdxType: \"YouTube\"\n  }), mdx(\"h2\", {\n    \"id\": \"resources\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#resources\",\n    \"aria-label\": \"resources permalink\",\n    \"className\": \"anchor before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  })))), \"Resources\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://www.youtube.com/watch?v=HL6paXyx6hM\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"Kent C Dodds example with Netlify\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://vercel.com/docs/configuration#project/redirects\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"Vercel\\u2019s documentation\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://github.com/spences10/now-short-urls\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"GitHub project\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://dev.to/commonshost/build-your-own-url-shortener-in-15-minutes-279n\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"Use Commons Host\"))));\n}\n;\nMDXContent.isMDXComponent = true;","excerpt":"Remember services like  Bitly  and  TinyURL ? Yeah, they still exist,\nshortening your URLs for you, they've been around for a long time too…","tableOfContents":{"items":[{"url":"#examples-why-would-i-use-a-short-url","title":"Examples, why would I use a short URL?"},{"url":"#do-i-have-to-use-vercel-","title":"Do I have to use Vercel? 🤔"},{"url":"#redirects","title":"Redirects"},{"url":"#get-set-up-","title":"Get set up 🛠"},{"url":"#create-the-project","title":"Create the project"},{"url":"#deploy-the-project","title":"Deploy the project"},{"url":"#add-the-project-to-github","title":"Add the Project to GitHub"},{"url":"#use-vercel-for-github","title":"Use Vercel for GitHub"},{"url":"#add-my-domain-to-vercel","title":"Add my domain to Vercel"},{"url":"#heres-a-video-detailing-the-process-","title":"Here's a video detailing the process 📺"},{"url":"#resources","title":"Resources"}]},"timeToRead":4,"fields":{"slug":"/2020/04/19/url-shortener-with-nowsh/","editLink":"https://github.com/spences10/thelocalhost/edit/authoring/posts/2020/04/19/url-shortener-with-nowsh/index.mdx"}}},"pageContext":{"slug":"/2020/04/19/url-shortener-with-nowsh/","previous":{"id":"5855519b-3070-50f2-9897-43e6547b8167","excerpt":"I'm talking Fathom Analytics again, this time about tracking link\nclicks in my Markdown. I have written about how to  track custom events  with Fathom\npreviously and this is really an extension to that post. If you would like to try Fathom and get a…","frontmatter":{"title":"Add Analytics Tracking Links to your Markdown","date":"2020-04-18T00:00:00.000Z"},"fields":{"slug":"/2020/04/18/add-tracking-links-to-your-markdown/"}},"next":{"id":"a6a0a65f-eac8-5930-99f0-fb0f3751375c","excerpt":"In this guide I'm going to cover the configuring of your custom domain\nwith Vercel's Now platform using the Now CLI. I'll be primarily covering the steps you take after setting up an\naccount with an email provider, the email provider I'm using is…","frontmatter":{"title":"Configure Custom Domain Email with Zoho and Now","date":"2020-04-25T00:00:00.000Z"},"fields":{"slug":"/2020/04/25/custom-email-domain-with-now/"}}}}}