Public Websites
Categories:
4 minute read
Times have changed! Even just a couple of years ago, building and deploying a public website was somewhat complex and it always cost money. Nowadays, you have a wide variety of tools to use to build a website, and you can host it for FREE on platforms like:
And likely others. I assume that since it is so inexpensive and easy to host a public website, that is why it’s free, and hopefully they get you hooked on their platform so you will use it for other things that do cost money.
Static Site Generators
We covered these in the Jamstack section, but here is a quick recap of some of the most popular static site generators that we’ll cover on this website:
- Hugo - because it’s super fast, been around a long time (so there is lots of documentation and support), and there are many themes available.
- Jekyll - the original static site generator, and the one that GitHub Pages supports natively. Easy to use, powerful, and has a large community.
What are “builds”?
These static site generators are based on the idea that you use Markdown files to write your content. When ready, a “build” runs that takes all of that config and static content, runs a “build” command which generates the HTML files for your website. This is a common pattern in modern web development, and it allows you to focus on writing content without worrying about the underlying HTML structure.
Web Hooks
How these builds typically work is that the build system (e.g. GitHub Actions, Cloudflare Pages, Netlify, etc) is notified when GitHub does an HTTP POST request to a specific URL (a “web hook”) that tells the build system that something has changed in the repository.
This is usually triggered by a git push command, which pushes your changes to the remote repository. The build system then clones your repository, runs the build command, which generates a directory of HTML files, and deploys that folder to the hosting platform.
Setting Up a Build
In the case of something like GitHub Pages, if you are using Jekyll, you can use the built-in GitHub Actions workflow to automatically build and deploy your site. For Hugo (or other non-Jekyll technology), you can create a custom GitHub Actions workflow that runs the hugo command to build your site.
This is where you can easily step into the deep end. A GitHub Action is basically a YAML file in your repository (in .github/workflows/) that defines the steps to run when a build is triggered. It can be as simple or as complex as you need it to be, but it does require some understanding of YAML syntax and GitHub Actions. It’s not obvious or intuitive, so this will take some time to learn - and/or just have your LLM help you write it.
For other platforms, like Cloudflare Pages for example, you simply connect your GitHub repository. It will be a URL like this:
https://dash.cloudflare.com/{your id here}/workers-and-pages/create/import-repository
And it has a dropdown list of basically every Static Site Generator you can think of, including Hugo and Jekyll. You select the one you want to use, and it will automatically create a build command for you. You can also customize the build command if needed.
SSL Certificates
Again, we covered this in the Jamstack section, but it’s worth repeating that ALL of these hosting platforms will automatically provide you with a free SSL certificate for your domain, automatically. You don’t need to do anything at all, it’s just magically included.
DNS Entries
If you want to use a custom domain name for your website, you’ll need to set up a DNS entry or two. Again though, in modern day these hosting providers make it very straight-forward to do this:
- GitHub Pages - within the Settings -> Pages section of your repository, you add your custom domain and click “Save”. Then, you add these DNS A and CNAME records to your DNS provider.
- Cloudflare Pages - there is a “Custom Domain” section within the configuration of a Cloudflare Pages project. If your DNS is hosted with Cloudflare, it will automatically set up the DNS records for you. If not, it will provide you with the necessary DNS records to add to your DNS provider.
- Netlify - TBD: Need to research.
- GitLab Pages - TBD: Need to research.