How it's made
2021-06-01
I wanted to own a website and at the same time keep the cost at $0. No underlying hardware to worry about, no expensive platforms which would do it for you, not the usual WordPress, S3 + CloudFront stack or GoDaddy. This how I found out the Jamstack, Hugo and Netlify trio, which fit fine for my necessity.
So if by any chance you’re stepping into this blog page and also desire to own a personal space in the internet, whether this is a blog or a page for yourself or your company think about this architecture as it costs nothing (please look at the free plan on Netlify) and does not require too much effort. The initial set up may be a bit complicated, especially if you are totally unfamiliar with git but the result can be worth the price.
This guide is not meant to be a walkthrough the whole set up of a website using the aforementioned tools but rather an overview on how I did it myself.
Let me spend a few additional words on the tools:
- Jamstack: It is the architectural approach, there is nothing technical you would need to familiarise here. Anyway this is useful to understand how your website will be composed, the underlying tools, the security implications and the pros and cons the architecture will provide. It is a good read indeed.
- Netlify: This is the hosting platform or the CDN. Netlify is where your website will live and will be served. It has a lot of features and the free plan is good for the basic actions. It will compile your code and publish, integrate it with API functions for sending emails, password reset for users and many, many more. Netlify provides a CMS for easy blog management, which I strongly suggest to use unless you want to keep using MD and Git for creating and editing your page like a crazy, and domain management. There is much more, it is indeed worth exploring this.
- Hugo: It is a framework for building websites. It is not the only one in its genre, anyway I like Hugo for its semplicity and community. All Hugo based websites have keep the same directory infrastructure and templating. Changing from a theme to another is usually very simple and immediate.
So using the Jamstack architecture you can create your website with Hugo as framework and upload it to Netlify.
This is the structure of this specific website which uses Hugo and the ficurinia theme.
├── archetypes
│ └── default.md
├── config
│ └── _default
├── content
│ ├── about
│ ├── images
│ └── posts
├── public
│ ├── 404.html
│ ├── about
│ ├── admin
│ ├── android-chrome-192x192.png
│ ├── android-chrome-512x512.png
│ ├── apple-touch-icon.png
│ ├── articles
│ ├── blog
│ ├── categories
│ ├── css
│ ├── docs
│ ├── en
│ ├── feed_style.xsl
│ ├── gallery
│ ├── images
│ ├── index.json
│ ├── index.xml
│ ├── jetbrains-mono
│ ├── logo.svg
│ ├── manifest
│ ├── page
│ ├── posts
│ ├── publication
│ ├── robots.txt
│ ├── search
│ ├── series
│ ├── showcase
│ ├── symbols-nerd-font
│ └── tags
├── README.md
├── resources
│ └── _gen
├── static
│ ├── admin
│ ├── default.css
│ ├── favicon
│ ├── images
│ └── manifest.json
└── themes
└── hugo-ficurinia
Once the theme is placed under the themes
directory you are then ready to start configuring your website by changing the settings and parameters in config/_default/config.toml
. The theme I mentioned above contains an extensive documentation on how you can play with it without touching the code.
You can start writing your posts under content/posts
, like create-blog.md
, in the MD, commit then build!
Once the changes are made commit them in git and get ready with Netlify to build and publish the code in a completely static format. I found this blog post from Netlify.
I also set a commit hook on the master branch, so once there are new changes they will get automatically triggered in Netlify and published online. This will not take longer than 1m for a small website like mine.
This is how the deployment process looks like in Netlify:
12:06:50 PM: Build ready to start
12:06:51 PM: build-image version: fcb0c1b3ada6d25c1cb58e8bc514f5f23cc14f15 (focal)
12:06:51 PM: buildbot version: ecff8a8ea00a7123ac3111778469ca25529769de
12:06:51 PM: Fetching cached dependencies
12:06:51 PM: Starting to download cache of 87.7MB
12:06:52 PM: Finished downloading cache in 593ms
12:06:52 PM: Starting to extract cache
12:06:53 PM: Finished extracting cache in 741ms
12:06:53 PM: Finished fetching cache in 1.384s
12:06:53 PM: Starting to prepare the repo for build
12:06:53 PM: Preparing Git Reference refs/heads/master
12:06:55 PM: Starting to install dependencies
12:06:55 PM: Python version set to 3.8
12:06:55 PM: Attempting Ruby version 2.7.1, read from environment
12:06:56 PM: Required ruby-2.7.1 is not installed - installing.
12:06:56 PM: Searching for binary rubies, this might take some time.
12:06:56 PM: Found remote file https://rvm_io.global.ssl.fastly.net/binaries/ubuntu/20.04/x86_64/ruby-2.7.1.tar.bz2
12:06:56 PM: Checking requirements for ubuntu.
12:06:56 PM: Requirements installation successful.
12:06:56 PM: ruby-2.7.1 - #configure
12:06:56 PM: ruby-2.7.1 - #download
12:06:57 PM: ruby-2.7.1 - #validate archive
12:07:00 PM: ruby-2.7.1 - #extract
12:07:02 PM: ruby-2.7.1 - #validate binary
12:07:02 PM: ruby-2.7.1 - #setup
12:07:03 PM: ruby-2.7.1 - #gemset created /opt/buildhome/.rvm/gems/ruby-2.7.1@global
12:07:03 PM: ruby-2.7.1 - #importing gemset /opt/buildhome/.rvm/gemsets/global.gems........................................
12:07:03 PM: ruby-2.7.1 - #generating global wrappers........
12:07:03 PM: ruby-2.7.1 - #gemset created /opt/buildhome/.rvm/gems/ruby-2.7.1
12:07:03 PM: ruby-2.7.1 - #importing gemsetfile /opt/buildhome/.rvm/gemsets/default.gems evaluated to empty gem list
12:07:03 PM: ruby-2.7.1 - #generating default wrappers........
12:07:03 PM: Using /opt/buildhome/.rvm/gems/ruby-2.7.1
12:07:04 PM: Using Ruby version 2.7.1
12:07:04 PM: Started restoring cached go cache
12:07:04 PM: Finished restoring cached go cache
12:07:04 PM: Installing Go version 1.14.4 (requested 1.14.4)
12:07:08 PM: go version go1.14.4 linux/amd64
12:07:08 PM: Using PHP version 8.0
12:07:09 PM: Installing Hugo 0.113.0
12:07:09 PM: hugo v0.113.0-085c1b3d614e23d218ebf9daad909deaa2390c9a+extended linux/amd64 BuildDate=2023-06-05T15:04:51Z VendorInfo=gohugoio
12:07:09 PM: Started restoring cached Node.js version
12:07:10 PM: Finished restoring cached Node.js version
12:07:11 PM: v18.19.0 is already installed.
12:07:11 PM: Now using node v18.19.0 (npm v10.2.3)
12:07:11 PM: Enabling Node.js Corepack
12:07:11 PM: Started restoring cached build plugins
12:07:11 PM: Finished restoring cached build plugins
12:07:11 PM: Successfully installed dependencies
12:07:11 PM: Starting build script
12:07:12 PM: Detected 0 framework(s)
12:07:12 PM: Section completed: initializing
12:07:14 PM: Starting post processing
12:07:14 PM: Skipping form detection
12:07:14 PM: Post processing - header rules
12:07:14 PM: Post processing - redirect rules
12:07:14 PM: Post processing done
12:07:14 PM: Section completed: postprocessing
12:07:14 PM:
12:07:14 PM: Netlify Build
12:07:14 PM: ────────────────────────────────────────────────────────────────
12:07:14 PM:
12:07:14 PM: ❯ Version
12:07:14 PM: @netlify/build 29.32.0
12:07:14 PM:
12:07:14 PM: ❯ Flags
12:07:14 PM: baseRelDir: true
12:07:14 PM: buildId: 65acfaca1e81da00086b617b
12:07:14 PM: deployId: 65acfaca1e81da00086b617d
12:07:14 PM:
12:07:14 PM: ❯ Current directory
12:07:14 PM: /opt/build/repo
12:07:14 PM:
12:07:14 PM: ❯ Config file
12:07:14 PM: No config file was defined: using default values.
12:07:14 PM:
12:07:14 PM: ❯ Context
12:07:14 PM: production
12:07:14 PM:
12:07:14 PM: Build command from Netlify app
12:07:14 PM: ────────────────────────────────────────────────────────────────
12:07:14 PM:
12:07:14 PM: $ hugo
12:07:14 PM: Start building sites …
12:07:14 PM: hugo v0.113.0-085c1b3d614e23d218ebf9daad909deaa2390c9a+extended linux/amd64 BuildDate=2023-06-05T15:04:51Z VendorInfo=gohugoio
12:07:14 PM: | EN
12:07:14 PM: -------------------+-----
12:07:14 PM: Pages | 47
12:07:14 PM: Paginator pages | 1
12:07:14 PM: Non-page files | 50
12:07:14 PM: Static files | 85
12:07:14 PM: Processed images | 0
12:07:14 PM: Aliases | 6
12:07:14 PM: Sitemaps | 1
12:07:14 PM: Cleaned | 0
12:07:14 PM: Total in 94 ms
12:07:14 PM:
12:07:14 PM: (build.command completed in 209ms)
12:07:14 PM:
12:07:14 PM: Deploy site
12:07:14 PM: ────────────────────────────────────────────────────────────────
12:07:14 PM:
12:07:14 PM: Starting to deploy site from "public"
12:07:14 PM: Calculating files to upload
12:07:14 PM: 26 new files to upload
12:07:14 PM: 0 new functions to upload
12:07:14 PM: Section completed: deploying
12:07:14 PM: Site deploy was successfully initiated
12:07:14 PM:
12:07:14 PM: (Deploy site completed in 366ms)
12:07:14 PM:
12:07:14 PM: Netlify Build Complete
12:07:14 PM: ────────────────────────────────────────────────────────────────
12:07:14 PM:
12:07:14 PM: (Netlify Build completed in 618ms)
12:07:15 PM: Site is live ✨
12:07:15 PM: Caching artifacts
12:07:15 PM: Started saving build plugins
12:07:15 PM: Finished saving build plugins
12:07:15 PM: Started saving pip cache
12:07:15 PM: Finished saving pip cache
12:07:15 PM: Started saving emacs cask dependencies
12:07:15 PM: Finished saving emacs cask dependencies
12:07:15 PM: Started saving maven dependencies
12:07:15 PM: Finished saving maven dependencies
12:07:15 PM: Started saving boot dependencies
12:07:15 PM: Finished saving boot dependencies
12:07:15 PM: Started saving rust rustup cache
12:07:15 PM: Finished saving rust rustup cache
12:07:15 PM: Started saving go dependencies
12:07:15 PM: Finished saving go dependencies
12:07:15 PM: Cached Ruby version 2.7.1
12:07:15 PM: Build script success
12:07:15 PM: Section completed: building
12:07:15 PM: Uploading Cache of size 108.9MB
12:07:16 PM: Section completed: cleanup
12:07:16 PM: Finished processing build request in 25.127s
Website built and deployed in 25s. The theme I am using can be easily integrated with applications which will allow comments on the post, I am currently not using this integration but can be very useful.