6 ms·

How I Built My Blog

62 points by soheilpro 2y ago

keybits 2y ago
> 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.
- onli 2y ago
  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.
  - indigodaddy 2y ago
    Can you link the php blog project?
    - onli 2y ago
      Sure: https://github.com/s9y/Serendipity https://github.com/s9y/Serendipity
- meiraleal 2y ago
  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.
  - andrewingram 2y ago
    It wouldn't surprise me if a lot of those 100k lines were from the interactive playgrounds that are specific to each blog post.
    - maronato 2y ago
      or the blog posts themselves.
- astura 2y ago
  No, it's actually ridiculous to write 100,000 lines of code to display some text.
  - FredPret 2y ago
    It certainly would be, but take a look at his so-called blog before you comment. It's actually a giant website with numerous applets and interactive doodads.
- donatj 2y ago
  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.
meiraleal 2y ago
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?
- jakelazaroff 2y ago
  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.
  - meiraleal 2y ago
    > 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.
paranoidxprod 2y ago
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.
indigodaddy 2y ago
Slow as molasses on my extremely aging iPhone 7, but I guess that’s to be expected
- indigodaddy 2y ago
  The code snippet toggle thingy takes almost half a second…
pxtail 2y ago
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.
- Gethsemane 2y ago
  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
  - pen2l 2y ago
    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.
- wakawaka28 2y ago
  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.
jrhey 2y ago
Scrolling down from the top of homepage is pretty choppy on my M3 Max in Safari
bestest 2y ago
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.
michaelfm1211 2y ago
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.
- jakelazaroff 2y ago
  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?
  - deleted 2y ago
    [deleted]
  - meiraleal 2y ago
    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).
    - jakelazaroff 2y ago
      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/ 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!
  - cr125rider 2y ago
    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.
blenderob 2y ago
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.
- rpgbr 2y ago
  Mine?[1] Pure HTML/CSS handwritten, no JS, powered by Jekyll. [1] https://notes.ghed.in https://notes.ghed.in
  - medstrom 2y ago
    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.
- ReleaseCandidat 2y ago
  > 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/source/markdown2html.js https://codeberg.org/Release-Candidate/pages/src/branch/sour... https://codeberg.org/Release-Candidate/pages/src/branch/source/package.json https://codeberg.org/Release-Candidate/pages/src/branch/sour...
- neogodless 2y ago
  It's not a very good blog but it is simple HTML + vanilla JS. https://retorch.com/blog/ https://retorch.com/blog/
dzonga 2y ago
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
- _heimdall 2y ago
  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.
- jakelazaroff 2y ago
  Frankly, I don’t think it’s feasible for a newbie to build a blog like Josh’s.
  - deleted 2y ago
    [deleted]
- sawmurai 2y ago
  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.
deleted 2y ago
[deleted]
alin23 2y ago
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 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 https://files.alinpanaitiu.com/joshwcomeau-debug-script.png
ClaraForm 2y ago
Crashed on scrolling for me on latest Librewolf stable/Fedora 40. I usually love Josh's work, but this isn't it.
todotask 2y ago
I wanted to say, the OP home page hang my Firefox browser, probably due to issues with JavaScript regexp or React code.
koririn 2y ago
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.
ploum 2y ago
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/ https://sr.ht/~lioploum/ploum.net/ ) But I’m not an experienced web dev.
ploum 2y ago
That guys made it to the top of the Bell Curve… https://mamot.fr/@ploum/113044736819173509 https://mamot.fr/@ploum/113044736819173509
deleted 2y ago
[deleted]
thomas_moon 2y ago
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.
mazzystar 2y ago
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 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.

62 points by soheilpro 2y ago

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

onli 2y ago
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.
- indigodaddy 2y ago
  Can you link the php blog project?
  - onli 2y ago
    Sure: https://github.com/s9y/Serendipity https://github.com/s9y/Serendipity
meiraleal 2y ago
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.
- andrewingram 2y ago
  It wouldn't surprise me if a lot of those 100k lines were from the interactive playgrounds that are specific to each blog post.
  - maronato 2y ago
    or the blog posts themselves.
astura 2y ago
No, it's actually ridiculous to write 100,000 lines of code to display some text.
- FredPret 2y ago
  It certainly would be, but take a look at his so-called blog before you comment. It's actually a giant website with numerous applets and interactive doodads.
donatj 2y ago
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.

meiraleal 2y ago

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?

jakelazaroff 2y ago
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.
- meiraleal 2y ago
  > 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.

paranoidxprod 2y ago

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.

indigodaddy 2y ago

Slow as molasses on my extremely aging iPhone 7, but I guess that’s to be expected

indigodaddy 2y ago
The code snippet toggle thingy takes almost half a second…

pxtail 2y ago

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.

Gethsemane 2y ago
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
- pen2l 2y ago
  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.
wakawaka28 2y ago
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.

jrhey 2y ago

Scrolling down from the top of homepage is pretty choppy on my M3 Max in Safari

bestest 2y ago

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.

michaelfm1211 2y ago

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.

jakelazaroff 2y ago
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?
- deleted 2y ago
  [deleted]
- meiraleal 2y ago
  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).
  - jakelazaroff 2y ago
    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/ 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!
- cr125rider 2y ago
  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.

blenderob 2y ago

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.

rpgbr 2y ago
Mine?[1] Pure HTML/CSS handwritten, no JS, powered by Jekyll. [1] https://notes.ghed.in https://notes.ghed.in
- medstrom 2y ago
  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.
ReleaseCandidat 2y ago
> 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/source/markdown2html.js https://codeberg.org/Release-Candidate/pages/src/branch/sour... https://codeberg.org/Release-Candidate/pages/src/branch/source/package.json https://codeberg.org/Release-Candidate/pages/src/branch/sour...
neogodless 2y ago
It's not a very good blog but it is simple HTML + vanilla JS. https://retorch.com/blog/ https://retorch.com/blog/

dzonga 2y ago

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

_heimdall 2y ago
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.
jakelazaroff 2y ago
Frankly, I don’t think it’s feasible for a newbie to build a blog like Josh’s.
- deleted 2y ago
  [deleted]
sawmurai 2y ago
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.

deleted 2y ago

[deleted]

alin23 2y ago

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 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 https://files.alinpanaitiu.com/joshwcomeau-debug-script.png

ClaraForm 2y ago

Crashed on scrolling for me on latest Librewolf stable/Fedora 40. I usually love Josh's work, but this isn't it.

todotask 2y ago

I wanted to say, the OP home page hang my Firefox browser, probably due to issues with JavaScript regexp or React code.

koririn 2y ago

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.

ploum 2y ago

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/ https://sr.ht/~lioploum/ploum.net/ ) But I’m not an experienced web dev.

ploum 2y ago

That guys made it to the top of the Bell Curve… https://mamot.fr/@ploum/113044736819173509 https://mamot.fr/@ploum/113044736819173509

deleted 2y ago

[deleted]

thomas_moon 2y ago

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.

mazzystar 2y ago

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