Creating New Portfolio Site... What static site generator should I use?

9 days ago from , Designer at Small Design Studio

Im looking for create a new portfolio site. Want something super simple. Im keen to learn something new.

Hear a lot about Jeykll. In the past I'm used to making wordpress themes etc.

Where is a good place to start?

52 comments

  • Ken M (No, not that one)Ken M (No, not that one), 9 days ago

    None. Write your own code in a text editor and send it up to your FTP server. :)

    30 points
    • Connor NorvellConnor Norvell, 9 days ago

      Agreed with Ken here. IMO a static site generator, though simpler than a CMS, is still more complicated than most people need for a simple portfolio. I just hand coded mine and it was a great process!

      3 points
      • Gareth LewisGareth Lewis, 8 days ago

        I'd say that will Jekyll, you are still pretty much hand coding your site. But it makes some things so much easier - even if you only use it for 'includes', it makes your code more reusable and maintainable.

        You could structure your portfolio of work in a data collection, and have Jekyll automatically generate new pages, not having to manually create new pages, copy and paste header, footer, and general page structure, etc.

        Just make sure you get rid of the default theme, build your own and be creative :-)

        8 points
        • Matt KevanMatt Kevan, 8 days ago

          Agreed. You have the freedom, speed and flexibility of a hand-coded site, but are also able to work with data and automate the tedious bits like with a dynamic site. And with a headless CMS service like Forestry, Contentful or Netlify CMS you also get the friendly editing environment of a traditional CMS.

          5 points
          • Glenn McCombGlenn McComb, 6 days ago

            Yep, as someone who's built a site both hand-coded from the ground up, and using a static site generator, the convenience that an SSG affords you is very nice. Months or years down the track I would often need to re-familiarise myself with my codebase in order to make updates and it resulted in me updating less often than I would have liked. Now I'm using Hugo and Netlify CMS and I won't need to touch any code in future when I want to make updates.

            1 point
    • Artur Jouk, 8 days ago

      Super simple? Squarespace. Less simple, but awesome and scalable (will give you some independence too)? Webflow.

      0 points
    • Alex CampAlex Camp, 5 days ago

      Agreed. I just did it for my refresh, all html/css. http://alexcampdesign.com

      0 points
    • Ben MJTBen MJT, 43 minutes ago

      Sounds like a dreadful idea in terms of maintenance.

      0 points
  • Matt KevanMatt Kevan, 6 days ago

    Jekyll is great, I use it for my own portfolio site.

    With a few other services, Jekyll allows you to build and host a pretty complex site for only the cost of a domain name. Here's what you need:

    Jekyll – Create your own theme or use a ready-made one. You could also use Hugo if you want something a bit more advanced.

    Bitbucket – Keep all your site files in Git.

    Netlify – Hosting. The free tier is fine for a personal site.

    Forestry – Web based CMS backend for your static site. Again the free tier is fine.

    Just point Netlify and Forestry at your Bitbucket repo, add your custom domain – and hey presto, a super-fast, content managed site with none of the headaches or maintenance needs of something like Wordpress.

    Any edits or posts you add in Forestry will be committed back to your repo. Netlify watches your repo and automatically pulls new commits, running a Jekyll build command each time to update the site.

    You could also use Github Pages. It's free and simple, but has limitations in that your repos are public if you don't have a paid Github account and you're limited to a few Jekyll plugins.

    15 points
    • Dimitrie Hoekstra, 4 days ago

      Try out GitLab pages, none of the restrictions and use whatever generator or code you want. GitLab's own info website is built with it.

      3 points
      • Matt KevanMatt Kevan, 4 days ago

        Yeah, I tried GitLab a while ago when I was looking at a bunch of different options, before settling on the stack above.

        GitLab would take hours to complete the build process after each commit. Sometimes overnight. After a bit of back-and-forth with support we chalked it to something to do with shared runners and the overall system load. I'm sure it's better now but I decided at the time it wasn't reliable enough to use day-to-day.

        0 points
        • Dimitrie Hoekstra, 3 days ago

          That's while using free shared runners. You can always use your own computer to compute your pipeline jobs :wink:

          Still generally it should take well under a minute or 2 these days.

          0 points
  • Taj Rahman, 8 days ago

    I've been using Jekyll for a couple years now but building my new portfolio using Middleman. :)

    9 points
    • Alex HoffmanAlex Hoffman, 8 days ago

      Middleman is incredibly easy to spin up and gives you a TON out the gate. Coding your own like Ken M mentioned is fine, but if you want to leverage things like Sass, auto-prefixer, auto-reload, minifying, gzip...Middleman just gives you that. You can still hard code every file if you want to, still easier IMO then spinning up your own site from scratch.

      3 points
    • Steve Berry, 8 days ago

      Thumbs up for Middleman app. My site Thought Merchants runs on it. It provides for so much more flexibility and customization over Jekyll and you can still host it for free on GitHub Pages.

      The downside is you need to know how to code a decent amount to extract that value.

      1 point
    • Mattan IngramMattan Ingram, 8 days ago

      Can you go into some more detail why you switched?

      1 point
      • Taj Rahman, 8 days ago

        Alex and Steve have covered pretty much why I switched haha. Sure, Jekyll can do most of those things but from my experience it required me to set up Gulp/Webpack or install more Ruby gems to do stuff like auto-reload, auto-prefixer, minifying, etc. This is my first project using Middleman and I really like it!

        Still have love for Jekyll though ❤️

        1 point
        • Mattan IngramMattan Ingram, 7 days ago

          Thanks! Yeah I've been postponing building a proper Gulp or Webpack for my Jekyll site, I'll take a look at Middleman.

          0 points
  • Brian FryerBrian Fryer, 9 days ago

    I'm a huge fan of Gulp + Metalsmith + Netlify.

    Metalsmith is "pluggable" with a ton of community support/engagement. I've built my own static site generator from a variety of plugins to fit the individual needs of the sites I develop.

    3 points
  • Dennis EusebioDennis Eusebio, 9 days ago

    I've been using Middleman for a long time and it's been awesome. It helps that it felt a lot like a Rails app, but it's much easier to get started with.

    One generator I've been eyeing is Gatsby. It seems promising, but I'm not quite sure if I'll see any real speed increase over just a simple site using Middleman and then something like turbolinks.

    2 points
  • Suleiman Leadbitter, 8 days ago

    I would recommend either Kirby or Grav. Checkout their documentation pages and see how you feel about them, but I highly recommend both :)

    2 points
  • Paul @StammyPaul @Stammy, 7 days ago

    +1 for jekyll, hosted on S3/cloudfront! been using it for my site for about 7 years now: https://paulstamatiou.com/

    1 point
  • Jonathan SimcoeJonathan Simcoe, 7 days ago

    Statamic is da bomb!!!

    1 point
  • Stephen Kempin, 7 days ago

    Just a general related question - any thoughts on using a JS framework like React/Angular/Vue over a static generator? Would there be any performance differences?

    I know these would be more complex, but is there anything these could offer for a portfolio that a static site generator couldn't?

    1 point
  • Luke James TaylorLuke James Taylor, 7 days ago

    +1 for Jekyll. I use it for my personal site: http://lukejamestaylor.com. And a couple of other projects.

    1 point
  • Ste GrainerSte Grainer, 9 days ago

    I've heard good stuff about Hugo, particularly in comparison with Jekyll. Seems like after a point, Jekyll slows down a lot.

    Sara Soueidan wrote about migrating from Jekyll to Hugo recently, with some points of comparison as well as pretty helpful tips on setup.

    1 point
  • Gareth LewisGareth Lewis, 9 days ago

    I've written my own site using Jekyll, which I think is great. It's got a nice shallow learning curve to it. You are still pretty much hand coding your website with Jekyll, but you get a lot of nice features with it that makes life a lot easier, and will also make your site easier to maintain.

    If you are looking for the latest and greatest, GatsbyJS is a React based static side generator, and it looks really cool... but I'd say the learning curve is steeper, and the documentation for it is not as good as Jekyll. But it's brand new, that will likely change in the near future.

    I'd go with Jekyll.

    1 point
  • Bruno MarinhoBruno Marinho, 8 days ago

    u can just use codekit or hammer to help u compile everything into static files but at least you can take advantage of templates.. jekyll is also another option but I would assume that as a designer you would not want to deal w terminal code.

    1 point
  • Ismael Branco, 5 days ago

    semplice ;)

    1 point
  • Ryan ODonnell, 7 days ago

    If you're a front-end developer, please don't use any generators.

    Hand-code it yourself.

    When I'm vetting applicants for a development position and I see that your portfolio is just a customized template or generated, it's works against you.

    I'm looking at your source code.

    • Is it logically structured? Are you considering ADA compliance?
    • Are your CSS definitions overlay nested? What do your media queries look like?
    • Is your JS clean or a patch-quilt of Stackoverflow snippets?

    I want to see that you can write clean, symantic markup. Demonstrate that you understand a responsive approach and cross-browser considerations. If you list being an expert in something, prove it on your site.

    0 points
    • Jesse HoyosJesse Hoyos, 7 days ago

      I don't know how familiar you are with modern static site generators but they don't impede an individual from successfully accomplishing those things you've mentioned (semantic markup, responsive best practices, etc). Generally using a SSG allows you to leverage more powerful tools, while maintaining the freedom afforded by "hand-coding". I put hand-coded in paren because theres plenty of hand coding involved with using static site generators, its not a this or that. Both happen in tandem.

      Now, if the OP was asking about what website builder i.e. square space, wordpress et al he should use, then I would definitely agree with you.

      to OP, I have used many generators for both personal and client use, right now my favorite is http://spike.cf

      6 points
  • Ben KroghBen Krogh, 7 days ago

    I've hand coded my site (and blog!) for years but have been looking into Jekyll for my next version. Have heard good things!

    0 points
  • Th. MTh. M, 9 days ago

    https://staticsitegenerators.net

    0 points
  • julian sharifi, 7 days ago

    Had a great time with https://spike.readme.io/docs

    0 points
  • Annie Wilson, 6 days ago

    I recently overhauled my Portfolio (source) and started from scratch using Wintersmith as a starting point and building my own templates on top of it. I quite liked how simple it was and it fits into the eco-system of npm modules I've been using lately (I set up a bunch of grunt tasks to generate css etc). The only issue for me is that I found it hard to customise the plugins as they use coffee and my js skills are rather basic. I'm not sure I would use it again, simply because I used this as a learning opportunity and there are so many other static site generators to try. However I'm quite happy with my portfolio at the moment and I'm excited at the prospect of being able to easily update with new projects.

    0 points
  • Andy LeverenzAndy Leverenz, 9 days ago

    I recently tried Kirby CMS. It's nice and simple. Documentation is great as well. I actually filmed/am still filming a video series using Kirby as the CMS if you or anyone has interest.

    It's file-based so I'm not sure if it's truly a static site generator but might be worth your time.

    Cheers!

    0 points
  • Adam Kirkwood, 7 days ago

    I've been enjoying Zeit's next.js to build a simple portfolio with SSR React.

    0 points
  • Ciarán Hanrahan, 1 day ago

    having used WordPress & Jeykll before I switched to Cactus (https://github.com/eudicots/Cactus) and found it nice and easy to get setup. Can host and easily deply the site to AWS so it's cheap too and you get to use a Django template system for portfolio pages and only have to manage one footer, header etc and linking to next and previous portfolio items is easy. Coding your own can become very tedious if you want to re-arrange projects and have a lot of them.

    0 points
  • Arthur SimonArthur Simon, 7 days ago

    https://www.staticgen.com/

    0 points
  • Antonia A., 6 days ago

    I have used Middleman but switched to Grav. That admin panel sure saves a bunch of time when adding or editing projects. I find it even easier to setup than Middleman. Works well with DO.

    0 points
  • Renato Ricco, 5 days ago

    Jekyll and Hugo are a good start for SSGs. My advice is to create your site without ready themes or you will not learn properly how to create your own. Gatsbyjs looks cool too but you will need to have a better understanding of Js and React.

    0 points
  • Diego LafuenteDiego Lafuente, 7 days ago

    I pimp Middleman. Very well done. You also have Jekyll.

    0 points
  • Luan GjokajLuan Gjokaj, 8 days ago

    https://staticbuild.website/ ready to go! You can tweak it as you please.

    0 points
  • Danny Lewandowski, 13 hours ago

    I'm a big fan of Pug. Create a set of variables, mixins and includes, hook them together and you're off to the races. I'm rebuilding a huge site with over 300 pages using that method and it gives me the most flexibility in terms of consistency mixed with layout flexibility.

    This way you're not locked into any specific toolset. In the event that they'd ever go away, you're not caught in the lurch having to rebuild from scratch. It's also a good way to learn exactly how things work from the ground up since it's basically just simple HTML/CSS.

    0 points
  • Tregg Frank, 7 days ago

    I'm using Kirby CMS for my backend flat file system, and Webflow to build the front end. Requires some manual plug and play work but, either way I'm excited about it. Maybe check out Kirby!

    0 points
  • Nick NobleNick Noble, 7 days ago

    Metalsmith is crazy cool. But seriously just build a thing unless you really need a backend.

    0 points
  • Glenn McCombGlenn McComb, 3 days ago

    I'm a little late responding here but I've been using Hugo for my current personal site rebuild and have been really enjoying it. I'm very familiar with WordPress as well and there's been a ton of overlap in terminology such as page templates, singles, taxonomies, shortcodes, etc. I can't speak for other static site generators since I was in the same boat as you and elected to go with Hugo.

    It's a really easy set up. I use gulp all the time in my WordPress work so I found this article really helpful in getting my build process up and running. Sara Soueidan recently migrated her blog from Jekyll to Hugo and wrote a great article outlining the process.

    Keep in mind that whatever you choose, you can layer Netlify CMS on top of it to make the ongoing editing / updating process less arduous. Smashing Magazine is being rebuilt using the Hugo / Netlify CMS combo and I've been using that. It's kind of a thrill to use a CMS on a static site and the Git integration is very slick. I've found Netlify CMS to be a great piece of kit. It's taking web development in a very interesting direction.

    0 points
  • Tropical HoochTropical Hooch, 5 days ago

    Should designers use static site generators?

    0 points
  • Bugsy SailorBugsy Sailor, 6 days ago

    I have been totally amped on a Hugo + Netlify flow. I'm on the cusp of dropping Wordpress for my personal projects and started to transfer a lot of my old work to Hugo. Fast and flexible!

    I recently archived a 2006 website of mine to Hugo that generated 5,000+ URLs, it works like a gem and the learning curve was quite minimal. https://hit.bugsy.me

    I also converted a couple previous Wordpress builds to Hugo. http://beerwithbranson.comhttp://wordswithfriendswithfriends.com

    It has definitely been an adjustment, but one I've been really excited with. Thumbs up.

    0 points