How I Built My Blog(joshwcomeau.com)
joshwcomeau.com
How I Built My Blog
https://www.joshwcomeau.com/blog/how-i-built-my-blog-v2/
52 comments
For homepage I got frozen page and: page is not responsive / page is slowing down browser message from both Firefox and Chrome - I guess all that cutting-edge tech for displaying the blog really loves giving my CPU a workout.
50% CPU usage on the home page, and the firefox inspect tool crashes before it can open! The content itself doesn't load either - just a large blue box
Safari on MacOS, running on new apple silicon on a fairly souped up MBP, which I use for various computationally intense tasks.
Kind of amazed (and confused) really... that the thing which finally gives it a challenge is a blog homepage.
I'm disappointed. I'd long looked up to Josh for good UI/UX, but like a lot of other UI/UX folks who are left alone to their devices go too deep in their tunnels and at some point lose touch from where the rest of us still stand.
Kind of amazed (and confused) really... that the thing which finally gives it a challenge is a blog homepage.
I'm disappointed. I'd long looked up to Josh for good UI/UX, but like a lot of other UI/UX folks who are left alone to their devices go too deep in their tunnels and at some point lose touch from where the rest of us still stand.
He brags it's over 100k lines of code. That's insane for a personal blog, unless maybe you're using a huge framework or doing some VERY cool demos in there.
this is the self-destructive behaviour that's prevalent in the JS ecosystem.
say a newbie wants to develop a website or web app and they run into this. The amount of tools listed is overwhelming, even for me who's been doing JS for over 7 years.
and the sad thing is JS can be pretty productive, without the merchants of complexity shilling their tools.
Express.js v5 just got released. Thanks doug & other maintainers. Yet the API has been stable for over 10 years. Vue.js even with the new composition Api - the api has been stable for a long time. & other useful node libraries like 'pg' etc.
The only recent useful thing is tailwind.
Next.js / Nest.js etc are all complex tools that are completely unnecessary and shilled by dev-tools companies
say a newbie wants to develop a website or web app and they run into this. The amount of tools listed is overwhelming, even for me who's been doing JS for over 7 years.
and the sad thing is JS can be pretty productive, without the merchants of complexity shilling their tools.
Express.js v5 just got released. Thanks doug & other maintainers. Yet the API has been stable for over 10 years. Vue.js even with the new composition Api - the api has been stable for a long time. & other useful node libraries like 'pg' etc.
The only recent useful thing is tailwind.
Next.js / Nest.js etc are all complex tools that are completely unnecessary and shilled by dev-tools companies
I get the frustration but that frustration itself can discourage newbies that look up to more senior peers.
I am not saying that learning all these tools is necessary to be a productive developer, but at the same time we should also not easily be discouraged by their mere existence and reject any acquisition of new skills because there is just so much noise to filter through.
One can learn about (or ignore) them one after another, relaxed and with an open mind.
One can learn about (or ignore) them one after another, relaxed and with an open mind.
Even for tailwind, I've only ever found it really helpful in react projects. Styling in react has always been a pain, and the recent(ish) solution of CSS-on-JS is a horrible solution in my opinion.
Tailwind was designed specifically to solve styling in react so this does make sense, but as soon as you enter the space of wanting more simple tech that has been stable for years you're throwing out react and might as well throw out tailwind as well, it just isn't needed when CSS is back on the table.
Edit: I should have also included here that there is also absolutely nothing wrong with using Tailwind if that's where you are most productive. We're long passed the days of tailwind shipping unused piles of utility classes, shipping is plenty important if that's where your productivity is.
Tailwind was designed specifically to solve styling in react so this does make sense, but as soon as you enter the space of wanting more simple tech that has been stable for years you're throwing out react and might as well throw out tailwind as well, it just isn't needed when CSS is back on the table.
Edit: I should have also included here that there is also absolutely nothing wrong with using Tailwind if that's where you are most productive. We're long passed the days of tailwind shipping unused piles of utility classes, shipping is plenty important if that's where your productivity is.
I appreciate the author sharing technical details about how they build their blog. I do.
However I'd like ask the HN community here to share some examples of really simple blogs? Those that do not take building Rube Goldberg machines to publish the blogs. Perhaps those where the posts are just simple HTMLs. I'll take slapping a header and footer with some scripting or SSIs. But that's about it. Do you know any such simple examples of blogs? I think such blogs are under-appreciated and should be highlighted more often on HN.
However I'd like ask the HN community here to share some examples of really simple blogs? Those that do not take building Rube Goldberg machines to publish the blogs. Perhaps those where the posts are just simple HTMLs. I'll take slapping a header and footer with some scripting or SSIs. But that's about it. Do you know any such simple examples of blogs? I think such blogs are under-appreciated and should be highlighted more often on HN.
Mine?[1] Pure HTML/CSS handwritten, no JS, powered by Jekyll.
[1] https://notes.ghed.in
[1] https://notes.ghed.in
As someone with knowledge of JS, my favored static site generator is SvelteKit. I feel like for me, Jekyll and such things no longer offer a simplification.
> However I'd like ask the HN community here to share some examples of really simple blogs?
My static site generator is quite simple (650 lines of JS including the http server, almost half of which are the header and footer templates), it uses markdown-it (and some plugins) to convert Markdown to HTML, Katex to convert Latex to HTML and Highlight.js for syntax highlighting. The generated pages are static, only JS is to change light/dark mode and open all "hints" when printing. And right now I'm adding RSS/Atom support.
https://codeberg.org/Release-Candidate/pages/src/branch/sour... https://codeberg.org/Release-Candidate/pages/src/branch/sour...
My static site generator is quite simple (650 lines of JS including the http server, almost half of which are the header and footer templates), it uses markdown-it (and some plugins) to convert Markdown to HTML, Katex to convert Latex to HTML and Highlight.js for syntax highlighting. The generated pages are static, only JS is to change light/dark mode and open all "hints" when printing. And right now I'm adding RSS/Atom support.
https://codeberg.org/Release-Candidate/pages/src/branch/sour... https://codeberg.org/Release-Candidate/pages/src/branch/sour...
It's not a very good blog but it is simple HTML + vanilla JS.
https://retorch.com/blog/
https://retorch.com/blog/
Mine is halfway there. It uses a static site generator that I built for another website which I run for a living. It’s also used as a reference implementation for that static site generator.
The problem is that a simple setup becomes too simple for certain purposes. If you edit content for a living, you gain more from useful features than you lose from complexity.
In my case, every feature I added was to make my work easier: constants, linters, image compression etc. I suspect that the author here also faces the same issue.
https://nicolasbouliane.com/projects/ursus
The problem is that a simple setup becomes too simple for certain purposes. If you edit content for a living, you gain more from useful features than you lose from complexity.
In my case, every feature I added was to make my work easier: constants, linters, image compression etc. I suspect that the author here also faces the same issue.
https://nicolasbouliane.com/projects/ursus
My blog [1] is mostly dynamic (only static pages are the main index.html page and the various feed files) and uses a simple template based system, and each entry is a separate file. The engine [2] also supports adding new entries via POST and PUT. I've been using the same engine for over 24 years now.
[1] https://boston.conman.org/
[2] https://github.com/spc476/mod_blog
[1] https://boston.conman.org/
[2] https://github.com/spc476/mod_blog
I just started my own with literally no code.
1. Obsidian to compose markdown 2. Git extension to commit and push changes to github 3. Github Pages 4. Cloudflare for image hosting
Literally write markdown, push 3 buttons, its live within 2 min.
My first post was actually about figuring it all out. Sorry if its poorly written.
https://tmunayyer.com/Projects/making-this-blog.html
1. Obsidian to compose markdown 2. Git extension to commit and push changes to github 3. Github Pages 4. Cloudflare for image hosting
Literally write markdown, push 3 buttons, its live within 2 min.
My first post was actually about figuring it all out. Sorry if its poorly written.
https://tmunayyer.com/Projects/making-this-blog.html
Going to reply to my own post with a disclaimer: Go with HTML instead. As soon as you even try to position photos, you need HTML and CSS haha. Mine was a bit too simple but I was optimizing for absolute lowest friction possible to writing & publishing.
> Over the years, my blog has become a surprisingly complex application. It’s over 100,000 lines of code, not counting the content.
When I read this my reaction was "that's ridiculous!" But the author is a skilled and experienced web developer. The rich educational interactivity on their site shows that achieving that level of presentational finesse doesn't come easily.
When I read this my reaction was "that's ridiculous!" But the author is a skilled and experienced web developer. The rich educational interactivity on their site shows that achieving that level of presentational finesse doesn't come easily.
It is still ridiculous. Unless 90% of this is all the libraries he mentioned:
nextjs, react, mdx, react spring, shiki, linaria, framer motion, partykit
If there are 100k lines of code + the libraries, that's the most poorly developed blog ever. I guess this might be the case because the network tab shows that it loads 6mb of content.
It is past time we stop praising people for this kind of work. It is a personal project, anybody can do whatever they want. But let's be frank here, as we are a community of hackers: this is a poor work.
If there are 100k lines of code + the libraries, that's the most poorly developed blog ever. I guess this might be the case because the network tab shows that it loads 6mb of content.
It is past time we stop praising people for this kind of work. It is a personal project, anybody can do whatever they want. But let's be frank here, as we are a community of hackers: this is a poor work.
It wouldn't surprise me if a lot of those 100k lines were from the interactive playgrounds that are specific to each blog post.
or the blog posts themselves.
Sorry, but I think it's still ridiculous. A full fledged blog in Ruby/Sinatra (So not even the more compact rails) I built has 8k lines, and that's including several themes, the CSS and the JS. Sure, the interactive widgets is something I haven't and that will take some code, but not 92K lines (language difference notwithstanding).
100K is around the size of a very oldschool PHP blog engine I'm also involved in, but again including several themes, all the CSS and Javscript, several bundled plugins and all bundled dependencies(!).
That here is just fluff. Which is okay ofc if that's what the author wanted to produce, and the blog content might still be excellent. But don't take it as a baseline for what is reasonable.
100K is around the size of a very oldschool PHP blog engine I'm also involved in, but again including several themes, all the CSS and Javscript, several bundled plugins and all bundled dependencies(!).
That here is just fluff. Which is okay ofc if that's what the author wanted to produce, and the blog content might still be excellent. But don't take it as a baseline for what is reasonable.
Eh, it is kind of over the top.
The full application I work on, backend and front end combined, with hundreds of endpoints and a full team maintaining it - mind you with plenty of animated and interactive components as we target children, is only about half again more than that.
The full application I work on, backend and front end combined, with hundreds of endpoints and a full team maintaining it - mind you with plenty of animated and interactive components as we target children, is only about half again more than that.
Something in the runtime JS is really slowing down the page.
Here's a demo video with scrolling after the page has loaded (really choppy) and scrolling after stopping the JS with Firefox's slow-script-detection-thingy (smooth): https://files.alinpanaitiu.com/joshwcomeau-slow-scroll_2.mp4
The code seems to enter a tight loop here whenever I'm scrolling: https://files.alinpanaitiu.com/joshwcomeau-debug-script.png
Here's a demo video with scrolling after the page has loaded (really choppy) and scrolling after stopping the JS with Firefox's slow-script-detection-thingy (smooth): https://files.alinpanaitiu.com/joshwcomeau-slow-scroll_2.mp4
The code seems to enter a tight loop here whenever I'm scrolling: https://files.alinpanaitiu.com/joshwcomeau-debug-script.png
No one needs 100,000 LOC for a blog. A while back I wrote a blog generator for myself that took one markdown file per post and a template and turned it into a directory of static HTML files. The whole thing is 46 lines of shell script. The only dependency is a markdown parser.
I truly mean no offense by this: do you think that has something to do with why Josh’s blog has more readers than yours by probably many orders of magnitude?
He has way less readers than an almost infinite amount of blogs with 1/10 the lines of code so your argument proves nothing. And today Josh is losing a lot of readers that can't *READ* his blog. Because it is terribly developed, although it looks shiny (when it unfreezes).
My argument is that Josh has a lot of readers because it's clear that he puts a lot of time and effort into writing a great blog, and the code plays an important part. Obviously code isn't crucial to writing any successful blog (although in Josh's case it is) but my guess is that most of the people who see their hacked-up-and-spit-out homegrown blogging system as a positive put a similar amount of effort into that content. (See also "static gen basin": https://rakhim.org/honestly-undefined/19/)
Anyway, you seem to have an axe to grind here, so I'm ducking out. Have a nice day!
Anyway, you seem to have an axe to grind here, so I'm ducking out. Have a nice day!
I’d rather learn from the person who simply solved the problem than the person who made an unusable mess. I don’t know Josh and will pass on his blog.
[deleted]
I wanted to say, the OP home page hang my Firefox browser, probably due to issues with JavaScript regexp or React code.
Slow as molasses on my extremely aging iPhone 7, but I guess that’s to be expected
The code snippet toggle thingy takes almost half a second…
Scrolling down from the top of homepage is pretty choppy on my M3 Max in Safari
Josh has some really cool content on his site. The demos inlined within his posts are always top notch. His flexbox/grid articles are the most intuitive explanations of those layouts I've seen.
Josh really does have a lot of nice and shiny stuff. But Josh should also learn to optimise. Downloading 7MB of stuff for minimally interactive above-the-fold content is overkill.
Keep blog simple will make it's easier to generate raw idea.
I just made a new opensource project named TinyMind: https://github.com/mazzzystar/tinymind
Which allows you to create your blog page in 1 minutes and share to anyone.
It's non-profitable, just for hobby and helping most people who don't want stuck in Hexo/Hugo or code.
I just made a new opensource project named TinyMind: https://github.com/mazzzystar/tinymind
Which allows you to create your blog page in 1 minutes and share to anyone.
It's non-profitable, just for hobby and helping most people who don't want stuck in Hexo/Hugo or code.
I'm going to follow this thread just to know how successful "I built my own blog" posts still do in HN. I expect it to not attract that much attention anymore?
Josh is known for breaking down programming concepts with slick interactive visualizations and fancy animations. So step zero is, garner a reputation for building that sort of stuff and people will be curious about how you made it.
If you’re just rendering a folder of Markdown files and slapping on a couple dozen lines of CSS like other commenters suggest then of course no one will really care.
If you’re just rendering a folder of Markdown files and slapping on a couple dozen lines of CSS like other commenters suggest then of course no one will really care.
> So step zero is, garner a reputation for building that sort of stuff and people will be curious about how you made it.
Well, you seem to be the only one in this thread that know him and everybody else is reporting how awful is the UX of his blog OR recommending their own static site generator. Not sure how well this will impact his reputation.
Well, you seem to be the only one in this thread that know him and everybody else is reporting how awful is the UX of his blog OR recommending their own static site generator. Not sure how well this will impact his reputation.
Crashed on scrolling for me on latest Librewolf stable/Fedora 40. I usually love Josh's work, but this isn't it.
[deleted]
This was a lovely blogpost. I think as software engineers we've lost a lot of the enthusiasm that used to be prevalent amongst the profession 5-10 years back. He mentions it himself you don't necessarily need all of this for a blog. I still enjoyed the tour. It's a nice blog and his content is usually well written and easy to follow.
When I read the blog was 10.000 lines of code and there was a long list of busswordesques technologies implied, I thought this was a parody.
Reading that it crashes or eat the CPU for some people, I still believe it somewhat is. It also displays very badly on my own Firefox (with very recent computer).
And I could not find a list of all posts.
I mean… My own blog is a 500 lines python script without any external dependency. It has 42 lines of CSS. And it is all contained, content included, in one git repository. It has a list of all the blog posts you can quickly scroll through. It displays the same on every single computer/browser/smartphone, even very slow connection on old hardware. (sources are here : https://sr.ht/~lioploum/ploum.net/ )
But I’m not an experienced web dev.
Reading that it crashes or eat the CPU for some people, I still believe it somewhat is. It also displays very badly on my own Firefox (with very recent computer).
And I could not find a list of all posts.
I mean… My own blog is a 500 lines python script without any external dependency. It has 42 lines of CSS. And it is all contained, content included, in one git repository. It has a list of all the blog posts you can quickly scroll through. It displays the same on every single computer/browser/smartphone, even very slow connection on old hardware. (sources are here : https://sr.ht/~lioploum/ploum.net/ )
But I’m not an experienced web dev.
[deleted]
I find this post a bit misleading. It seems like he didn't build a blog. He built a website with real requirements, then added a blog to it.
The title* feels a bit rage baity to be honest.
The title* feels a bit rage baity to be honest.
That guys made it to the top of the Bell Curve…
https://mamot.fr/@ploum/113044736819173509
https://mamot.fr/@ploum/113044736819173509