Although creating your personal website is not painfully hard as nearly everyone now has one, it is also not the easiest feat to do. For me, it was a bit of searching around and a lot of code tweaking. Here are the 5 Steps I followed. Hopeful this tutorial can become useful to someone.
1) Choosing a Template
I would definitely recommend using an existing Template to start your website and then from there, modify it into your ideal form. Having an existing structure will make your website look cleaner and more up to the industry standard. Of course, if you are a really front-end person and would rather do everything from scratch, please feel free to do so! Here are two sites with pretty nice free templates to download: HTML5 Up! and GetBootstrap.
2) Installing Jekyll on Your Computer
This step is pretty straight forward. Follow this video up until the 5:10 mark. You can then keep working on your project while checking on the result by going to https://localhost:4000.
3) Getting a Domain Name (free .me website for a year!)
There are many different hosting website offering their own domain so I won’t list all the options. However, namecheap is a fairly cheap option and my current pick. Basically sign up for free using your university email and get a free .me website for student for a year! Go here to register if you are down with this deal.
4) Setting Up Code on Github Repository
Now, after following this tutorial, you definitely want to change the github domain to your own .me (or other domain if you do have another one). This is the easiest step and simply follow the answer provided by rynop on Stackoverflow:
- From your project repo, gh-pages branch. Create a CNAME file with the contents
yourdomain.com. Commit then push.
- In your DNS manager, setup two
cnamerecords. One for the root apex (@) and one for www. Both point to
YOURusername.github.io. If your DNS provider does NOT support
ALIASrecords on the root apex (@), simply create
Arecords that point to
- Wait til your name servers update:
dig yourdomain.com +nostats +nocomments +nocmd
5) Code and Run
Now that you have all your code connected to a local directory, you simply have to work on your website! This is probably the most tedious part of the project so take your time.
For my website, I have the following pages/components:
- About Me / Intro Page
- Link to Resume (.pdf file)
Of course, this is your website and the sky is the limit! Have fun exploring. Keep running Jekyll in the back and go to localhost:4000 to see the results. When you are satisfied, don’t forget to push the new code on the Github Repository and run jekyll to connect the all to your main website.
jekyll serve (on Windows)
jekyll serve --run (on Mac)
In the meantime, feel free to visit mine here! 😉