If you were building a basic website today, what would be your approach and stack?
Closed this issue · 5 comments
With so much change happening in the front-end dev world these days, even doing something as seemingly simple as building a basic website is not straightforward.
It used to be that you just wrangled some css, html, and maybe a bit of js to spiff things up and that was that.
Today, however, I would want to use a variety of tooling, such as SASS and Gulp (or should I use Webpack?) On top of that, I am asking myself if I should maybe use React to create a nice component structure for the site, but is that maybe overkill? On top of that, I have to ask myself about content management. And so on.
So, if you were asked - right now - to build a basic but modern website with mostly static content - what would be your stack of choice? How would you approach it?
Look forward to your response!
Hey,
That’s a tough question. A very relevant one though. I don’t have a silver-bullet answer to give you, so I’ll just try to give you some hints. Feel free to tell me your thoughts and questions.
Let’s start with the easy one: you need a simple static website with no CMS, or with a CMS-solution tailored to a tech-savvy user (for instance, you). My personal favourite has to be Jekyll. Jekyll is a static website generator with a strong focus on blogging, that does a lot of the heavy lifting for you. It comes up with templates, partials, Sass, a watcher, and much more. The other nice thing with Jekyll is that GitHub Pages is built on Jekyll which means you can push your uncompiled Jekyll website on GitHub (gh-pages branch of a repo) and see it compiled and deployed automatically for you. Fast, easy, convenient. Cherry on the top of the cake: you can use GitHub as a CMS. That’s what I do for my own website for instance.
Second scenario: you need a CMS. First thing that comes up in people’s mind is WordPress. WordPress is amazing as a Content Management System but I find it super hard to tweak, customise and optimise. It’s not “simple HTML” (or even simple templated HTML) anymore, and everything is tangled in to PHP, and WordPress core and templates and plugins… From there, an elegant way to go is to use WordPress as an admin system, ditch its front-end entirely and plug it into any static website generator. This is something we did for a client at Edenspiekermann shortly before I quit. We used Metalsmith and I built static-importer, a tool to use a JSON API to generate Markdown files for a static website generator. The idea is to trigger a new build everything something is updated in WordPress thanks to a web hook. That works well, and offers both flexibility on the front-end and the power of WordPress as a CMS.
Other possibility along the same lines: Contentful. Contentful is a CMS without a front-end; just an API. Therefore it’s the same idea: everything you update something in Contentful, a hook triggers a rebuild which pulls the data from the API, regenerate the site and deploys it. We have been playing quite a lot with Contentful at Edenspiekermann and I have grown to like this solution. It’s especially great for collections (articles, tiles…), more than static pages even if it works for anything.
Regarding hosting, I am a big fan of Netlify, especially since they recently changed their pricing system. Netlify is a hosting provider specialised in static websites. It makes it super easy to setup hooks to a specific repository or API (like Contentful) to trigger build and deploy on change. It also serves over HTTPS, does some performance optimisation for you (lossless image compression, CSS and JS minification and bundling) and supports form submissions. It’s such an amazing hosting system, providing a lot of flexibility to accomodate to your setup. I really recommand it.
Third scenario: you have an interface very dynamic which handles a lot of state changes, views, user interactions & inputs, and so on. All in all, a lot of JavaScript. This is where I believe it might be interesting to start lurking at React. React is a library (not a framework) for building dynamic user interfaces. Its core is super simple (much simpler than most people believe) and it quickly makes a lot of sense to build user interfaces following React precepts and guidelines. Now, building a React application that scales well might need a bit of tooling around it (Webpack, Redux…), and this is where it gets complex and possibly messy. We are also guilty of doing a lot of over-engineer and premature optimisation in the JS ecosystem; so I’d recommend solving problems when they arrive rather than before they even exist. React is only one of the many possible libraries and frameworks that can be used to build dynamic user interfaces, but it’s probably the most popular right now. It’s not necessarily that it’s hype or FaceBook-powered; it’s mostly that it solves a lot of very real problems with very decent solutions. For that, it has a lot of merit.
Let’s try to sum up now.
- If you need a single extremely simple page, you could use plain HTML and CSS hosted on GitHub Pages.
- If you need a small website with no specific CMS, I recommend Jekyll hosted on GitHub Pages.
- If you need a CMS and want to dig into WordPress, go for a full blown WordPress.
- If you need a CMS and want a custom front-end, use WordPress or Contentful as an API and put whatever front-end you want on top, hosted on Netlify.
- If you need a website or app with a very dynamic UI, consider React or a similar library that can handle states, views, and heavy user interactions.
Please keep in mind that this is only my opinion, not to be taken as the only way to do things; and that each project is different. Use what you feel like using, and most importantly what your team is comfortable with.
I hope this helps!
Without getting involved in a CMS flame war, you mention WP being hard to tweak and customise.
Take a look at Statamic which is a flat file CMS which you can customise as needed with the same idea of templates, partials etc. but gives a CMS dashboard.
Thanks for this Hugo, i tend to use Perch CMS, who is a paid CMS, but a great one, especially for clients, with a nice interface.
For static websites, i have tried some. Jekyll is nice but ruby based and documentation is not so good for me. Tried Pug (aka Jade), but leaved it because of it's syntax (loved it at the beginning but definitly don't need this). Recently i came into Nunjucks from Mozilla team, it's very good as it allows almost everything i need in front end projects (partials, variables, maths etc.).
Thanks so much for this detailed response! (And sorry for the delayed reply.)
Any time. :)