Before you start
Please pick one of the following templates before you start this tutorial:
Once you have successfully downloaded the template of your choice please follow the directions below.
Setting up
Once you have downloaded/saved your website template, it will show up in wherever you set up your download folder.
Go to that folder and open the main/homepage/index html file in any text editor of your choice (I recommend Atom or Sublime)
In example, mine is labeled index.html. If it is not named index.html please change it to index.html since github recognizes the homepage link as index.html like this
You probably won’t have to change ANY HTML in your Jekyll template!
But if you do, you can see how you are editing your site in realtime by opening the HTML document in your browser and refreshing the page like this.
You can debug your site by right-clicking (if you are on Windows/Linux) or control+click (if you are on a Mac) and selecting the “Inspect Elements” option which should come with every browser. like this
Also please note for Jekyll, if you plan on managing a blog many of the templates will include a _posts folder where you can create .md files to create new posts. The templates will have the same structure as the sample .md file given in the folder. Also every Jekyll file will be set up differently and generally in all the “README.md” files in the home directory will contain set up instructions. The _config.yml file should be filled out with your information!
If you are using a template for Jekyll and you are new to web development, please only edit the .md files and the _config.yml file in order to prevent any unwanted effects!!
Many of the pages you will be using will be using Markdown so here is an excellent resource on getting started with that is this Markdown-Cheatsheet on Github. Markdown also works with HTML so if you would like a guide on understanding HTML, I am currently creating one but you can also refer to other sources online. You should not have to alter any of the CSS or Javascript with these templates.
Deploying to Github
Create a repository named .github.io without the '<>'
In this tutorial, my username is nvurdienn so my repository would be named nvurdienn.github.io
like this
Once you have done that set up Git on your computer, if you haven’t already. If you have a Mac/Linux, Git should be preinstalled on your system; however, if you have windows you should download Github Desktop. Instructions on how to set up Git through command line are listed here. Linux/Mac users may also set up Git by downloading and logging into Github Desktop.
Once you have logged into Git, add all the files into that repository.
First, you will need to clone your repository to your computer. Then move into that directory with the “cd” command
git clone <yourgithubclonelink>
cd <insertGithubUserNameHere>.github.io
Open the folder that contained all the website files and copy them over to your repository folder.
Then type the following commands
git add .
git commit -m "<Any commit message here>"
git push
like this
Congrats you have successfully created your personal page!
The page would be at .github.io
As an example, the username used in this tutorial would be nvurdienn.github.io
You can continuously edit this repository by using the last three commands listed above just make sure you are in the correct directory. Make sure you save all files before trying to push them to github. Also, make sure you edit all documents in the folder connected to your github repository.