Start Point
Hi! Welcome to my first post.
Finally, after a long time planning to make a personal website, I managed to do it recently, in mid-late 2023. This website is planned to be used as a blog to write anything about the field that I’m interested in. In this post, I want to talk about the technology that I used to build this website and what features that I want to develop in the near future.
TL;DR: I’m using Astro as the framework and host it on Cloudflare Pages with a custom domain name.
Web Framework
In this section I have a lot of options to choose. Any framework is qualified as long it supports static rendering into HTML files. But since I don’t want to install anything new on my laptop, any framework that uses language other than Javascript is excluded (ex: Go, Python, Ruby, etc.). The choices are narrowed down to 3: Next.JS, Astro and Eleventy
Eleventy (11ty) is the lightest framework among the other two options, it’s quite performant to build a lot of markdown files. It’s also not rapidly updated, so we can assume that there will be fewer breaking changes even if our dependency version hasn’t been updated for a long time. However, Eleventy don’t come with many template available, So we need to create the major UI by ourself.
Next.js is framework that is based on React Component and supports server-rendered and static-rendered. Since it’s based on React, the framework that I have used quite often, I think the learning curve is not so steep. But considering the rich features of the framework, it would be quite wasteful to use it since I only need static-rendering features from it.
Last is Astro, the new kid on the block that is based on Island Architecture (Honestly, I haven’t fully grasped the concept of it), which is targeted at speeding up the loading time of the website. It has a lot of templates to choose from, like landing pages, blog, portfolio, etc.
In the end, I choose Astro as the framework to use, considering there’s a lot of template options and it’s suitable for my usage, which is specifically to create a blog website. I use the default blog template and plan to expand its features in the future.
Web Hosting
There are 4 hosting services that I have consideration of, namely Github Pages, Netlify, Vercel, and Cloudflare Pages. All of it is free to use with certain limitations. I want to outline several key points to consider before choosing one of the providers.
1. Provided domain
All of the service providers provide domain names for every deployed website. Here is the comparison of each provider:
| Provider | Domain Format | Subdomain Name |
|---|---|---|
| Github | example.github.io | based on github account username |
| Netlify | example.netlify.app | based on project name |
| Vercel | example.vercel.app | fully customizable |
| Cloudflare | example.pages.dev | based on project name |
Personally, Cloudflare provides the best domain name if compared to other service providers, since it doesn’t contain any branding on its name.
2. Ease of use
Deployment process on Netlify, Vercel and Cloudflare is quite easy and straightforward, you just need to link your repository (Github, Gitlab, or BitBucket) and it will automatically be deployed with the provided domain names. We can also configure it to automatically deploy a new version whenever there are new commit on a given repository. For Github Pages, the process is bit different, you need to make new branch on the repository specifically to place the build file and setup the Github Pages to read on those branch.
3. Free Tier
All of the services mentioned above are free to use with certain limitations. I will point out some of the features that are covered in the free tier below:
| Point | Netlify | Vercel | Cloudflare |
|---|---|---|---|
| Concurrent Build | 1 Process | 1 Process | 1 Process |
| Build Execution | 300 mins/month | 6000 mins/month | 500 builds/month |
| Bandwidth | 100 GB/month | 100 GB/mont | Unlimited |
Considering some points that are explained above, I choose Cloudflare Pages as the hosting service for this website.
Domain
The domain anwarysfab.dev that I use for this website is obtained for free from Google I/O 2022 as part of the participation in the event. I plan to extend this domain for a period of time.
Upcoming Features
Here are the feature that I want to implement on the website:
- Comment feature using Utterances or Giscus
- Paging feature on blog list
- Implement tag or category on post