{
    "componentChunkName": "component---src-components-post-js",
    "path": "/blog/2014/12/22/how-i-set-up-my-personal-website",
    "result": {"data":{"mdx":{"id":"987bf789-6676-5f49-b2c9-503ac26cbe92","body":"var _excluded = [\"components\"];\n\nfunction _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/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"How I set up my personal website, Part 1\",\n  \"date\": \"2014-12-22T00:00:00.000Z\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, mdx(\"em\", {\n    parentName: \"p\"\n  }, \"[\", mdx(\"strong\", {\n    parentName: \"em\"\n  }, \"Ed. Note:\"), \" This post is from 2014 and is not about how (in 2020) I built the Gatsby-based site you are currently looking at.]\")), mdx(\"p\", null, \"This is part 1 in a series on setting up your personal space on the web:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Part 1: Setting up a Github Project Page\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"/blog/2014/12/22/how-i-set-up-my-personal-website-part-2/\"\n  }, \"Part 2: Setting up an Octopress site for you blog and portfolio\"))), mdx(\"p\", null, \"Setting up a personal space on the web is easily one of the best things I've done this year. If you're new to Web Design/Development and you want to know what the single best thing you can do is, I'm going to lay it all out for you right here.\"), mdx(\"p\", null, \"So before we get started, a few disclaimers: \"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"These are my suggestions. There's a lot of flexibility here. You can use different tools, different hosting, whatever. \"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Some of this stuff may seem complicated or excessive. I'll try and cover the \\\"why\\\" of each step in an aside, in case you're curious. However, some of these tools have entire books dedicated to them, so I'll try and redirect you to a better source if you're still puzzled.\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"I'm assuming some familiarity with these tools (especially Git). If something seems crazy, I'll link to more documentation, but I'm going to be moving at a bit of a brisk pace.\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"None of these steps matter, as long as in the end you achieve the following:\")), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"You need to have a place on the web that you can call your own.\"), \" Ideally, it should be:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"A place where, if an idea strikes you, you can \", mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"immediately\"), \" build it and share it.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"A place where, if someone wants to see real examples of your work, all your weekend projects and little experiments are on display.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Hosted in such a way that it won't keel over if you get a couple thousand hits from Hacker News.\")), mdx(\"p\", null, \"I posit that the best way to do this is to get an octopress blog on github pages on a personal domain, and then develop all your projects with a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"gh-pages\"), \" branch so you can share them easily. After about a year of having this easy publishing at your disposal, you'll suddenly realize that you now have an easily shareable online portfolio. Awesome.\"), mdx(\"p\", null, \"If you want to see the code for my personal website (which should include the file with this blog post) I've uploaded it \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/chrisuehlinger/chrisuehlinger.github.io\",\n    \"target\": \"_blank\",\n    \"rel\": \"nofollow\"\n  }, \"here\"), \". This is the kind of thing you're going to end up with at the end of all this.\"), mdx(\"h2\", {\n    \"id\": \"getting-your-environment-set-up\"\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"aria-hidden\": \"true\",\n    \"tabIndex\": -1,\n    \"href\": \"#getting-your-environment-set-up\"\n  }, mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"icon icon-link\"\n  })), \"Getting your environment set up\"), mdx(\"p\", null, \"For this first part, all you need is a terminal (I use the Mac OS X Terminal that comes with any Mac), and an install of git (which comes with every Mac).\"), mdx(\"p\", null, \"You should also have your text editor of choice. Any text editor will do, although I highly reccomend \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"http://www.sublimetext.com/\",\n    \"target\": \"_blank\",\n    \"rel\": \"nofollow\"\n  }, \"Sublime Text\"), \" and/or \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"http://brackets.io/\",\n    \"target\": \"_blank\",\n    \"rel\": \"nofollow\"\n  }, \"Brackets\"), \".\"), mdx(\"h2\", {\n    \"id\": \"lets-talk-about-github-pages\"\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"aria-hidden\": \"true\",\n    \"tabIndex\": -1,\n    \"href\": \"#lets-talk-about-github-pages\"\n  }, mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"icon icon-link\"\n  })), \"Let's talk about Github pages\"), mdx(\"p\", null, \"So \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/\",\n    \"target\": \"_blank\",\n    \"rel\": \"nofollow\"\n  }, \"Github\"), \" is a great website that lets you upload your code to share with others. There are tons of great codebases on there, and you could spend days just poring over the code in some of the really great projects. However, what we're really interested in here is \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://pages.github.com/\",\n    \"target\": \"_blank\",\n    \"rel\": \"nofollow\"\n  }, \"Github Pages\"), \".\"), mdx(\"p\", null, \"Basically, Github will host your site for free. Yes. Free. The catch is that your site has to be static. It has to be a folder full of html, css, javascript and image files that the server can throw at someone if they ask for them by name. No database, no backend logic, just a folder full of files.\"), mdx(\"p\", null, \"There are huge advantages to having a site like this. Even if you don't use Github Pages, you can easily find cheap hosting for a static site. There's also the fact that static sites are really cheap and easy to serve, so your site can stand up to monstrous amounts of traffic. As of today, I've never heard of anyone's Github Pages site going down due to too many requests, and Github never comes after your credit card.\"), mdx(\"p\", null, \"And it gets better. With Github Pages you can easily make a page for any of your projects. If one of your Github repositories has a branch called \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"gh-pages\"), \", and that branch has an \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"index.html\"), \" file, you can easily get to it at \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"{yourname}.github.io/{repository-name}\"), \". These project pages are the best part of this whole thing, so let's get that squared away right now.\"), mdx(\"h2\", {\n    \"id\": \"lets-publish-a-project\"\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"aria-hidden\": \"true\",\n    \"tabIndex\": -1,\n    \"href\": \"#lets-publish-a-project\"\n  }, mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"icon icon-link\"\n  })), \"Let's publish a project\"), mdx(\"p\", null, \"To start out, go to \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com\",\n    \"target\": \"_blank\",\n    \"rel\": \"nofollow\"\n  }, \"Github\"), \" and make a new respository. Call it \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"HelloWeb\"), \", decide whether you want a README file and a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \".gitignore\"), \" file (you can start with one or make one later, it doesn't really matter) ...alright good. Now go into your Terminal, find a nice cozy part of your hard drive (I recommend making a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"~/Development\"), \" directory to keep all your dev stuff in) and type the following command:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-bash\"\n  }, \"git clone https://github.com/{yourname}/HelloWeb\\n\")), mdx(\"p\", null, \"This will download the git repository and store it in a directory named \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"HelloWeb\"), \". USe the command \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"cd HelloWeb\"), \" to go inside the repository. Now, you'll start off on the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"master\"), \" branch, so you'll need to make a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"gh-pages\"), \" branch where you'll be doing your coding.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-bash\"\n  }, \"git branch gh-pages\\ngit checkout gh-pages\\n\")), mdx(\"p\", null, \"So far so good, now fire up your text editor and make a file in \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"~/Development/HelloWeb\"), \" called \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"index.html\"), \". You can keep it simple:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<h1>Hello!</h1>\\n<script>\\n    alert('Hello Hello!');\\n</script>\\n\")), mdx(\"p\", null, \"Save that, head back to the Terminal, and add this file to your repository:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-bash\"\n  }, \"git add index.html\\n\")), mdx(\"p\", null, \"Now make a commit to \\\"save\\\" what you've done:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-bash\"\n  }, \"git commit -am \\\"Added index.html\\\"\\n\")), mdx(\"p\", null, \"Now push the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"gh-pages\"), \" branch up to GitHub (they take care of setting up a lot of the remote stuff)\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-bash\"\n  }, \"git push origin gh-pages\\n\")), mdx(\"p\", null, \"Now go to \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"{yourname}.github.io/HelloWeb\"), \". There's your page! (It may take a minute or so the first time)\"), mdx(\"p\", null, \"The hard part is done. You have an HTML file on your computer. You can put any HTML, CSS or Javascript in there, and it will show up, as you wrote it, to anyone, on any computer, anywhere in the world (if they visit your website).\"), mdx(\"p\", null, \"Feel that? That's what power feels like.\"), mdx(\"p\", null, \"Now let's try something else. Let's take someone else's project, make some changes to it, and upload it to our site.\"), mdx(\"h2\", {\n    \"id\": \"make-your-own-2048\"\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"aria-hidden\": \"true\",\n    \"tabIndex\": -1,\n    \"href\": \"#make-your-own-2048\"\n  }, mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"icon icon-link\"\n  })), \"Make your own 2048\"), mdx(\"p\", null, \"Let's say you really like the game \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"http://gabrielecirulli.github.io/2048/\",\n    \"target\": \"_blank\",\n    \"rel\": \"nofollow\"\n  }, \"2048\"), \", and you want to make a spinoff that works a little differently. A lot of my projects start off like this-- I'll see something cool, imagine a different way it could work, make some changes, and then share it (giving credit to the person who had the idea of course).\"), mdx(\"p\", null, \"You may have noticed, 2048 is on a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"github.io\"), \" domain. The guy who made it pushed it to the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"gh-pages\"), \" branch of a repo named \\\"2048\\\". This will be pretty easy. First, go to \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/gabrielecirulli/2048\",\n    \"target\": \"_blank\",\n    \"rel\": \"nofollow\"\n  }, \"https://github.com/gabrielecirulli/2048\"), \" and click the button in the upper right part of the screen labeled \\\"Fork\\\".\"), mdx(\"p\", null, \"Once you've forked the repo (that is, you've made a personally copy of it that is now under your name) download it to your \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"~/Development/\"), \" directory:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-bash\"\n  }, \"git clone https://github.com/{yourname}/2048\\ncd 2048\\ngit checkout gh-pages\\n\")), mdx(\"p\", null, \"Ready to go? Alright, make a change to one of the files in there. Do anything. Make the background pink. \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"http://css-tricks.com/almanac/properties/f/filter/\",\n    \"target\": \"_blank\",\n    \"rel\": \"nofollow\"\n  }, \"Use CSS filters to make the numbers blurry.\"), \" Put your name on the page as an \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<h1>\"), \", anything. When you're done, do this:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-bash\"\n  }, \"git add {any new files you made if you made any}\\ngit commit -am \\\"{write a description of your change}\\\"\\ngit push origin gh-pages\\n\")), mdx(\"p\", null, \"Boom. It's up there. Now you can show anyone your \\\"Pink, blurry, personally branded 2048\\\". If you go to \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"http://chrisuehlinger.com/2048/\",\n    \"target\": \"_blank\",\n    \"rel\": \"nofollow\"\n  }, \"http://chrisuehlinger.com/2048/\"), \" you'll see my version. I tried to write an AI that would beat the game. I did that because I was bored one afternoon, and now it's part of my portfolio, and I can bring it up on my iPhone in the middle of an interview.\"), mdx(\"p\", null, \"So now you've got an easy way to publish anything you do. But what would really help would be a centralized site with a blog, and a portfolio page, and other goodies. I'll cover that in my next post.\"), mdx(\"h2\", {\n    \"id\": \"a-few-last-goodies\"\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"aria-hidden\": \"true\",\n    \"tabIndex\": -1,\n    \"href\": \"#a-few-last-goodies\"\n  }, mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"icon icon-link\"\n  })), \"A few last goodies\"), mdx(\"p\", null, \"You're going to want a way to run your site on your computer, so you don't need to push to Github every time you want to check if somethings working. I highly reccomend the Node.js module \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"http-server\"), \". If you already have the Node package manager \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"npm\"), \", type this to install the package:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-bash\"\n  }, \"npm install -g http-server\\n\")), mdx(\"p\", null, \"Then go to the directory where the HTML files are and type:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-bash\"\n  }, \"http-server -p 1234\\n\")), mdx(\"p\", null, \"Your website should now appear at \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"http://localhost:1234\"), \". Anytime you change something, just refresh the page and you'll see the change.\"), mdx(\"p\", null, \"I also HIGHLY reccomend the node app called \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"ungit\"), \". It's a GUI that makes it much easier to use git. To install it, type:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-bash\"\n  }, \"npm install -g ungit\\n\")), mdx(\"p\", null, \"Go to the directory where your repository is and type:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-bash\"\n  }, \"ungit\\n\")), mdx(\"p\", null, \"Now visiting \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"http://localhost:9000\"), \" will show you the app.\"));\n}\n;\nMDXContent.isMDXComponent = true;","frontmatter":{"title":"How I set up my personal website, Part 1","date":"2014-12-22T00:00:00.000Z"}}},"pageContext":{"id":"987bf789-6676-5f49-b2c9-503ac26cbe92"}},
    "staticQueryHashes": ["1831480344","3649515864"]}