The most cost-efficient website solution (and an introduction to JAMstack)
--
So in this article I am going to talk you through a way to get your personal, project or (small) company website up and running at minimal cost and by doing so I will introduce you to JAMstack. But first…
Let’s agree on what we are talking about:
- a cost-efficient web presence. Or in other words, cost is the most important factor and we make the best that is possible out of available functionality/performance
- a static website, based on Jekyll or Hugo (or any other site generator if you do not need a CMS)
- an out of the box headless CMS (optional)
- free hosting (although you can always get a higher performance paid plan)
- ability to attach your own custom domain, or use a subdomain (BOTH for free)
- free SSL certificate (i.e. HTTPS connection), so that Google does not punish your site in search results and by alerting your users
- Limitations: it is a static website. Although there exist add-ons like Disquis comments, or JavaScript-based search plugins, or free tier third-party services, in the end inevitably there are limitations to static sites, most notably that real-time data is unavailable. That said, if you don’t fall asleep or close the tab before the end of the article, we will eliminate this limitation by introducing JAMstack.
Some ideas of the kind of websites you can built within these limitations:
- personal, project and small company websites, featuring blogs too
- portfolios, showcases, eCommerce sites (as long as it uses an external service like shopify)
- {insert your idea here 🙂}
Four things we need
To get the type of site we talked about, we need to make only a few decisions:
- Choose a suitable static website generator
- Pick a git hosting provider
- Decide where to host your website
- (Optional) Add custom domains and/or a CMS
Choosing a static website generator
As regards the first one, there are quite a few options available. What I have used successfully is Jekyll *currently the most popular static site generator*, although all the tools and services I am talking about in this article can function perfectly well with Hugo too. You need to check for others.
At this point I assume you will take some time to code your website, or “get it done” by any other means.
Picking a git hosting provider
Hosting and server configuration is difficult. And expensive. But we said cost-first approach, right?
Combining version control with hosting source
The idea of developing your code using version control (git, in this case) which you can just push and the whole deployment process is triggered and executed automatically for you is mesmerising — at least for me. The first step is to initialise a git repository and push it on to version control hosting provider. Depending on your preferences, this can be:
GitHub: well-known, widely-used and reliable. However, as you probably know, this requires you to make all your code open source (public) unless you have subscribed to GitHub’s paid plans.
Bitbucket: this is a popular alternative to GitHub with one main advantage (if you consider it as such): free private repositories
GitLab: from my experience more commonly used by organisations rather than standalone developers, but still it offers a similar service to Bitbucket.
The choice here is completely yours and it is perfectly feasible that you may decide to go for an open-source GitHub repository, especially bearing in mind we are talking about (small) static websites with probably all content publicly available anyway. However, if you desire password-protected areas, then choosing a public repository would not make much sense. Weigh the advantages and disadvantages of each against your own requirements and use best judgement.
I personally opted for Bitbucket because it allows private repositories that are a good solution for the early days of a website when code still is messy and gradually refactored and improved.
At this point I assume you will setup a repository and push it to the git provider of your choice.
Deciding where to host your website
Having set your repository up, it is finally time to host your website. Popular solutions are:
GitHub Pages: free, directly integrated with your GitHub repository and as reliable as the whole of GitHub. A drawback is, however, that GitHub Pages do not directly support HTTPS for custom domains and you need to work your way through complementing it with CloudFare. Fortunately, there are step-by-step tutorials online.
Other options: Bitbucket Cloud and GitLab Pages.
The option that I went for is Netlify, just because it matched all my criteria (free SSL, easy setup, custom domains, flexibility and near-perfect documentation). My experience with it so far has been fantastic, with the sole exception of (occasional) slow response times in Europe—but for their free tier it is more than satisfactory. Plus it comes with freebies such as form handling, identity (user management which can be used for password-protected content) and automatic subdomains for your repository’s branches.
Setup Netlify
To setup Netlify to pull your code from the git provider, follow three simple steps:
- Connect to the git provider (i.e. GitHub, GitLab, Bitbucket) on Netlify
2. Select your site’s repository
3. (Optional) choose branch to deploy (if different than master) and adjust the build settings (again, only if you are not doing standard stuff which Netlify detects automatically for you)
When you complete these three steps, Netlify builds your Jekyll/Hugo app and publishes it live!
(Optional) Forestry.io CMS
Not long ago you would not be able to have a CMS for a static website, but thankfully nowadays there are these tools called headless CMSes, and the awesome guys at Forestry.io made one specifically for your Jekyll and Hugo projects. What they do is as simple as providing a GUI for git-based Jekyll or Hugo content, so you can edit markdown without knowing it’s actually markdown. To make things even cooler, Forestry silently commits changes to your git repository, meaning deploys are automatically triggered with each update. As a bonus comes the fact that having all content changes in your git repository, you can easily revert back to previous versions.
The two other great things, for me, are that Forestry’s free tier is absolutely sufficient for most projects, and you can setup the admin CMS link under your domain, i.e. sample.com/admin instead of having to go to forestry.io directly.
Of course, there are other available options as well, including the Jekyll admin plugin for Jekyll or Netlify CMS for Hugo.
Connecting Forestry with your repository
So to connect Forestry.io with your repository, you need to (obviously) have an account. After that, setting up a new site is as straightforward as Netlify’s:
- Select your static site generator
2. Select your git provider and authorise Forestry to read from and write to your repositories
3. Choose your site’s repository and set the branch it should pull from and push to
(Optional) Setup your custom domain
To get your website running under a custom domain, you would need to follow the steps of adding a ANAME or ALIAS DNS record (which you do on your domain provider’s admin page). Traditionally updating DNS record can take up to 48 hours, although nowadays it usually happens much faster.
Alternatively, you can leave the management of your domain to Netlify. The coolest thing yet is that, unlike some other hosting providers, Netlify actually allows you to add any DNS records, meaning you can both host your site on Netlify (with the attached domain name) and add MX records to point to your mail server, for example.
To wrap up
Welcome to JAMstack — the JavaScript, APIs, Markup framework. By completing the steps above, you have just entered this whole new world of web development. In case you are new to it, I would suggest reading more about it here, and if you buy into the idea, check out this curated list of literally ‘awesome serverless’ services to help you make your static site not so static.
And that’s it! By now your site should be up and running, living on its own domain (with SSL), making use of Forestry.io’s CMS — and the only expense you’ve made has been the (optional) purchase of a domain name (which is inevitable anyway, and would otherwise be the last cash-related worry you have).
Two boring adverts
- Did you know? You can read articles directly on my (personal) blog.
- I am also running a weekly newsletter, called MailMeIT, about all things software. Throughout the week I come across dozens of articles on topics ranging from web development and coding tutorials to Agile, to UX and more, and curate and deliver the best ones for you! I invite you to subscribe here.
Till next time. 😉
