DOHackathon: Building super fast Portfolio with Hugo

#dohackathon

What I built

Guys, i have built my personal portfolio site using a static site generator called Hugo, made use of Hugo template alongside, I did redesign and twist things to my own taste.

Category Submission:

Personal site/Portfolio

App Link

DO generated URL: https://saintmalik-qu9u2.ondigitalocean.app/

My Custom Domain: https://saintmalik.me/

Screenshots

Description

My personal porfolio website, making it blazing fast and stress free with DO.

Link to Source Code

https://github.com/saintmalik/saintmalik.me

Permissive License

Background

(What made you decide to build this particular app?)

Well starting out my career, i see alot of collegues pulling up their folio page, says it speaks everything they need to whoever is looking for them, making them a present individual on the internet space.

So i decide to pull up mine, a blogging section is available to share things i learn, also a work/project page to share with people what I've done or what am working on.

(What inspired you?)

I wanted my own personal portfolio to be out there, to speak about me, to share ideas also via blog section.

How I built it

(How did you utilize DigitalOcean’s App Platform? Did you learn something new along the way? Pick up a new skill?)

Started by reading alot of tutorials and hugo documentations, then i proceed to install Hugo CLI on my system.

Then i picked one of the hugo themes that caught my attention, found some other designs attractive too, but the one i picked at first is what i wanted to work with,but there is a particular feature on the other themes that made me love them.

So i went on building with the first theme i picked, keeping in mind that i will make the feature in other themes for mine also, yeah it was these Avatar feature, see a demo here

So i keep coding and googling stuffs, there was a point i had issues with Hugo Server Auto reload, did so many research before getting ahead of the issue.

hugo server --disableFastRender

Thats the command that bailed me out✌️.

I was new to Go lang and Hugo entirely, i had to keep googling stuffs, i spent up to three days before i could seperate the Title tag of the Home page from the one of the blogpost page.

Spent tons of hours trying to figure out how to seperate the descriptions/meta description each posts will render to what the blog home section will render.

Now coming to the issues of compressing my code because it was bulky, that brought me to learning about how compression works, googled alot of stuffs, found Babel and Webpack.

The integration wasn't friendly for a beginner in Hugo, so i had to use the in app Assets minification techniques that hugo has, read more about it here Hugo Assets Minification

Also i learned about Asset bundling, i.e Concatenate many js files into one, to reduce the HTTP request made when your website loads up Hugo Assets Bundling.

And yeah i also learned how Fingerprinting/Hashing of files work, it makes it easy for caching web app assets, which definately helps the website to speed up on the next visit of a user.

So whenever a cache is cleared on the web app, a new hash code is generated for the JS/CSS files, so the old url for those assets will result in 404.

Then the new url will be fetched, isn't that awesome? Yeah it is.

In addition, The color blending, yeah am not so good at picking colors, so i spent so many days changing the colors of my folio site, before settling with the one thats on the folio site right now.

Lastly, i was able to get the heavy assets and code to load at 0.6seconds😎😉, thanks to DO Global CDN😊 which is powered with cloudflare.

Also i dont have to worry about DDoS attack, DO has DDoS mitigation in place 🙈😎.

I must say also, DO Auto Deployment to Github made everything more easy for me, so i worry less about the server, i make my changes on github and yeah it will reflect.

The auto detection of static sites also save me the stress of doing some build run or writing some special config so it recognize the static app and trying to deploy😍.