How to make a website for free in under an hour.

Sean McDonnell
Aug 3, 2018 · 4 min read

A month ago my friend Max from the gym, a Digital Marketing Professor at Miami Dade Community college, asked if I would guest lecture his class. I was flattered and thought, if I was a student it would be cool to see how to make a resume style website for free in under an hour with Github, Atom, and a bootstrap template. So below is the tutorial that I created and shared with the class earlier this week:

Getting started - fire up a synthwave livestream to get in the mood.

Download:

Download to documents

From downloads folder, right click on zip file — choose open in finder

Drag to documents folder

Double click to open startbootstrap-resume-gh-pages.zip

OPEN TERMINAL

  • On Mac (Command + Space, type “Terminal”)
Image for post
Image for post
  • Type: cd~
Image for post
Image for post
  • Type: cd documents
Image for post
Image for post
  • Type: cd startbootstrap-resume-gh-pages
Image for post
Image for post
  • Type: atom .
Image for post
Image for post

Atom will open, it should look like this:

Image for post
Image for post

Click on the index.hmtl file and edit the code (your name, education, professional experience, whatever other resume content you have, etc.) Use “Command + F” to find any part of the site you’d like to edit to find it quick.

Image for post
Image for post

Example: Add / Drag your photo to the img folder on the left:

Image for post
Image for post

Type “Command + F” to find profile.jpg and replace it with sean_photo.jpeg (whatever your file name is)

Image for post
Image for post

After you edit content, hit command + i to see a preview of what you’ve edited.

Image for post
Image for post

To update the social links — edit the "#" (The first one is for facebook, 2nd for twitter, third LinkedIn, and fourth Github.

Image for post
Image for post

Once you’ve updated content to your new website and are ready to share it with your friends — its time to push it to Github.

If you don’t have a Github account, create one, and try to include your name in the account.

After you create an account, you create a repository.

Image for post
Image for post
Image for post
Image for post

Create the repository

Keep this page open:

Image for post
Image for post

Go back to Terminal-

Type: Git init

Image for post
Image for post

Type: Git status

This shows you all of the updates to your files in that directory.

Image for post
Image for post

Type: Git add .

Image for post
Image for post

Type: git commit -m "my first commit"

Image for post
Image for post

copy and paste these two commands one at a time into the terminal from the page we still have open:

git remote add origin https://github.com/yourusername/demo-resume.git

git push -u origin master

Now refresh the github page you had open, it should look like this:

Image for post
Image for post

Go to the settings tab and scroll down to Github Pages:

Image for post
Image for post
Image for post
Image for post

Click master branch and hit save.

Scroll back down to the GitHub pages section and check out the link to your new website:

Image for post
Image for post

There are a lot of different ways to do this — this is what worked for me, I hope it helps!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store