Creating Your Personal Website Using Jekyll and Github

Jekyll Logo

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:

  1. From your project repo, gh-pages branch. Create a CNAME file with the contents yourdomain.com. Commit then push.
  2. In your DNS manager, setup two cname records. 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 A records that point to 192.30.252.153 and 192.30.252.154
  3. 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)
  • Experience
  • Projects
  • Artwork/Interests
  • Contact

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

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s