Hey there! So here's how I setup my Jekyll blog. You can take a look at the real live thing at http://www.carolinp.github.io/mysite
I already had Jekyll installed, so I opened up a new terminal and typed jekyll new mysite
.
Then, I typed cd mysite
to get into the folder for the site I just made.
To make a repo of the site on github, I then typed git init
to make a new repo.
Github saw all the new Jekyll files, so I added them using git add .
and them committed them with git commit
.
I then started to make sure that the _site/
folder was ignored using .gitignore, but apparently that was already taken care of. Awesome!
Then I typed in jekyll serve --watch
to check out my new site locally in a web browser. It looked pretty good so far, so I proceeded onto putting my new repo on github.com.
I renamed the master branch to gh-pages by typing git branch -m master gh-pages
I then logged into my account on github.com and created a new repository by clicking the "New Repository" button in the upper right hand corner of the site (it looks like a little plus sign on a book). I named my shiny new repo mysite, just to make it simple.
I then added the new repo as a remote by typing git remote add origin https://github.com/USERNAME/mysite
I pushed all the changes to my new repo with git push origin gh-pages
All finished, right? Wrong! The path to the css files was all wrong, so the page looked very sad:
We discovered in the next class that it was due to Github using the default baseurl, which broke a lot of the paths. We then had to add baseurl: /mysite
in the config file and fix the css paths in the default html file in the layouts folder so that /fall2013
was in front of the css folder in the link to the stylesheets (like this: <link rel="stylesheet" href="/fall2013/css/main.css">
). Much better!
The hard part was over, but I went back and changed the blog name in the config file, put a tiled background image in the main css as well as changed a couple font colors to make them more readble on the new background. So here's what my blog looks like now: