Ask DN: The tech behind your portfolio?

over 3 years ago from , johnkarlsson.se

I'm curious to hear about the techy parts of your portfolio since I'm in the midst of a refresh myself.

The plan: * Static portfolio using HAML+SASS * Manage code through GitHub * MediaTemple Grid + Cloudflare CDN

I've been looking at DigitalOcean instead of Mediatemple but I'm not sure how they compare, thoughts? What setup do you use for your portfolio?

54 comments

  • Lewis FludeLewis Flude, over 3 years ago

    Jekyll

    10 points
  • John Karlsson, over 3 years ago

    (I wish there was an edit button so I didn't have to live in shame because of my markdown fail)

    7 points
    • James StiffJames Stiff, over 3 years ago

      Or a markdown preview? Thought it was possible to edit but maybe I'm mistaken.

      Anyway. I'm thinking along similar(ish) lines for my portfolio. Planning on using mixture.io for front-end dev and hosting. Not sure which boilerplate yet.

      1 point
  • Jim SilvermanJim Silverman, over 3 years ago

    i use plain ol' html/css. why complicate things?

    5 points
    • Al HaighAl Haigh, over 3 years ago

      I think a lot of people like to experiment with their personal websites, and the technology behind them. Hence the number of people utilising VPS and serving images through CDN's etc They don't NEED to, it's they WANT to :)

      0 points
  • Daniel EdenDaniel Eden, over 3 years ago

    Here we go.

    • Jekyll running the show
    • Grunt running the not-so-fun-but-makes-the-difference tasks, including:
      • SVG optimisation and conversion to PNG
      • Sass/Compass compiling
      • CSS fingerprinting
      • CSS compression
    • GitHub as the central repo
    • RamNode hosting (affiliate link. I’m greedy. They’re brilliant.)
    • Varnish cache
    • CloudFlare CDN
    • Responsive images via ReSRC

    You can find out more at the repo.

    4 points
    • Tim GauthierTim Gauthier, over 3 years ago

      why convert svg to png?

      1 point
    • Ryan LeFevreRyan LeFevre, over 3 years ago (edited over 3 years ago )

      Purely out of curiosity... if your site is open-source already with Github and made with Jekyll, why pay for the hosting when you can host it for free with Github Pages? You wouldn't have to worry about Varnish and probably CloudFlare too.

      1 point
      • Tiago DuarteTiago Duarte, over 3 years ago

        I was curious about this as well so I did some digging and I found this on the Github repo of the site:

        Why aren’t you hosting this on GitHub? While GitHub lets you host Jekyll-powered sites directly on GitHub itself, they don’t allow many custom Jekyll plugins. They also don’t allow executable code such as PHP, which is pretty vital to many parts of the site.

        0 points
        • Parker MooreParker Moore, over 3 years ago

          The idea behind Jekyll & GitHub Pages is that there's nothing dynamic – no PHP or database. Your files are used by Jekyll to create pure HTML/CSS/JS – nothing dynamic on the server side. You gain so much, including incredible speed. I would highly, highly recommend GHP. Feel free to reach out to me if you have questions -- just mention me on GitHub: @parkr.

          0 points
      • Daniel EdenDaniel Eden, over 3 years ago

        See Tiago’s comment. Also, my site isn’t the only one running on the server, and I like having control of my own VPS.

        0 points
  • Andrew McCarthyAndrew McCarthy, over 3 years ago

    Jekyll & GitHub Pages

    3 points
  • Minhaj MuhammadMinhaj Muhammad, over 3 years ago

    Simplicity.

    http://minnixio.com/

    2 points
  • Joe BlauJoe Blau, over 3 years ago (edited over 3 years ago )

    If you're making a static site, you can host your site on GitHub using the static pages.

    Here is my site: http://joeblau.github.io/ (Broken on Chrome 33 for some reason that I don't have time to figure out)

    Here is my code: https://github.com/joeblau/joeblau.github.com

    1 point
    • Tiago DuarteTiago Duarte, over 3 years ago

      I've just submitted a quick pull request that should fix the issue you're having :)

      2 points
      • Joe BlauJoe Blau, over 3 years ago

        I merged your PR and it's still not working.

        0 points
        • Tiago DuarteTiago Duarte, over 3 years ago

          Hmm the layout's occupying the full screen now here, is there any other issue?

          0 points
          • Joe BlauJoe Blau, over 3 years ago

            The content isn't being rendered on Chrome 33. If you visit the site in Safari, Firefox or Opera, you actually see the projects - In Chrome 33, you do not.

            0 points
            • Tiago DuarteTiago Duarte, over 3 years ago

              Hmmm this must be some issue with your AngularJS code, it's not grabbing the projects and it's throwing these errors on the console:

              http://cl.ly/UJxJ

              Sadly I'm not skilled in AngularJS so I can't help you with that!

              0 points
              • Joe BlauJoe Blau, over 3 years ago

                It's all good. This isn't the first time a Google Web Browser update has broken code that works in all other browsers. I'm working on some other projects so I'm just gonna let it ride out.

                0 points
  • Jon GoldJon Gold, over 3 years ago

    Jekyll + S3

    1 point
  • Tor Løvskogen BollingmoTor Løvskogen Bollingmo, over 3 years ago

    Squarespace.

    1 point
  • Jonathan YapJonathan Yap, over 3 years ago

    If you are going to try out DigitalOcean, it will be easier if you have experience working with VPS. But having said that, they do have lots of support and tutorial on how to get it up and running.

    Been learning ruby recently and might try that approach in my next refresh. Currently running LESS + Hammer.app + Bitbucket -> VPS deployment + Cloudflare CDN + S3 for statics.

    1 point
  • Weston VierreggerWeston Vierregger, over 3 years ago

    Static. Writing regular ol' CSS and HTML in SublimeText (with productivity plugins like the SFTP plugin and Emmet) and JS/jQuery snippets for anything "fancy". That's it.

    I host on DigitalOcean. I love it for the simple fact that I now know how to manage my own VPS. It's really simple and the price is fantastic. For a static site, though, you can even use Amazon S3 for free if cheap is what you're after.

    1 point
  • Jon KantrowitzJon Kantrowitz, over 3 years ago (edited over 3 years ago )

    Nothing fancy here, just some good ol' HTML, CSS, JavaScript, love, and many cups of tea and bottles of scotch.

    I love all these new tools and optimizations that many have listed here, but just seems like overkill for a portfolio.

    1 point
    • Adam T.Adam T., over 3 years ago (edited over 3 years ago )

      Amen. CSS + HTML + JS is the recipe for me. Almost diminishing returns to get so tech on small websites IMHO.

      0 points
  • Ryan Hicks, over 3 years ago (edited over 3 years ago )

    I'm redoing mine right now.

    Basic static pages using foundation 5 as underlying framework, authored with sass and compass using sublime text, and blog is using wordpress. Nothing special as I am not that experienced in coding. In the near future I want to try out jekyll or kirby.

    1 point
  • Matt SoriaMatt Soria, over 3 years ago (edited over 3 years ago )

    If you're going the static route, but you'd like the convenience of a simple CMS as well, give Statamic a try! I used it for a recent redesign of my portfolio site and loved working with it, and I still do.

    Here's what I'm working with (on mattsoria.com):

    • Statamic
    • Sass+Compass
    • Github+Deploy (automatically deploys my commits)
    • MediaTemple Grid

    I wrote a little more about my process and things I used here if you're curious :)

    0 points
  • Manik RatheeManik Rathee, over 3 years ago

    Jekyll (static) with HTML, Sass & JS - >Github -> dploy.io to Mediatemple with Cloudflare

    0 points
  • Jamie MartinJamie Martin, over 3 years ago

    Tumblr :)

    0 points
  • Lee MunroeLee Munroe, over 3 years ago

    I just moved my blog/portfolio to Jekyll & GitHub Pages. Was migrating from Wordpress. Seamless. Also using SCSS and Grunt.

    Wrote about it here http://www.leemunroe.com/moving-wordpress-dreamhost-to-jekyll-github/

    0 points
  • Bardan Gauchan, over 3 years ago

    Squarespace fo life! Hehe.

    Seriously though, Squarespace is awesome but I'm probably gonna tackle my custom-start-from-scratch portfolio this year.

    0 points
  • Parker MooreParker Moore, over 3 years ago

    I use Jekyll & Sass. I was using PHPMultiMarkdown with markdown files being included and transformed at every page load, but it's a static site so it made the most sense to just compile the HTML & CSS ahead of time for maximum performance. I compile the Scss ahead of time and Jekyll takes care of the rest. On a Rackspace box with Nginx right now but likely moving to GitHub Pages sometime soon.

    Mig Reyes (http://mig.io) inspired me to try this approach and I love it!

    0 points
  • Jordan IsipJordan Isip, over 3 years ago (edited over 3 years ago )

    In the past I've used Rack to host a static site on Heroku for free and take advantage of quickly deploying to heroku via Git. I also had SASS installed and used Cloudflare CDN. I put together this simple repo as a starting point for this setup: https://github.com/jordanisip/static-rack-sass

    Having said that, however, I recently moved everything to Squarespace to focus on content rather than design. Their tools make it super easy to manage content and in the past I had an overwhelming tendency to redesign my entire portfolio every time I had the urge to update content...

    Update: After reading other comments, looks like GitHub Pages might be an easier way to handle the Rack + Heroku approach: http://pages.github.com/

    0 points
  • Joshua SöhnJoshua Söhn, over 3 years ago (edited over 3 years ago )

    My portfolio is plain html + sass compiled with Hammer to use html includes and stuff.

    The thing about hammer is that after I compiled the whole thing I had to change links because I want clean urls without the .html at the end. So next time I will use another solution.

    0 points
  • Matthew SaforrianMatthew Saforrian, over 3 years ago

    My portfolio

    • Jekyll, but since I haven't relaunched my blog yet there isn't much it is doing.
    • Compass/SASS, I used bourbon to build it but will drop it when I get to working on it again.
    • Github for revisions of course.
    • Amazon EC2 micro reserved instance because I find myself needing a Linux box in the cloud from time to time.
    • Nginx because it's easy to setup.
    0 points
  • Falko JosephFalko Joseph, over 3 years ago (edited over 3 years ago )

    I'm working on it, but here's my setup:

    • CodeIgniter PHP framework mainly for routing and re-usable templates
    • Semantic HTML5 with Schema
    • SASS
    • jQuery
    • Github / Dribbble API
    • Google Analytics
    • Afterbust VPS hosting
    • Namecheap domain

    I'm done with hacking WordPress with a bunch of plugins for a simple portfolio, I find myself better off coding it manually.

    0 points
  • Seth KaskySeth Kasky, over 3 years ago (edited over 3 years ago )

    My portfolio is made with:

    • Compass / SASS
    • Susy Grid
    • Typekit
    • Dreamhost Hosting (I plan on changing that soon)
    • Static pages with php includes
    0 points
  • Jake Lazaroff, over 3 years ago

    My portfolio (which is long overdue for a refresh) is made with static HTML, CSS. Most of the interaction is JavaScript-based, using jQuery and yepnope (try visiting it on a mobile device; it's not responsive, sadly). The contact form just pings a simple PHP mailer script.

    As far as hosting goes, I've been a happy customer of NearlyFreeSpeech for a few years now (https://www.nearlyfreespeech.net). They don't support persistent processes (Rails, for example) but their usage-based pricing allows me to pay around $4 or $5 a year for hosting.

    Check it out: http://jakelazaroff.com

    0 points
  • Tim GauthierTim Gauthier, over 3 years ago

    i'm using kirbyCMS with bootstrap for css framework, I hacked up a 1page design. I stripped a lot of the bootstrap css out. The site sucks I haven't really worked on enough recent projects for it to have any good content, and it lacks a direction/use. So I ignore it. I have a blog with my fiancée about the other stuff we do and so that is a bit more active. Also kirbyCMS based.

    Though i am currently playing with ember.js and spending some time learning new stuff, so I may change it all in the next months.

    0 points
  • Ricky SynnotRicky Synnot, over 3 years ago

    Before anything, I imagine the site using a pencil and paper. I prove through rough drawing and sketching how the pages will look at various widths, and what content should be on them. I can see an overview of the whole site in 5 mins this way.

    First - I install Wordpress locally with MAMP Pro on my Mac. (See Chris Coyier's videos on setting this up).

    Next I install the Bones theme from @eddiemachado.

    Then, I start up Codekit, Sublime Text and Chrome, and build the site in the browser, responsively. Checking all the time, that the site is looking reasonably good at any screen width.

    Once Im happy with the basic framework, I'll start to include some bells and whistles. Typekit works really well, and some Wordpress plugins for lazy image loading etc.

    While this is happening, I'll set up the real host. Im in Australia, so I use Ventra IP. They're ICANN accredited and on T1, so its blindingly fast compared to MediaTemple. They're requests are like 25-30ms, whereas MT was coming in at 220 - 280ms for every request. So slow!

    I use Sourcetree and Bitbucket to commit my changes from this point up to the live site, but its still protected from public view. I use FTPloy to handle the deployments.

    When Im happy with a build on the live site - its ready to roll!

    With Ventra IP I don't really use a CDN as I have in the past, don't seem to need it as yet for a portfolio. But If I did, I'd re-engage my Amazon Cloudfront account for the image hosting.

    I do remote weekly cPanel backups to Box.com, and a daily BackWPUp backup of the database and uploads to Box.com via FTP too.

    0 points
    • Tim GauthierTim Gauthier, over 3 years ago

      why do you use wordpress? I find it so bloated and overkill for literally any project.

      0 points
      • Ricky SynnotRicky Synnot, over 3 years ago

        I see what you mean - but as a starting point, its pretty solid in my view. Generally, the sites Im doing need some type of custom post type, or the Advanced Custom Fields plugin to come to life. Like drink or food recipes, or something.

        Allowing my clients to have full control over the contents of the pages, in a limited way based on their user role is great. I can also then leverage the plethora of 'how to' articles about wordpress, and send them links.

        As the CMS is the same base, I can field telephone calls from clients, and basically just sort out the problem over the phone, as i know the interface they're looking at off the back of my hand.

        It's dead easy to set up caching too - which essentially renders out HTML pages for the public view. I also just import my Cloudfront CDN config file, which just sets up the attachment loading from the start.

        Really, it may feel like there's 'a lot on the table' while the site's being built, but so much comes off and never makes it to the end visitor.

        0 points
  • Dave BDave B, over 3 years ago

    Jekyll with Sass deployed to Digital Ocean behind nginx (I'd love to use GitHub pages however I have created a few plugins which aren't supported). I deploy to DO using capistrano from my local machine.

    0 points
  • Orta TheroxOrta Therox, over 3 years ago

    Jekyll + github pages + s3 for images.

    0 points
  • Paul MacgregorPaul Macgregor, over 3 years ago

    Hand written (badly) HTML, CSS & Javascript / jQuery.

    Hosted on MT Grid.

    I do at least have an array in my JS to update projects easily, but that's about it for any kind of CM.

    0 points
  • James Young, over 3 years ago (edited over 3 years ago )

    My portfolio is a standard WordPress install using a theme ("Vintage") I built myself based on my "Barebones" developers base template.

    I actually recently rebuilt/refactored it to convert to Sass

    Hosted on MT Grid for years and I do all my local stuff just using a simple setup with Mamp and FTP.

    0 points
  • Dustin DelatoreDustin Delatore, over 3 years ago

    I use Muffin. It offers stages of development on what you are looking for.

    A quick install for: - Bootstrap - Font Awesome - Jekyll - Sass - Even Grunt if you're in that

    I then publish to S3 and Cloudfront through a S3_Website.

    It works like a charm. Easy and fast from step 1 to push.

    0 points
  • Oscar MarceloOscar Marcelo, over 3 years ago

    oscarmarcelo.com

    • WordPress (until I finish my own CMS)
    • Google Webfonts for Source Sans Pro
    • Google Analytics
    • Facebook's OpenGraph
    • Instagram API
    • Sass with Bourbon (until I finish my own framework)
    • RWD and Retina-ready
    • SVG (on recent pages)
    • HTML5 and CSS3
    • Javascript with jQuery
    • Illustrator
    • Sublime Text
    • Prepros
    • Chrome (and Inspector)
    • Filezilla
    • HostGator Baby
    • and... huh... still Windows.
    0 points