Category: blog


Adding Basic Auth to site on Laravel Forge

By patrickg,

Here I am going to outline how I added basic auth to my build environment for this site. I switched servers to run on Laravel Forge, and the only instructions I could find for how to do this were several years (and versions of Forge) old. I know the server is running nginx, and I know how to do this manually, but I don’t want to go around any infastructure Forge has setup and hamfist it.

Generate htpasswd

First thing you need to do is generate your htpasswd file. Head over to http://www.htaccesstools.com/htpasswd-generator/ and enter in a username and password. The result will be a single line string separated by a colon. Copy that entire string and keep it handy.

Create htpasswd file

Next, SSH into your server, and create the file .htpasswd
I created mine in /etc/nginx/

cd /etc/nginx
sudo nano .htpasswd

paste in your generated authorization line here

ctrl+x and then y to save the file.

Edit nginx config

Next go to your Forge dashboard, and go to your specific site. At the bottom of the screen there is a grey button/pill/badge labled files.
Click that, and then edit nginx configuration.

After that, you need to add two lines to your configuraiton file. Be careful not to disturb anything you are unsure of. Find the top of your server{} block and you need to add two lines. The first, the directive to restrict content and display the message of the alert box. The second line, is the path to your .htpasswd file.

auth_basic "Restricted Content";
auth_basic_user_file /etc/nginx/.htpasswd;

If you want to do this with multiple sites, you should name your files something more recognizable, such as sitename.htpasswd and then reference those specifically in your settings.

3D Printing a replacement ball joint for phone holder vent mount

By patrickg,

This thing has been driving me insane for the past several months. Don’t know where/when I got this phone holder, but the thickness/spring weight of the holder just feels right when I place the phone in it, and it holds the phone firm.

super shitty thin stamped grippy tongs that hold the vent

 

The problem, is the super shitty thin stamped grippy tongs that hold the vent. Over time, they have become loose and lost a lot of their grip. Recently, I purchased a “new to me” Volvo which has been an absolute thrill to tinker on/with. Turns out Volvos don’t come with an armada of cup-holders, leaving me in a situation of having to decide where to put my phone when it’s time for coffee.

The difference invent-slat thicknesses of new car vs old, has just brought this problem to a head. So I set out to 3D print my way into a better situation. I started by taking apart the old mount, and isolating the problem component. The ball end of a ball joint, and the stamped tongs. I measured the ball and neck using calipers and re-created it in Tinkercad.

I made the print with supports and it came out wonderfully. Big thanks to my Ender 3 Pro, which I have been nothing but impressed with thus far. So I printed this thing out, the ball fit, the collar fit and screwed, and everything was going swimmingly until….snap.

Turns out that printing this vertically setup critical weak points in the neck of the ball joint.

Critical weak point

Giving it some thought, I decided to not only get rid of the neck, which wasn’t really needed anyway, and also change the orientation of the print to horizontal, since the stresses would be working against the grain of the print.

The result has been amazing so far. I got lucky with the vent slats doing a tight fit on the first try, but more over, the ball joint and neck are very strong, and tight.

 

 

View on Thingiverse

CircleCI is cool and all, but let’s just roll w/ GH pages

By patrickg,

I cant spend a TON of time playing with new stuff, not as much as I would like. I got to try out circle CI to the point of getting to work and getting to understand HOW it works, which is the most important take away really.

The upsides are that I am not familiar with another weapon in the development arsenal. I believe, however, that it is overkill for my meager purposes of simple deployment. I have decided to just stick with pushing directly to GH pages and serving the content from there.

 

 

Testing a CircleCI deployment

By patrickg,

I’m gonna get this damn thing going eventually.

 

Run this maf wide open for processing and export and see if it goes a little bit faster.

Site Updates

By patrickg,

Lots of new features added this time around.

Added breadcrumbs for interior non-home pages. Also added a fun nugget to auto-create side column menus for subpages when they exist. So I will setup my about page with some subpages, check it out. Still trying to tweak it to show sibling pages. right now it is just showing children of the parent. I’ll get to it. Calm down.

Update

Fixed the subpages menu dealy. Also added some logic to only display breadcrumbs when there are breadcrumbs. So no empty container for top level pages.

Ditched reactjs and netlify, went back to WordPress.

By patrickg,

I know I know. I had spent a good month or two learning react + netlifycms + bulma + react-bootstrap and more. Attempting to get better with it and build as I learn. But god damn, I guess I am just impatient, or something. React is really cool. Don’t get me wrong, but as my desires shifted toward wanting to create content and less toward wanting to solve a technical problem to create new content, I decided to just say fuck it, and go back to what I know.

WordPress sucks. This post was written in WordPress. But you are not reading this post on WordPress. You are reading a optimized, minified, git-versioned static generated deployment of my site. WordPress without letting the public touch WordPress is really cool. Despite all I learned with react and netlify, which to their credit is a really cool service and really cool interface, I just really prefer this environment for writing.

 

Updates to the site

By patrickg,
I have had to re-do the navigation, found a react-bootstrap port, and searched out, and utilized my first npm plugin, gatsby-plugin-favicon, to automatically generate my favicon stuff.
Learning curve aside, I have to say, this has been a very rewarding and fun experience. I look forward to continuing to learn here.

Building a new site with Gatsby and NetlifyCMS

By patrickg,

This is not fun. Just kidding. Well, sort of.

 

 

Coming from what I will call WordPress-Privilege, it’s been stupid easy to point, click, mash some buttons, and have a full site up and running in minutes. So it’s a bit of a jump for me to switch to using not just a non-php based blogging system, but it’s also using a static site generator called Gatsby, which is also using NetlifyCMS to manage the posts/pages, deploying and building from github commits, and I have very little experience using react. So, to say I am out of my element is an understatement. However, some hunting around, fiddling with the code, and several failed builds later, I think I get it.

 

First Thing I Did

 

So the first thing I wanted to do, was mimic a feature of my WordPress static site, which was a “repo” for snippets, or ideas, or whatever. Basically a site-contained twitter that could be blurbs, ideas, or code to use later. In WordPress, this was simple as using custom post types, and advanced custom fields to setup the meta interface and like that, you are off to the races.

 

Well in Gatsby and NetlifyCMS, it is a little more complicated. Editing the config.yml (for NetlifyCMS) in the demo project I started with, yielded some clues. Instead of “post-types”, we have collections. Which is a more universal name for the idea of a grouping or _collection_ of data (read: posts), but I’m still drawing the analog to WordPress here so bear with me. So I copied that whole block of settings, duplicated it, and change the names. In doing so I discovered the folder path, which didn’t exist yet. So That was clue #2, had to create a folder. Since my collection would mimic the blog, I needed to mimic it’s layout. Unfortunately the template came with initial blog posts, but no dedicated “blog index” (more on this later), so I was unsure how to display a page with just my custom collection.

 

Second Thing I Did

 

Look at the site, look at the code, look at the CMS, now look back at me. The blog posts were being displayed on the index page, so naturally I should be able to copy that page and use the code (albeit modified) to display my collection elsewhere. Bunch of stuff here, lots of react specific features that I had no clue what I was looking at. I went carefully, block by block, read it, try to gather a context of what was going on, and change what needed to be changed based on my custom collection naming scheme.

 

Third Thing I Did

 

So after I broke the build a few times trying to load two collections on one page, I decided to go about this another way. I don’t know enough about react to try an advanced GraphQL query and parsing those results, but I can just mimic the page into a second, stand alone page, and get that working. Trial and error later, I’ve learned that even on two different pages, you cant have two GraphQL queries named the same thing. Outside of that, it’s pretty simple. I mean, _simple_ as in, easy to glean what you need to know to get it to work from the context.

 

Conclusion

 

As it stands right now, Ive changed the logo, added a collection, a page, changed the sass variables, and familiarized myself with the directory structure. I’m still a ways off from being able to build a whole site from scratch, but I don’t think I am far off from ripping the guts out of this template and replacing it with my own design/layout, which will be my next challenge. I see lots of image variables going on and am curious to learn more about that and how layouts work with react.