Make This in an Hour | Hacker News Reader

Make This in an Hour

makethisinanhour.com

209 pointsiheartramen100 comments

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?

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.

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.

Exercism.io

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.

You can find it at http://makethispage.com/chapter-1.html

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.

Can't you create and edit files directly on github.com? If so, this could be done without a CLI.

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.

You're blaming the students. Is it a possibility that the fault lies with you?

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.

"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?

You could try to be romantic and playful and say the love child created by a sexy, error-free relationship between source code and the compiler is an executable?

* > How would you teach her how to make a dynamic HTML5 JavaScript app? *

How would you teach, not your mum but, a first year computer science student how to make a dynamic HTML5-Javascript app?

Sure, they (probably) understand what a file is much better than your mum, but still: Canvas, "this", libraries, dependencies, etc etc..

I was having trouble explaining stuff to my father as well but I realised that I don't have to give him a pretty picture of how a computer works when all he wants is to be able to reply to emails, print attachments and create documents. Forget the file system and the desktop and the folders and this and that, all he wanted was simple step guides to perform these very specific tasks.

In the end, the teaching process is the same, no matter how (non) beginner someone is: There is always something they probably don't know and you don't have to teach them the whole universe before they learn how to do something. You don't have to know what electricity is in order turn the lights on..

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...

> I'm guilty of this mysqlf

A typo only someone from this community would make.

Haha that's awesome, I do the same thing. Though I just wind up typing "mysql" instead of "myself" or "mysqlf". I type the word "mysql" much more frequently than "myself" that the muscle memory takes over on the keyboard. Glad to see I'm not alone. :D

> 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.

If you're making a purely static site, you could save yourself ~40 minutes of that by using http://neocities.org instead of github. You don't have to bother installing git, creating files locally, intializing a repo, committing changes, signing up for github, or pushing code if you don't want to. Of course, using version control is a good practice, but neocities will host your static pages, scripts, stylesheets, and other assets for free, and there's an in-browser code editor. You still have to register your domain name and change your DNS record to point to neocities, but if your goal is to get a page up and running as fast as possible, that's the way to do it.

Also, don't github pages need to be deployed to the gh-pages branch?

> 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?

Because we are software engineers and website designers and we can do better... (Please don't look at my website...)

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.

We can do better than 3 pieces of About.me advertising over our homepage, including a modal: http://i.imgur.com/p9NY8k6.jpg

Taken from https://about.me/laraodm, which I got to from the About.me homepage > staff picks.

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?"

A shared google doc would be just as effective.

or create a blog on wordpress.com or blogger.com as well.

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

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... For details. Other nice thing to have is social integration but I did not added it yet.

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.

The best writeup I found about it is here: http://www.dnsmadeeasy.com/aname-records/

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

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

Python 3 equivalent is:

`python -m http.server 8000`

In case anyone was interested.

List of server one-liners: https://gist.github.com/willurd/5720255

Oops, fixed thank you!

Thank you.

Why not simply use file:///home/username/websitename/index.html ?

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.

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?

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.

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.

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.

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)

It's not free, but it is cheap.

[1] https://aws.amazon.com/s3/pricing/ [2] http://www.cloudflare.com/plans

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.

Netlify is awesome. Can even run a build process (similar to github pages) but using just about any static site generator.

[1] https://www.netlify.com

Thanks so much for the shout out, we appreciate it, and are happy that you like it. And for you and any one reading this, let us know if there are any features you'd like and we'll get right on it.

Arguably a wee bit simpler than jffry's s3+cloudflare option, and with a similar pay-for-what-you-use pricing model, is NearlyFreeSpeech.net.

Can't you use GitHub pages for multiple sites? Or create multiple GitHub accounts?

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.

You can definitely create github pages for each repo, using your own html/css/js. You just need to create a gh-pages branch [1]. If you just want to host a new static site, you can even create a new repo just for that, create a gh-pages branch, then make it the default branch and delete the master branch, leaving you with only the gh-pages content [2].

[1] https://help.github.com/articles/creating-project-pages-manu...

[2] http://24ways.org/2013/get-started-with-github-pages/

This is great, I will look in to this. Thanks!

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.

You can just create a GitHub organization and create a Pages repo for that org.

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).

3) AJAX won't work (since there's no HTTP backend to talk to)

Not _entirely_ true. AJAX will work, it just cannot access the 'file:' protocol by default. Requesting HTTP content will work fine.

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.

I knew I was forgetting something.

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).

Love the project! Plan on putting it on github? (Is this you? 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)

It's on Github! https://github.com/smilli/makethisinanhour

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!)

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

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.

But then you'd be using GoDaddy.

Yeah...although I have to admit, it seems to be getting somewhat better recently, as difficult as that is for me to grok.

Yep but you wouldn't get free hosting right?

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.

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.

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.

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.

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.

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

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.

git push origin gh-pages

or he'll still no see anything :P

GitHub pages can exist on the master branch also.

gh-pages branch is for project pages. username.github.io is published on master.

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

Pretty sure the title is make THIS website, not make A website.

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.

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?

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.

^^^exactly

Also she* :) (doesn't matter, but hopefully it won't be an automatic assumption eventually)

It has a domain, it has content, it has more css than content though, but it isn't that heavy.

It is a website.

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

Step 2.5: open a terminal.

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

They were still getting ddos'd up until yesterday.

I want more friends like this.

how do you downvote here?

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

You can't downvote stories. You can only flag them when they're inappropriate.

oh ok, i only assumed cause I can't downvote yet haha

Reply on news.ycombinator.com