I created a GitHub Page about 6 to 7 years ago and have been wanting to update it. My goal is to put more effort into the project while improving my overall web development and programming skills. After doing a little research, I found a way to build a website almost entirely for free (except for the domain name). Here is the tech stack I chose, my process, and my overall experience.
I wanted a public portfolio for development practice but preferred a multi-service architecture over a single repository, with technologies communicating primarily via APIs. For storage, my text and image contents are hosted on Supabase. I designed and developed the frontend using Plasmic because I find its drag-and-drop UI highly intuitive, though I did override a few elements using custom HTML/CSS and JavaScript.
- Database & Storage: PostgreSQL to store blog posts and images hosted on Supabase.
- Frontend: A modern web interface built with HTML, CSS, and JavaScript, designed visually using Plasmic.
- Hosting: Hosted on Vercel for optimized performance, server-side rendering, and automated deployment pipelines.
Here are a few notes I took while working on the website.
Once you open a project and a specific page, look at the right-hand menu for the Page data section and the Data queries subsection. Add a custom query for the data you want to display on the page. Next, place the elements meant to show this dynamic data (such as text fields or links) inside a stack.
To bind the data, select the stack first and look at the Settings tab in the right-hand menu under the Repeat element subsection. Set the Collection field to your data query. For example, my stack is set to $queries.getBlogPosts.data (since my data query is named getBlogPosts). From there, move to the inner elements one at a time and map them to specific fields, such as currentItem.title.
First, ensure the top element of the page is a vertical stack. In the Design section of the right-hand menu, go to the Size subsection and enable Fix page height to window height. Then, in the Overflow subsection, select Scroll. Next, add two child elements to this vertical stack: a header element (which can be a text field or another stack) and a body element (another stack).
For the header element, go to the Design section, locate the Size subsection, and set a specific value for the Height parameter. Then, in the Position subsection, select Sticky.
For the body element (stack), go to the Size subsection in the Design section and set the Grow parameter to 1 and Shrink to 0.
My database stores date strings in the ISO format (e.g., 2026-06-17T20:51:48.812Z. However, I want them to look like June 17, 2026.
To format text this way, go to the Settings section on the right-hand menu, find the Content parameter in the Text subsection, click on the three dots, and select Add dynamic value. From there, you can type JavaScript code to format the received input into your desired output. I achieved this using the following approach:
new Date(currentItem).toLocaleString("en-US", {year: "numeric", month: "long", day: "numeric"})
Say you have two pages: a source page and a destination page.
First, set up the link element on your source page. In the right-hand menu, go to the Settings section, navigate to HTML attributes, and Add a Dynamic value to the Destination field like this:
"/posts/" + currentItem.slug
Next, configure your destination page. Go to Page data in the right-hand menu and create a Data query to fetch the content for this page. Under filters, set slug is and Append a dynamic value, selecting postSlug.
Finally, set the page's URL path to /posts/[postSlug]. You will see a new parameter appear; ensure it is set to value in the URL parameters subsection.
While working on this website, I realized that I didn't have a crystal-clear vision of what I wanted from the start. As a result, I found myself constantly changing layouts and elements on the fly. If I had sketched out some ideas beforehand, it would have been much easier to follow a set design rather than constantly tweaking things along the way.
Plasmic allows you to build components that you can reuse across your project—use them! For example, the header on my website is a component that I reuse on every single page. Creating custom components is an excellent way to maintain a consistent design and save time.