Why I Built This Website #
While I am a bit nostalgic for the Web 1.0 era of the internet that I was never a part of, I found two key reasons to take the time to build my own website. First, by creating my own website, I have a permanent, controlled space on the internet to showcase my work. As social media sites rise and fall in popularity, I will not need to worry about migrating my portfolio to new platforms. Second, it was an opportunity to gain hands-on experience with industry-standard tools like static site generators, Nginx, and Git. Although I did enjoy using the ancient version of Adobe Dreamweaver that we had in my high school, I figured it was worthwhile to invest the time in more modern tools.
Developing My Website: From Concept to Completion #
For this project, I knew that I wanted to use a static site generator. I had previously used WordPress to develop the Depew Engineering website, but found it difficult to make changes to the finished site, which made me reluctant to add new content. I also knew that a static site would help me avoid the complexities and security vulnerabilities of a LAMP stack app. Hoping to get up and running quickly, Hugo was an ideal choice for its speed and excellent templates.
To serve the site and learn more about web servers, I chose to use Nginx. I have been impressed with its performance so far and look forward to learning more about its use as a reverse proxy. To track my changes, I chose to use Git. I had exposure to Git through my work in engineering. It seemed like the perfect tool to track my changes (and reverse my changes when I ran into problems).
I began by looking through available Hugo themes. I liked the simplicity of the Blowfish theme and its fully flexible homepage layout. With this theme downloaded and updated with Hugo, I initiated a bare git repository on my local machine and began making incremental changes to the website. Next, I bought my domain name and looked for cloud servers to build my application on. Even though I liked the sound of “ndepew.net” and “ndepew.xyz,” I settled on the more straightforward “ndepew.com.”
The most complex part of the project was setting up the server. I wrote a Git post-receive hook to push my local changes to the server, but ran into multiple permission errors. After getting the file permissions in order, I encountered a puzzling issue where changes I made locally were present in the HTML my server generated through Hugo, but were not reflected in the website’s content. As it turned out, Nginx was serving an older version of my website! With this error corrected, I was finally able to update the content on the live website.
Lessons Learned #
This project allowed me to learn new technologies and hone my Linux command line skills. I plan on using static site generators on future projects, including a revision of Depew Engineering’s website. Additionally, I got hands-on experience with industry-standard tools like Git, Nginx, and Hugo. Finally, I learned the importance of a robust workflow. Now with my Git post-receive hook, I can focus on the content of my site while ensuring a programmatic approach to managing it.
Recommended Resources #
- Hugo in Action by Atishay Jain was a great resource on Hugo and helped me understand the JAM stack versus the LAMP stack architectures
- Building a static website in Markdown with Hugo by Christian Lempa was a great showcase of the Blowfish theme and Hugo in general
- The Well-written Hugo Documentation