5
26 Comments

How did you create your personal website/portfolio page?

I build with Vue.js + prerender, which is pretty good in terms of cost and performance, but probably too time consuming. Another downside is reluctant to update the site, as I have to pull out the old code and tools again.
https://www.luasoftware.com/

What tool you use to create your personal website/portfolio page? and Why?
Do share your personal page as well.

on November 7, 2019
  1. 4

    I used Jekyll when I first created my portfolio, then moved to Gatsby and GraphQL earlier this year. I burned everything down and rebuilt it using the new shiny. That turned out to be a very overengineered mistake for me.

    Gatsby was WAY too much overhead for what I wanted to do. Instead of generating value, I was messing with the tools too much. Took me weeks to realize it. I am not getting those weeks back.

    I have since moved back to Jekyll and can focus more on content than tech. The repository lives on GitHub, which automatically triggers a build on a DigitalOcean droplet on every commit to the master-branch. It does exactly what I need and I couldn’t be happier. I was on Netlify for a while, but found them to be too restrictive. My droplet is configured to deliver WebP-images if the client can read them, which I couldn’t have done on Netlify for example.

    Working on the portfolio is fun and fast again. This is where it’s at now: https://islovely.co/posts/

    1. 1

      The design is 😍

    2. 1

      Love the design :)

      1. 1

        Thank you! ❤️ I use it as a playground to try different ideas so I can improve my design skills. Feels good to see it get incrementally better.

  2. 3

    I use Gatsby and Netlify for any landing page/blog because it's free, doesn't limit me in what I want to do, and performance is great. That's also what I'm using for Alcamine (the actual webapp will be CRA with Typescript).

    https://alcamine.com/

    1. 2

      The design looks good 👍

    2. 2

      Same. Works great!

    3. 1

      Wow it looks great! Did you start from a template? Sorry I'm newb to this :)

  3. 2

    For my personal site I used Ghost. It's really easy to get up-and-running, so you can have a website up in minutes. I then spent around a week creating my own custom theme from scratch (tho you could use one of the thousands of existing themes or build your own in a lot less time probably). I'm also using Sitesauce to create a static version and push it to Netlify so I don't have to worry about the server going down and reduce the size of the server needed, which allows me to run it on a $5 droplet (that was one of the reasons I built Sitesauce on the first place).

    1. 1

      I love the Projects section..very well done!

    2. 1

      How is Sitesauce different from Cloudflare Page Caching?

      1. 1

        With Sitesauce you're generating a real static site with the same contents of your site, while with Cloudflare Page Caching you're just caching content on CF servers. The main benefit of this is that static sites get instantly updated with new content while the CF cache has to be manually cleared.

        1. 1

          It’s funny, I was looking at the page speed stats of my Jekyll site vs my Vue site and thinking - I wonder if I could render the whole thing (Vue) and push it into an s3 bucket :)
          Thought about various ways I might tackle this and assumed some kind of headless chrome setup might do it.. dunno, never used that tech. How’s sitesauce work?

    3. 1

      Your personal site is insanely fast loading 👍

      1. 1

        That's because of Sitesauce :D

  4. 1

    Gatsby hosted on netlify. Literally 0$ costs.

    I used this starter: https://github.com/Vagr9K/gatsby-advanced-starter and did not want to go so far on technologies. I wrote a lot of custom CSS/styled-components but in the end, it was quite straightforward. Also, I just used gatsby and the plugins instead of writing custom things. The ecosystem is a blessing.

    You can find the result here: https://www.kevinpeters.net/

  5. 1

    I built an application just for this purpose. It's super affordable, super easy to start, takes minimal effort to update, and it's gorgeous.

    If all you need is a personal page to showcase yourself, please give One Profile a try.

    Here's my personal page as an example:
    https://oneprofile.info/iam/qabil

    Here's my tech and business stack for your reference:
    https://medium.com/one-profile/one-profiles-tech-stack-eec321f479f5

    Welcome any feedback too, thank you :)

    1. 2

      Both CTA button is not clickable (Chrome), maybe the animation is blocking it?

      1. 1

        Ah, thanks so much for this @d_luaz. I added the animations just yesterday.

        Anyway, I've fixed it, should be clickable now :) Thanks for checking it out!

    2. 2

      Hey @qabil, nice app! This is really related to one of the ideas I'm validating, particularly related to hosting personal websites. If you mind me asking, how did you handle finding your first customers?

      1. 1

        Hey @jawmes, thanks! Hope you've given it a try :)

        They came from a number of sources but most particularly Indie Hackers, Medium, Twitter and YC Startup School. All I did to get traffic was to share and contribute. No paid ads, yet.

        Hope it helps!

  6. 1

    My personal site is https://arkadiyt.com. It's a static site compiled with Jekyll and hosted on S3. For serving traffic I use Cloudfront and Lambda Edge (to add custom security headers).

    It's simple and works well for me. Thanks to the security headers & cloudfront I have A+ scores on:

    1. 1

      Thank you very much 👍

    2. 1

      Hey @arkadiyt

      Any chance you can share how you did this?
      I have the same setup s3, Jekyll, CF, but no lambda edge security headers. 😔

      1. 1

        Sure, here's the code for the lambda function: https://gist.github.com/arkadiyt/8a10a4120a812cb42103119308efbf34

        Here's the documentation for configuring Lambda Edge: https://docs.aws.amazon.com/lambda/latest/dg/lambda-edge.html