This is part 2 of a 3 part series. You can find the other parts here:

  1. build your site using hugo
  2. deploy and host your page with now and setup your own domain
  3. use github and now to automatically deploy everything on push

Table of Contents

Hosting made simple: now by zeit

now is a deployment and hosting service by the fine folks at zeit. It’s mainly target at serverless applications but can just as easily be used for website hosting.

This section will teach you a number of things:

  1. how to use now to immediately put your page onto the web
  2. how to setup a domain (a pretty name) for your website

At the end of it you’ll probably be surprised how easy this was.

Setup now

To install now you’ll have to install their desktop app. No worries, it’s minimalistic and keeps your now command line tool automagically up-to-date! You can either download it directly from their website or use brew to install it:

brew update
brew cask install now

I’ll leave the choice to you.

After installation there should be a now command available on your command line. You can test it by typing the following:

now --version

If you see some kind of version number (and not an error) then you’re ready to go. For me this prints 14.0.3.

The only thing which is missing to finish the setup is to login into your now account. You can create one here, if necessary. After that all you need to do is typing the following into your command line:

now login

This will prompt you for your email address, send you an email with a magic link which automagically logs you in. Pretty neat, huh?

Tell hugo to use relative URLs

Before we get to the fun part we need to make sure that certain configurations are properly set. The Hugo config you copied in part 1 uses some defaults which are not suited for quick deployments.

Run the following to check your config:

hugo config | grep -iE 'canonifyurls'

If everything is fine this should just print:

canonifyurls = false

If it prints canonifyurls = true then please open your config.toml. From there set canonifyURLs to false.

Why are we doing this, you ask? You see canonifyURLs tells hugo to create absolute URLs for everything. Since we want to do a quick deployment with an auto-generated URLs, we don’t know the URL until we deployed.

By setting canonifyURLs to false all the URLs will be relative which in turn will ensure that our page will be properly displayed.

Now finally let’s get to the fun part: building and deploying your page.

Important Note: Sadly the tranquilpeak theme makes some choices which are not compatible with relative URLs. So while this is great for quick testing, it (for example) busts relative post thumbnails.

I’ve opened a PR which fixes the issues, so this might change in the future. Until then you’ll either have to use the original configuration for your final page or use my branch from the PR.

Deploy right now!

Deployment with now is very, very simple:

# This builds your page

# This deploys your page
now --public public

The --public flag tells now that we’re okay with the raw files being publicly visible (at /_src).

This will print something along the lines of:

Deploying ~/path/to/your/page/public under your-user-name
> Using project public
> Synced 1 file (37.95KB) [1s]
> [v1] [in clipboard] [5s]
> Deployment complete!

And that’s it! Your page is deployed!

Now go visit the printed URL and if everything is fine it should look similar to this:

If it looks broken then please visit the previous section on ensuring that hugo uses relative URLs.

A nice name for a nice page

First give yourself a pat on the back. You have created a (admittedly simple) page and deployed it for everybody to see.

In theory you could go out and share this link with your friends, family, hairdresser, or whoever your heart desires. But this link is not really nice, is it?

So, how can we get a nice link? For example something like

For that you need a domain. There are basically two options right now:

  1. you use a free subdomain from zeit
  2. you buy a domain and use that

We’ll look at both options but let’s start with the first one.

Now subdomains

Now allows you to alias your deployment. Let’s try it out:

# Alias your previous deployment to
now alias set

You probably need to swap out my-awesome-page with something else because I hog that subdomain. ๐Ÿ˜‹

If you’re fine with this: great! You can skip the rest of this section and read on. If you want your truly own domain, then read on.

Your own domain is pretty nice but it’s not truly yours, you know? So how can you get something like

For that you’ll have to buy a domain. Lucky for us now allows you to buy domains directly from the command line.

For that to work you’ll need to add a credit card to your account. If that’s an issue you’ll probably need to use a difference service. Namecheap for example accepts PayPal. I can recommend them, I used them to buy this domain.

But let’s assume you decided to buy your own domain from now and ensured it’s available (you can check that here). All you need to do is run:

now domain buy

After you confirmed the purchase you can now alias your page:

now alias set

And that’s it. No DNS fiddling. No additional setup. It just works.

Here a pro tip: You can also just run the latter command and now will ask you if you want to buy the domain. Neat huh?

What’s next?

If you got until here: congratulations!

You’re able to build your own page with hugo and deploy it to now. But right now this involves a number of manual steps.

  • you have to build your page
  • you have to deploy it
  • you have to alias it

Pretty tedious to do every time, right? So, let’s automate it!

Continue with part 3: automate it!