How to Build a Static Website with Github and Jekyll from Scratch or Jekyll themes
“Hello World” - is how you start your CS education. So this post will explain in detail how to get a baseline personal website like this. There are two ways: you can use Github’s default style or just download a template and drag it into the repo.
Step 1 - Set up the environment
Have Bash (commandline interface). If you are Linux or OSX your good. If you have Windows install it. Here is a tutorial for that.
Step 2 - Git and Github
- Go to Github.com
- Create an account
- Create a new repository called: username.github.io where username is your github name
- Open up terminal (PowerShell then
bashif Windows) and know your systems package manager
sudo apt-get install updateto make sure your package manager is up to date. Replace
apt-getwith your package-manager. Run
sudo apt-get install git. If you are using WIN10 or OSX just download and install as usual.
- Now just check if it is properly installed by just typing
git --versionand you should see 2.something (or maybe 3 if that is released when you are reading this).
- Now in the terminal move into a location that you want to put your code into ex:
- Before we continue it is important to
git config --global user.name yourGithubUserNameHere,
git config --global user.email yourEmailForGithubHere. Now just test it before you continue. So
git config user.nameand
git config user.emailand you should see whatever you just set.
- Now we need the repository which on github onto our local machine. So
git clone https://github.com/username/username.github.io.gitwhere username is your username for github.
- Move into the new folder that appeared
Step 3 - Ruby and Jekyll
- Get the Ruby development package
sudo apt-get install ruby-dev
sudo apt-get install ruby. Now when you type
ruby --versionyou should not get any errors.
gem install jekyll- add sudo if it doesn’t work because of permission reasons. Check that it is installed correctly with
- Now double check your terminals current directory with
pwdand you should see something like “/whereeverYouPutCode/username.github.io”
- Now that you are in the right spot run and the folder you are in is empty (remove the README.md temporarily and put it back in later)
jekyll new .
Step 4 - Push the repository to github
- Assuming you are still in the repository folder of which you just created the jekyll site with the following files/folders:
_config.yml _layouts _sass css index.html _includes _posts about.md feed.xml, run
git statusand you should see some red text. These are unattached and uncommitted files and changes.
git add --aThis command added all the unattached files to the repository.
git commit -m "your message here or first commit"
git push origin masterand you will need to put in your account information
Note To develop your site locally without putting the changes out onto your actual site just go
jekyll serve. This will create an
_site folder which you should add to your gitignore.
Step 5 - Rejoice for a Moment
- Go to your favorite browser and in the address type in
username.github.io- that’s your site!
- Now begin making it your own. Understand the file structure of Jekyll.
Step 4 - Alternative way to customize the look
- Go to jekyll themes and find a theme you like.
- Download the zip or even clone the repo either is fine.
- Copy and paste the contents of the theme into your empty username.github.io directory
- Jekyll file structure important read: http://jekyllrb.com/docs/usage/
- Markdown syntax for blog post that go in
- ZacBlanco’s tutorial
Post originally posted on 2016-05-09 21:00:00 -0400
Post last modified on