Create a Website in 30 Minutes

A tutorial on the quickest, easiest, and cheapest way to get a website up and running.

Jonathan Perez

6 minute read

Working on computer

Introduction

This tutorial assumes you have a Mac for convenience. The Windows and Linux tutorials will be posted later (if at all).

Install Xcode

First, start with installing Xcode. Press CMD + Space, then type “terminal” and press the return key to open up the terminal. Then, in the terminal, type the following (then press the return key):

xcode-select --install

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.

Install Homebrew

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:

brew update

Installing Git

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 “your_email@example.com” with the email you used to sign up for Github):

ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

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

then

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 CTRL + 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 Create repository.

Install Hugo

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

mkdir ~/dev

then

cd ~/dev

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

cd 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,

git init

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 git@github.com:your_username/your_site_name.git

then

git add .

then

git commit -am "First commit."

then

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

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.

Add a 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 Host value.

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

If you want to just edit the content and don’t really care about updating the style / javascript / etc, the files you’re going to want to experiment with are /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"

git push

This will update your Github repository, and cause Netlify to automatically update your website.

Otherwise (and additionally), I recommend checking out the following:

comments powered by Disqus