[{"data":1,"prerenderedAt":487},["ShallowReactive",2],{"\u002Fblogs\u002Flessons-from-rebuilding-personal-website-from-scratch":3},{"id":4,"title":5,"body":6,"coverImage":474,"description":477,"extension":478,"meta":479,"navigation":480,"path":481,"publishedOn":482,"seo":483,"sitemap":484,"stem":485,"__hash__":486},"content\u002Fblogs\u002Flessons-from-rebuilding-personal-website-from-scratch.md","Lessons Learned from Rebuilding my Personal Website",{"type":7,"value":8,"toc":461},"minimark",[9,13,21,24,27,32,39,42,75,90,120,137,156,159,162,166,173,176,181,200,203,206,240,253,256,260,263,266,292,299,302,306,340,343,346,359,362,366,381,394,409,416,419,423,438,441,455,458],[10,11,12],"p",{},"If you know me well, you would know I advocate for blogging as a programmer\nevery now & then! The benefits for doing so are countless & you never know what\nkind of prospects you might land on simply because of your blog! But documenting\nall of the said reasons deserves its own write-up so I'll reserve this topic for\nanother article.",[10,14,15,16,20],{},"Any way, I started writing some years ago in hopes of sharing my knowledge,\nexpertise & skills with the other self-taught Software Engineers on the\nInternet. In doing so I hoped (",[17,18,19],"em",{},"and still do so",") it helps someone out there\nlooking for an answer to the queries they might have.",[10,22,23],{},"This's article is similar in context as in, through this article I hope to teach\nyou a thing or two about creating a personal website\u002Fblog from scratch! The\narticle will be a multi-part series where each individual write-up focuses on an\nindividual aspect of developing a real-world frontend project. The series is a\nsource of documentation for the entirety of my experience recreating my personal\nwebsite\u002Fblog using frontend tools like React.js & related technologies.",[10,25,26],{},"The series will also shed light on the decision-making factors involved in\ncreating a production-grade project. So, grab yourself a cup of coffee before\nreading the series because it'll take you a while to absord every bit of\ninformation I have to share here.",[28,29,31],"h2",{"id":30},"an-introduction-to-the-tools-services-used-so-far","An Introduction to the Tools & Services Used So Far",[10,33,34,35,38],{},"If I can recall it right, I wrote my first piece of article way back in 2016! It\nwasn't my proudest creation but it was definitely something which got me\nstarted. A good six years later I can't find them anymore, ",[17,36,37],{},"I probably deleted\nthose from embarrassment",". 😅",[10,40,41],{},"These days I'm more wary of how I maintain backups of my content articles. So,\nrest assured a solid system of having backups is one of the most important\noption in my workflow today! In a later section of the series we'll take a more\nin-depth explanation on how I backup my articles today.",[10,43,44,45,52,53,58,59,64,65,68,69,74],{},"That said, like any other beginner blogger who usually starts out with an hosted\noption like ",[46,47,51],"a",{"href":48,"rel":49},"https:\u002F\u002Fwww.blogger.com\u002Fabout",[50],"nofollow","Blogger"," or\n",[46,54,57],{"href":55,"rel":56},"https:\u002F\u002Fwordpress.com",[50],"Wordpress",", I wrote my first on\n",[46,60,63],{"href":61,"rel":62},"https:\u002F\u002Fmedium.com",[50],"Medium",". Medium served me quite well & this is by far the\nlongest platform I used side-by-side with other alternatives. If you're\ninterested in checking out my old (",[17,66,67],{},"and now unmaintained profile","), feel to\n",[46,70,73],{"href":71,"rel":72},"https:\u002F\u002Fjarmos.medium.com",[50],"check it out",".",[10,76,77,78,83,84,89],{},"Medium was perfect for my initial requirements as I didn't know much about\n",[46,79,82],{"href":80,"rel":81},"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FSearch_engine_optimization",[50],"Search Engine Optimisation (SEO)","\n& it's not like I cared about it as much back then. Regardless, I soon stumbled\nacross a category of tools called\n",[46,85,88],{"href":86,"rel":87},"https:\u002F\u002Fwww.cloudflare.com\u002Fen-gb\u002Flearning\u002Fperformance\u002Fstatic-site-generator",[50],"Static Site Generators (SSG)","\nfrom a online community I was part of.",[10,91,92,93,98,99,104,105,109,110,115,116,119],{},"There I learned about ",[46,94,97],{"href":95,"rel":96},"https:\u002F\u002Fgetpelican.com",[50],"Gatsby"," which was based on\n",[46,100,103],{"href":101,"rel":102},"https:\u002F\u002Freactjs.org",[50],"React.js"," & ",[46,106,108],{"href":95,"rel":107},[50],"Pelican",", based on\n",[46,111,114],{"href":112,"rel":113},"https:\u002F\u002Fwww.python.org",[50],"Python",". I didn't know JavaScript (",[17,117,118],{},"let alone\nReact.js",") hence Pelican was the next choice I settled on for a while.",[10,121,122,123,126,127,130,131,136],{},"Pelican served me well (",[17,124,125],{},"after Medium",") & a majority of my older write-ups were\ncreated using it. I ditched Pelican as well due to it's bad developer-experience\n(",[17,128,129],{},"more on it later",") before moving over to ",[46,132,135],{"href":133,"rel":134},"https:\u002F\u002Fgohugo.io",[50],"Hugo"," sometime\naround 2019.",[10,138,139,140,144,145,150,151,74],{},"Although Hugo did have its own shortcomings but it excelled at what it was\nsupposed to do! Its also supported by a ",[141,142,143],"strong",{},"HUGE"," community & some dedicated\nmaintainers as such, help was quick to come by. It also supported one of the\nlargest support for community driven themes & I used the\n",[46,146,149],{"href":147,"rel":148},"https:\u002F\u002Fadityatelange.github.io\u002Fhugo-PaperMod",[50],"PaperMod"," theme until\n",[46,152,155],{"href":153,"rel":154},"https:\u002F\u002Fgithub.com\u002Fadityatelange\u002Fhugo-PaperMod\u002Fissues\u002F624",[50],"something broke",[10,157,158],{},"The theme maintainer refused to provide a fix, neither was a he willing to help\nme debug the issue further & the discussion was closed promptly. This was the\nmoment I realised the need to develop a website where I had absolute control\nover every decision-making process of the project.",[10,160,161],{},"Fret not but we will take a more detailed look on to the decision-making process\nfor the project as well. But for now the next section of this article sheds a\nbrighter light on the drawbacks of the aforementioned tools & why I moved away\nfrom them.",[28,163,165],{"id":164},"the-major-drawbacks-of-the-previously-mentioned-tools","The Major Drawbacks of the Previously Mentioned Tools",[10,167,168,169,172],{},"As a Software Engineer myself I deal with the consequences of compromises &\nadvantages of the tools I use on a daily basis. And hence, I'm well aware of\neach of my tool's shortcomings. It's simply impossible to stumble across a\nseemingly utopian tool which ",[17,170,171],{},"serves my needs to the T",". Well at least I have\nnot come across any such tools yet. But rest assured I'll share my thoughts &\nexperiences of working on such a tool if I ever come across one in the first\nplace.",[10,174,175],{},"That said, let's quickly tread over the specific details of the previously\nmentioned tools which didn't work out for me. And I'll also attempt to justify\nmy reasons to ditch those tools in favour of an alternative in this section of\nthe article.",[177,178,180],"h3",{"id":179},"mediums-paywall-the-lack-of-a-developer-friendly-wysiwyg-editor","Medium's Paywall & the Lack of a Developer-Friendly WYSIWYG Editor",[10,182,183,184,187,188,191,192,195,196,199],{},"Medium seemed like \"",[17,185,186],{},"the perfect platform","\" to blog on for me & I was so wrong\nto assume so! The platform primarily caters to its the western markets (",[17,189,190],{},"more on\nit later","). And it's WYSIWYG editor is ",[141,193,194],{},"BAD"," for technical writing (",[17,197,198],{},"I can't\nemphasise enough on how bad it is!",").",[10,201,202],{},"For more context, try writing some code snippets on the platform & you'll see\nwhat I mean!",[10,204,205],{},"That said, I stumbled across the following issues when writing on Medium:",[207,208,209,213,216,225],"ol",{},[210,211,212],"li",{},"Lack of native support for code snippets & inline code.",[210,214,215],{},"The platform rolls out it's own WYSIWYG editor & doesn't support even a\nlittle bit of Markdown!",[210,217,218,219,224],{},"Code snippets are required to be embedded from a third party source like\n",[46,220,223],{"href":221,"rel":222},"https:\u002F\u002Fgist.github.com",[50],"GitHub Gists",". It cluttered my GitHub profile & the\nembedded code snippets doesn't look nice either.",[210,226,227,228,233,234,239],{},"Some of the write-ups were put behind a paywall when the\n",[46,229,232],{"href":230,"rel":231},"https:\u002F\u002Fmedium.com\u002Fearn",[50],"Medium Partner Program"," wasn't even\n",[46,235,238],{"href":236,"rel":237},"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Farticles\u002F115011694187-Getting-started-with-the-Partner-Program",[50],"available in my country","!\nWhich means even if I wanted to I couldn't monetise my content.",[10,241,242,243,248,249,252],{},"Fortunately, Hashnode proved to be a good alternative & I\n",[46,244,247],{"href":245,"rel":246},"https:\u002F\u002Fjarmos.medium.com\u002Fmoving-to-hashnode-to-share-better-content-as-a-technical-writer-5ba2d171a3da",[50],"wrote about it","\nearlier. And so far, Hashnode's turned out to be an absolute pleasure to write\non! Sure, the traffic to my content has taken a massive hit (",[17,250,251],{},"the monthly views\nwent down from ~5000 to ~1000","). But I believe that's alright for me & I'll\nrevert back to the old numbers when my finished product is complete!",[10,254,255],{},"Putting aside Medium & Hashnode both, I did try out a couple off SSGs before\nsettling down on Hashnode. I mentioned a couple of them before, so the next\nsection discusses my experience with one of the first SSG I tried.",[177,257,259],{"id":258},"pelicans-weird-take-on-distributing-themes-much-more","Pelican's Weird Take on Distributing Themes & Much More",[10,261,262],{},"Pelican was a choice in my list primarily because of my expertise in Python. The\nSSG is developed in Python, the maintainers of the project were active too & it\nsupported hundreds of themes.",[10,264,265],{},"The issue with it though were as follows:",[207,267,268,275,284],{},[210,269,270,271,274],{},"The tool was developed in a monorepo ",[17,272,273],{},"side-by-side with the themes"," which\nmeans I had to perform a complete deep clone of everything there is before I\ncould use a theme!",[210,276,277,278,283],{},"Pelican used ",[46,279,282],{"href":280,"rel":281},"https:\u002F\u002Fjinja.palletsprojects.com",[50],"Jinja 3"," in backend for the\ntemplating needs which is fine but it makes the website look antiquated and\nfrom the early 2000s.",[210,285,286,287,74],{},"The tool is old, put together using hacky CLI-commands & its age is more\napparent from the bad\n",[46,288,291],{"href":289,"rel":290},"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FUser_experience#Developer_experience",[50],"Developer Experience (DX)",[10,293,294,295,298],{},"Pelican is a nice tool for those who're using it since ages & is content with\nit. But it didn't pique my interests at all with the bad DX & the lack-lustre\nsupport for themes. And hence Hugo came to me like ",[17,296,297],{},"the knight in a shining\narmour",". It's community support & by far the largest collection of available\nthemes is what attracted me towards it.",[10,300,301],{},"So, let's learn a bit more about Hugo in the next section & we'll also try to\nunderstand why even Hugo didn't serve my needs towards the end.",[177,303,305],{"id":304},"hugos-learning-curve-is-too-steep-for-non-golang-devs","Hugo's Learning Curve is Too Steep for Non-Golang Devs",[10,307,308,309,314,315,324,325,330,331,336,337,199],{},"Hugo is built using ",[46,310,313],{"href":311,"rel":312},"https:\u002F\u002Fgo.dev",[50],"Golang"," & is actively developed by\n",[46,316,319,320,323],{"href":317,"rel":318},"https:\u002F\u002Fbep.is",[50],"Bjørn Erik Pedersen (aka \"",[17,321,322],{},"bep","\")"," among other full-time\ncontributors. It uses ",[46,326,329],{"href":327,"rel":328},"https:\u002F\u002Fpkg.go.dev\u002Ftext\u002Ftemplate",[50],"Go Templates","\nbehind-the-scenes which is what makes Hugo as powerful as it is right now.\nBesides, the powerful Hugo backend, there are\n",[46,332,335],{"href":333,"rel":334},"https:\u002F\u002Fthemes.gohugo.io",[50],"hundreds of officially supported themes"," (",[17,338,339],{},"and a\nquick Google Search will help you find more unofficial ones",[10,341,342],{},"That said, the issue I had with Hugo was it's steep learning curve! Any little\ncustomisation I had to perform in my website required me to have some level of\nproficiency with Go Templates. And if your preferred theme didn't bother\ndocumenting the exact procedure to customise it then you were out of luck!",[10,344,345],{},"And guess what?! You'll barely stumble across themes which are well-documented &\nwell-maintained.",[10,347,348,349,353,354,358],{},"I was using the ",[46,350,149],{"href":351,"rel":352},"https:\u002F\u002Fgithub.com\u002Fadityatelange\u002Fhugo-PaperMod",[50]," theme\nfor the longest time & I was quite happy until\n",[46,355,357],{"href":153,"rel":356},[50],"it broke",". The\nauthor was unwilling to fix the issue nor was he cooperative about debugging it\nwith me.",[10,360,361],{},"This was the point when I realised I need to build something of my own & from\nabsolute scratch.",[177,363,365],{"id":364},"gatsbys-modularity-was-a-major-turn-off","Gatsby's Modularity was a Major Turn Off",[10,367,368,369,374,375,380],{},"Gatsby caught my attention back then primarily because they advertised the tool\nas an SSG powered by React.js. Following on the footsteps of Hugo, they also\nsupported ",[46,370,373],{"href":371,"rel":372},"https:\u002F\u002Fthemejam.gatsbyjs.org\u002Fshowcase",[50],"a ton of beautiful themes",".\nAnd on top of it you can extend the core behavioural features using\n",[46,376,379],{"href":377,"rel":378},"https:\u002F\u002Fwww.gatsbyjs.com\u002Fplugins",[50],"officially supported Gatsby plugins"," as well.",[10,382,383,384,387,388,393],{},"While Gastby's ",[17,385,386],{},"plug-and-play"," approach sounds nice on paper, it isn't so\nespecially if you're concerned about software stability. Except the\n",[46,389,392],{"href":390,"rel":391},"https:\u002F\u002Fgithub.com\u002Fgatsbyjs\u002Fgatsby",[50],"Gatsby Core"," & perhaps a couple other\nofficial themes\u002Fplugins everything else is community maintained.",[10,395,396,397,402,403,408],{},"How long & what kind of support will you receive in case something breaks in\nyour website is left on the whims of the ",[46,398,401],{"href":399,"rel":400},"https:\u002F\u002Fwww.npmjs.com",[50],"NPM"," package\nmaintainer. If the\n",[46,404,407],{"href":405,"rel":406},"https:\u002F\u002Fqz.com\u002F646467\u002Fhow-one-programmer-broke-the-internet-by-deleting-a-tiny-piece-of-code",[50],"author ever has some malicious intent",",\nonly God can save your project then.",[10,410,411,412,415],{},"Considering the hundreds if not thousands of hours I'll probably spend on my\nwebsite, the fact that it heavily relies on a flimsy package is scary. My\ndistraught was even more solidified knowing I would have to resort to multiple\nunofficial & individually maintained \"",[17,413,414],{},"plugins","\" to extend the core Gatsby\nfeatures.",[10,417,418],{},"Unfortunately, in JavaScript & frontend world, this scene is more common than\nyou can imagine. And the modular approach Gatsby went for only proved\ndetrimental for them in my use case.",[28,420,422],{"id":421},"summarising-the-lessons-learned","Summarising the Lessons Learned",[10,424,425,426,431,432,437],{},"All in all I spent around 4-6 years simply working to deploy & experiment\ndifferent versions of my personal website using various tools. As you can see,\nnot all of them served my needs but I learned a thing or two from each of those\ntools regardless. And that I believe wasn't a waste of time, in fact what I did\nwas based on the ",[46,427,430],{"href":428,"rel":429},"https:\u002F\u002Fagilemanifesto.org\u002Fprinciples.html",[50],"Agile principles","\nof a\n",[46,433,436],{"href":434,"rel":435},"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FSystems_development_life_cycle",[50],"Software Development Life Cycle (SDLC)","\nany way!",[10,439,440],{},"So, to summarise everything I discussed in this write-up, here are my learning:",[207,442,443,449,452],{},[210,444,445,446,74],{},"It doesn't matter how shiny a product is, as long as it's DX doesn't stand up\nto its mark, that tool will always be ",[17,447,448],{},"second in the list of choices",[210,450,451],{},"Security & stability is equally important for the long-term sustainable\ndevelopment of a project. What's the point in spending hours after hours\ntrying to fix issues a dependencies introduces rather than develop the core\nfeatures?",[210,453,454],{},"Irreversible roadblocks will show up if not today then tomorrow for sure, so\nit's best to be prepared for that moment. And restarting the project from\nscratch with the newfound knowledge shouldn't be seen as a failure.",[10,456,457],{},"These lessons helped me grow as a better self-taught Software Engineer & it also\ntaught me how to gain some foresight in to the success of a project. And I hope\nto implement these soft skills not only to my future projects but also to my\nfuture prospective employees\u002Fclients.",[10,459,460],{},"That said, this is only the beginning of a series I plan on writing, so stay\ntuned for more updates on this context! But feel free to reach out to me if you\nwould like to discuss your experience building your own personal website & the\ntools you used.",{"title":462,"searchDepth":463,"depth":463,"links":464},"",2,[465,466,473],{"id":30,"depth":463,"text":31},{"id":164,"depth":463,"text":165,"children":467},[468,470,471,472],{"id":179,"depth":469,"text":180},3,{"id":258,"depth":469,"text":259},{"id":304,"depth":469,"text":305},{"id":364,"depth":469,"text":365},{"id":421,"depth":463,"text":422},{"url":475,"alt":476},"https:\u002F\u002Fik.imagekit.io\u002Fjarmos\u002Flessons-of-rebuilding-personal-website.png?updatedAt=1702974992236","Lessons learned from rebuilding my personal website","Explore a developer's multi-year journey in building and evolving a personal website. Learn about the tools used, the drawbacks encountered with platforms like Medium and Pelican, and valuable lessons on choosing the right technology for a successful project.","md",{},true,"\u002Fblogs\u002Flessons-from-rebuilding-personal-website-from-scratch","2023-12-19",{"title":5,"description":477},{"loc":481},"blogs\u002Flessons-from-rebuilding-personal-website-from-scratch","v5DUASEHLlHgu7mFZcihT3WfwiwykNQKRVYM-EAAFtk",1788689045369]