How I built my site from the ground up.
Hi, my name is Kinn. I'm a student and cybersecurity specialist studying at U.C. Berkeley.
It's no surprise that AI has been used as yet another tool in a software engineer's arsenal. It's also easier to use it yourself to do what once were complicated tasks such as building a website from nothing. If you've got any experience with programming, maybe an introductory Python course under your belt or just a pure interest in learning something new, you'll want to leverage that to the next level with AI and make something that represents you.
The Backend and The Framework
I mentioned in my previous article that this site began as yet another Rust project, my goal was to learn by doing. That said, I most definitely didn't take the easiest path in writing my first webserver, but the decision was not uneducated. Before I would consider going to a GPT platform such as ChatGPT for advice on where to start, doing some preliminary research is the easiest thing you can do. It's said that a key feature which seperates the tech-savvy from the rest is the ability to efficiently solve problems with good Google searches, and that is very true, but I like to take it a step further.
Reddit is notorious for having an awful search feature, but many of the posts are indexed on Google's databases. So searching for a Rust webserver framework followed by the keyword "Reddit" solves the two issues: searching Reddit in a roundabout way and avoiding articles which drag on and are often outdated and littered with ads. After much consideration between frameworks like Rocket and Axum, I found Tokio's own Actix-web and began there.
I don't want to divulge much of what my own webserver's source code is like, but if you want an idea of where to start, always read the documentation first. Though Rust already has an extraordinary error-code system built into the compiler, some times its not enough for your particular use case. I know I had issues with serving html, static-linking, and so forth. Luckily, these issues are prevalant to many users building websites, and due to this wide-spread nature, ChatGPT can be used to find the right answer.
When to Google and When to Chat with ChatGPT
Despite popular belief, ChatGPT does not have the answer to a lot of specific questions, and neither do search engines like Google. Knowing when to use one over the other is key for maximizing your productivity, turning hours-long coding blocks into mere minutes with the right tool. I find that Google is great for when you know which package or library is causing you grief, when you know the error code you're being served, or when you're looking for a particular and specific solution to your problem. On the other hand, ChatGPT is great when you're just inquiring about something, not looking for a particular answer and just trying to dip your feet into a subject field you might not know much about.
Here's an example, when moving my website from HTTP to HTTPS, I first inquired about some common ways this is done. My particlar guesses led me to some answers within the framework I was building in, a purely Rust-based solution. On the otherhand, those same particular solutions simply said to configure a Nginx server to handle HTTPS for me. With that, I knew what to inquire and felt that a conversation was needed about the next steps.
AI Automated Configuration
The case of Nginx was when I found ChatGPT to be the most useful for the backend. I knew of Nginx prior but didn't know that it could be used like this, I also knew Nginx was well established and had been around for a long-time, that the forums posts and documentation ran deep and that finding the best solution may take more time than I needed to spend on this simple fix. With that, I simply asked, "How do I configure an Nginx server to handle HTTPS?" And away I went. Essentially, within the first dozen queries I gave, I had the fix up and running. ChatGPT was able to give me directions on how to install Nginx onto my server, directions on locating the configuration file, as well as an example configuration which would suit my exact purpose, all with the capability of asking it questions along the way. A prompt so simple yet perfectly tailored to suit my needs could not have come from a Google search, and better yet even my particular questions which I had mentioned may be better suited for Google had been laid to rest with the scenario I was now in a full-blown discussion with on ChatGPT. With my certificates now bound to the domain, I was up and running on encryption.
Interlude
Before I talk about how I leveraged AI to build the frontend, I first want to address the obscurity and caution I'm taking when talking about how I built this project. From a security stand-point, it's typically bad practice to have all your frameworks and libraries public, as when they're public, bad actors can work to find vulnerabilities offline without ever having to interact with your projects, especially if they're forward facing like a website. Because of this, it's my job as a cybersecurity specialist to keep my ear to the ground and be aware of vulnerabilities with my frameworks so that I can patch them as soon as possible. If you are using libraries for your projects, such as an API or website, it's best practice to keep it secure; Run updates, test your systems, and in general, have good and safe operational security. With that, let's talk about the frontend.
The Frontend and Generating Website Components
The frontend of your site is everything you see on the webpage, comprised of HTML for structure, CSS for style, and JavaScript for functionality. If you don't want your site looking like something from the early 2000's, use CSS frameworks like Tailwindcss, Bootstrap, or Foundation. Since this is primarily a static site, I wanted a lightweight framework so I chose Tailwindcss. To supplement my creativity, and to offer some guidance since it was my first time doing anything front-end, I searched online for open-source component libraries, finding component libraries such as Flowbitecss in addition to others. Website components, such as paragraph boxes, footers, headers, buttons, and so on can be designed on your own. The thing is, people online make portfolios with their CSS components which are free to use without license. Personally, I used sites like codepen.io and tailwindcss components since Tailwindcss is my framework of choice.
At the end of the day though, this was all done by knowing what to search up specifically on Google, and since ChatGPT lacks the feature of running its own code or creating something like a sandbox to show HTML, I found doing iterations through it wasn't the most effective means. It's analogous to how AI generated images aren't on the same level of quality as hand-made pictures. In any case, after importing my components, I realized that simply copy and pasting code doesn't really do much in the realm of learning. I was in deep and I had to learn how to swim, and so I once again returned to the documentation of my libraries and continued reading. Little by little I was able to find my way up and began customizing my own assets by hand, tailoring them to suit my needs. I do believe that there exists GPT-like services online which can generate components to your liking, as well as software such as Figma which can also create components, but the main objective in addition to creating this site was to do so as cheaply as possible.
After about 5 weeks of on-and-off development, the domain was purchased and the site came online using nothing but open-source resources and my text-editor of choice, Vim. This site runs at less than $2/month.
Closing thoughts
My experience with networking and cybersecurity are really additional things which sped the launch up a little bit, but really anyone can do it. I was partially inspired to do this project on behalf of Pirate Software, who is a game developer and also a cybersecurity specalist who reminisced on livestream about how back in the day, everyone had their own personal (often crappy) website. Since then, nothing has really changed aside from the grifty-ness of some companies who want to lock the door to web-hosting behind monthly subscriptions and paywalls, raising the barrier for entry artificially, preventing self-expression online. At the same time, some people just don't want to put hours of their week making something that can be done at the cost of a coffee, and that's perfectly fine, power to them. If you want to really learn something new, something that anyone could do themselves back in the day, all you have to do is know what resources to consult when, and have some courage to make something.
As of this article, I am looking for internship opportunities related to cybersecurity. If you are someone or know someone who is hiring and in need of my skillset (as shown through some of my achievements), I would like to direct you to my contact page. I'm a big "learning-by-doing" guy, so the sooner I can do that the better.
Thanks for reading, see you again soon.