9 ms·

Make This in an Hour

209 points by iheartramen 12y ago

dewey 12y ago
I really like that idea and I understand that this is aimed specifically at the friend mentioned on the site so it takes their technical ability into account but I think for most people who are struggling with basic tasks like these instructions like > Create a directory to hold your website and cd into it. would already confuse them. Now that you already got that nice domain I think I'd be great to have a guide like that aimed at beginners with more detailed instructions. I could see this as a great resource to link friends who always thought about getting their own little site, even if it's just a page listing their contact details.
- libria 12y ago
  Can't you create and edit files directly on github.com? If so, this could be done without a CLI.
- jamesknelson 12y ago
  I also built a tutorial around the same idea a few weeks ago, with a similar domain name, but aimed more at complete beginners than this site. My target audience would be graphic designers who want to get into web design, but don't have a clue where to start. I stopped after writing one article because I didn't get much interest, but then I didn't put much work into publicising it either. If people found it useful I'd certainly like to keep adding to it until it explains how to go from never having programmed to building a website which can take payments. You can find it at http://makethispage.com/chapter-1.html http://makethispage.com/chapter-1.html
  - sebkomianos 12y ago
    I am one of the worst people to give advice on "finishing" but you should definitely go on with this, it's a very good idea that can expand beyond your limited target audience (= just graphic designers). The web is full of "general" purpose tutorials for html, css, js, etc and this "general purpose" becomes "no purpose" in the end. If I am this random person that wants to learn how to make a website, I don't really care about learning all the details of the particular tools at this point, I care mostly about building what I want and "deploying". Then, maybe, I'd like to make it better, prettier, faster, etc etc. Your guide seems to attack this.
- seanwilson 12y ago
  If the reader isn't able to at least create directories in the terminal then Git and GitHub Pages will be way beyond their comfort level. If they're just wanting a simple blog or landing page and not interested in the background details, they'd be better off looking at something like Tumblr or a WordPress host.
- Swizec 12y ago
  At what point do you define a beginner then? I struggle with this a lot when writing teaching materials. It feels like teaching somebody how to create a directory should not be a part of teaching somebody how to make a website. Beginner or not. You should already know how to use a computer. It's like when I'm trying to teach people how to do X and Y with JavaScript and they get confused beyond hope when they try to run `grunt watch` and it fails because they haven't created a file yet. Like, just wait, you'll create the file in the next step. It's not the end of the world if something throws an error. You're supposed to be a programmer, jeezus.
  - DanBC 12y ago
    You're blaming the students. Is it a possibility that the fault lies with you?
    - Swizec 12y ago
      Obviously the fault lies with me. The problem I'm having is exactly the question I opened with: where do you draw the line? How do you draw the line? At what point do you say "You know what, a beginner should know this"? Or whatever the specific level you decide to teach at. Personally I try to teach at levels above beginner. This only makes the line blurrier because there's no clear divide between someone who kinda knows his stuff and someone who's an expert. It's the same problem as putting rocks in the same place. At what point does a bunch of rocks become a pile? Same here, at what point does a total beginner become just a beginner? When do they become not a beginner? What turns them into someone who kinda knows what they're doing? At what point do they become "actually kinda good"? For instance: my mum can accomplish all her work tasks with a computer. But she has no conceptual idea of what is a file. She thinks in documents and she only knows how to open documents by going through the app she created them with. The attachments in her email are a completely different world than the ones she creates with Word directly. I once blew her mind by showing her that she can use Word to open something that was sent to her via email. How would you teach her how to make a dynamic HTML5 JavaScript app? Or would you suggest some basic computer use classes first? Or, for another example, my girlfriend always gets frustrated with me because I can't just "Explain How Everything in Computers Works. How Does a Source File Turn Into A Working App?" in under five minutes. How do you even begin answering a question like that? Do I claim magic, or start with turing machines and work her way up to formal grammars and compilers? She's asking a question so far beyond her understanding that I don't even know how to begin answering.
lumpypua 12y ago
Great article! What's the database backed dynamic website equivalent of this? For node? For python? For ruby? Building out your own deployment on AWS or linode is obnoxious. Heroku gets expensive fast.
- jakobegger 12y ago
  Get a free OpenShift account. You can configure your stack by point-and-click, then clone a git repo, and push to it to deploy.
- mmahemoff 12y ago
  Shared hosting make it simple. You can spin up a LAMP website on Dreamhost in an hour. The DB is basically just a few clicks with default values and dropdowns. Screenshot: http://i.imgur.com/uq6zOSv.jpg http://i.imgur.com/uq6zOSv.jpg
- seanwilson 12y ago
  You could can get quite far with 1 free Heroku dyno, 10K free rows on Heroku PostgreSQL, free CloudFlare for caching and free error notifications. Compared to something like setting up a generic Linux server yourself, Heroku pushes you into coding in way that makes recreating server setups and deploying multiple servers easy. You can get something running in other ways but the above is low maintenance.
edem 12y ago
Please note that `python -m SimpleHTTPServer 8000` only works with python2.*.
- posnet 12y ago
  Python 3 equivalent is: `python -m http.server 8000` In case anyone was interested.
  - ghuntley 12y ago
    Thank you.
  - danneu 12y ago
    List of server one-liners: https://gist.github.com/willurd/5720255 https://gist.github.com/willurd/5720255
  - iheartramen 12y ago
    Oops, fixed thank you!
- markvdb 12y ago
  Why not simply use file:///home/username/websitename/index.html ?
  - mxxx 12y ago
    i guess it wouldn't matter in this particular example, but some browsers apply different security restrictions to the file:// protocol than they do to http.
  - iheartramen 12y ago
    Hmm I guess I haven't done that in a really long time, but I remember years ago running into issues because local files wouldn't reload immediately when I made changes to them (cached?) and have avoided it since. Don't know if other people have ever run into this?
faaar 12y ago
how do you downvote here?
- Lrigikithumer 12y ago
  You've got to get your earn the right to downvote by being a productive member of the community. I think it's 500 karma before you can downvote
  - blfr 12y ago
    You can't downvote stories. You can only flag them when they're inappropriate.
    - Lrigikithumer 12y ago
      oh ok, i only assumed cause I can't downvote yet haha
butwhy 12y ago
This is not "making a website". This is hosting a basic hmtl page online, where you don't write the html yourself.
- wingerlang 12y ago
  Pretty sure the title is make THIS website, not make A website.
  - butwhy 12y ago
    Well codecademy has a course to make the airbnb website. You code it yourself to be like airbnb, you don't just copy and paste their code.
    - wingerlang 12y ago
      I think the purpose of this website is a little bit personal to the developer, he is just showing his friends (and now other people) that getting a site up and running with a domain is an easy task. The site also doesn't say to copy paste the contents (read point 6 and 7) so your example is a bit strange. The site doesn't even mention to copy paste anything as far as I saw.
      - iheartramen 12y ago
        ^^^exactly Also she* :) (doesn't matter, but hopefully it won't be an automatic assumption eventually)
    - atmosx 12y ago
      Following your point of view, code-academy's approach is equally shitty. The airbnb "website" is not just a front-end with some HTMl/CSS and 4 png images that you've put together and will give you an airbnb clone. There's a heavy backend, multiple servers to setup, manage and monitor. Then there are databases, SSLs configurations, privacy concerns, http requests that need to be routed, emails that need quick replies, fault-tolerance strategies, CDNs, authentication schemes, payment gateways, rating systems, backup schemes... Did Code Academy teach how to handle all of the above or are you referring to a front page that I could fetch and regenerate in 20 seconds using curl?
SchizoDuckie 12y ago
git push origin gh-pages or he'll still no see anything :P
- unfunco 12y ago
  GitHub pages can exist on the master branch also.
- skeoh 12y ago
  gh-pages branch is for project pages. username.github.io is published on master.
neil_s 12y ago
This is great! Perfect resource to share with my friends when they say that they want to learn how to make web pages, after I show them some basics of how to use the terminal and not be scared of it. Would anyone be interested in a fork of the page that includes a quick primer about where to type the given commands?
qpleple 12y ago
Cool post. You don't need `python -m SimpleHTTPServer 8000` to test your page tough, just double-click on index.html :)
reustle 12y ago
Love the project! Plan on putting it on github? (Is this you? https://github.com/smithamilli https://github.com/smithamilli) Also, noticed you're working on CareersMob? Let me know if you want an intro to the folks CareerMob (https://twitter.com/careermob https://twitter.com/careermob)
- iheartramen 12y ago
  It's on Github! https://github.com/smilli/makethisinanhour https://github.com/smilli/makethisinanhour
bborud 12y ago
One might be tempted to say that this method requires a lot of insight. And it does require some, but not a lot. This is very doable for most people. You need to learn a bit about git, but that's about it. The DNS parts are mostly about knowing what you need to do (add an A-record and/or a CNAME) and then it really depends on your DNS service provider or registrar. Some registrars manage to make a mess of it. I use a registrar that has an extremely bare bones interface that is exquisitely clear. Having tried to help various friends who use all-in-one hosting solutions, I would have to say that it is far, far easier to spend a couple of hours learning just enough DNS and Git + Github to get this done than use those systems. Because if you use the method outlined in the above mentioned website, you will have tons of documentation and community support to lean on. Most all-in-one-solutions end up being between you and a useless service provider who will lose money on you if they provide you with any support.
fsloth 12y ago
This precisely the level of instruction I like when I'm researching on how to attempt something the first time. Brief and to the point. Very nice.
piratebroadcast 12y ago
I'm using github pages to host a website of mine, and I need another. Can anyone recommend a cheap/reliable simple html/css/js website host? No need for wordpress installation, Rails, etc.
- jffry 12y ago
  It's not totally free, but if you host your site on an S3 bucket (which will cost pennies/month [1] if you don't have gigabytes of stuff) and then put free-tier Cloudflare [2] in front of it. The name of the bucket has to be the same as your domain (e.g. `www.example.co`), and then you turn on static site hosting in the bucket settings, and get a URL like `www.example.co.s3-website-us-east-1.amazonaws.com`, then you can add a CNAME record in CloudFlare pointing `www.example.co` to the bucket URL. (If the bucket name doesn't match the domain name, S3 will complain) It's not free, but it is cheap. [1] https://aws.amazon.com/s3/pricing/ https://aws.amazon.com/s3/pricing/ [2] http://www.cloudflare.com/plans http://www.cloudflare.com/plans
- seanwilson 12y ago
  Can't you use GitHub pages for multiple sites? Or create multiple GitHub accounts?
  - piratebroadcast 12y ago
    You can make a github page for each project, but it walks me through a process that forces me to use their template and my own markdown, not able to actually upload html/css etc. I suppose I could create another github account though, but not sure if I want to do that every one-off site I want to put up.
    - seanwilson 12y ago
      As far as I know you can create multiple sites on one account. I'm not sure what you mean about GitHub forcing you to use a template. For my homepage, I set up a new Git repo and used a Gulp module to deploy to it without any issues.
    - 12y ago
golergka 12y ago
I want more friends like this.
ivanhoe 12y ago
err, or you could just upload index.html to any shared hosting in 5 minutes? The trouble of making a site (at least for people who can edit html directly, as in this example) is not about how to do it, but about high expectations and standards that we impose on ourselves... I'm guilty of this mysqlf, my site hasn't been updated in like 5 years, and I've built dozens of sites for others in that period...
- javajosh 12y ago
  The OP's one-hour recipe is strictly better for a pure static site, because it's substantially cheaper than shared hosting (which is $5/mo, github pages is free). Note that shared hosting provides persistent compute/store capability, which this project doesn't need.
  - lazyjones 12y ago
    > The OP's one-hour recipe is strictly better for a pure static site But it's still a lot worse than the simple web page builders (using a web-based UI) that have been around for 15 years or so. Why not just use about.me or some similar modern service?
    - alexchamberlain 12y ago
      Because we are software engineers and website designers and we can do better... (Please don't look at my website...)
      - lazyjones 12y ago
        Certainly we can do better, but 20 carefully researched one-liners aren't nearly as technologically advanced, elaborate and useful as a well-crafted, intuitive UI with a more maintainable end result.
        lowboy 12y ago
        We can do better than 3 pieces of About.me advertising over our homepage, including a modal: http://i.imgur.com/p9NY8k6.jpg http://i.imgur.com/p9NY8k6.jpg Taken from https://about.me/laraodm https://about.me/laraodm, which I got to from the About.me homepage > staff picks.
fndrplayer13 12y ago
I love how far the world has come over the past few decades. It is amazing how quickly you can get content up and online, and available to people. Great post, I really think it highlights the power of technology and the appeal that it offers.
- kyberias 12y ago
  To be fair, this didn't contain anything that wasn't possible in 10 or even 20 years ago in one hour. The only thing that wasn't so straightforward 20 years ago (1995) was finding hosting for your page.
  - Joeboy 12y ago
    Not sure about 20 years ago, but 10-15 years ago finding hosting was pretty easy. You probably got some free from your dialup ISP (at least here in the UK). And everything else was substantially easier, because unstyled HTML was still considered perfectly OK. It's a shame the need for rounded corners and less legible colourschemes has pretty much killed the idea of the web as a read-write medium for the masses.
iheartramen 12y ago
Thanks for feedback everyone! This was obviously pretty rushed since I actually timed myself doing it, so feel free to submit a PR here: https://github.com/smilli/makethisinanhour https://github.com/smilli/makethisinanhour. Also update on the most important thing: My friend did end up making his website :)
javajosh 12y ago
What do you think about adding instructions on how to revert a published change to your site with git. The nice thing about git is that you can fix boo-boos. Also you might add a hosted analytics service to the HTML template. (The urge to know who's looking at your site is universal!)
javajosh 12y ago
What do you think about adding two things: how to revert a published change to your site! The nice thing about git is that you can fix boo-boos. The other would be to add a hosted analytics service to the HTML template. (The urge to know who's looking at your site is universal!)
fibo 12y ago
Nice topic. I would also add https with CloudFlare and comments with Disqus, see http://g14n.info/2014/08/moving-from-blogger-to-github-pages/ http://g14n.info/2014/08/moving-from-blogger-to-github-pages... For details. Other nice thing to have is social integration but I did not added it yet.
anhsirksai 12y ago
No doubt this post is good for some one who is beginning to build a website. But this post expects people to do their pages in html. github supports simple markdown pages to be hosted as html. markdown is clear and easy to write posts. If this post extends to teach hosting markdown pages, one can use the website built using this tool to make his own blog. This might help people more than teaching just to create a website.!
- collyw 12y ago
  As someone that knows some HTML, I hate having to learn another markdown for ever wiki site that I end up using. (Saying that WYSWIG editors seem to be more common than a few years ago for this task).
cubano 12y ago
I feel like with Godaddy hosting I could make a website in like 2 minutes by pressing a few buttons.
- throwy 12y ago
  Yep but you wouldn't get free hosting right?
  - cubano 12y ago
    I use 125mb.com for free hosting and they have the same one-button install feature if I remember correctly. But for sure, nothing wrong with this info...it's cool how the OP set things up for his solution.
- dublinben 12y ago
  But then you'd be using GoDaddy.
  - cubano 12y ago
    Yeah...although I have to admit, it seems to be getting somewhat better recently, as difficult as that is for me to grok.
- zo1 12y ago
  And ironically, no "Email" address at all to go with said GoDaddy hosting. Despite paying for a domain name, and a basic managed WordPress site. Sorry, bit of a personal rant at my first GoDaddy experience.
taivare 12y ago
with the audience showing up on this thread. I was going to use ask:HN ,But I'm almost finished with an ebook/prnt for ' kid's with cancer' charities, only will have 2 books on the site / cart checkout / needed .. if any one has advise of a ..simple 1 page ..Woo..theme or similar..it would be helpful
codingdave 12y ago
If the inspiration for this was to smack down a friend who hasn't started "his web site", then all this really proves is that putting content online is far less of a barrier than coming up with the content in the first place. Putting HTML in place that it can be opened by a web browser is not a challenge and has not been a challenge for over a decade. Github is one choice, shared hosting is another... as the comments already show, you can argue pros and cons of various choices ad nauseum, even on such a trivial web page as OP's. The larger point that seems to be getting missed is that the question of "How?" pales in comparison to the question of "What content should I put on my site in the first place?"
- collyw 12y ago
  A shared google doc would be just as effective.
  - yitchelle 12y ago
    or create a blog on wordpress.com or blogger.com as well.
Silhouette 12y ago
Let me first say that I appreciate anyone making an effort to help a friend with modern technologies. However, I can't help noticing that when I first used a home ISP, you got some web space thrown as part of the deal, and setting up a first web site would have required only this: 1. Write the index.html file. 2. Upload it to your ISP-provided server by FTP. 3. There is no step 3. This was 15-20 years ago and pretty much universally available free of charge with any residential ISP here in the UK. The most complicated thing would have been getting your own domain name, because that would have required a few more button clicks and a small payment. Sadly, the centralised "build my web site" sites and social networks seem to have taken over, and looking around it seems like today most ISPs no longer offer basic shared web hosting for free as a routine part of their plans. So today, per this article, getting your own site on-line might need all of this: 1. Know the most complicated VCS in history. 2. Be comfortable with CLI use. 3. Have Python installed, just to run a local web server for testing. 4. Depend on a third party (GitHub) and all that comes with that (I wonder how many people who advocate GH all the time have actually read what they're signing up for). 5. Know how to order a domain name from a separate registrar and then how to hook it up to the aforementioned third party. Any one of those things will probably be a huge barrier and a cause of repeated failures and frustrations for anyone who is interested in this kind of help in the first place. Again, I appreciate the effort to help a friend navigate these waters for the first time, but in general I'm not sure this constitutes progress.
ada1981 12y ago
Now that your friend has made the site, you could curate a collection of tutorials from people on things that take an hour or less to make. Could be really great as a resource to send to friends who complain about doing XYZ. Send them to MakeThisInAnHour.com
SteasonTee 12y ago
Too bad. Github.io is kind of unreliable. Is down now.
- lww 12y ago
  They were still getting ddos'd up until yesterday.
faizshah 12y ago
This gave me a great idea. There should be a website with a bunch of programming challenges (e.g like making a Todo list app or write a data structure in an hour) where you can share your code and workflow. You could then view a bunch of other peoples workflows, code, and post mortem notes and discuss how to improve each others workflows. Anybody know of a site like this?
- recondite 12y ago
  Project Euler has something similar. After solving each challenge, you're given access to the message board for that problem where people post their code and discuss how they solved it. The problems tend to become more focused on math implementations than programming after a while though, so this may not be the best example for you.
- amckenna 12y ago
  Yeah http://www.reddit.com/r/dailyprogrammer http://www.reddit.com/r/dailyprogrammer has challenges like this and in the comments people share their solutions. It's a great way to learn a new language and find out some interesting tricks.
- lmcnish14 12y ago
  Exercism.io
lwf 12y ago
Step 2.5: open a terminal.
loocsinus 12y ago
Student here. Why do you run a localhost web server before pushing to git? Is this a git thing? (I am a newbie to github). Thanks. I like this nice short article.
- adregan 12y ago
  It's not necessary for git, no. However, it's a really good habit to get in—you make some changes to the project and then test it locally before pushing your changes to your git repo (on github and/or elsewhere). This way, you make sure your changes didn't break something that was previously working. Now as to why start the simple http server to check your work vs. opening the index.html file directly in the browser: 1) relative links can behave in an unexpected manner using the file:// path, and you'll get more consistent behavior using the server 2) There are sometimes permissions errors loading scripts into the page when it's displaying through file:// (relatedly, protocol relative links eg. //code.jquery.com/jquery-2.1.3.min.js won't work).
  - juliangregorian 12y ago
    3) AJAX won't work (since there's no HTTP backend to talk to)
    - adregan 12y ago
      I knew I was forgetting something.
    - skeoh 12y ago
      Not _entirely_ true. AJAX will work, it just cannot access the 'file:' protocol by default. Requesting HTTP content will work fine.
      - juliangregorian 11y ago
        Haha, okay sure you are technically correct (although that's what I was getting at), but I'm going to nitpick you back and remind you that "requesting HTTP content" will not in general work because of same origin policy.
joeevans1000 12y ago
Pretty awesome... thanks. I have been putting off figuring out how to make sites on github. Since I didn't need the domain, I had a site in about 8 minutes, and now know how to create project pages as well.
z-e-r-o 12y ago
This is on top of HN and I don't understand why does no one notice the recommendation of setting the root level CNAME records. While this might work in practice, it is against the DNS standard and causes really weird bugs, like not being able to set up email on the same domain, as for example you cannot set up TXT records. Unfortunately, solving this problem isn't easy or obvious. You'd need to use ALIAS / ANAME records, which are only supported by a very few DNS providers (DNSMadeEasy, Rage4, Amazon Route53 if you are hosting on S3). Also, you need to set a low TTL to make sure that you are not caching an old cloud instance's IP address. The best writeup I found about it is here: http://www.dnsmadeeasy.com/aname-records/ http://www.dnsmadeeasy.com/aname-records/

209 points by iheartramen 12y ago

dewey 12y ago

I really like that idea and I understand that this is aimed specifically at the friend mentioned on the site so it takes their technical ability into account but I think for most people who are struggling with basic tasks like these instructions like > Create a directory to hold your website and cd into it. would already confuse them. Now that you already got that nice domain I think I'd be great to have a guide like that aimed at beginners with more detailed instructions. I could see this as a great resource to link friends who always thought about getting their own little site, even if it's just a page listing their contact details.

libria 12y ago
Can't you create and edit files directly on github.com? If so, this could be done without a CLI.
jamesknelson 12y ago
I also built a tutorial around the same idea a few weeks ago, with a similar domain name, but aimed more at complete beginners than this site. My target audience would be graphic designers who want to get into web design, but don't have a clue where to start. I stopped after writing one article because I didn't get much interest, but then I didn't put much work into publicising it either. If people found it useful I'd certainly like to keep adding to it until it explains how to go from never having programmed to building a website which can take payments. You can find it at http://makethispage.com/chapter-1.html http://makethispage.com/chapter-1.html
- sebkomianos 12y ago
  I am one of the worst people to give advice on "finishing" but you should definitely go on with this, it's a very good idea that can expand beyond your limited target audience (= just graphic designers). The web is full of "general" purpose tutorials for html, css, js, etc and this "general purpose" becomes "no purpose" in the end. If I am this random person that wants to learn how to make a website, I don't really care about learning all the details of the particular tools at this point, I care mostly about building what I want and "deploying". Then, maybe, I'd like to make it better, prettier, faster, etc etc. Your guide seems to attack this.
seanwilson 12y ago
If the reader isn't able to at least create directories in the terminal then Git and GitHub Pages will be way beyond their comfort level. If they're just wanting a simple blog or landing page and not interested in the background details, they'd be better off looking at something like Tumblr or a WordPress host.
Swizec 12y ago
At what point do you define a beginner then? I struggle with this a lot when writing teaching materials. It feels like teaching somebody how to create a directory should not be a part of teaching somebody how to make a website. Beginner or not. You should already know how to use a computer. It's like when I'm trying to teach people how to do X and Y with JavaScript and they get confused beyond hope when they try to run `grunt watch` and it fails because they haven't created a file yet. Like, just wait, you'll create the file in the next step. It's not the end of the world if something throws an error. You're supposed to be a programmer, jeezus.
- DanBC 12y ago
  You're blaming the students. Is it a possibility that the fault lies with you?
  - Swizec 12y ago
    Obviously the fault lies with me. The problem I'm having is exactly the question I opened with: where do you draw the line? How do you draw the line? At what point do you say "You know what, a beginner should know this"? Or whatever the specific level you decide to teach at. Personally I try to teach at levels above beginner. This only makes the line blurrier because there's no clear divide between someone who kinda knows his stuff and someone who's an expert. It's the same problem as putting rocks in the same place. At what point does a bunch of rocks become a pile? Same here, at what point does a total beginner become just a beginner? When do they become not a beginner? What turns them into someone who kinda knows what they're doing? At what point do they become "actually kinda good"? For instance: my mum can accomplish all her work tasks with a computer. But she has no conceptual idea of what is a file. She thinks in documents and she only knows how to open documents by going through the app she created them with. The attachments in her email are a completely different world than the ones she creates with Word directly. I once blew her mind by showing her that she can use Word to open something that was sent to her via email. How would you teach her how to make a dynamic HTML5 JavaScript app? Or would you suggest some basic computer use classes first? Or, for another example, my girlfriend always gets frustrated with me because I can't just "Explain How Everything in Computers Works. How Does a Source File Turn Into A Working App?" in under five minutes. How do you even begin answering a question like that? Do I claim magic, or start with turing machines and work her way up to formal grammars and compilers? She's asking a question so far beyond her understanding that I don't even know how to begin answering.

lumpypua 12y ago

Great article! What's the database backed dynamic website equivalent of this? For node? For python? For ruby? Building out your own deployment on AWS or linode is obnoxious. Heroku gets expensive fast.

jakobegger 12y ago
Get a free OpenShift account. You can configure your stack by point-and-click, then clone a git repo, and push to it to deploy.
mmahemoff 12y ago
Shared hosting make it simple. You can spin up a LAMP website on Dreamhost in an hour. The DB is basically just a few clicks with default values and dropdowns. Screenshot: http://i.imgur.com/uq6zOSv.jpg http://i.imgur.com/uq6zOSv.jpg
seanwilson 12y ago
You could can get quite far with 1 free Heroku dyno, 10K free rows on Heroku PostgreSQL, free CloudFlare for caching and free error notifications. Compared to something like setting up a generic Linux server yourself, Heroku pushes you into coding in way that makes recreating server setups and deploying multiple servers easy. You can get something running in other ways but the above is low maintenance.

edem 12y ago

Please note that `python -m SimpleHTTPServer 8000` only works with python2.*.

posnet 12y ago
Python 3 equivalent is: `python -m http.server 8000` In case anyone was interested.
- ghuntley 12y ago
  Thank you.
- danneu 12y ago
  List of server one-liners: https://gist.github.com/willurd/5720255 https://gist.github.com/willurd/5720255
- iheartramen 12y ago
  Oops, fixed thank you!
markvdb 12y ago
Why not simply use file:///home/username/websitename/index.html ?
- mxxx 12y ago
  i guess it wouldn't matter in this particular example, but some browsers apply different security restrictions to the file:// protocol than they do to http.
- iheartramen 12y ago
  Hmm I guess I haven't done that in a really long time, but I remember years ago running into issues because local files wouldn't reload immediately when I made changes to them (cached?) and have avoided it since. Don't know if other people have ever run into this?

faaar 12y ago

how do you downvote here?

Lrigikithumer 12y ago
You've got to get your earn the right to downvote by being a productive member of the community. I think it's 500 karma before you can downvote
- blfr 12y ago
  You can't downvote stories. You can only flag them when they're inappropriate.
  - Lrigikithumer 12y ago
    oh ok, i only assumed cause I can't downvote yet haha

butwhy 12y ago

This is not "making a website". This is hosting a basic hmtl page online, where you don't write the html yourself.

wingerlang 12y ago
Pretty sure the title is make THIS website, not make A website.
- butwhy 12y ago
  Well codecademy has a course to make the airbnb website. You code it yourself to be like airbnb, you don't just copy and paste their code.
  - wingerlang 12y ago
    I think the purpose of this website is a little bit personal to the developer, he is just showing his friends (and now other people) that getting a site up and running with a domain is an easy task. The site also doesn't say to copy paste the contents (read point 6 and 7) so your example is a bit strange. The site doesn't even mention to copy paste anything as far as I saw.
    - iheartramen 12y ago
      ^^^exactly Also she* :) (doesn't matter, but hopefully it won't be an automatic assumption eventually)
  - atmosx 12y ago
    Following your point of view, code-academy's approach is equally shitty. The airbnb "website" is not just a front-end with some HTMl/CSS and 4 png images that you've put together and will give you an airbnb clone. There's a heavy backend, multiple servers to setup, manage and monitor. Then there are databases, SSLs configurations, privacy concerns, http requests that need to be routed, emails that need quick replies, fault-tolerance strategies, CDNs, authentication schemes, payment gateways, rating systems, backup schemes... Did Code Academy teach how to handle all of the above or are you referring to a front page that I could fetch and regenerate in 20 seconds using curl?

SchizoDuckie 12y ago

git push origin gh-pages or he'll still no see anything :P

unfunco 12y ago
GitHub pages can exist on the master branch also.
skeoh 12y ago
gh-pages branch is for project pages. username.github.io is published on master.

neil_s 12y ago

This is great! Perfect resource to share with my friends when they say that they want to learn how to make web pages, after I show them some basics of how to use the terminal and not be scared of it. Would anyone be interested in a fork of the page that includes a quick primer about where to type the given commands?

qpleple 12y ago

Cool post. You don't need `python -m SimpleHTTPServer 8000` to test your page tough, just double-click on index.html :)

reustle 12y ago

Love the project! Plan on putting it on github? (Is this you? https://github.com/smithamilli https://github.com/smithamilli) Also, noticed you're working on CareersMob? Let me know if you want an intro to the folks CareerMob (https://twitter.com/careermob https://twitter.com/careermob)

iheartramen 12y ago
It's on Github! https://github.com/smilli/makethisinanhour https://github.com/smilli/makethisinanhour

bborud 12y ago

One might be tempted to say that this method requires a lot of insight. And it does require some, but not a lot. This is very doable for most people. You need to learn a bit about git, but that's about it. The DNS parts are mostly about knowing what you need to do (add an A-record and/or a CNAME) and then it really depends on your DNS service provider or registrar. Some registrars manage to make a mess of it. I use a registrar that has an extremely bare bones interface that is exquisitely clear. Having tried to help various friends who use all-in-one hosting solutions, I would have to say that it is far, far easier to spend a couple of hours learning just enough DNS and Git + Github to get this done than use those systems. Because if you use the method outlined in the above mentioned website, you will have tons of documentation and community support to lean on. Most all-in-one-solutions end up being between you and a useless service provider who will lose money on you if they provide you with any support.

fsloth 12y ago

This precisely the level of instruction I like when I'm researching on how to attempt something the first time. Brief and to the point. Very nice.

piratebroadcast 12y ago

I'm using github pages to host a website of mine, and I need another. Can anyone recommend a cheap/reliable simple html/css/js website host? No need for wordpress installation, Rails, etc.

jffry 12y ago
It's not totally free, but if you host your site on an S3 bucket (which will cost pennies/month [1] if you don't have gigabytes of stuff) and then put free-tier Cloudflare [2] in front of it. The name of the bucket has to be the same as your domain (e.g. `www.example.co`), and then you turn on static site hosting in the bucket settings, and get a URL like `www.example.co.s3-website-us-east-1.amazonaws.com`, then you can add a CNAME record in CloudFlare pointing `www.example.co` to the bucket URL. (If the bucket name doesn't match the domain name, S3 will complain) It's not free, but it is cheap. [1] https://aws.amazon.com/s3/pricing/ https://aws.amazon.com/s3/pricing/ [2] http://www.cloudflare.com/plans http://www.cloudflare.com/plans
seanwilson 12y ago
Can't you use GitHub pages for multiple sites? Or create multiple GitHub accounts?
- piratebroadcast 12y ago
  You can make a github page for each project, but it walks me through a process that forces me to use their template and my own markdown, not able to actually upload html/css etc. I suppose I could create another github account though, but not sure if I want to do that every one-off site I want to put up.
  - seanwilson 12y ago
    As far as I know you can create multiple sites on one account. I'm not sure what you mean about GitHub forcing you to use a template. For my homepage, I set up a new Git repo and used a Gulp module to deploy to it without any issues.
  - 12y ago

golergka 12y ago

I want more friends like this.

ivanhoe 12y ago

err, or you could just upload index.html to any shared hosting in 5 minutes? The trouble of making a site (at least for people who can edit html directly, as in this example) is not about how to do it, but about high expectations and standards that we impose on ourselves... I'm guilty of this mysqlf, my site hasn't been updated in like 5 years, and I've built dozens of sites for others in that period...

javajosh 12y ago
The OP's one-hour recipe is strictly better for a pure static site, because it's substantially cheaper than shared hosting (which is $5/mo, github pages is free). Note that shared hosting provides persistent compute/store capability, which this project doesn't need.
- lazyjones 12y ago
  > The OP's one-hour recipe is strictly better for a pure static site But it's still a lot worse than the simple web page builders (using a web-based UI) that have been around for 15 years or so. Why not just use about.me or some similar modern service?
  - alexchamberlain 12y ago
    Because we are software engineers and website designers and we can do better... (Please don't look at my website...)
    - lazyjones 12y ago
      Certainly we can do better, but 20 carefully researched one-liners aren't nearly as technologically advanced, elaborate and useful as a well-crafted, intuitive UI with a more maintainable end result.
      - lowboy 12y ago
        We can do better than 3 pieces of About.me advertising over our homepage, including a modal: http://i.imgur.com/p9NY8k6.jpg http://i.imgur.com/p9NY8k6.jpg Taken from https://about.me/laraodm https://about.me/laraodm, which I got to from the About.me homepage > staff picks.

fndrplayer13 12y ago

I love how far the world has come over the past few decades. It is amazing how quickly you can get content up and online, and available to people. Great post, I really think it highlights the power of technology and the appeal that it offers.

kyberias 12y ago
To be fair, this didn't contain anything that wasn't possible in 10 or even 20 years ago in one hour. The only thing that wasn't so straightforward 20 years ago (1995) was finding hosting for your page.
- Joeboy 12y ago
  Not sure about 20 years ago, but 10-15 years ago finding hosting was pretty easy. You probably got some free from your dialup ISP (at least here in the UK). And everything else was substantially easier, because unstyled HTML was still considered perfectly OK. It's a shame the need for rounded corners and less legible colourschemes has pretty much killed the idea of the web as a read-write medium for the masses.

iheartramen 12y ago

Thanks for feedback everyone! This was obviously pretty rushed since I actually timed myself doing it, so feel free to submit a PR here: https://github.com/smilli/makethisinanhour https://github.com/smilli/makethisinanhour. Also update on the most important thing: My friend did end up making his website :)

javajosh 12y ago

What do you think about adding instructions on how to revert a published change to your site with git. The nice thing about git is that you can fix boo-boos. Also you might add a hosted analytics service to the HTML template. (The urge to know who's looking at your site is universal!)

javajosh 12y ago

What do you think about adding two things: how to revert a published change to your site! The nice thing about git is that you can fix boo-boos. The other would be to add a hosted analytics service to the HTML template. (The urge to know who's looking at your site is universal!)

fibo 12y ago

Nice topic. I would also add https with CloudFlare and comments with Disqus, see http://g14n.info/2014/08/moving-from-blogger-to-github-pages/ http://g14n.info/2014/08/moving-from-blogger-to-github-pages... For details. Other nice thing to have is social integration but I did not added it yet.

anhsirksai 12y ago

No doubt this post is good for some one who is beginning to build a website. But this post expects people to do their pages in html. github supports simple markdown pages to be hosted as html. markdown is clear and easy to write posts. If this post extends to teach hosting markdown pages, one can use the website built using this tool to make his own blog. This might help people more than teaching just to create a website.!

collyw 12y ago
As someone that knows some HTML, I hate having to learn another markdown for ever wiki site that I end up using. (Saying that WYSWIG editors seem to be more common than a few years ago for this task).

cubano 12y ago

I feel like with Godaddy hosting I could make a website in like 2 minutes by pressing a few buttons.

throwy 12y ago
Yep but you wouldn't get free hosting right?
- cubano 12y ago
  I use 125mb.com for free hosting and they have the same one-button install feature if I remember correctly. But for sure, nothing wrong with this info...it's cool how the OP set things up for his solution.
dublinben 12y ago
But then you'd be using GoDaddy.
- cubano 12y ago
  Yeah...although I have to admit, it seems to be getting somewhat better recently, as difficult as that is for me to grok.
zo1 12y ago
And ironically, no "Email" address at all to go with said GoDaddy hosting. Despite paying for a domain name, and a basic managed WordPress site. Sorry, bit of a personal rant at my first GoDaddy experience.

taivare 12y ago

with the audience showing up on this thread. I was going to use ask:HN ,But I'm almost finished with an ebook/prnt for ' kid's with cancer' charities, only will have 2 books on the site / cart checkout / needed .. if any one has advise of a ..simple 1 page ..Woo..theme or similar..it would be helpful

codingdave 12y ago

If the inspiration for this was to smack down a friend who hasn't started "his web site", then all this really proves is that putting content online is far less of a barrier than coming up with the content in the first place. Putting HTML in place that it can be opened by a web browser is not a challenge and has not been a challenge for over a decade. Github is one choice, shared hosting is another... as the comments already show, you can argue pros and cons of various choices ad nauseum, even on such a trivial web page as OP's. The larger point that seems to be getting missed is that the question of "How?" pales in comparison to the question of "What content should I put on my site in the first place?"

collyw 12y ago
A shared google doc would be just as effective.
- yitchelle 12y ago
  or create a blog on wordpress.com or blogger.com as well.

Silhouette 12y ago

Let me first say that I appreciate anyone making an effort to help a friend with modern technologies. However, I can't help noticing that when I first used a home ISP, you got some web space thrown as part of the deal, and setting up a first web site would have required only this: 1. Write the index.html file. 2. Upload it to your ISP-provided server by FTP. 3. There is no step 3. This was 15-20 years ago and pretty much universally available free of charge with any residential ISP here in the UK. The most complicated thing would have been getting your own domain name, because that would have required a few more button clicks and a small payment. Sadly, the centralised "build my web site" sites and social networks seem to have taken over, and looking around it seems like today most ISPs no longer offer basic shared web hosting for free as a routine part of their plans. So today, per this article, getting your own site on-line might need all of this: 1. Know the most complicated VCS in history. 2. Be comfortable with CLI use. 3. Have Python installed, just to run a local web server for testing. 4. Depend on a third party (GitHub) and all that comes with that (I wonder how many people who advocate GH all the time have actually read what they're signing up for). 5. Know how to order a domain name from a separate registrar and then how to hook it up to the aforementioned third party. Any one of those things will probably be a huge barrier and a cause of repeated failures and frustrations for anyone who is interested in this kind of help in the first place. Again, I appreciate the effort to help a friend navigate these waters for the first time, but in general I'm not sure this constitutes progress.

ada1981 12y ago

Now that your friend has made the site, you could curate a collection of tutorials from people on things that take an hour or less to make. Could be really great as a resource to send to friends who complain about doing XYZ. Send them to MakeThisInAnHour.com

SteasonTee 12y ago

Too bad. Github.io is kind of unreliable. Is down now.

lww 12y ago
They were still getting ddos'd up until yesterday.

faizshah 12y ago

This gave me a great idea. There should be a website with a bunch of programming challenges (e.g like making a Todo list app or write a data structure in an hour) where you can share your code and workflow. You could then view a bunch of other peoples workflows, code, and post mortem notes and discuss how to improve each others workflows. Anybody know of a site like this?

recondite 12y ago
Project Euler has something similar. After solving each challenge, you're given access to the message board for that problem where people post their code and discuss how they solved it. The problems tend to become more focused on math implementations than programming after a while though, so this may not be the best example for you.
amckenna 12y ago
Yeah http://www.reddit.com/r/dailyprogrammer http://www.reddit.com/r/dailyprogrammer has challenges like this and in the comments people share their solutions. It's a great way to learn a new language and find out some interesting tricks.
lmcnish14 12y ago
Exercism.io

lwf 12y ago

Step 2.5: open a terminal.

loocsinus 12y ago

Student here. Why do you run a localhost web server before pushing to git? Is this a git thing? (I am a newbie to github). Thanks. I like this nice short article.

adregan 12y ago
It's not necessary for git, no. However, it's a really good habit to get in—you make some changes to the project and then test it locally before pushing your changes to your git repo (on github and/or elsewhere). This way, you make sure your changes didn't break something that was previously working. Now as to why start the simple http server to check your work vs. opening the index.html file directly in the browser: 1) relative links can behave in an unexpected manner using the file:// path, and you'll get more consistent behavior using the server 2) There are sometimes permissions errors loading scripts into the page when it's displaying through file:// (relatedly, protocol relative links eg. //code.jquery.com/jquery-2.1.3.min.js won't work).
- juliangregorian 12y ago
  3) AJAX won't work (since there's no HTTP backend to talk to)
  - adregan 12y ago
    I knew I was forgetting something.
  - skeoh 12y ago
    Not _entirely_ true. AJAX will work, it just cannot access the 'file:' protocol by default. Requesting HTTP content will work fine.
    - juliangregorian 11y ago
      Haha, okay sure you are technically correct (although that's what I was getting at), but I'm going to nitpick you back and remind you that "requesting HTTP content" will not in general work because of same origin policy.

joeevans1000 12y ago

Pretty awesome... thanks. I have been putting off figuring out how to make sites on github. Since I didn't need the domain, I had a site in about 8 minutes, and now know how to create project pages as well.

z-e-r-o 12y ago

This is on top of HN and I don't understand why does no one notice the recommendation of setting the root level CNAME records. While this might work in practice, it is against the DNS standard and causes really weird bugs, like not being able to set up email on the same domain, as for example you cannot set up TXT records. Unfortunately, solving this problem isn't easy or obvious. You'd need to use ALIAS / ANAME records, which are only supported by a very few DNS providers (DNSMadeEasy, Rage4, Amazon Route53 if you are hosting on S3). Also, you need to set a low TTL to make sure that you are not caching an old cloud instance's IP address. The best writeup I found about it is here: http://www.dnsmadeeasy.com/aname-records/ http://www.dnsmadeeasy.com/aname-records/