Tag Archives: gcp

Turn on your Domain Name for a Hugo Site on Google Cloud (PART 4)

You’ve got your Hugo site built, and in a public GCS bucket, and you can see it by going to the URL at https://storage.googleapis.com/www.yourdomainname.yourtld — now how can you make http://yourdomainname.yourtld work directly? This post assumes that you’ve already purchased a domain from http://domains.google and you have a Hugo site (or any other web site) set up in a GCS bucket.

Step 1 – Get into the domain administrator panel. Go to http://domains.google and click “My Domains” in the top right of the window.

Step 2 – Find the domain that you want to map to this bucket and click “Manage” on the rightmost side of that line.

Step 3 – Click “Edit DNS Settings” OR “Use custom name servers for your domain” – they both go to the same page.

Step 4 – Scroll down to “Custom Resource Records”:

  • In the textbox that says @, type www
  • In the dropdown, select CNAME
  • Keep 1H in the next textbox
  • In the last textbox, type c.storage.googleapis.com. (that last dot is important, too)
  • Click Add

Step 5 – Add a Synthetic Record so your “naked domain” (no www) will work. In the “Synthetic Records” section, put an @ in the first box, put http://www.yourdomainname.yourtld in the rightmost box, and click “Forward Path” in the middle group of radio buttons. Click Add and this should make the magic happen.

Step 6 – Wait. They’ll say it takes up to 48 hours for DNS to propagate… it usually takes a lot less. Even though you set up the CNAME to trigger from www, Google Domains automatically catches www and no subdomain, so you should be able to go to http://yourdomainname.yourtld. Check your custom URL after an hour or two! If the site isn’t available by the next day, though, there may be a problem in your GCS bucket or your setup.

Good luck! And remember to check out the “I want to get off Squarespace” project that motivated these posts… http://nicoleradziwill.com

Pushing Your Hugo Site to a GCS Bucket (PART 3)

By now, you’ve build a gorgeous Hugo site that you admire at http://localhost:1313 that no one but you can see. This post aims to help you fix that, by taking the first deployment step: putting your Hugo site into a GCS bucket. This assumes that you also have git bash installed with the Google Cloud SDK (gsutil), and that you’re familiar enough with http://console.cloud.google.com that you can log in and double check your settings. This also assumes that you’ve purchased a domain name that you administer through http://domains.google. Now! to begin.

Step 1 – Build your Hugo site. Even though you can view it on localhost, the static site hasn’t been built yet.

cd /d/Hugo/myrealsite
hugo

That’s it! The GO engine behind Hugo just created a ton of static web pages on your behalf, and popped them into the /public directory. Go into that directory and ls -spla just to make sure stuff is there.

Step 2 – Use gsutil to set up your new bucket and tell Google Cloud that it will be a web site. You should still be sitting in /d/Hugo/myrealsite. Note: The domain name MUST have www in the beginning, even if you want to direct people to yourdomainname.yourtld.

gsutil mb gs://www.yourdomainname.yourtld
gsutil web set -m index.html -e 404.html gs://www.yourdomainname.yourtld

Step 3 – Make everything in that bucket public so people on the internet have the permissions to get to your page. This part was a little tricky for me, because I’m not sure exactly which command made it work, but I can tell you how to double check. Start by doing one (or both) of these:

gsutil defacl ch -u allUsers:R gs://www.yourdomainname.yourtld
gsutil iam ch allUsers:objectViewer gs://www.yourdomainname.yourtld

When you go into http://console.cloud.google.com, head to Storage -> Browser. Find the line item that has your http://www.yourdomainname.yourtld name that you just created. In the “Public Access” column, there should be a little orange warning icon and the words “Public to Internet”. If you don’t see that, then Google around for more advice on “how to make the contents of your GCS bucket public to the internet”.

While you’re in there, check to make sure the bucket is set up to serve a web page. On the far far right side of that same line, you’ll see three vertical dots. Click on them, and go into “Edit Website Configuration”. The top textbox should say index.html and the bottom should say 404.html. If they don’t, make them say that, and then click Save.

Step 4 – Populate your GCS bucket with your built Hugo site in /public (not the raw files you edited). Make sure you’re still sitting in /d/Hugo/myrealsite and then do this:

gsutil rsync -R public gs://www.yourdomainname.yourtld

Step 5 – You now have a Hugo web site on Google Cloud! Test it out by pointing a browser to https://storage.googleapis.com/www.yourdomainname.yourtld/index.html (being sure to put your actual domain name in there) — if you get a permission error or an XML dump, go back to Step 3 because something went wrong there.

Now it’s time to link your bought domain name with your publicly visible Hugo web site!

Building a Hugo web site & Hosting on Google Cloud

Note: This example uses Windows 10, git bash, Google Cloud SDK (gsutil), the Google Cloud console, and the Hugo static site builder. Familiarity with each will help. Hugo is beautiful and elegant if you are a skilled tinkerer. If you are not, or if you fear the command line, just head over to WordPress right now.

For the past two years, my personal web site has (embarrassingly) been on Squarespace – due to 1) laziness and 2) a temporary lapse of reason due to effective marketing. They told me it would be “easy” and so I gave them my money, only to have my personal bias that WYSIWYG editors are the work of the devil confirmed many times over. I’ve been wanting to atone for my sins, but haven’t had the time to think about it because 2020.

But it’s holiday season! And, inspired by datalorax and his new data science teaching site, and with the breezy unencumbered mental space of almost 10 days away from work, I decided it was time to get to work and learn Hugo, the “world’s fastest framework for building websites.” It’s a templating system you can use to generate static websites, and it reminds me a lot about the “object oriented web design” program we built in Perl in 1996 to generate e-commerce product catalogs. As a result, the nostalgia was kind of motivating.

I decided to rebuild my personal web site with Hugo, on Windows 10, and deploy to a GCS bucket that one of my Google Domains would point to, and thus serve my web site. This post talks about the big picture, and I’ll drill down into the more detailed steps at the end of this page so you can follow along if you want to build one too.

After spending two days with Hugo, I give it three (out of five) stars:

  • It produces super sharp, super clean web sites and there are lots of themes to choose from
  • Unlike WordPress, all the themes appear to be free
  • You better be comfortable on the Unix/Linux command line though. (This is for people who want to build a car from scratch rather than going to a dealership and paying full price. Granted, they have turned this process into more of an assembly, where you just have to connect five or six different big pieces to make it all work. But the end product will not be a web site that mere mortal business leaders and content owners can make frequent updates, like they might do on a company web site powered by WordPress.)
  • You’ll be happier if you know a little HTML, CSS, YAML too
  • You also need to come prepared with your patience. The giant pieces to assemble are pretty much the same from theme to theme, except for where they’re not, and that’s where you may pull your hair out
  • If it’s the world’s fastest framework, then there is a huge market opportunity open to deliver on that promise, both for developers and content owners. I’d say WordPress is a faster framework, if you’re willing to put up with its (not ubiquitous) performance problems.

Here’s what you need to do before you start:

  1. Install git bash – you’re going to need a command line that’s more useful than the Windows default
  2. Install the Google Cloud SDK – this is for deployment later
  3. Make sure you can get into Google Cloud Platform via your personal http://console.cloud.google.com link
  4. Buy a domain name from Google Domains

Here are the steps to building and deploying your Hugo web site. Each of these steps will go to its own blog post, so if you don’t see links here, I’m still working on those posts.

  1. Download Hugo, get it in your Windows PATH, set up a Hugo directory & check git bash to make sure it worked
  2. Build your Hugo site locally by creating a new site, pulling down a theme, and copying files in unexpected ways
  3. Build your public Hugo site, set up a GCS bucket to host it that has to have the name http://www.yourdomain.yourtld, make that bucket public, tell that bucket a web site will be in the bucket (ie. that the default page is index.html and errors go to 404.html), and then push the built site into the bucket
  4. Set up a CNAME record in Google Domains (no naked domains!) that points to c.storage.googleapis.com.
  5. Enjoy the hard earned fruits of your labor.

The fruits of mine are at http://www.nicoleradziwill.com