Reclaiming the Web: Why I Built a Personal Website from Scratch

Why Build a Personal Website?

The Dilemmas of Social Media

Today's social platforms have lost their way:

• Facebook is flooded with low-quality AI-generated content.
• Twitter has become a breeding ground for information noise.
• Instagram has completely transformed into a TikTok clone.
• All platforms are ruthlessly harvesting user data and time.

More critically, the content you create on these platforms doesn't truly belong to you. Algorithms decide who sees your work, and platform rules can change at any moment.

Rediscovering the Indie Web

Six months ago, I stumbled upon a video about the "Indie Web." That's when I discovered an entire community of people building personal websites in their own way—without relying on big platforms, taking full control of their digital space.

This reminded me of browsing the creative personal blogs of my childhood: each site had a unique design, and the owners shared content they genuinely loved. That pure creative freedom deeply captivated me.

From Beginner to Breakdown: My Website Building Process

Stage 1: Reviving HTML/CSS

Although I had some prior knowledge of HTML and CSS, I hadn't touched code in over a year and had forgotten almost everything. In the beginning:

• I had to look up the documentation for every HTML tag.
• CSS layouts frequently resulted in unexpected misalignments.
• I even completely scrapped the first version of the website design.

The biggest challenge: How to make the website look less like a "beginner's practice assignment"?

I decided to go back to the classics—mimicking the vibrant, element-rich personal homepage styles of the early 2000s. I used:

• A retro background pattern generator.
• A blinking text GIF maker.
• Various small icons, buttons, and badges.

Stage 2: Falling into the "Never Satisfied" Cycle

Once the website was mostly complete, new problems arose: the more I looked at it, the less satisfied I became.

Whenever I browsed other excellent personal websites, I felt my own work was like "baby doodles." Especially after seeing cool sites with CRT monitor effects, I started doubting my design.

At this point, there were two options:

1. Start over (but I had already invested too much time).
2. Find a way to optimize the existing design.

I chose the latter and made a bold decision—to add a theme switching feature.

Stage 3: JavaScript's Counterattack

To implement dual theme switching (light mode + retro CRT dark mode), I had to relearn JavaScript.

My initial implementation was quite clumsy:

• I had to duplicate entire sets of content on each page.
• Different CSS files were used to control display/hide.
• This resulted in extremely redundant and messy code.

Later, I discovered I could solve this using a component-based approach:

• Apply theme classes only to specific elements (like headings).
• Dynamically switch CSS files using JavaScript.
• Significantly reduce repetitive code.

This process reminded me of the joy of learning React—the unparalleled sense of accomplishment when you find a more elegant solution.

Website Features and Design Highlights

Themes: Pink Dreamscape vs. Retro Terminal

The light theme uses a pink color scheme, clean and vibrant; the dark theme simulates the effect of an old CRT monitor, with a starry background and scanline filters to create a cyber-retro atmosphere.

The theme switching button has a hover preview effect—when the mouse passes over it, you can faintly see the appearance of the other theme. I'm particularly satisfied with this small detail.

Blog Section: Windows 98 Desktop Replica

The blog section is my proudest work. Using the 98.css framework, it faithfully recreates the Windows 98 desktop environment:

• Minimizable/closable windows.
• Interactive Start menu.
• CD player component that can play music.
• Taskbar displaying open "applications."

I wrote all the window logic using native JavaScript. When you click the minimize button, the window truly shrinks to the taskbar; clicking close makes the icon disappear, but it can be reopened from the desktop.

Practical Interactive Components

In addition to visual effects, I've added several practical features:

• Visitor Counter: Tracks website traffic.
• Status Updates: Shows what I'm currently doing in real-time.
• Live Chat Component: Visitors can leave messages and interact.
• Tamagotchi: Visitors can feed and raise it.
• Web Ring Links: Discover other interesting independent websites.

These features transform the website from a static display into a living, interactive space.

From NeoCities to NecoWeb: Choosing the Right Hosting Platform

Why Migrate?

Initially, I chose NeoCities to host my website—it's the most well-known Indie Web platform. However, I later encountered several issues:

• Defaulting to allowing AI scraping of website content for model training.
• Lack of support for external scripts, limiting functionality expansion.
• Paid membership features offered low value for money.

Advantages of NecoWeb

Although NecoWeb is newer and has a smaller community, its advantages are significant:

• Explicitly prohibits AI crawlers from scraping user content.
• Supports external scripts and offers greater flexibility in functionality.
• Membership pricing is more reasonable, with more practical features.

For creators who prioritize content ownership and creative freedom, NecoWeb is a better choice. This is especially important if you're concerned about your work being used by AI without compensation.

💡 MasLogin Tip: If you need to securely manage multiple website accounts (e.g., running several independent websites simultaneously), you can use MasLogin anti-detection browser. It creates independent browser environments for each account, preventing platforms from detecting association and protecting the security of your multi-account operations.

Continuous Optimization: An Endless Refinement Journey

Mobile Responsiveness

Although personal websites are primarily aimed at desktop browsing, I've implemented basic responsive design to ensure mobile users can access the content normally.

Component Refactoring

For easier future maintenance, I've refactored repetitive elements like the sidebar, header, and footer into reusable components. Now, a change in one place updates the entire site—significantly improving efficiency.

Code Optimization and Cleanup

Looking back at my early code, I found many redundant and non-standard practices. Although the functionality was correct, as a learning project, I decided to gradually refactor this "technical debt."

The important thing is: Don't give up on publishing just because the code isn't perfect. Get your work online first, then refine it slowly—that's the true creative process.

What Did I Learn From This Experience?

Falling in Love with Programming Again

I thought this project might make me tired of programming, but it was the opposite. The process of solving practical problems and seeing the results immediately presented ignited my passion for learning more than any tutorial could.

I even started learning Python, purely because I enjoyed the process of coding.

Embracing Imperfect Creation

In today's world flooded with AI tools, the greatest advantage for human creators isn't perfection, but authenticity and uniqueness. Is my website code messy? Yes. Is the design professional? Not exactly. But it's 100% made by me, carrying my aesthetic, ideas, and learning journey.

This imperfection is precisely its most precious value.

Ownership of Digital Space

On your own website, you don't need to worry about:

• Whether the algorithm is recommending your content.
• Sudden changes in platform rules.
• Accounts being banned without reason.
• Data being used for AI training.

This sense of complete control is something no social platform can offer.

Tips for Aspiring Builders: Practical Advice

Start Simple

• Don't aim for perfection right from the start.
• Build the basic framework first, then gradually beautify it.
• Learn to use developer tools to inspect and fix issues.

Utilize Existing Resources

Recommended resources:

• Sadgrl's Layout Generator: Quickly generate retro-style layouts.
• 98.css: Windows 98 style components.
• NeoCities / NecoWeb: Free hosting platforms.
• Various retro element resource websites.

Join the Community

The Indie Web community is very friendly and people are happy to share experiences and resources. Browsing other people's websites not only provides inspiration but also allows you to learn techniques by "viewing source code."

Maintain Patience and Passion

Building a website is a marathon, not a sprint. My website took several months from start to basic completion. During this time, I had countless moments where I wanted to give up, but each time I overcame a technical challenge, my motivation was reignited.

Conclusion: Staying Human in the Age of Algorithms

This project reminds me that the internet was meant to be a playground for human expression, not a farm for data harvesting. When we take back creative control for ourselves, we discover that those "imperfect" creations are the ones that resonate most deeply.

If you're tired of social media algorithms, why not try building your own little corner? Don't know how to code? No problem, there are plenty of tutorials and tools available to get you started. The most important thing is to take action, learn, grow, and enjoy the joy of creation throughout the process.

Feel free to visit my website (link in the comments section) and leave your mark on the guestbook. I also look forward to the day I can encounter your work in some corner of the Indie Web.

---

Frequently Asked Questions

Can I build a personal website if I know nothing about programming?

Yes! While there's a learning curve, HTML/CSS are the easiest programming languages to start with. There are abundant free tutorials online, such as FreeCodeCamp, which offers systematic courses. Even learning for just 30 minutes a day, you can grasp the basics within a month.

Which is better for beginners, NeoCities or NecoWeb?

NeoCities has a larger community and more resources, making it suitable for beginners who want to get started quickly and receive feedback. NecoWeb focuses more on privacy protection and functional freedom, appealing to users with some existing knowledge who value content ownership. Both offer free plans, so you can try NeoCities first and then consider migrating if needed.

How much does a personal website cost?

The basic version is completely free: NeoCities/NecoWeb offer free hosting, eliminating the need for domain or server purchases. If you want a custom domain (like yourname.com), it costs around $10-15 per year. Paid membership features (like larger storage space) are typically around $5 per month.

How can I protect my personal website from AI scraping?

You can take the following measures:

• Prohibit crawlers in your robots.txt file.
• Use platforms like NecoWeb that block AI crawlers by default.
• Add a copyright statement prohibiting "AI training."

While 100% prevention isn't guaranteed, these steps can significantly reduce the risk of being scraped.