DEV Community

What tool/framework/cms/etc do you use to build your own personal website?

Nayeon Kim on August 04, 2017

My whole web development career has been built around building websites and web applications for other people. I first seriously learned how to cod...
Collapse
 
ben profile image
Ben Halpern • Edited

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. 😋

Collapse
 
isaacdlyman profile image
Isaac Lyman

I think this is the greatest personal site I've ever seen. I'd hire you in a heartbeat.

Collapse
 
vgrovestine profile image
Vincent Grovestine

Your personal site...yeah...ummm... WTF, man?! :)

Collapse
 
ben profile image
Ben Halpern

I think the word you're looking for is transcendent.

Collapse
 
nektro profile image
Meghan (she/her)

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.

Collapse
 
nayeonkim profile image
Nayeon Kim

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? 😋

Collapse
 
magicwishbone6 profile image
Caitlin Lamprecht

Your site is amazing. The youTube video!! :D

Collapse
 
danieljsummers profile image
Daniel J. Summers

Wow - thanks for the CPU workout... LOL

Collapse
 
cadellsinghh_25 profile image
Cadell

lol @ the "Here is a link to nothing: localhost:3000"

Collapse
 
isaacdlyman profile image
Isaac Lyman

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.

Collapse
 
nayeonkim profile image
Nayeon Kim

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!

Collapse
 
sambenskin profile image
Sam Benskin

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

Collapse
 
jjude profile image
Joseph Jude

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.

Collapse
 
danieljsummers profile image
Daniel J. Summers

(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:

  • my own set of static HTML files
  • my own MySQL-backed PHP site
  • WordPress (first time)
  • BlogEngine.NET
  • WordPress (second time)
  • Orchard
  • WordPress (third time)
  • my own MongoDB-backed Node.js (koa) app
  • my own RethinkDB-backed F# (Nancy) app (based on the Node.js one - this one is on GitHub as "myWebLog")

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.

Collapse
 
nayeonkim profile image
Nayeon Kim

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!!

Collapse
 
dothtm profile image
dotHTM

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)…

Collapse
 
leob profile image
leob

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.

Collapse
 
damcosset profile image
Damien Cosset

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.

Collapse
 
sebastianr1982 profile image
Sebastian Rapetti

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.

Collapse
 
ratko_solaja profile image
Ratko Šolaja

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).

Collapse
 
niorad profile image
Antonio Radovcic

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.

Collapse
 
sake_92 profile image
Sakib Hadžiavdić

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.

Collapse
 
erebos-manannan profile image
Erebos Manannán

Generally I use Jekyll + GitHub Pages.

Hosting a website is too much work for most uses, especially personal website. You will end up with a server that doesn't get patched as you have no reason to check on it all the time, and eventually you will get hacked or have other issues with it and you spend your weekends fixing your homepage.

Additionally there are no easy to host and good CMS systems out there. Drupal and WordPress are both disasters, lots of requirements (database, PHP, some sort of cache solution, etc.) generally really slow and especially in the case of WordPress a security nightmare.

With these issues in mind, and still wanting a solution better than just editing HTML, CSS and JavaScript directly, is where static site generators come in. There are a lot of options, but Jekyll has been my favorite for a long time. You can use templating, SCSS, etc. to build a fairly complicated website with little effort. Setup is generally a breeze and there is little "black magic" involved. It also has a neat plugin system for more complicated scenarios (though they will NOT work in e.g. GitHub Pages).

GitHub Pages can then take your static website (or specifically Jekyll sources) and serve it without you having to worry about hosting at all, and for free. It's not perfect, but it IS pretty good. You will get your website running with minimal effort and updates are a breeze, just push to the repository.

Of course GitHub Pages has competitors as well, but most of them are paid, and considering how important my personal homepage is (not very) I'm generally not willing to pay a whole lot for hosting it.

Some examples I could quickly remember of websites I've built with Jekyll:

Collapse
 
mkbaldwin profile image
MichaelBaldwin

I've used a variety of things over time to create a personal site/blog (WordPress, Ghost, etc). I am currently using Jekyll + GitHub Pages and have been happy with it.

While the other platforms were nice, I found that when I self-hosted my site I never took time to update the platform I was using. With static-site generation and GitHub Pages I don't have to worry about updates and security. That is being handled for me. I can't really speak to creating themes for Jekyll because I used an open-source template and made slight modifications.

I also like that my content is all markdown and could easily be ported to a different platform.

Collapse
 
nayeonkim profile image
Nayeon Kim

Thanks, I like the sound of Jekyll + GitHub approach. I also like the idea of having all my content in markdown and being able to port it easily to a different platform.

Collapse
 
shreyasminocha profile image
Shreyas Minocha

I used hugo and surge for my website: shreyasminocha.me

Collapse
 
nbageek profile image
Patrick Minton

In my case, it's "whatever I am currently trying to learn". And I re-engineer a lot (I try for every couple of years)

Re-designing websites with new tech stacks is, from a business or time-efficiency standpoint, a terrible idea, but from a learning standpoint, it's great. You get to work on something you are passionate about, which keeps you invested in the learning.

Right now I'm upgrading to Rails 5 so that I can convert most of the views to Preact.

Collapse
 
sergiodxa profile image
Sergio Daniel Xalambrí

I used Next.js with the static export feature to generate plain old HTML with inlined CSS and deploy it under ▲ZEIT Now, here's the site sergio.now.sh and here's the code sergiodxa/personal-site (it implements a service worker too just for fun). For things like a personal blog I use Medium or dev.to and I just have a simple list of all my published articles in my personal site so I don't need a WP or something similar to create a blog.

Collapse
 
cwreacejr profile image
Charles Reace

Not claiming my site is anything amazing to look at -- but then I'm a server-side dev., not front-end. Anyway, I built my own framework, of course: cwrblog. :)

Now that I've updated it to use CSSGrid, there's essentially no JavaScript in it, and the HTML markup is very clean. Maintenance consists of writing a post in MarkDown, saving it with a standardized file naming convention, then FTPing to my web host.

Now I guess it's time for the shameless plug: charles-reace.com.

Collapse
 
benaryorg profile image
#benaryorg

I know that I could accomplish it with plain HTML and some CSS.
As I'm not usually writing CSS I'm sticking to frameworks like Foundation or Bootstrap for the responsiveness.

I then use something to convert markdown to HTML on the fly to make websites easy to edit and look good in both text and rendered form.

For my blog I've built something home grown to also apply syntax highlighting and build a single page app that loads content from different files using AJAX.

If I had a CI and CD framework that allows me to properly run setup steps before deploying the source code, without the resulting files ever being versioned in git, I'd stick to a templating engine to create HTML and CSS only, without JS at all.

As an ops person with a vast knowledge of shellscript I'd probably write the templating myself.
Maybe a Makefile or something.…

Collapse
 
anonjr profile image
Mark Bussell Jr • Edited

The short answer? It depends on your goals for your site.

Pithy? Yup. Helpful? Probably not... here's my best answer in the context of the struggles mentioned.

It's never good enough

Absolutely. Never will be. Just like a mechanic's car will never be 100%, there's always something ... different ... about doing for yourself the work you normally do for others. Sometimes it helps to try to frame it in the more familiar terms of the client/dev relationship by either getting a friend to stand in for one side or the other, or to do some rubber duck style planning.

I've got a few sites going now, and not a one would I consider "good enough":

  • I've got Wayward Son Developers (GitHub link because it's currently experiencing some really odd problems - but that's a different issue). It was last touched when I'd started going back to school and was designed to fit the class criteria. Is it what I like or want? Nope. Is it good enough for now? Absolutely. (well... when I get the current connection issues fixed. I think something went wrong with the CloudFlare setup.)
  • I've got AnonJr.com which I'm currently working on after a very long hiatus. (caused by reasons, not going to distract from this answer with those reasons). I moved it from an ancient Blogger account, and had initially tried to keep the same general design. I'll probably leave the design part alone for a bit to focus on actually posting content instead of endlessly tweaking LESS files. I'm not happy with it - especially the nonexistent mobile responsiveness - but it won't matter how responsive or mobile-friendly it is if the last thing I posted was from 2013.
  • I've got Bible By Example which is an upcoming podcast I'm working on - a bit of stress therapy, and hopefully soon a source of income. I used someone else's theme for this one. While I'd really like to make the design a little more my own and less the stock theme, I noticed that real work has stalled - so the design work is going on the shelf for a bit and the kind of work that moves things forward is going to start again tomorrow.
  • I've got Jesus Joshua 24:15 which is currently on hiatus... because the guys are on hiatus. I think the last re-design was when they released their 3rd album, and that was a while ago. Bob was very happy with it; and I'm both proud of what I did when I built it, and a little embarrassed that it hasn't really moved forward. It is nice to have some of these older projects around to use as a measuring stick, to ask "is what I'm doing now better or the same as what I was doing?"

There are a few others, but these each have unique answers for the next two bits so

I can never pick a framework

Who says you have to pick just one? Each project has it's own requirements, and sometimes any framework at all can be overkill for a project. Most are up on GitHub (some hosted on GitHub pages) if you want to poke around and see what's there. If we go through the list, you'll see:

  • Wayward Son Developers is good ole handcrafted HTML/CSS. In Notepad. Up hill both ways. Seriously though, when I get AnonJr.com and BiblbeByExample.com done enough I'm going to go back and re-do this with either Pretzel or Jekyll. Probably the latter since it makes it easier to run on GitHub Pages. Work has already started to that end.
  • AnonJr.com is built using Pretzel (a .NET based, Jekyll compatible static site generator), and Pure.CSS (fairly light weight CSS library), and everything else was sort of tossed together ad hock while I figured out how Pretzel/Jekyll put things together.
  • Bible By Example came later, and benefited from what I learned with AnonJr.com. It's built using Jekyll and the Minimal Mistakes theme.
  • JesusJoshua2415.com was built using a bit more of a heavy CMS. Partly because at the time I was very active in the Snitz Forums community at the time, and I'd used it as a Forum/CMS on a few projects in that same time frame. And partly because what Bob was asking for required something a bit more, and a CMS made more sense.

I've used my personal and side projects as playgrounds for the stuff I've been meaning to try out. I've found that trying something without a specific goal really isn't helpful, so having the project focuses my testing and helps me figure out what is a good fit for certain projects. Case in point - my sister is getting ready to start a blog. As much as I've been playing with static site generators I can tell that it's not a good fit for her. Instead I ended up recommending Square Space. Could I have built her a CMS and hosted it? Sure, but not on the timetable she's looking for.

I don't like updating it

Can't say I blame you on this one, I've got the same problem... Jesus Joshua 24:15 has been on hiatus, Eastover Fire Department shut down their website, I haven't been a part of Hope Fellowship for years - and most of the work I've done lately is stuck behind the corporate firewall.

That was the impetus for a couple of the projects above - I needed some new work to put on Wayward Son Developers, and work that I could showcase without legal issues. :)

I don't have a process either, I'll post something when I come up with one.

Hmmm...

So, after looking over 950-ish words I'm not sure I actually answered your question any more helpfully than the pithy initial response. Is there anything I can clarify/expand that would rescue this long ramble?

Collapse
 
nayeonkim profile image
Nayeon Kim

Haha, thanks for sharing your experiences with clear samples. Glad to know I'm not the only one having these thoughts.

Collapse
 
vgrovestine profile image
Vincent Grovestine

Been a few years since I've had an actual personal website (and not just a redirect to LinkedIn); however, in the past I've kept things dirt simple: HTML, CSS and a pinch of PHP.

For everything else, my go-to CMS is Contao contao.org. Simple templates, many common website "features" included in the core system, multi-site and multi-language capable, backend user workflow and content security.

Collapse
 
moopet profile image
Ben Sinclair

I don't really have what you'd call a personal website. I have a flat, emptyish homepage and a bunch of differently-constructed sub-pages which aren't linked anywhere, rather I give the URL out to people as appropriate (like my CV or a demo app for example) and don't worry about being listed in search engines.

As such, I use whatever code I feel like for each thing. Mostly it's plain HTML/JS but there's a little PHP and Perl thrown in from time to time. I have tried using things like Grav and Netlify-CMS but in the end I just don't have the need for such things beyond the fun of experimentation.

Collapse
 
monicag profile image
Monica Granbois • Edited

I use Jekyll, Bootstrap and host on github pages for my personal blog. I like it because it uses a simpler structure than Wordpress (a static site vs the DB and PHP code behind Wordpress). I kept it to a simple layout as it's just a blog site and I didn't want anything to fancy. I like that Jekyll uses markdown,which I find easy to use to create blog posts. The one downside of hosting on github pages is you can't run all the plugins available to Jekyll. But it's free, so I stay. My site is monicagranbois.com

Collapse
 
nayeonkim profile image
Nayeon Kim

Another vote for Jekyll + GitHub pages I see! I like the idea of going serverless since hosting WordPress has been a pain for me. I like your site! Very clean and straight to the point :)

Collapse
 
sebnitu profile image
Sebastian Nitu • Edited

For my personal site (sebnitu.com) I use Jekyll and a personal front-end framework I call BaseWeb (getbaseweb.com) who’s docs are also built in Jekyll. Both are hosted on GitHub.

The thing I love about my setup is how low maintenance it is. I pretty much just write when I feel compelled to write about something and that’s about it. I intentionally kept it super minimal for that reason. Eventually I’ll add a portfolio too and when I’m ready to do that, the Jekyll theme I setup makes it very simple too.

Collapse
 
braydengirard profile image
Brayden Girard

Jekyll is awesome, our team works with Jekyll everyday as we build Shopify (Liquid) and custom Jekyll websites for clients. The framework is great for beautiful marketing websites and ecommerce sites.

Collapse
 
psnebc profile image
Patrick Schanen • Edited

Hugo, Grav, Drupal
Hugo, psnc.netlify.com - psnc.github.io
Grav now here as Cloud Platform psnc.frama.site

Collapse
 
jreina profile image
Johnny Reina

I'm using Jekyll on Github pages. Dead simple, very fast, and everything is in markdown so it's easy to cross-post. Github pages allows you to set up custom domains pretty easily as well.