I ambitiously added launching my website to my New Year’s goal back in December of 2022. Since I tend to act immediately when I make a plan rather than sit and think about the next steps thoroughly, I bought a domain under my name first. But, I couldn’t take steps any further because I couldn’t decide which framework I would use and what content I wanted to add to my website. While I was still thinking about them, I got caught up in a busy project at work. Suddenly, I realized that 2023 was almost over.
So, I added the plan to my New Year’s to-do list again. This time, I decided to change the domain name for my website to my cat’s nickname, Tokozzing. I chose not to worry in advance about the big and small failures I might encounter while making the website.
Finally, I successfully launched my website and am proud to have made this much progress. So, I’d like to share how I began and what I’ve done to create the initial layout, menus, etc. Please note that this might not be an effective way to make a website, but I want to record how I made my first official website and hope this can also inspire you to start building your website.
- domain name: https://tokozzing.com
- purchase: aws route53
I thought about what I wanted to show on my website to decide the domain name. I wanted to show my work and have a photo gallery for Toko. Although I rarely post photos on SNS, I tried to organize Toko's adorable pictures and see them on my site. That's why I named my website Tokozzing. By the way, "Tokozzing" means Mr.Toko in Korean. "zzing" is not formal Korean word, but when you want to call someone with a playful and affectionate nickname, "zzing" might be the one you want to use with a name.
When I bought my first domain, I bought it on Godaddy. However, after some research, I decided to use Route 53 since I would use other AWS services such as S3 and CloudFront. GoDaddy offers quite a low price for the first two years, but it goes up after. On the other hand, although Route 53 doesn't have any discount for the beginning years, it offers a reasonable and consistent price.
The purchasing process on Route 53 was quite simple. Just search for the domain that you want to use, check the price, fill in any required information, and pay!
I ran into an error during the domain registration regarding the billing issue, but the AWS support team helped me and resolved the problem without any difficulties.
Information for registering a new domain
- Purpose of the website
- what to show on the website
Before I decided which framework I was going to use, I had to think about the menus and functionalities of my website.
As I mentioned above, I wanted to have some pages to show my experimental works and photos of Toko.
So, I set the main menus for my website to About, Gallery, and Explore CSS. It's quite simple, right?
- framework: Next.js(ver.14)
- CSS: tailwind CSS
Since RSC(React Server Component) was officially introduced to React last year, I wanted to see the benefits of using it, but it's actually hard to fully understand the concept by just following along with the online courses. (It's very helpful to understand the fundamentals, though.)
In addition, as I needed a backend to connect to DB and other APIs, Next.js was the one I chose for a framework. One of the huge benefits of using Next.js is that I can deploy the code with Vercel without any complex CI/CD configurations.
There are more benefits I found out while I was developing, but I'll talk about it later.
For the CSS library, I chose tailwind CSS. Now, I'm very used to styling with CSS in JS libraries such as emotion, but using CSS in JS libraries has some drawbacks when they're used in RSC, such as performance overhead and complexity in SSR(Server-Side Rendering).
Tailwind CSS is a pure CSS library with stability, excellent documentation, and many useful resources. The only reason I hesitated to use it was that I can't separate styles from components. I prefer to store the styles in the stylesheet because it's easier to manage styles and more readable to me.
However, since tailwindCSS is the primary CSS tool when you install Next.js, and I wanted to try as they recommend, I decided to go with tailwindCSS. So far, I'm pretty happy with using it.
- add a header
- add pages and link to the menu
For me, designing is the most challenging part. I did some decent research on the trends of websites, well-made websites, and blogs.
As many websites as I explored, I got more confused about which concept and layout I wanted to make. So, I decided to focus on the functionality first.
I made a simple responsive header(top fixed nav bar in web view, side sliding nav bar in mobile view) with the initial menu and linked blank pages to the menu. When I finished it, I felt like I was already halfway done!
- DB: MongoDB
I needed DB to store the image data such as title, image address, and date, and I chose MongoDB because it's easy to set up for managing small data and is free for a limited amount of storage.
Since I don't expect heavy traffic on my website(for now), I started with a free plan.
To store the images' data in the database, I sorted and organized the images, reformatted the name of the photos, saved some additional information, and saved the data in CSV format because mongoDB allows inserting data in CSV files and it's very convenient if you need to upload a large amount of data.
I made a script to update the names of the image files according to the created date because it's a daunting job to manually check the date and change file names. For reference, you can retrieve all the data stored in photos using a library such as exifreader.
To modify the data of the photo, such as deleting the location or the date created, you need to download the program on the exif official website and execute it on the terminal.
To get the data from the DB, install mongodb package. There is a simple example code about how to interact with your DB. Also, you need to store your ID and password in the environment file. The code related to communicating with the DB should be off the client side.
- store images: S3
- update the image's URL & cache images: CloudFront
First, I stored the images in S3 and retrieved them to the site directly. The method to store images in S3 is as follows.
- Click the "Create bucket" button in S3. A bucket is a container for the data stored in S3.
- Choose a region. A region is the location where your data in S3 will be stored. Depending on which region you select, the billing price will be different.
- When you want to allow public access to the bucket, uncheck the checkbox "Block all public access." Then, the data in the bucket can be accessed by the public with its URL.
- You can also set the bucket versioning. It's especially useful if you store build files for the website because you can recover any previous data even you've deleted before. Since I don't need versioning for the images for now, I disabled it.
- Set the default encryption. I left it as the default setting.
- Done, and now you can store the images in the bucket directly or make directories as you wish and store them.
After configuring the bucket and succeeding in retrieving the images on the gallery page, I decided to go further. Interacting with S3 directly is actually not a good practice, especially if you allow public access to the bucket. It's more expensive and slow since the data is stored in one region.
So, it's better to use CDN like CloudFront with S3. Also, I wanted to show my images' address with my website URL like "https://assets.tokozzing.com/images/toko_image_7.jpg“, not the S3 address.
With CloudFront, you can give the alternative address with CNAME property when you distribute the CloudFront. To link the S3 bucket with CloudFront, you can do it as follows.
- Click the "Create distribution" button in CloudFront.
- In the origin section, choose the origin domain. If you click the input section, you'll see the list you can choose. In my case, I chose the S3 bucket I created previously.
- Change the option for origin access to "Origin access control settings." If the bucket's access is set as public, you'll see the warning about the policy. You can copy the related policy after creating the distribution. Then, only the services or IPs that are allowed in the policy can access the bucket.
- In the default cache behavior section, I changed the view protocol policy to "redirect HTTP to HTTPS." Also, set allowed HTTP methods as you need. Set cache policy. I set it as recommended.
- If you want to link a function, such as resizing or changing the image type with Lambda, you can add it in the Function Associations section.
- Set WAF option. WAF is a web application firewall that protects your website from malicious attacks and blocks IPs. It has a base cost. Not free.
- In the settings section, choose a location by considering your budget.
- To change the data's address, add it to CNAME. You need an SSL certificate for it. Keep in mind that the certificate must be in the US East Region. You can request the certificate in ACM(AWS Certificate Center), or you can also upload the certificate from outside. For me, this was the most challenging part because the record names and types I set for my website in Route 53 had some problems. It took a whole day to figure it out. To get the certificate for the CNAME, you need to set a record for the CNAME in Route 53 and set the domain name that you want to use; in my case, it was "*.tokozzing.com" in ACM. After the certificate is created, return to the SSL certificate section in CloudFront, and you will see it on the list.
- Click "Create distribution".
- If you set the S3 bucket as public access, you'll see the message regarding the created policy at the top of the page. Copy it and paste it to the S3 bucket policy.
- To check the settings are configured correctly, enter the address of the image in the S3 bucket into the address bar. If you see the message "Access denied" instead of the image, your S3 bucket is not in public anymore. Also, check if you can access the image with the address you set in CloudFront.
- CI/CD: Vercel
Using Vercel to deploy the website is quite easy, especially with Next.js. All you need to do is,
- Add a new project.
- Import a git repository from the linked account.
- Set the project name, root directory, and other build options. Add environment variables stored in your local env file.
- Deploy it. Then, your code will immediately be built and deployed to the auto-generated URL.
- As a default, every commit to every branch will be deployed. Any change in the main branch will trigger the production build, and any other branch will trigger the preview build. Since I don't need any preview sites for now, I changed the option for the deployment. You can find the options in the general section in settings.
- You can also set up your domain. If you see the error regarding verification, add the stated name servers to the domain in Route 53. After verifying my domain, I reset them to the original AWS name servers.
Phew! These were the initial setups for my website. Although there were a few obstacles, the journey of creating my own site felt like making my playground. Now that the foundation is built, I'm looking forward to developing and adding content piece by piece.