Purpose
I decided that I wanted an online information page for myself. I bought a new domain, as any good project starts with. patrickc.info
I have several sites, but I have never built out my own site from scratch. Scratch is a relative term here, I will be leveraging lots of other software, but I'm not using site generators like I typically do. The hope is that I will end up with a simple, elegant, and impressive site. Static site generators are great most of the time, but I want to both demonstrate my varied abilities and keep it simple and easy to maintain (or not maintain).
The Stack
- Cloudflare providing DNS and WAF
- Hosted on my KVM server
- KVM Linux server
- Utilizes nftables/iptables rules to restrict all web traffic to Cloudflare
- OCI containers for web server applications
- Nginx and MariaDB containers
- CVS - Git with a publish post-receive hook
- HTML5 Boilerplate
- Bootstrap 5
Application
Create the Project
Create a new git project for the site. Interestingly HTML5 Boilerplate does not recommend updating the version on a regular basis. I downloaded the files and added them to the project, no CVS needed. I also decided for this project I would keep the Bootstrap 5 files static as well instead of using a Git submodule.
Setup Deployment Workflow
I setup my publishing script. This is a simple rsync that can be run from the project root to push the site files from the local machine to the KVM host.
rsync -av --cvs-exclude --exclude-from=.rsync-excludes --delete . example.com:/home/$USER/patrickc.info/nginx/config/www/
Nothing fancy here, rsync to the server. This uses the built in CVS exclusion feature of rsync to prevent it from sending the Git files. I can exclude anything else like the publish.sh script that is in the project root using the exclude file. This allows better control over what actually get's pushed to the directory being served by Nginx. The delete flag removes anything on the destination that doesn't exist on the source.
Once this was working I added a git post-receive hook to automatically publish the main branch to the server.
Site Design
Start building the site. Now that I have all the pieces in place I can start working on the site.
HTML5 Boilerplate
I went with HTML5 Boilerplate to get the basics of the page started. Even this feels like cheating sometimes. I have really tried to ditch this attitude lately though. Life and time are to short to waste on learning the best HTML meta data tags to use. Leverage the work and generosity of others and move on with the project.
With the boilerplate in place and customized for my site I moved on to another basic, the favicon. In my line of work, I see missing and misconfigured favicons in the access logs WAY to often. It's becoming a pet peeve. I wasn't going to be lazy. It took 10 minutes to learn and apply a proper configuration.
I generated a favicon using favicon.io. I went with a simple emoticon and favicon.io provides a zip file with all the image files needed for favicon, icons, and site manifest. This prompted me to look into the manifest file and learn it's for progressive web apps.
Bootstrap
Using bootstrap is going to be more difficult than I had hoped. The learning curve on using this framework is pretty steep. I bet there are people who could make careers out of this stuff 😉. While I know the basics of HTML and CSS I am pretty limited in my understanding of how it ties together for more complex projects. Bootstrap offers some really interesting and modern features that I want to leverage but the time investment for a general interest in web design may just not be worth it. Even something as simple as customizing the color scheme is requiring hours of research to understand Sass.
I know there are some nice freely available turn-key templates out there. Maybe that is a more practical solution. I want to have something that I can feel like I built but I may just not have enough time and interest in pursuing this.
Need to learn about CSS Flexbox and Grid apparently
Update:
OK, back to the Bootstrap. I'm slowly going to keep poking at this. It's probably not going to be super useful for me in the future but it allows me to create my own web page. I'm not stuck in a box so to speak, depending on themes created by others. Pelican is great but all the themes I like just feel so similar but don't have anything extra to offer.
Update:
I decided to continue using bootstrap. I have a few hours into this now. It's has been fun. It is overkill for what I am doing, but hey most of my projects are! I finally have the very simple page I wanted. It looks good and functions well. It checks all the boxes that I wanted and I wouldn't be embarrassed to use it professionally.
I knew most of the HTML that I wanted to use so I was able to get a MVP created and use that to start learning Bootstrap. I had to figure out how the grid/column system worked to get the basic structure of the page laid out.
Once I had the basic structure, I had to decide on the how to create the sidebar. I started with basic links but just wasn't happy. I then tried to use the "cards" that bootstrap provides and again just didn't like it. I settled on just using buttons for now. It took me a little while of tinkering to get these figured out but I did find something I was happy with. It was a little tricky figuring out how to get the width right and which div's to apply the helper classes to, but once I did, it came together nicely.
Wrap Up
This was another fun project. There is a certain amount of pride anytime I am able to learn and leverage a new technology like this. In this case it was using an HTML template HTML5 Boilerplate and the Bootstrap 5 framework to create a static HTML site. I don't think this project is complete yet. I am enjoying the creative process of laying out a page quite a bit. I always have enjoyed the "artistic" side of technology to a degree and using such a flexible tool like Bootstrap really enables me to do that.