In middle school, before deciding I wanted to learn programming, the furthest I had explored on web development was (wait for it) Wix. The only reason why I knew of how to make a basic website without stack tools was because my 8th grade science teacher asked for one for my final project before winter break. When adding each image, each text, and embedded each link, I truly thought I was a genius for taking up "web development" so quickly.
Flash forward to today, as I am making the attempt to traverse further into webdev, I was immediately intimidated by each complexity of the features that I so easily placed on Wix beforehand. After almost attempting the journey that is learning CSS and Javascript for creating a portfolio website, I was advised to give Github Pages a try. After spending weeks previously creating an appealing README file on Github, I wanted to go ahead and give it a go.
Table of Contents
- PART 1: Picking a Template
- PART 2: Adding Edits to the Code
- PART 3: Uploading to Github Pages
- PART 4: Connecting a Personal Domain to Website
PART 1: Picking a Template
There are several great website templates that you can choose from - I chose from HTML5 Up! It appeared to be a great bridge between visuals, usability, and an educational introduction to the HTML, CSS, and JavaScript languages.
Depending on the website template that you use, the starting process could be different. For me, I downloaded the zipped file from the template "Dopetrope." I highly recommend looking through all of their templates as they are affordable and understandable.
PART 2: Adding Edits to the Code
Here is where things got interesting. I saw a big blob of code and began reviewing it. Hear me out-something I never thought I would be excited by is altering some HTML and CSS code and figuring out how each style document in CSS supplemented the a live site.
There were several items I specifically wanted to get done and it was first to make this website have the same theme as my previous Wix portfolio page.
Believe it or not, the banner was the hardest part of the project, but I think it ended up looking nice with the site. Afterwards, many edits was focused on adding blog and about me pages, changing the colors in the CSS doc, and figuring out what to put for the favicon of the portfolio (one of the highlights of my time creating the site). One tip I recommend: remove the .html part of the href when referring to a page on your site. It took me a while to figure out it stays on your extension haha.
PART 3: Uploading to Github Pages
Now that the trickiest part is over, we can go ahead and upload to Github. When naming your repo, you must use username.github.io or reponame.github.io in order for github to create the website. Next is uploading the files.
The way I chose is through your terminal by connecting to the remote repository and pushing to your main branch. The alternative is by uploading them straight into your repo. If you choose this route, make sure to have all your html files in the root directory. This removes any issues of Github attempting to read your files and hosting the website.
For many people, this is the last step of the process. If you got this far, WHOOHOO! You officially have a website! For perfectionists like me, you want to officially name your website without the github.io extension at the end.
PART 4: Connecting a Personal Domain to Website
Depending on what you want out of your site, you can have a .com, .net, or even .dev which each have their own respective costs of approximately $10 annually. Since I only wish to use this site for my portfolio work, a .me really personalizes the site. I used NameCheap for purchasing the domain, so they carried their own tutorial for connecting your domain to Github which I will link here.
Afterwards, go into your repo's settings and click on the Pages subheader. You can then add your domain into the custom domain subsection and wait for the DNS check and certification process to complete (approximately 30-60 min). Then after that you can finally enforce HTTPS and have your fully personalized website created!
Congratulations for making it this far! I was thinking of completing this project for the past two months, but finally got around it.
There are still some updates I wish to make on the site including APIs for Github projects that automatically update with the site along with a DEV.to API for blogs. However, for now I am satisfied with my progress and will leave that for a later blog post.
Thanks for reading this far and make sure to look at the finished website I created here: https://www.angelarodriguezz.me/
Top comments (0)