How The Andy Explains Tech Website Works

Foreword

I wrote this article about the original Andy Explains Tech website. That website served me well, but it's no longer on the web and its articles are being moved to this site, my space.

This website is not based on any custom-based CMS right now, but I do plan on building search, content management, etc... and further, making it easier for other people to use similar systems. It's using Next.JS static website generation instead.

I will be building out this website with all the functionality of that website, and more... but it will take a while. I hope to offer tutorials, courses, etc to help curious souls get familiar with how to build things by understanding how things work.

The Old Andy Explains Tech Website

When I got bored analyzing literature over the summer in my summer class, I decided to start this blog. I figured that I had a lot of knowledge about tech, and I could probably make a buck or two with a blog about tech. And I thought that I'd have more fun doing that instead of picking out the tiny details in Frankenstein (a great read, but a monster to analyze in the specific class I took).

So far, I've been right about one of those things. As of writing this, I'm only $[redacted due to Google Adsense policies] richer, but I'm having a lot more fun writing this. And now, to attempt to turn something reaaaalllyyy mundane into something worth sharing, I'm going to show you how I write my articles and how I get them out to all three of you that read this thing (Hi Mom). The writing part is pretty easy to understand. I go to my bedroom, fire up the gaming rig, and begin typing into Grammarly, so I don't make too many spelling mistakes. I also make my diagrams with Blender. Then I use my credentials, log into the website, upload, and go on social media to promote the article.

The website, though, is a bit more complicated. I'm a hardcore nerd. I don't need no Wix, SquareSpace, or some paid service for a relatively small blog. Right now, when you type in andyexplainstech.com into your browser, you connect to a server that currently lives next to my right foot. It used to be the old gaming PC that I bought from a friend for $100 a few years ago, but now it is the AET server. That server runs Ubuntu Linux as the operating system and NGINX as the webserver. It also runs MYSQL, a database system, and a PHP interpreter (it interprets PHP code, the language I built the site with).

This system's key components are my code and MYSQL (actually MariaDB but don't worry about it). All the articles are entries in a MYSQL database. My code is responsible for fetching a record from the database and interpreting the record's data as a blog post. The records contain the article content, title, publishing date, author name, and some more data, which I'd prefer not to disclose so I don't get hacked. My code looks at a browser's URL bar, finds the corresponding article, looks up a record, formats the data to display correctly in a web browser as an article, and sticks it into an on-the-fly generated HTML file, which is what your browser ultimately receives.

class Article{
    public $id;
    public $title;
    public $cover;
    public $author;
    public $published_date;
    public $url;
    public $content;
    public $topics;
    public $views;
    public $meta_description;

    ...
    public function __construct($url){
        // Don't do this. Probably. There is likely a better way of doing this.
        $stmt = $GLOBALS['connection']->prepare("SELECT * FROM articles WHERE url = ?");
        
        $stmt->bind_param("s", $url);
        $stmt->execute();

        $resultantArray = $stmt->fetch_assoc();
        $stmt->close();
        $this->id = $resultantArray['id'];
        $this->title = $resultantArray['title'];
        $this->cover = $resultantArray['cover'];
        $this->author= $resultantArray['author'];
        $this->published_date = $resultantArr['published_date'];
        $this->url = $resultantArray['url'];
        $this->content = $resultantArray['content'];
        $this->topics = $resultantArray['topics'];
        $this->views =  $resultantArray['views'];
        $this->meta_description = $resultantArray['meta_description'];
    }  
}

// Then in the article page:
$URI = $_SERVER['REQUEST_URI'];
$URI = strtok($URI, '?');

if ($URI == "/article.php") {
    if (isset($_GET['article'])) {
        $ArticleToGet = $_GET['article'];
    } else {
        $ArticleToGet = "404";
    }
} else {
    $URIParts = explode("/", $URI);
    if ($URIParts[1] != "articles"){
		$ArticleToGet = "404";
	}
    else {
		if(count($URIParts) == 3 || count($URIParts) == 4){
			$ArticleToGet = $URIParts[2];
		}
		else{
			$ArticleToGet = "404";
		}
    }
}

When you click an article page, it does that cycle once. When you look at the homepage, it does it five times and takes an excerpt from each article to keep the page snappy. You can load more posts if you want.

There are multiple website features: I can control the website that updates the database to add articles and delete comments, which works by modifying records in another MYSQL database. I also have a search engine, which works with another database in MYSQL, where instead of each article corresponding to multiple words, a single word corresponds to numerous articles. The ranking and matching algorithms are slightly buggy now, but I will work on it over winter break.

I also give you the option to make an account (nobody has yet, and frankly, the only thing it gives you is the ability to like and comment at the present moment, so it's probably not worth it). The features unlocked with an account use an event database and an account database, but I shouldn't discuss either of them for security reasons. Know that making an account, liking a post, or commenting will create an entry in a database somewhere on the server and usually involve several encryption steps. When you want to make a blog mostly from scratch (I say "mostly" because there is a lot of open-source software under the hood powering the server), call me, and I'll tell you how to do it in incredibly vague, non-helpful terms.

The previous paragraphs were about the parts of the website that change, also known as dynamic content. That's all done mostly in PHP and with some Javascript if you're interacting with the website. Let's now talk about the server setup, static content (the header, styling sheets, etc.), and some of the website's frills.

The entirety of the website is built with Bootstrap 4, a collection of styling sheets that you can use to make websites that work on mobiles and desktops. I added some custom styling information with the font (The main font is Barlow, an open-source font that I found on Google Fonts) and the input fields. The comment editor (and the one I use for quick edits) is Quill.JS, an open-source browser editor that's a little finicky but works well enough. I also wrote the code and the styles for the website's Dark Mode. We'll call this code a template because it's sort of like what a template is in WordPress and other site-building services. And the ads on my site come from Google, and all of that is controlled by Google.

I'm using a hack with NGINX with the articles directory: the article before this, How Speakers Work, is at https://www.andyexplainstech.com/articles/how-speakers-and-amps-work. An address like this usually means that I have a subdirectory named "articles" on my website, and it has a subdirectory called "how-speakers-and-amps-work." However, I didn't want to create a new folder for each post. Instead, Nginx routes all requests to the articles folder to a single PHP file, which reads the incoming URL, finds the right article to display, and sends it back, prettied up with my Bootstrap "template."

And I think the last technique to talk about is security. My website has an SSL certificate, which enables your devices to encrypt data with my public key. I have the private key (nobody else does), which means you can talk to my servers in private. And my server talks back in private as well because your device will also create a public and private key. Any people that monitor internet traffic can see that you sent a request to AndyExplainsTech.com, but they can't see the content of that request, nor the response. SSL security is a complicated subject, and I'll explain it in another article eventually. The certificate is from Let'sEncrypt, an open-source outfit that gives free certificates.

And that's a birds-eye view of the nearly-2500 lines of code that run my website. I'm getting tired, so I'm gonna stop writing and ask that if you have questions about the site, you send my Facebook page a DM, or you email me at the email listed on this website.

Peace