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

sylviapap profile image Sylvia Pap Updated on ・9 min read

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.

So yes, I know, there are a ton of tutorials out there for making your own personal site. Here are some of my favorites for getting started (if you haven't read anything else relating to personal sites/portfolios before my post, I recommend starting with these, especially the first):

Start here

My stuff

Version 1.0 with template, pure JS/HTML/CSS

My first personal site was almost entirely a template. I used HTML5Up and I really loved it. Easy to use and tweak if you want to customize a little. I used the "Ethereal" one, which is probably one of the most common, but I still think it's so aesthetically pleasing, and I love the horizontal scroll and gallery. It also looks great on mobile. Here's my repo if you're curious, with very slight modifications and of course my added info. I'm keeping it on GH Pages (no custom domain) as well, for contrast, and I might continue to tweak it just for learning purposes.

To template or not to template

When I finished my bootcamp, I wanted to start applying to jobs ASAP so I prioritized quick and easy on my portfolio site. I also just don't even have that many projects (relatively) or info at all lol! I am just starting out, after all, so I wanted to keep it simple and short. Plus, if I use a quick and easy template, then I'd have more time for learning... {checks notes} data structures and algorithms?

In all seriousness - and this post says it best - absolutely nothing wrong with using a template. Here are some nice React specific templates I enjoyed looking through.

I personally just wanted to make my own. I realized I had barely "coded" outside of leetcode since my bootcamp ended, so this seemed like a good time to get back in the ol' game and make my own site.

Next: should I use React?

I didn't use React on my first site because it seemed unnecessary. The beauty of React (I think?) is its scalability, so it felt kinda lame to use it for such a small site. I still kind of think my ultimate goal here is using nothing but my own HTML, CSS, and vanilla JS.

If you haven't seen it yet - my favorite personal site is from Dev's very own, Ben Halpern.

But then I thought, again, I'm applying to a lot of jobs looking for React experience. So maybe React isn't necessary here, but it's a good exercise/refresher on using it at all. So here we are. React reacts only.

dog meme

Is this site really "my own" if I use a design library?

I'm not sure! I started off thinking I would write all my own CSS, no libraries like Bootstrap. I did that for my final bootcamp project and I enjoyed it because I wanted as much flexibility as possible. But then I started selecting elements and tweaking colors and the clock started doing that thing in movies where the hands start spinning faster and faster so you know the main character is wasting a lot of time and working too hard.

Then I realized I had never used Material UI, so this could be a cool chance to try a new thing, but also make my life easier without going full template.

Anyway, that's my spiel. There are a lot of tutorials on making a personal site, and a lot of tutorials on React, and a lot of templates for a personal site with React, but not a lot of super up-to-date articles on the basics of making your own personal site with React. So here's my "tutorial" - in quotes for now because I'm not sure how in depth this will be. Might be more of a "walkthrough," or, "overview," if you will, if you're a stickler for terms.

Setup

npx create-react-app personal-site
cd personal-site
npm start

I'm also trying to do something slightly different from tutorials I've seen that do the same thing, but with jQuery. I honestly... have just never even used jQuery before. Sorry. This might be hacky, but I wanted all of my personal data in a file for single-source-of-truth updating. I didn't do that on my first site. But now I have a simple data.js file in a services or constants folder within src and this is basically all it contains so far:

export const data = {
  name: "Sylvia", 
  occupation: "Software Engineer",
  description: "looking for work",
  image: "profilepic.png",
  ...
  }

and then, in any other React component I can add:

import {data} from '../services/data'

and then use constants:

    const name = data.name;
    const description = data.description;
    const profilepic= "images/"+data.image;

and I saved profilepic.png in an images folder within public.

I also use App.css for changes to css outside of the Material components. For example, I wasn't quite sure what to do for my background, but I learned about this cool color gradient thing and it seemed like a small way to show a potentially lesser known CSS trick, so I added to my App.css:

body {
  background: linear-gradient(#ccafac 20%, #bebbcc, #9ba6c9, #8d95b8, #ccafac );
}

I'm obviously not a designer. This background could be very ugly. I think it's cool but in an old school way. I'm open to criticism here but please let me down easy.

Material UI

Before this, I had only really used Bootstrap and Semantic UI. This isn't really a post about the specifics of design libraries, but here are some nice articles that I skimmed when deciding to use Material:

Tldr - Material is popular, easy to use, and I like the way it looks for now. Plus... Google. So I pull up the docs and get going:

npm install

// with npm
npm install @material-ui/core

// with yarn
yarn add @material-ui/core

and that's all you actually need. But for font, icons, and responsive meta tag, I also did the following:

// for svg icons
// with npm
npm install @material-ui/icons

// with yarn
yarn add @material-ui/icons

and add to index.html within the <head> element:

    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <meta
      name="viewport"
      content="minimum-scale=1, initial-scale=1, width=device-width"
      />

I also used Font Awesome for icons. I tried the Material icons, but found FA easier for brands (Material doesn't seem to have the DEV icon 😞 ) so I add <script src="https://kit.fontawesome.com/{your code}.js" crossorigin="anonymous"></script> to the end of my index.html. FA is totally free, you just have to give them your email to get this kit link.

At this point, I also like to change the icon links to something besides the React default. I just save something like a little moon emoji and change to:

<link rel="icon" href="%PUBLIC_URL%/moon.png" />

Some general thoughts for using Material:

  • Understand React hooks - while I mentioned adding your own App.css for changes such as background above, I also modified the useStyles hooks within components for specific changes, like padding, margin
  • Start off with the basic components like <Grid>, <Paper>, <Button>, <Typography> before going on to more complicated templates and examples
  • There are a few very basic examples in the docs that use purely Material components, but most of the other 'examples' or 'templates' have a lot added on that can make it complicated to try using

Hosting on Netlify

I wanted to use Netlify because, again, chance to use something new, and I remember reading this post and thought Netlify seemed cool and fast. Again, my site is so small, it might not matter. But it does seem faster than GH Pages even on this small scale. So yay!

See the following article for setting custom domain:

This might be a straightforward process to most, but it was new to me, and I was happy to have this excellent and clear walkthrough.

But as far as just hosting a React app on Netlify goes, it's usually simple. I ran into more difficulty than expected, possibly because I jinxed myself by writing 'it's simple' before actually doing it lol.

I set up continuous deployment, following the terminal prompts and browser options. More in depth steps from the docs and a how to guide.

[EDIT] I realized my very dumb mistake with deploying. I had started with a folder named Components - capital C. Then, being the unimportant-detailed-focused person I am, I changed it to components - lowercase c. Netlify continuous deployment is case sensitive !!!! What a fun fact. So I had to do git mv. Just when you think you know git. But anyway - you shouldn't even have to run npm run build if you want continuous deployment and follow the Netlify prompts to link your GH from the very start. If the build fails - it might be a problem like this.

The following worked without CD:

npm run build
npm install netlify-cli -g
netlify deploy

because (and I might be explaining this incorrectly, but general idea) npm run build runs a single build based on my origin git repo. But CD uses the remote, and that's where the case sensitivity disconnect happened.

Work in Progress

An artist's work is never complete, am I right! I probably spend too much time editing (and by "editing" I mean switching between #9ba6c9 and #8d95b8 until my contact lenses fall out) but at the same time, I sometimes completely get distracted by another project and forget to update something important on a personal site. But maybe this blog post will motivate me to keep editing/looking for better ways to do things. always πŸ‘ be πŸ‘ coding

[small edit] I deployed my new site after publishing this, but I still have a lot to tweak. For now, I am kind of enjoying how minimal it is, so let's pretend that's totally on purpose.

so long and thanks for all the fish

Resources

cover image
Image credit: Unsplash

Posted on Jun 27 by:

sylviapap profile

Sylvia Pap

@sylviapap

Software Engineer, recent Flatiron graduate

Discussion

markdown guide
 

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! 🍾

 

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.

 

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

 

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

 
 

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

 

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

 

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?

 

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

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

 

Hey!

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

Thanks,

 

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