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.
Also update on the most important thing: My friend did end up making his website :)
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?
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.
Yeah 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.
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.
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.
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.
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.
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...
> 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've found that it helps to start with the content first. Whenever I've tried to create a site where there was no content it felt really overwhelming since it's difficult to figure out how to present things nicely when you have no idea what you're trying to present! Of course, if it's your first personal site you very likely don't have much content for it, so it's a bit of a catch-22.
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.
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.
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?"
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.
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.
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.
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.
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)
Azure App Service (formerly known as Azure Websites) is what I've been using for these types of small projects. It's completely free for up to 10 sites (using up to 5GB outbound bandwidth) and you can deploy by simply linking and pushing to a git repo.
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.
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).
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.!
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).
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?
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!)
[+] [-] iheartramen|11 years ago|reply
Also update on the most important thing: My friend did end up making his website :)
[+] [-] faizshah|11 years ago|reply
[+] [-] recondite|11 years ago|reply
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|11 years ago|reply
[+] [-] lmcnish14|11 years ago|reply
[+] [-] dewey|11 years ago|reply
> 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.
[+] [-] seanwilson|11 years ago|reply
[+] [-] jamesknelson|11 years ago|reply
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
[+] [-] libria|11 years ago|reply
[+] [-] Swizec|11 years ago|reply
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.
[+] [-] ivanhoe|11 years ago|reply
[+] [-] madvlad|11 years ago|reply
A typo only someone from this community would make.
[+] [-] jeffreyrogers|11 years ago|reply
I've found that it helps to start with the content first. Whenever I've tried to create a site where there was no content it felt really overwhelming since it's difficult to figure out how to present things nicely when you have no idea what you're trying to present! Of course, if it's your first personal site you very likely don't have much content for it, so it's a bit of a catch-22.
[+] [-] javajosh|11 years ago|reply
[+] [-] Silhouette|11 years ago|reply
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.
[+] [-] codingdave|11 years ago|reply
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|11 years ago|reply
[+] [-] qpleple|11 years ago|reply
[+] [-] fibo|11 years ago|reply
[+] [-] bborud|11 years ago|reply
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.
[+] [-] z-e-r-o|11 years ago|reply
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/
[+] [-] ada1981|11 years ago|reply
Could be really great as a resource to send to friends who complain about doing XYZ. Send them to MakeThisInAnHour.com
[+] [-] edem|11 years ago|reply
[+] [-] posnet|11 years ago|reply
`python -m http.server 8000`
In case anyone was interested.
[+] [-] markvdb|11 years ago|reply
[+] [-] fndrplayer13|11 years ago|reply
Great post, I really think it highlights the power of technology and the appeal that it offers.
[+] [-] kyberias|11 years ago|reply
[+] [-] piratebroadcast|11 years ago|reply
[+] [-] jffry|11 years ago|reply
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/ [2] http://www.cloudflare.com/plans
[+] [-] lewisl9029|11 years ago|reply
[+] [-] toddmorey|11 years ago|reply
[1] https://www.netlify.com
[+] [-] pinterface|11 years ago|reply
[+] [-] seanwilson|11 years ago|reply
[+] [-] unknown|11 years ago|reply
[deleted]
[+] [-] loocsinus|11 years ago|reply
[+] [-] adregan|11 years ago|reply
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).
[+] [-] anhsirksai|11 years ago|reply
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|11 years ago|reply
[+] [-] reustle|11 years ago|reply
Also, noticed you're working on CareersMob? Let me know if you want an intro to the folks CareerMob (https://twitter.com/careermob)
[+] [-] iheartramen|11 years ago|reply
[+] [-] neil_s|11 years ago|reply
Would anyone be interested in a fork of the page that includes a quick primer about where to type the given commands?
[+] [-] javajosh|11 years ago|reply
[+] [-] cubano|11 years ago|reply
[+] [-] zo1|11 years ago|reply
Sorry, bit of a personal rant at my first GoDaddy experience.
[+] [-] dublinben|11 years ago|reply
[+] [-] throwy|11 years ago|reply