My whole web development career has been built around building websites and web applications for other people. I first seriously learned how to code to build a website for a good friend. My first job was at an agency, where I punched out one website after another for clients. I now freelance, where I often create sites for clients from the very beginning stages of design to development and launch. I love going through that entire process with my clients. However, when it comes to creating my own freaking website, I am sad to say I have never been able to have a complete one for very long (longest one was a one pager that lasted about two months out of a dire need to find an internship).
Some time of retrospection revealed some reasons why I struggle with creating my own website:
1. It's never good enough - I am always changing my mind. Some thoughts that go through my head: Which projects should I showcase? Oh I don't like that color scheme anymore. That font doesn't really represent my personality. I need to rewrite my bio again!! and the insane list goes on and on and on...
2. I can never pick a framework - Because I developed on WordPress for a long time, every time I think I want to start on working on my website again, my natural tendency is to build it on WordPress. However, with so many cooler sounding frameworks that pop up every few months, I can't help but think that I should try building my site on one of those frameworks so that I could pick up a new framework along the way. The theory is good, but I usually end up in a rabbit hole learning the nuances and the shiny parts of the framework that I end up forgetting about my own website. Then I get distracted by something else and then the site is left unfinished. :(
3. I don't like updating it - When I was looking for internships while in college, I did create and launch a very simple one-page website using Bootstrap and a jQuery slider plugin. After I got an internship I never updated it and took it down shortly afterward. Because I created it so fast, I didn't have any process to easily update my work. Therefore, it became too tedious to maintain and #1 from above started to happen, so I shut the whole thing down.
I look at other developers' websites and am insanely jealous of their ability to buckle down and get theirs done and done so well. So I'm curious... what do you guys use to build your own personal website?
Top comments (40)
Here's what I built my personal site with and I'd do it again:
Plain-old HTML, CSS and a bit of plain old JavaScript. One of the biggest impediments for going back to update a thing are dependencies. They are the easiest thing to lose track of, forget how to set up, etc. It's also generally nice to use the raw tools.
On a bigger project that I'll touch regularly and do more powerful thing with, I'm all for the right frameworks, preprocessors, etc. as long as they are appropriately mature and developer-friendly.
It's really nice to have a static personal site that does not need to be compiled or processed in any way, or rely on code that is not contained within the project. Maybe you can't do as much without it getting stringy, but I see that as sort of a bug instead of a feature.
Another tip: I'd advise inlining the CSS in the body and async the JavaScript if it's reasonable within your site structure. This radically reduces worst-case rendering latency.
This is my personal site: benhalpern.com
Don't take it as an indication that I'm not 100% serious about what I've outlined above. 😋
I think this is the greatest personal site I've ever seen. I'd hire you in a heartbeat.
Your personal site...yeah...ummm... WTF, man?! :)
I think the word you're looking for is transcendent.
That was amazing and it brings me so much joy that pages like yours still exist. The only think I would suggest is that you add https so no one can ever ruin the masterpiece you have made.
Thanks for your tips! Keep it simple, I like that. Your site is super awesome by the way. Where did you get your inspiration from? 😋
Your site is amazing. The youTube video!! :D
Wow - thanks for the CPU workout... LOL
lol @ the "Here is a link to nothing: localhost:3000"
Static HTML/CSS/vanilla JavaScript, hosted on GitHub.
isaaclyman.com
I know a lot of devs feel like they need a site with project examples, blog posts, scrolljacking/parallax, a visual resume, and so forth. That's fine. I prefer a minimal, attractive, responsive "me hub" with links to GitHub, Medium, and Stack Overflow, and a list of technologies I'm working with lately.
It's tiny, requires almost no maintenance, and still demonstrates that I know how to write consistent, readable markup and code. I doubt I'll ever want one more complicated than that.
Interesting... it's true that my work can be viewed on GitHub, my blog posts (which I hope to eventually write) can be on Medium so most of the content won't need to be on the personal site. I like your simple approach. I will keep it in mind. Thanks for sharing!
I frequently see "originally published on my site/blog xyz" on medium articles and dev.to so no reason why you couldn't have them on your blog too. Not sure how this affects duplicate content for SEO so check that out first
I started my blog jjude.com more than a decade ago. I started it when I was learning SQL as API developer. I was good in visual basic, but not on oracle / sql server. So I was looking for almost same type of issues over and over again. Those days search and speed weren't as good as it is now. So I started to note down my issues and answers which worked as reference for me.
I follow what C.S. Lewis said: I write for the unlearned about things in which I am unlearned myself. I continue that path of noting down things for myself.
Those days I started with plain htmls, then moved to nucleus cms, then to wordpress. I stayed with wordpress for long. But I would go without going to my blog for long (sometimes even 6 months). But then there were memory and security issues on wordpress. So I decided to move back to plain HTML.
Recently I coded my own static engine olai which serves my purpose. Think of it as static blogging as a web-service. I can blog from any browser, it generates plain html and pushes to my server. This has worked out pretty well for me. Someday either I will make it available for others.
Regarding your #1. As we notice other things and we ourselves mature, our tastes evolve (or change). So it is normal that you want to update / modify / confused about what to show. Sometimes I write and publish a post every other day for a quarter and then go silent for couple of quarters. Then I will revisit and tinker with how it looks. And I repeat.
As I said, I blog for myself. It has been a fantastic experience to put out what I know.
I would recommend you to continue to blog. Unless you are a designer (css, ux, whatever other niches are there), don't bother about look of your site. If you write valuable advice, people will come back to your site again and again. Then some will tell you what you have to change (may be you have glaring colors, may be some thing is broken in a particular browser etc). I visit daring fireball, marco.org, and dev.to most often. None of them have fancy design. I go back because I get value there.
Good luck. Keep sharing.
(You seem to be using "personal" to talk about both personal and personal-business, so I'll answer both.)
Currently: business uses Vue.js with pug templates (on GitHub under "djs-consulting.com", if you're interested), personal uses Jekyll with a theme based off its previous iteration.
Past:
I don't see myself moving away from Jekyll anytime soon; it's perfect (IMO) from a resource utilization perspective. How many database queries should it take to load a old blog post about the 2008 election, or a cheesy sausage hashbrown recipe? With Jekyll, that number is 0, which I think is correct one.
Anyway - I write all that to show you that you're not alone in not leaving your personal site alone. :) In my case, part of the churn is that I'm doing this as a side project (though I am a day-job programmer as well), so I'm trying to do it as cheaply as possible. Resource utilization is a big deal. I love the .NET ecosystem, and F# in particular; .NET Core has really helped make that run fast on my dirt-cheap Linux VMs. Plus, WordPress can be quite the hassle if you don't run where your web server can write to the files that it serves; I'm glad they push regular updates, but sometimes the things they fix make me happy that PHP couldn't write to the web server while the bug was active.
Finally, what I have (sadly) left alone is the content; Facebook ended up getting a lot of the material that would have gone there instead. I'm trying to get better about writing something, but that would mean I'd have to stop writing code long enough to do it. Being a part of this community is encouraging me to find the time to at least start writing up some tech stuff.
I've heard lots of great things about Jekyll, especially if I want to eventually write blog posts there, which I am also hoping to do more of thanks to the support and encouragement of this community. :) Thanks for sharing!!
Jekyll is pretty sweet.
I've even used it to prototype and mock up work that had to be recoded from scratch for another CMS in XSLT (ugh)…
Very recognizable, it's called "paralysis by analysis", too many choices ... same reason why my site is also still not done (other reason is there is no urgency).
Also as a dev you tend to think "I need to use some cool technology" while in fact there's totally no reason, it's just a basic website ... in my case I thought "I want to use React" because I wanted to learn React but in the meantime I already learned React on a project, so there's no need.
I saw an ex-colleague of mine who created a website for his wife's company using static HTML/CSS/JS (no server side pages generation) with good old Bootstrap and some good looking images and well written text. HTML looks clean, with "sections" and all. It looks mainstream (nothing original or flashy) but it looks clean, fairly modern, professional and friendly.
I think if ever I need to finish my website then this is what I would go for, just download and clone that stuff and replace the text and the images. I'm not a web design artist and my website doesn't need to demonstrate cutting edge, so I just keep it down to earth and use what works.
I did mine using Wordpress. I'm not an expert. I just like how beginner-friendly it is. When you are starting out, I thought that was pretty easy to understand and publish blog posts and stuff like that. I'm not sure I will touch the design too much. It's pretty basic I think, but it does the trick for me.
In retrospect, considering where my career is heading, it might have been fun to use a more javascript-centric CMS, like Keystone. I could have work on my personal website while learning more Javascript. But, I use my website as a way to store blog posts. I'll probably list projects I've been working on in the future. But, things will stay very simple for that too.
For my project's site I used static HTML, CSS, vanilla Javascript and a third party Javascript library for HTML5 canvas effects.
The site consists of a Home Page and a Documentation Page and is not yet online.
I have avoided using a Cms like WordPress or any server-side language like PHP because I do not need them for a simple site.
My personal website is built with WordPress.
My personal-business is built with plain HTML, CSS and JS. However, I'm preparing a new version that will run on Laravel and VueJS (part of me learning those two things).
For the "Hi, ask me about x" page there's just plain CSS and a tiny bit JS. For the blog I use Wordpress with a minimal theme, mainly because when I made it I had tens of posts from Blogspot which I didn't want to lose and could import easily with a plugin. I planned to switch to Kirby (which I use for clients) but the two posts a year just aren't worth it.
If you don't mind using a programming language like Scala, try my sbt-hepek plugin. You can make your HTML templates in Scala's
traits. Then you just implement an abstract method that will be the content of your page. :) So, it's not a real framework but just a handy tool for generating static files. :D You can find more examples here, rendered at blog.sake.ba.