12 Mar 2019

Setting up Jekyll 3.8.5 on macOS

It’s been a decade or two since I’ve updated my website so what better way to update my website by writing an article about updating my website.

I ran into a few snags trying to install Jekyll 3.8.5 on macOS Mojave so I thought I’d document what ended up working in case anyone else is running into the same issues. This post is geared towards non ruby people who are currently using or are interested in using the latest version of jekyll for their website.

Use a ruby version management tool

You might run into some permission issues if you’re using the ruby version Mojave ships with in /Library/Ruby/Gems/2.3.0/. We want to avoid using sudo whenever possible, I prefer rbenv because it’s lightweight, simple, and I’ve just never had any issues with it. You can easily switch versions of ruby to suit your needs.

Install rbenv with homebrew

brew install rbenv

Once you have rbenv installed, you can then install the latestish version of Ruby:

rbenv install 2.6.1 (*note: this can take a while, the first time running this I thought it had froze but I just had to put my patient pants on)

Then set your ruby version with the following command:

rbenv global 2.6.1

Restart terminal and type ruby -v, you should see something like:

ruby 2.6.1p33 (2019-01-30 revision 66950)

Now we’re ready to install jekyll!

gem install bundler jekyll

Make sure you’re on the right path

If you use Oh My Zsh you can simply add bundler and rbenv into your plugins array.

plugins=(
  brew bundler rbenv
)

This should automatically get the correct paths into your shell. Otherwise make sure your path is set in your .bash_profile/.bashrc/whatever file (i.e. export PATH="$HOME/.rbenv/bin:$PATH"), optionally you can add eval "$(rbenv init -)" which will add autocomplation (among other things).

Let’s start a new site!

$ jekyll new tony-danza-fanclub-site
$ cd tony-danza-fanclub-site
$ bundle exec jekyll serve

You should now be able to see your site at http://localhost:4000

Morgan Freeman Holding Cotton Candy
Great success!

Troubleshooting common errors

  • If your installation is in a wonky loop run gem install bundler (in a folder that outside of your project that doesn’t have a gemfile)
  • Then run bundle install in your website’s directory to make sure you have all latest dependencies

Hosting

I recently moved my site to Netlify because it makes setting up a continuous deployment process pretty painless. When I push my site to github it automatically deploys the updates to the server. It works flawlessly and it’s great not having to fiddle around with a continuous integration service or complex rakefile to handle the deployment.

12 Feb 2014

Launch a quick local PHP server in Mavericks

Oftentimes when I’m prototyping a website or just want to tinker I’ll launch a quick local server through the terminal with the following:

cd ~/Sites/MyWebsite
python -m SimpleHTTPServer

You can then access the website at http://localhost:8000.

OS X Mavericks shipped with PHP 5.4 which introduced a handy built-in web server. You can start a PHP server with the following command (hat tip @davatron5000):

cd ~/Sites/MyWebsite
php -S localhost:8000

Keep in mind this isn’t a full-featured PHP web server with .htaccess support or MySQL, but you can plop in <?php include("header.php"); ?> and that sort of thing. It’s perfect for testing and situations where you need to fire up a quick demo.

I find myself using this feature nearly every day so I created an alias for it. You can do this by adding alias srv='php -S localhost:8000 to your .bash_profile. This way you can simply type srv to fire up the server. Many times I’ll have multiple projects open and need to start a server on a different port so I also have the following function in my .bash_profile:

function serve {
    php -S localhost:$@ | 
    open -a "Google Chrome" http://localhost:$@
}

Then you can, for example, type serve 8888 in the terminal and this will start a server and also launch a chrome window at http://localhost:8888.

10 Jun 2013

6 photoshop plugins for web designers

I know a lot of folks are moving away from designing sites in photoshop and going straight to designing in the browser. I still like designing and coming up with rough comps in photoshop. I don’t spend as much time getting things “pixel perfect” in a 960 grid as I did in the past, however, I like to design interfaces, color schemes, buttons, and come up with the overall look and feel of a site before moving to the browser.

Lately I’ve been using a handful of plugins that improve my web design workflow. Here are a few worth checking out:

###CSS3Ps CSS3PS CSS3Ps is a handy tool that converts your layer styles into CSS3. It works really well for quickly grabbing gradients, borders, box shadows, etc. It doesn’t always turn out perfect, but gives you a nice starting point. And for Sass users, it can spit that out as well.

Engima64

Enigma 64 Enigma64 exports your photoshop layers to losslessly optimized images but even cooler is it’s ability to export and encode your images to Base64. $20 ain’t too shabby for the amount of time it can save.

Web zap

Web zap Web zap aids in creating website mock-ups by giving you the ability to generate common interface elements with the click of a button. It generates lorem ipsum text and common layout patterns with ease. It also has a nice preview feature that will take your design and put it in an iPad/iPhone, etc.

FontShop Plugin

FontShop The FontShop plug-in gives you the ability to test out and preview a massive amount of fonts in your mock-up. It can be extremely useful if you use TypeKit as a lot of the fonts in TypeKit are in FontShop as well.

Corner Editor

Creating rounded corner boxes in photoshop is easy, however, if you’ve ever tried to resize them you’ll know that the corners don’t maintain their radius and become distorted. Corner Editor is a simple free script that makes working with rounded borders in photoshop much less frustrating.

Transform Each

I always wished photoshop had a “transform each” option like in illustrator. Luckily, Kamil Khadeyev wrote an awesome little script that brings that feature into photoshop. I highly recommend checking out his blog for other useful PS scripts.