Sylvia Pap

Posted on Jun 27, 2020 • Edited on Nov 6, 2020

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

#beginners #react #javascript #codenewbie

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

Current personal site
Current site repo
Old site (kept on github pages just for fun/demo purposes)
Old site repo

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. Check out the repo if you're curious, I made some very slight modifications and of course my added info. I'm keeping it on GH pages 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.

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.

EDIT! I am currently alternating between this color gradient background option, and plain image background I found on Unsplash. Not because anyone hated on my CSS gradient though. So if you're looking at my site right now and thinking, wait where's this color gradient I've heard so much about... I'm the kind of person who rearranges her furniture once a week. Also I wanted a nice og meta image to show up on the thumbnail on LinkedIn so I definitely have the Unsplash for that. I might also just save a plain color gradient image for my thumbnail... 🧐 TBC

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:

Setting up Domain with Namecheap & Netlify

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. infinite 👏 days 👏 of 👏 code

Top comments (16)

Jason Leung 🧗‍♂️👨‍💻 • Jun 27 '20

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

Mike Bybee • Jul 24 '20 • 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.

Fabrice • Jun 27 '20

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.

Paul Kamau • Jun 30 '20

Hey!

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

Thanks,

Sylvia Pap • Jul 1 '20

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

Paul Kamau • Jul 14 '20

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.

Bharat Saraswat • Jul 22 '20

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.

Gorpalicious • Jul 1 '20

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

Sylvia Pap • Jul 1 '20

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?