
Make This in an Hour - iheartramen
http://makethisinanhour.com/
======
iheartramen
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 :)

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

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

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

------
ivanhoe
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
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
> _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
Because we are software engineers and website designers and we can do
better... (Please don't look at my website...)

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

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

------
codingdave
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
A shared google doc would be just as effective.

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

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

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

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

------
z-e-r-o
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/)

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

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

~~~
posnet
Python 3 equivalent is:

`python -m http.server 8000`

In case anyone was interested.

~~~
danneu
List of server one-liners:
[https://gist.github.com/willurd/5720255](https://gist.github.com/willurd/5720255)

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

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

~~~
toddmorey
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](https://www.netlify.com)

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

------
loocsinus
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
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
3) AJAX won't work (since there's no HTTP backend to talk to)

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

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

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

------
reustle
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
It's on Github!
[https://github.com/smilli/makethisinanhour](https://github.com/smilli/makethisinanhour)

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

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

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

~~~
dublinben
But then you'd be using GoDaddy.

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

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

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

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

------
SchizoDuckie
git push origin gh-pages

or he'll still no see anything :P

~~~
unfunco
GitHub pages can exist on the master branch also.

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

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

~~~
butwhy
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
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
^^^exactly

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

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

------
lwf
Step 2.5: open a terminal.

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

~~~
lww
They were still getting ddos'd up until yesterday.

------
golergka
I want more friends like this.

------
faaar
how do you downvote here?

~~~
Lrigikithumer
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
You can't downvote stories. You can only flag them when they're inappropriate.

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

