Create a Website in 30 Minutes
A tutorial on the quickest, easiest, and cheapest way to get a website up and running.
This tutorial assumes you have a Mac for convenience. The Windows and Linux tutorials will be posted later (if at all).
First, start with installing Xcode. Press
Space, then type “terminal” and press the
return key to open up the terminal. Then, in the terminal, type the following (then press the
There will be a pop-up that appears. Click
Install. When the license agreement appears, click
Agree. Wait until the software installation completes, then click
Done when the confirmation window appears.
Copy the following:
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
Paste that into your terminal window and press the
return key. When prompted, press the
return key to continue. You’ll be prompted for your password–type it and press
return, then wait for the installation to complete.
Once that’s done, type the following into your terminal:
Again, type the following into your terminal:
brew install git
(Optional) Buy a domain name
There’s lots of places to get a domain name for $10 or less. I use namecheap.com, so this tutorial will use that for setup. This step is here because you’ll likely want to name your folders based on the site name you choose to buy, and the name you came up with might already be taken.
Create a Github account
Skip this step if you already have an account configured. DON’T DO THIS IF YOU ARE NOT ON YOUR OWN, PERSONAL COMPUTER!
Go to www.github.com and sign up, then go to the settings page. Click
New SSH Key on the top right. Fill in the title with whatever you refer to your current computer by (e.g. “My macbook” or “My desktop”). To fill in the key, we’re going to have to jump back to your terminal window.
Type in the following into your terminal (make sure to replace “email@example.com” with the email you used to sign up for Github):
ssh-keygen -t rsa -b 4096 -C "firstname.lastname@example.org"
You’ll be prompted to enter a file to save the key–ignore that and press the
return key. You’ll be prompted for a password afterwards. Friendly reminder to not do this on a computer you share with others or do not own. Don’t type in a password–just press
return both times it prompts you for it.
Once that’s all done, copy paste the following into your terminal:
eval "$(ssh-agent -s)"
ssh-add -K ~/.ssh/id_rsa
and finally copy the key to your clipboard with
pbcopy < ~/.ssh/id_rsa.pub
Now return to your browser. Click into the text box under “key” and press
V to paste the key the last command just copied.
Now let’s create a repository for your project. Go to the project creation page. Enter in your site name as the repository name. Choose “private” if you don’t want other’s to see your code (although you’d need to upgrade your github subscription to do so). Click
We’re using Hugo to make our website. Why? It’s static hosting (which is super cheap and scalable), it’s quick, and you can always add any back-end features later. Installation is easy. In your terminal window, copy paste:
brew install hugo
Set up a website template
All of this is done using your terminal. Copy paste (or type):
then (make sure to replace “your_site_name” with the domain name of your site)
hugo new site your_site_name
then (make sure to type your site name, and not “your_site_name”)
then, to add a theme (you can choose a different theme here):
git submodule add https://github.com/jpescador/hugo-future-imperfect.git themes/hugo-future-imperfect
Create a file in this directory and name it
netlify.toml. Its contents should be as follows:
[context.production.environment] HUGO_VERSION = "0.31.1"
You can replace the
0.31.1 with a newer version by checking whatever
hugo version spits out. Next, within the folder
themes/hugo-future-imperfect/exampleSite, copy all the files / folders and paste it at the root level of your site directory (should be
~/dev/your_site_name). This’ll add some example content for you to start with.
Continuing on back to the terminal,
then (make sure to replace “your_username” with your github username, and “your_site_name” with your site name / the name of your repository)
git remote add origin email@example.com:your_username/your_site_name.git
git add .
git commit -am "First commit."
git push --set-upstream origin master
Sign up for Netlify
We’re using Netlify since it’s free, and it makes deployment brain-dead easy. Go to app.netlify.com, then click on the “Github” button to log in with your Github account. After authorizing it on Github, click on
New site from git. Click
Github. Click on your repository name.
Under “Build command”, type “hugo”. Under “Publish directory”, type “public”. Click
Your website is now live! Take note of the domain name its published under. You’ll need it later. Let’s update it to your domain name though. Click on
Domain management, then
Add custom domain. Type in your domain name (without the www–unless you prefer it with).
Set up your domain’s DNS
Go to ap.www.namecheap.com/domains/list/ and click on the
manage button next to your domain name. Click on
Advanced DNS. For all the values you are about to add, make sure to omit the quotes.
CNAME record with “@” for the
Host value and the generated URL Netlify gave you for your site for the
Value value. Add another identical
CNAME record, but this time with “www” for the
Now add a
URL Redirect record. If you want your site to default to your_site.com, set the
Host value to “www” and the
Value value to “http://your_site.com”. If you want your site to default to www.your_site.com, set the
Host value to “@” and the
Value value to “http://www.your_site.com”.
For reference, mine looks like this:
Read up on some tutorials
Congratulations! Your site is now up and running under your super-awesome domain name. Hopefully it actually took you 30 minutes. Now you just need to read up on some tutorials (or figure out how to make edits on your own).
/config.toml and the ones in
/content/blog/. Creating a new file in
/content/blog/ will create a new blog article. Any time you make changes, simply go to your terminal and run (sequentially):
git add .
git commit -am "A descripton of the changes you made"
This will update your Github repository, and cause Netlify to automatically update your website.
Otherwise (and additionally), I recommend checking out the following:
- https://gohugo.io/documentation/ to learn about the back-end generator you’re using
- http://commonmark.org/help/ to learn about markdown (which is used for your content here)
- https://stackoverflow.com for when you get stuck
Share this post