cloudwithchris.com VS Hugo

Navigate to a GitHub Repository that you own. For example, I am the organization owner of CloudWithChris, so will navigate to my cloudwithchris.com repository.

For example, the website you're reading (Cloud With Chris) is - and has been - hosted using the Static Websites on Azure Storage approach since March 2020. As an end-user, when you navigate to www.cloudwithchris.com, you'll be routed to an Azure CDN instance that is fronting the Azure Storage Account which hosts the production Static Website. The CDN is how I'm able to have an SSL Certificate mapped against a Custom Domain, otherwise that wouldn't be possible directly on the storage account (as there's no way to map a custom SSL certificate in that way directly).

So, what's the point in this post (other than reinforcing a brilliant episode, thank you again Annie)? Over time, I'll release a set of blog posts which cover these CNCF projects. I don't have a timeframe. I don't have a specific goal in mind just yet. But given that it's Cloud with Chris, it does feel that Cloud native should have a spot in there somewhere. So stay tuned! If you'd like me to focus on any projects in particular, please let me know either in the Cloud With Chris GitHub repository by raising a GitHub Issue, or letting me know on Twitter, @reddobowen.

Now, one of the main points that I raise in my usual talk on hosting websites using the Static Content Hosting pattern is the significant cost-benefit of doing this. In an average month, I spend less than £5 for the entire end-to-end running of my environments. Yes, environments plural - that includes Preview, Staging and production, and also includes the cost of streaming my audio files to third party platforms like Apple Podcasts, Google Podcasts, Spotify and consumed directly from www.cloudwithchris.com.

There are plenty of existing articles that talk about how to optimise these common SEO practices, so I recommend you search for these as I'm going to aim to not reinvent the wheel. If you're interested on how I achieve some of these in Cloud with Chris, you can take a look at the metadata partial template that I use within my Hugo template.

name: "Podcast Audio Upload" on: push: branches: - master paths: - "podcast_audio/**" jobs: publish: environment: name: production.azure url: https://www.cloudwithchris.com runs-on: ubuntu-latest steps: - name: Download Podcast files that are different from prior commit run: | git clone --config lfs.fetchexclude="/podcast_audio" https://github.com/chrisreddington/cloudwithchris.com.git ./ fileschanged=$(git diff --name-only HEAD^ HEAD -- '*.mp3') echo "$fileschanged" > files.txt xargs -a files.txt -d'\n' rm git config --unset lfs.fetchexclude git checkout . cd podcast_audio sed -i -e 's/podcast_audio\///g' ../files.txt for i in *; do if ! grep -qxFe "$i" ../files.txt then echo "Deleting: $i" rm "$i" fi done - name: Azure Login uses: azure/login@v1 with: creds: ${{ secrets.AZURE_CREDENTIALS }} - name: "Upload podcast files to storage that don't yet exist" uses: azure/CLI@v1 with: azcliversion: 2.20.0 inlineScript: | az storage blob upload-batch --account-name cloudwithchrisprod -d 'podcasts' -s '/github/workspace/podcast_audio' --if-unmodified-since 2020-01-01T00:00Z --auth-mode login

Once you have added the Public GPG Key details to GitHub, you can now go ahead and push your local changes to GitHub by using git push (If you haven't already associated a remote location with the Git repository, then you may also need to use the git remote add command, and then use git push). Assuming that the Public Key in the GPG Keys section of your GitHub account corresponds with the Private Key used to sign the commits, then you will notice that commits will be marked as verified in the GitHub user interface. See the example below from the cloudwithchris.com Git Repository Commits page.

Similarly, Cloud With Chris is an example of a JAMStack site, driven by Hugo, a static website generator. Rather than calling any backend APIs, the content is all entirely driven by markdown which is hosted in the GitHub repository mentioned a moment ago. This means I'm not calling any external APIs. Instead, the content is finalised at deployment time. I run a command in my GitHub Actions (Hugo build) which goes ahead and takes my site's configuration, necessary theme information and content, and renders the needed files to generate the set of webpages to render to my clients. The content is then uploaded to an Azure Blob Storage account which is publicly accessible and configured using the Static Website functionality.

At one point though I realized there is a scaling problem with my build minutes. I knew that golang has considerably faster builds and in my case the easy fix is swapping over to Hugo.

This blog is running on Hugo. It had previously been running on Jekyll. Both these SSGs ship with the ability to create excerpts from your markdown content in 1 line or thereabouts.

Hugo

Hugo is a popular static site generator specifically designed to create websites and documentation lightning-fast. Its minimalist approach, emphasis on speed, and ease of use have made it popular among developers, technical writers, and anybody looking to construct high-quality websites without the complexity of typical CMS platforms.

As per many other comments, it sounds like a static site generator like Hugo (https://gohugo.io/) or Jekyll (https://jekyllrb.com/), hosted on GitHub Pages (https://pages.github.com/) or GitLab Pages (https://about.gitlab.com/stages-devops-lifecycle/pages/), would be a good match. If you set up GitHub Actions or GitLab CI/CD to do the build and deploy (see e.g. https://gohugo.io/hosting-and-deployment/hosting-on-github/), your normal workflow will simply be to edit markdown and do a git push to make your changes live. There are a number of pre-built themes (e.g. https://themes.gohugo.io/) you can use, and these are realtively straightforward to tweak to your requirements.

Create the technical documentation of your project You can use any of the following options: * A wiki, like the ArchWiki that uses MediaWiki * Read the Docs, used by projects like Setuptools. Check Awesome Read the Docs for more examples. * Create a website * Create a blog, like the documentation of Blowfish, a theme for Hugo.

Doing this made me appreciate existing SSGs like Hugo and Next.js even more👏👏

I suggest hugo: https://gohugo.io/

Generates a completely static website from MD (and other formats) files; also handles themes (including a lot of them rendering well on mobile), and different types of content - posts, articles, etc. - depending on the theme.

It's open source and, being completely static, cheap as fuck to self host.