DEV Community

Cover image for How to make your own (no template) personal website with React, Material UI, and Netlify

How to make your own (no template) personal website with React, Material UI, and Netlify

Sylvia Pap on June 27, 2020

Sometimes I feel like everything I write on here could be prefaced with "Not another [general category] post..." but I am still relatively new to t...
Collapse
Β 
hangindev profile image
Jason Leung πŸ§—β€β™‚οΈπŸ‘¨β€πŸ’» β€’

Good that you decide to make your own website without using template! Now this website is going to become your new playground where you can do whatever you want and build with whatever new tools you want to learn. Have fun and looking forward to your updates! 🍾

Collapse
Β 
stereoplegic profile image
Mike Bybee β€’ β€’ Edited

Sometimes I feel like everything I write on here could be prefaced with "Not another [general category] post..." but I am still relatively new to this world so I'm still covering and re-covering basics, but also finding very subtle ways that I can add to seemingly exhausted concepts.

You're documenting your learning journey, and putting content out there for hiring managers to see. Absolutely nothing to be afraid/ashamed of.

Besides, there are plenty of "[not/yet] another [things]" out there that are fantastic. Constate is yet another not-Redux state management library based on hooks and context, and it's one of the few of ANY sort of state management libraries that works with Concurrent Mode right now.

Portfolio looks great, BTW.

Collapse
Β 
fabrice profile image
Fabrice β€’

Hello,
If you like React, there is also this portfolio dev.to/jcoelho/personal-website-te...
On my side, I preferred to use Nuxt, based on Vuejs and the FRESH resume schema, a JSON schema.

Collapse
Β 
paulycloud profile image
Paul Kamau β€’

Hey!

So is this entire setup serverless? Are there any costs tied to using Netlify?

Thanks,

Collapse
Β 
sylviapap profile image
Sylvia Pap β€’

Yes! No costs for me, just the domain purchase with Namecheap, but Netlify is totally free for my purposes here :)

Collapse
Β 
paulycloud profile image
Paul Kamau β€’

That's pretty sweet.

For your continuous deployments, do you do this directly from the console? Assuming your code is on GitHub, is it possible to deploy certain branches/tags?

For my personal and business site, I am currently using Amazon S3. The setup process was pretty cumbersome at the beginning but the CI/CD pipelines with Bitbucket make it worth it afterwards.

Thread Thread
Β 
bhansa profile image
Bharat Saraswat β€’

You can deploy certain branches, and you can trigger the deployments on every commit pushed to your branch automatically. I created a small website covidtrackerlite, it is hosted on github and connected with netlify for deployments. As of now I am using the master branch only.

Collapse
Β 
mungojam profile image
Mark Adamson β€’

Thanks for sharing, I've mainly used bootstrap so far but I think we are hitting it's limitations so you've inspired me to check out material ui

Collapse
Β 
farid_aditya profile image
Farid Aditya β€’

thank you

Collapse
Β 
gorpalicious profile image
Gorpalicious β€’

Really like the look of the site, although the text is hard to read. I'd try to look into some quick fixes on the accessibility front that Lighthouse suggests

Collapse
Β 
sylviapap profile image
Sylvia Pap β€’

Hey thanks! Do you mean on my old site or new site? The old site was hard because of the white font and I'm just keeping it up on github pages for fun but it's not my portfolio site at my custom domain anymore. But the new one is pretty much all black and white/straight from Material UI. Or do you mean specific parts like my nav bar?

Collapse
Β 
gorpalicious profile image
Gorpalicious β€’

I'm a doofus, I meant the old one. Sorry.

Thread Thread
Β 
sylviapap profile image
Sylvia Pap β€’

oh no worries!! this is good to know actually, i was worried my wording/organization was a little unclear πŸ˜‚ i'll edit my post with clearer links

Collapse
Β 
spiritupbro profile image
spiritupbro β€’

cool also learn to compress the js and css into smaller files so when analyze it using lighthouse it will make a great performance

Collapse
Β 
itzsaga profile image
Seth β€’

πŸ‘πŸ» the site looks great!

Collapse
Β 
bhansa profile image
Bharat Saraswat β€’

Looks good! :)