Tag: JAMStack | IT Nota

How to Setup Naked Domain to Resolve in Cloudflare Pages

If you’ve never tried Cloudflare static site hosting, Cloudflare Pages is great for speed and worldwide distribution. One hiccup I encountered because of the way the DNS was setup in Cloudflare when using a custom domain. If you want to include the www prefix, it won’t resolve properly by default and you will see a page error.

The problem is Cloudflare just gives an instruction to add a CNAME record with ‘www’ and content to your Cloudflare Pages URL it provided you. Once done, it would still give you another warning like the following:

A few more steps are required to complete your setup.

Add an A, AAAA, or CNAME record for your root domain so that itnota.com will resolve.

Now, this is interesting because I was not given any other hints or IP address to create an A or AAAA record and CNAME can only be used on subdomains, including ‘www.’

I think in reality, you can ignore the warning and go ahead create a page rule anyway, but that does bug me so the other possibility is to create another CNAME with @ and the same forwarding address similar to the ‘www’.

Then you will get another warning:

Because CNAME records are not allowed at the zone apex (RFC 1034), CNAME flattening will be applied to this record.

And this point, you will still get an error message if you use naked domain to go to your page.

To solve this we need to setup a Page Rule to redirect the naked domain to the www.

Steps

In Cloudflare, go to your corresponding domain and on the icon menu on top of the page, select Rules and click the Create Page Rule button.
In Edit Page Rule screen, type in your naked domain name with forward slash and asterisk (e.g., itnota.com/*).
On the next line, select Forwarding URL from the first drop-down and 301 – Permanent Redirect.
Then in the last textbox, you want to type in the proper URL where you want to redirect the traffic to, which in this case is https://www.inota.com/$1. $1 is like a wildcard to take any strings after the last forward slash.
Your final setting should be similar to the screenshot below.
Don’t forget to click the Save button.
Once done, just make sure that the rule is active by making sure that it’s turned on (the button with green color on the right).

That’s all there is to it. This time, if you type in something like itnota.com in your browser, it will direct your browser to the proper URL and there’s no more error message.

How to Deploy Hugo Static Website to IIS Using Git

Continuing the posts on Hugo website tutorial, after all the setup is done, the question now is about static site hosting. The reality is hosting a static website is very easy so you have a lot of flexibility in choosing your hosting and platform. In fact, you can use Github, Bitbucket or Gitlab to host your static website.

This post will show you how you can host your static website on IIS server using a git-push.

Prerequisites

Make sure IIS is setup. If you haven’t done so, make sure you check out the post to install IIS on Windows 10 which could be applied for Windows Server as well.
You need to have Hugo installed on your system. Check out this post if you still need to install Hugo.
Install Git. This process is also very straightforward, just head to Git website and follow its instructions to install it. You might also want to customize Git to work with your favorite text editor.If you decided to use Visual Studio Code, check out this post as the setup might be useful for editing and also publishing your Hugo website.
You have already created a Hugo new site in a folder and you have already committed all the files with Git with a .gitignore file which has at the minimum the following entry:
```
# Exclude folder
public/

# OS
[Tt]humbs.db
.DS_Store
```

For this exercise, I have my laptop as the source where I install all the tools and to write and generate the static website. For the IIS host, it will be a Windows 10 VM that can be mapped from the laptop. You can substitute the mapping with SSH for a different hosting but the principle is the same.

Now that we get all the prerequisites and objective out of the way, here are the steps to setup our environment:

Hugo/Git Public Folder Setup

1. Important: Hugo publish the website to a sub-folder public, so we also need to Git initialize and commit all the files in sub-folder public separately from its parents folder. Remember, we exclude the public folder in .gitignore file (see the prerequisites). So we’re tracking the published website separately. It is from within this public folder that we do all the setup described below.
2. On your target server, setup a folder that you can use as a temporary repository. In this example, a folder C:\inetpub\Git\hugo-repo was created for this purpose.
3. We will publish the static content to default folder C:\inetpub\wwwroot.
4. From within Git Bash and within your Hugo public folder, add the temporary repository as a remote repository by typing the following command:
```
$ git remote add prod //MACHINENAME/c$/inetpub/Git/hugo-repo
```
5. From within Git Bash, go to the remote repository to initialize it:
```
$ cd //MACHINENAME/c$/inetpub/Git/hugo-repo

$ git init --bare
```
6. Go to the repo folder and open the hooks folder and create a new text file called post-receive (do not put any file extension) and edit it with the following code:
```
#!/bin/bash

git --work-tree=//MACHINENAME/c$/inetpub/wwwroot --git-dir=//MACHINENAME/c$/inetpub/Git/hugo-repo checkout -f
```

If this sounds complicated, don’t worry about it as you only need to set this up once and forget about it.

Now every time you are ready to publish your Hugo website (i.e., by running the command “hugo”), go to your public folder, commit all the changes in Git, just do a Git push to prod:

$ git push prod master

The website will be automagically pushed to your IIS PROD and ready for public consumption.

We use this same exact method to publish an intranet site within our company. If there’s any step in this explanation is not clear, leave a comment below and I will try to improve the step-by-step guide in this post.

Downloads

Visual Studio Code
Git
Hugo

How to Setup Visual Studio Code for Hugo Static Site Generator

Based on a few questions on how to setup an environment to edit content using Hugo, here’s a few simple steps to follow if you want a quick and easy way to do it. Keep in mind, the beauty of using Hugo is that you are free to use any text editor you like.

This is not the only way to do it but this will get you there fast if you don’t have anything setup yet.