Redoing My Website
Welcome to the latest iteration of my website for 2018! You may notice that aesthetically, it's pretty similar to how it looked when I made it in 2015—that is, if you've visited my website in the past. Thematically, it's the same as the former, but a ton has changed under the hood. Here are the major changes:
- There's now a mostly-functional blog system in place.
- The website now runs on a LAMP stack setup instead of a MEAN stack setup.
- I've upgraded the CSS framework from using Foundation 5.5.3 to using Foundation 6.4.3, which was a pretty massive change. Their grid system is totally different, as are many of the Foundation classes.
I wanna talk about points 1 and 2 with this post.
Why did you make a blog?
I've always wanted a place to scribe some of my thoughts that were too big for a Tweet, and a blog seemed like the answer. Additionally, I thought that writing away all my content on Facebook, or even blogging platforms like Medium, wasn't the smartest idea. By hosting my own blog, I wouldn't be subjecting myself or readers to a slew of advertisements. Not only that, but there'd be no question about content ownership if I write here. Then came the question of how to implement it.
Alright, so I know that static website generators like Jekyll, Hugo, and Ghost are all the rage right now. At least among my friends who have their own website. Essentially, with one of these generators, you write your content into text files using Markdown syntax, and then, with a line or two of code on the command prompt, these generators would build out the HTML needed for your website. That's quite dandy and all (not to mention I really like writing in Markdown), but using these generators was easier said than done.
In between 2015 and now, I've tried my hand at all three of the above platforms. Each was powerful and functional in its own way, and with all three, I could quickly setup the files and folder structure needed to get started. But there were limitations.
Theming turned out to be my biggest complaint. I couldn't find a single theme with either platform which I liked, or one that didn't look like a carbon copy of every other static site out there. And with each theme, depending on who made it, the configuration process varied wildly. Some themes led to dated Github repositories with little documentation. Manually tweaking the CSS styles wasn't always an obvious, or pretty solution, either. And by that point, if I was just writing all the CSS myself, there really was no point for using these themes.
There's other features I wanted from a static site too, like control of metadata, grid layout support, and more. And so, Jekyll and Hugo were not my solutions. Building a website from scratch with Foundation is super simple for me, I've done it countless times, but getting the simple Markdown and JSON/YAML configuration would be key to making a blog.
So like almost everything else in my life, I realized that, if I wanted a blog, I'd have to make it myself.
Why did you switch to LAMP?
Last week I decided that, instead of hunting for a new theme, I'd just use the one I already wrote myself three years ago. After going back, looking through the 2015 website's source code, and then modifying it for two days straight, I came to the following conclusions:
1. MEAN sites come with a lot of baggage, i.e. dependency hell.
I mean, for how little content the website had, it had so many Node modules. Too many. When I tried to clear out my old site using my trusty FTP client, Filezilla, the client literally spent a whole half-hour recursively going through all the folders and deleting everything.
2. MEAN is probably most ideal for one-page webapps, not for static sites. SEO for Angular sites is a pain.
So a few hours later, I wrote the additional Angular routes needed for the blog, and we were more or less in business. Like any blogger would, I wanted to be able to share my posts on Facebook and Twitter, so I started testing my website using Facebook's Open Graph Object Debugger, a tool which shows you what it looks like when you share a link from your website.
That's when I realized that none of the metadata changed, no matter what page I visited or shared. Since the website was a single-page Angular app with partials and routes loading on the browser all at once, the <meta> tags needed to be dynamic.
Getting Angular's routeProvider to update metadata was a nightmare. After trying several modules, I stumbled upon ngMeta, which I thought would be the answer to my problems. But then I got some bad results on the Open Graph Object Debugger. It looked a lot like what this guy, Michael Bromley, was facing.
Michael solved his issue by using Apache and PHP to redirect crawlers to a pre-rendered version of the page, where all the metadata would be filled out. This requires you to detect the User Agent (that is, determine if whoever is accessing your site is a bot), then lead them to a PHP stub file which contained nothing more than the desired metadata.
Rather than install PHP and Apache here, I spent another few hours trying to replicate the "crawler redirect" hack using Express (the E part of the MEAN stack). Having my Express server detect the User Agent was simple, but then routing the bot wasn't quite as straightforward. I searched around the web and didn't find any Express or Angular specific advice. Others who've hit this roadblock online have recommended using an external pre-rendering service like Prerender.IO, but at this point, I became pretty furious with Angular in general. That's when I came to my final realization.
3. I was trying to do server-side logic using a client-side framework.
That is, I was trying to make a dynamic, multi-page website using a one-page app-like environment. At this point, jumping over to PHP sounded like a blessing. I've used PHP since fifth grade actually, and had been using PHP recently to build another project. Working with Angular at this point seemed so foreign, almost as if I was toying with a relic of 2015.
And so, after killing two days straight over this, I decided to login to my DigitalOcean account, SSH to the old server, and make the switch.
How easy was it to switch?
I'll say, the one thing I liked about the Angular setup was building websites with a model-view-controller paradigm. In other words, having a model which controls the data and the routes (what URLs you use to access the site), a controller which manipulates the document based on the route, and then a view which is the output template of the site.
Turns out it is entirely possible to build such a routing schema in vanilla PHP. This post by Joshtronic was my saving grace. Turns out PHP has a built-in web server that I didn't know about. All you do is type
php -S localhost:3000 and voila!, your browser can now see your website, no server software (Apache/Nginx) required!
It's supposed to be meant for local development and testing, not for production. Looks like my DigitalOcean server would still need Apache installed on there.
Can I just say though, that the documentation and tutorials hosted on DigitalOcean are amazing?! This guide by Justin Ellingwood walked me though the process step by step, with great explanations. Within 10 or so commands on my terminal, I was in business.
phpinfo() was working and so was
sudo service apache2. Blessed 🙏.
Soon after, I was rebuilding the scaffolding of the old site entirely in PHP, using PHP views and a PHP routing script. What used to be the task of a Angular
script.js file and a Angular-binded
index.html file, was now manageably split over a
routing.php file and a template-rendering
index.php file. Compared to the old site, the new index file is a lot smaller, and the new CSS file has all of its fat cut.
Does the blog use Markdown?
I'm using Emanuil Rusev's Parsedown, which is extremely lightweight, and all it needed to run was a simple
include(). To use some additional Markdown shortcuts, like footnotes, I also included Rusev's Parsedown Extra, equally as easy to configure.
How often do you plan on writing?
I could use this blog to better document my travels. Since it uses Markdown, writing up a quick summary of my trips shouldn't be too frictional. I also like the idea of writing programming-related posts (kind of like this but way briefer), about any projects I work on. I could also use this blog to promote DJ-related stuff that I do. Things have slowed down due to school, but I'll find some time between breaks.
Honestly though, I hope I don't use it for politicking; I think there's too much that in the world, on Facebook and Twitter especially, and I'd like to keep updates on here specifically related to me.
Did anything else change?
Some minor changes are listed here:
- All the icons are now powered by the new Font Awesome 5, which is still plenty awesome, but with way more icons.
- The banner images at the top are all new (two of them from my recent Japan trip). Also it's no longer a sticky banner, so it scrolls regularly now.
- I consolidated my web and game projects into a single Projects page. That page hasn't seen any update in a while, but I've got stuff in mind for 2018...
- My Instagram feed got its own tab now. The images look way better in the new layout, but it's rather dated. Gotta work on my photos tab sometime...
- Since I moved away from Angular (the A part of the MEAN stack), the site no longer supports swiping to switch tabs. My idea with that was to have the mobile site feel like a native app, where you'd swipe with your finger to change content. It was cute, but no one knew about the feature, so I'm not sad about losing it.
So there you have it; that's what your looking at. I'm not sure who'll come to read this blog, or if they'll be other software folks, but in any case, welcome and thanks for wanting to learn about my website!
If you've got any comments about the website's features, if you have any questions about its implementation, or if you've got suggestions, don't hesitate to let me know!