[{"data":1,"prerenderedAt":399},["ShallowReactive",2],{"\u002Fblog\u002F2021\u002Fhugo-theme":3,"\u002Fblog\u002F2021\u002Fhugo-theme-surround":388},{"id":4,"title":5,"author":6,"badge":11,"body":13,"date":376,"description":377,"draft":378,"extension":379,"image":380,"meta":382,"navigation":383,"path":384,"seo":385,"stem":386,"__hash__":387},"posts\u002Fblog\u002F2021\u002Fhugo-theme.md","Hugo Theme With Developer Focus In Mind",{"name":7,"to":8,"avatar":9},"Nir Galon","https:\u002F\u002Fx.com\u002Fnirgn975",{"src":10},"\u002Favatar.webp",{"label":12},"open source contribution",{"type":14,"value":15,"toc":368},"minimark",[16,28,43,46,51,66,77,87,96,99,170,174,181,241,244,256,272,277,283,288,311,315,318,328,349,353,356,364],[17,18,19,20,27],"p",{},"Lately I was redesigning ",[21,22,26],"a",{"href":23,"rel":24},"http:\u002F\u002Fnir.galon.io",[25],"nofollow","my own resume website",". I consider it version 4 of the website, because it's the fourth major change I did to it. This website has been running for quite a few years now, and every now and then I want to change the underlying technology that I use or redesign it, so I spend a weekend and do it.",[17,29,30,31,36,37,42],{},"This time I also wanted to change the design, but not that drastically. The main thing I wanted to change is the underlying template generator (from ",[21,32,35],{"href":33,"rel":34},"https:\u002F\u002Fjekyllrb.com",[25],"Jekyll"," to ",[21,38,41],{"href":39,"rel":40},"https:\u002F\u002Fgohugo.io",[25],"Hugo","), because I already use Hugo in my blog and I just love it. But I also wanted to add 2 sections that I never saw in any template (and I searched a lot because at first I didn't want to put the time and develop it myself): first is GitHub repos (projects) I want to highlight in my resume. The second section is for the blog, automatically get the latest posts in there.",[17,44,45],{},"So, I spent the weekend and did it. I was very pleased with the results. So pleased that I thought other people will also want this design and features in their own resume website.",[47,48,50],"h2",{"id":49},"_1-hugo-theme","1. Hugo Theme",[17,52,53,54,59,60,65],{},"It took me some time to really sit down and do it, but I finally did it. I converted my own resume website to a Hugo theme and I'm ",[21,55,58],{"href":56,"rel":57},"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FEating_your_own_dog_food",[25],"eating my own dog food"," - my own resume website uses it, you can check the ",[21,61,64],{"href":62,"rel":63},"https:\u002F\u002Fgithub.com\u002Fnirgn975\u002Fresume",[25],"source code",".",[17,67,68,69,65],{},"I call the theme ",[70,71,72],"strong",{},[21,73,76],{"href":74,"rel":75},"https:\u002F\u002Fgithub.com\u002Fnirgn975\u002FdevRes",[25],"devRes",[17,78,79],{},[80,81],"img",{"alt":82,"className":83,"src":86},"devRes Mockups",[84,85],"rounded-lg","mx-auto","\u002Fposts\u002F2021\u002Fhugo-theme\u002Fdevres-mockups.webp",[17,88,89,90,95],{},"To see this theme in action (without my own content), here is a ",[21,91,94],{"href":92,"rel":93},"https:\u002F\u002Fnirgn975.github.io\u002FdevRes",[25],"live demo"," site which is rendered with this theme and some content for documentation.",[17,97,98],{},"There are a lot of other great features that this theme has, like:",[100,101,102,106,109,112,115,130,145,154,157],"ul",{},[103,104,105],"li",{},"Responsive layout.",[103,107,108],{},"Light \u002F Dark mode.",[103,110,111],{},"Generate GitHub project cards automatically from a repo name.",[103,113,114],{},"Automagically get the latest posts from your blog.",[103,116,117,118,123,124,129],{},"Use ",[21,119,122],{"href":120,"rel":121},"https:\u002F\u002Ffontawesome.com",[25],"Font Awesome"," or ",[21,125,128],{"href":126,"rel":127},"https:\u002F\u002Fdevicon.dev",[25],"Devicons"," icons.",[103,131,132,133,138,139,144],{},"Support ",[21,134,137],{"href":135,"rel":136},"https:\u002F\u002Fanalytics.google.com\u002Fanalytics",[25],"Google"," and ",[21,140,143],{"href":141,"rel":142},"https:\u002F\u002Fplausible.io",[25],"Plausible"," analytics.",[103,146,147,148,153],{},"Optimized for Performance, Accessibility, Best Practices, and SEO: 90+ (out of 100) on mobile and desktop in ",[21,149,152],{"href":150,"rel":151},"https:\u002F\u002Fdevelopers.google.com\u002Fspeed\u002Fpagespeed\u002Finsights",[25],"Google PageSpeed Insights"," (lighthouse).",[103,155,156],{},"CDN for all third-party libraries supported.",[103,158,159,160,138,165,65],{},"Automated contact form with ",[21,161,164],{"href":162,"rel":163},"https:\u002F\u002Fformspree.io",[25],"formspree",[21,166,169],{"href":167,"rel":168},"https:\u002F\u002Fgetform.io",[25],"getform",[47,171,173],{"id":172},"_2-getting-started","2. Getting started",[17,175,176,177,180],{},"If you want to use this theme, it can't get any easier than this. All you need to do is to install ",[21,178,41],{"href":39,"rel":179},[25],", create a new website, and clone this theme as a submodule",[182,183,189],"pre",{"className":184,"code":185,"filename":186,"language":187,"meta":188,"style":188},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","brew install hugo\nhugo new site myownresume\ngit submodule add git@github.com:nirgn975\u002FdevRes.git themes\u002FdevRes\n","terminal","bash","",[190,191,192,208,223],"code",{"__ignoreMap":188},[193,194,197,201,205],"span",{"class":195,"line":196},"line",1,[193,198,200],{"class":199},"sBMFI","brew",[193,202,204],{"class":203},"sfazB"," install",[193,206,207],{"class":203}," hugo\n",[193,209,211,214,217,220],{"class":195,"line":210},2,[193,212,213],{"class":199},"hugo",[193,215,216],{"class":203}," new",[193,218,219],{"class":203}," site",[193,221,222],{"class":203}," myownresume\n",[193,224,226,229,232,235,238],{"class":195,"line":225},3,[193,227,228],{"class":199},"git",[193,230,231],{"class":203}," submodule",[193,233,234],{"class":203}," add",[193,236,237],{"class":203}," git@github.com:nirgn975\u002FdevRes.git",[193,239,240],{"class":203}," themes\u002FdevRes\n",[17,242,243],{},"Now all you have left to do is just config it as your theme",[182,245,250],{"className":246,"code":247,"filename":248,"language":249,"meta":188,"style":188},"language-toml shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","theme = \"devRes\"\n","config.toml","toml",[190,251,252],{"__ignoreMap":188},[193,253,254],{"class":195,"line":196},[193,255,247],{},[17,257,258,259,264,265,267,268,271],{},"You can look at the ",[21,260,263],{"href":261,"rel":262},"https:\u002F\u002Fgithub.com\u002Fnirgn975\u002FdevRes\u002Ftree\u002Fmain\u002FexampleSite",[25],"exampleSite"," to check out the ",[190,266,248],{}," and the ",[190,269,270],{},"data\u002Fcontent.yaml"," for examples.",[273,274,276],"h3",{"id":275},"_21-customization","2.1 Customization",[17,278,279,280,282],{},"Your resume content should be added in the ",[190,281,270],{}," file.",[17,284,285,286,282],{},"If you want to change the theme colors, just do it in the ",[190,287,248],{},[17,289,290,291,294,295,298,299,304,305,138,308,65],{},"And lastly your favicons should go in an ",[190,292,293],{},"icons"," directory inside ",[190,296,297],{},"static",". You can easily generate them with ",[21,300,303],{"href":301,"rel":302},"https:\u002F\u002Frealfavicongenerator.net",[25],"realfavicongenerator",", and set theme-color and background-color in ",[190,306,307],{},"browserconfig.xml",[190,309,310],{},"site.webmanifest",[273,312,314],{"id":313},"_22-want-to-help","2.2 Want to help?",[17,316,317],{},"Great! All issues and pull requests are welcome.",[17,319,320,321,324,325,327],{},"For local development just start ",[21,322,213],{"href":39,"rel":323},[25]," with ",[190,326,263],{}," as the source.",[182,329,331],{"className":184,"code":330,"filename":186,"language":187,"meta":188,"style":188},"hugo server --source=exampleSite -v --gc\n",[190,332,333],{"__ignoreMap":188},[193,334,335,337,340,343,346],{"class":195,"line":196},[193,336,213],{"class":199},[193,338,339],{"class":203}," server",[193,341,342],{"class":203}," --source=exampleSite",[193,344,345],{"class":203}," -v",[193,347,348],{"class":203}," --gc\n",[47,350,352],{"id":351},"_3-summary","3. Summary",[17,354,355],{},"The project will get into the showcase at Hugo - an issue has been opened and all the checks are green.",[17,357,358,359,65],{},"I really hope you find it useful and if you ever use it or just play with the theme, I’ll be thrilled to get a link or just hear from you. If you have any issues or any questions feel free to open a ",[21,360,363],{"href":361,"rel":362},"https:\u002F\u002Fgithub.com\u002Fnirgn975\u002FdevRes\u002Fdiscussions",[25],"new discussion at GitHub",[365,366,367],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":188,"searchDepth":210,"depth":210,"links":369},[370,371,375],{"id":49,"depth":210,"text":50},{"id":172,"depth":210,"text":173,"children":372},[373,374],{"id":275,"depth":225,"text":276},{"id":313,"depth":225,"text":314},{"id":351,"depth":210,"text":352},"2021-01-01","Introducing devRes, a developer-focused Hugo resume theme.",false,"md",{"src":381},"\u002Fposts\u002F2021\u002Fhugo-theme\u002Fhugo-logo-wide.webp",{},true,"\u002Fblog\u002F2021\u002Fhugo-theme",{"title":5,"description":377},"blog\u002F2021\u002Fhugo-theme","X5vBL1udp2GYY8rHNgYcNU_K8j1_eQt4W9EET9RgqLI",[389,394],{"title":390,"path":391,"stem":392,"description":393,"children":-1},"Releasing Software Is Hard! Is it?","\u002Fblog\u002F2020\u002Freleasing-software-is-hard","blog\u002F2020\u002Freleasing-software-is-hard","Automating versioning and releases with Semantic Versioning and semantic-release.",{"title":395,"path":396,"stem":397,"description":398,"children":-1},"A Practical Guide to Design System","\u002Fblog\u002F2022\u002Fdesign-system","blog\u002F2022\u002Fdesign-system","A practical guide to building a Vue.js component library with Storybook.",1786001638688]