Programming club Welcome event: Learn to make your own profile page for employers.
Create your own profile page with GitHub
Hey everyone,
You probably got here for our the RMIT Programming Club Welcome event. So here we are going to make our own profile webpage! These websites are the programmer’s alternative to a Resume, and is often much more interesting for employers, and can show your skill as well as tell it.
For instance, you should check out Patrick Misfud’s profile page. It’s an exceptional example of a profile page.
So without further ado, let’s get into it!
1. Creating a GitHub account
GitHub is a platform that allows sharing and collaboration when developing software. It’s like the facebook for developers. If you don’t have a GitHub account now, you will need one later.
GitHub also tracks your contribution to software projects, and therefore also serves as yet another resume, and is definitely checked by employers.
We’ll be using it to host code for your profile page. So Sign up for GitHub. I would recommend using your personal email, as you loose access to your RMIT email after you graduate.
2. Create a new repository
A repository in GitHub is a place to store your code. You will have different repositories for different projects.
You can create a repository by clicking the plus in the in the top right then “New Repository”
name your repositry
[username].github.io
replacing [username] with your github username in lower case. For instance. if your username is “hazelfire” (as mine is), then:
hazelfire.github.io
Add a description if you wish, keep the repository public, and click “Initialise this repository with a readme”
Click “Create Repository” to finish creating your repository.
3. Create a new gh-pages branch
Branches in GitHub are ways of storing different versions of your code. GitHub won’t show your website to the world unless you are in the “gh-pages” branch. The default branch is called the “master” branch. So you will need to create the “gh-pages” branch and switch to it.
To create the branch, click the branch:master button and type into the field “gh-pages” (exactly). Then click, “Create Branch: gh-pages”. You are now in the gh-pages branch!
4. Download the template code and start coding!
We have created a template for you to start off with. You can download it here. Just click “clone or download” and then “Download zip”
Download the zip file and extract it into a new folder. You will have index.html and index.css inside the css folder. Index.html contains the content of your website, whereas index.css contains the styling rules. So open up index.html.
These files are both plain text files, and you will need a program that can open them. For Windows, Notepad will do just fine. For Mac, TextEdit will also work. Your computer will probably not open these files with those programs by default. So you will need to use “Open With” to get to them.
This is HTML, the coding language of the internet. Fill in the template so that the page applies to you. Then save.
As a side note, as you will be coding a lot in the future. It’s a good idea to invest in a good text editor. I would recommend “Sublime Text” if you want something simple that works, or “VS Code” if you want the full experience.
My personal preference is “vim” which is something complicated that doesn’t work. You can go for that if you want to be a real neckbeard developer, Sam or Michael would be very happy to teach you.
5. Upload the code
Now we can upload the code! Go to your github repository page and click “Upload files”
Add your index.html and index.css.
Click commit changes.
You’re done! You just made your profile website! check out [username].github.io to see it!
6. What’s next?
Now that you’re done, you should help other people with getting their website up and running, or maybe install a nicer text editor.
However, if you want to get really serious, you should learn some more HTML and create a more interesting website! Try looking up how to make your profile page unique, or ask around for how to do specific things with HTML and CSS.
