logo
Published on

From Concept to Code: My Website Adventure

One day, you wake up yet once again with a new idea: creating your own digital space, a personal website. It could include a portfolio, a blog, a book section, maybe even a guestbook page implemented with Giscus. The possibilities are endless. Not only would it serve as a showcase of your interests, but it would also be a great project to challenge yourself and test your skills as a developer.

Great, now you're excited. What a a great way to start your day! You open your laptop and create a project in Notion. First and foremost, what should be the primary focus of your website? How can you organize everything to ensure completion this time? What do you need? What should be the main focus?

You outline the crucial steps for the successful completion of your project:

  1. Defining the purpose
  2. Technical Foundation
  3. Design
  4. Building, Testing & Launch

1) Define the purpose

In theory, your primary focus of the website is to provide a user-friendly interface with state-of-the-art technology and a reliable Content Management System, catering to your writing and publishing needs, as well as including a section that displays your previous work. Regarding state-of-the-art technology and CMS, this includes both frontend and backend development which are integral to the functionality of the site. You would prefer to skip the backend part but yet have to research for good alternatives. The design aspect can wait until you decide on the technical foundation, although you create an early version of the layout in your head. The main design goal is to create a minimalistic design.

Great, you have written everything down and established the main concept for your website. This doesn’t seem that complicated, you’re already making some serious progress. You're thinking that you could have this published online in just a couple of weeks.

2) Technical Foundation

Now that you've determined the purpose of your website, it's time to decide on the technical aspect. Should you opt for a convenient solution like Wix or Squarespace? Or maybe join the majority and use WordPress? It's quick and easy, right? However, it limits full customization, especially if you're unfamiliar with PHP. It's something to consider.

You then look for an open-source platform like Ghost, which features a headless CMS. However, customization might be a pain. After researching for a couple of hours, you find that Ghost doesn't quite meet your needs. Great, time to do some more research. From forum discussions, you learn about another headless CMS, Hashnode, which seems more fitting for your project and quicker to set up. However, it has more customization limitations than Ghost. Nevertheless, you now have a clearer picture of what you want to create. You'll handle the frontend, using something like Hashnode for the backend. Sounds great!

You've finally decided to build your website from scratch. This gives you complete control over your website and allows you to host it locally on your device without the need for paid memberships. After further research, you're certain. You're going to build it from scratch! It should be a fun experience, right?

Now that you've partially decided how to build your website, there's just one thing left – deciding a front-end framework. While pure JavaScript sounds tempting, it could turn into a time-consuming struggle, which you know you want to avoid. Maybe React is the answer since you recently built an app with it (even though React's stubbornly still calling itself a library, not a framework). A couple of hours later and some more research leads you to Next.js, a React framework determined to bring world peace…or at least make websites run faster. This could be the winner! It's fast, scalable, and plays nicely with search engines. Next.js offers server-side rendering, client-side rendering, static site generation, and file-based routing. Plus, handy templates help you avoid building everything from absolute scratch. Sold! Next.js for the win! Let's just hope Vercel deployment doesn't turn into a battle royale.

But hold on a second champ! You're a complete Next.js newbie, and there's definitely a learning curve ahead. No worries, though – they have a pretty great tutorial. The only downside? This adventure might take a while, maybe a whole month. You’ll have to learn the ropes and experiment with smaller projects before you fully understand how everything fits together. Oh well, there goes your free time for the next decade. At least you'll have a website, right?

3) Design

At last, it's time for the creative stuff! Selecting your website's design should be a blast. After all, you just need to figure out that minimalistic, simple-yet-graceful aesthetic that you envision. This will be a breeze...right? You’ll get this done quickly, you know you will. You open up your browser and start researching for inspiration. You meticulously bookmark each page that inspires you. Hours later, you're now adrift in a sea of inspiration. Somebody send help, decision overload strikes again! Notes and screenshots multiply, you silently nod to yourself - this website will be epic! You decide to take a bit of time off, go for a run. Days pass, turning into weeks, and the decision remains unresolved. Procrastination kicks in, fueled by a busy schedule. A month passes, still no design direction.

Time marches on, and you finally resolve to just pick something and move forward. Scanning through Next.js templates, you settle on one that seems decent enough. Hold on... it uses Tailwind CSS, a framework you've barely touched before. Fantastic – yet another skill to add to your growing to-do list. At this rate, you might finish just in time for retirement.

4) Building, Testing & Launch

The moment of truth! Technologies? Check. Framework and design? Chosen. Template? Picked. Priority? High. You've brushed up on Next.js, Tailwind CSS, and even your trusty React skills. It's time to build this website!

Deployment to Vercel is seamless, followed by the familiar ritual of Git repository creation and cloning. Anticipation rises as you delve into project folders, ready for that satisfying npm install. Then, the universe delivers a swift kick – a barrage of dependency errors. Seriously, who ever promised this would be easy?

Hours melt away as you wrestle with package managers, deciphering dependency errors. Yarn proves victorious, npm is banished (for now). A triumphant launch of dev mode reveals your newly born website! Everything seems promising, customization awaits. But first, a small detour to the template's documentation reveals a dependency on the mysterious 'Contentlayer' for content management, which you missed the first time. Your trusty 'open a new documentation tab' reflex kicks in. Another framework to learn?! Do these mystical technologies ever end?

Time warps onward... A stray mention of Astro, Remix, and Svelte catches your eye in the documentation. Hold on, maybe Astro would have been the perfect choice? Benchmarks promise blistering speed. Should you have used Astro to create the website? Your brain begins an epic 'Next.js vs. Astro' showdown while your website patiently waits to be built…

The existential question arises: will this website ever actually make it onto the internet? Honestly, with your track record, who knows?