GitHub is a highly dependable webhost, and you get one personal webpage account for free.
+GitHub is a highly dependable webhost, and you get one personal webpage account for free. Plus, if you move institutions, your website can travel with you.
Because GitHub pages is compatible with Markdown, we’ll be using Markdown formatting to build our webpage.
We’re going to build a personal webpage which will live at USERNAME.github.io, and have blogging features and will be easily customizable.
-There’s an example of a blog here: https://laderast.github.io/academic_site_workshop/
+We’re going to build a personal webpage which will live at USERNAME.github.io. The template we’re using, Jekyll Academic, was developed by NCSU Libraries and is tailored specifically for use within the academic community.
+There is a live example of the template here: https://laderast.github.io/academic_site_workshop/. You’ll be able to customize many elements, including the color scheme.
Additionally, it will be helpful to have the following on hand so you can add content to your new website:
+You may want to spend a little time learning how to use markdown, as it’ll make putting your content together faster. There is a tutorial here: The Magic of Markdown that will get you started with the basics. We’ll give you just enough to get started.
Log into your GitHub account. Now go to the website repo: https://github.com/laderast/academic_site_workshop and click the “Fork” button on the top right of the webpage.
-When we fork we’re copying the files into our own version of the repository. Basically we’ll use the above link as the basis of our website.
+When we fork we’re copying the files into our own repository. We’ll use the copy as the building block for your new website.
Jekyll is what’s known as a static site generator. It will build a website from simpler text files that are in Markdown. Markdown is much easier to work with, since you don’t have to worry about adding HTML tags and accidentally breaking it.
+Jekyll is what’s known as a static site generator. It will build a website from simple text files that are in Markdown. Markdown is much easier to work with, since you don’t have to worry about adding HTML tags and accidentally breaking it.
The other nice thing about Jekyll is that it will integrate things like Google Analytics, Tags, and search into your website structure.
Jekyll is built into GitHub, so we just need to edit the files in our repository to have GitHub automatically build the webpage.
Here’s a little picture of the file structure of our website and what we’ll do to modify it.
@@ -228,10 +232,11 @@The first step to customizing your webpage is to edit the blog’s name to include your information. To do this, you will be editing a YAML file, which is a simple configuration file. You’ll open the _config.yml file in the root level of your repo to update the info here. In GitHub, click on the _config.yml file, and then edit it (it’s the pencil button on the right).
Change the title, name, bio, email, and the social media fields (such as twitter, linkedin) with your information.
+The first step to creating your website is to edit the information in the YAML file. This is a simple configuration file where some important settings for your site are stored.
+You’ll find the _config.yml file in the root (parent) level of your repo. In GitHub, click on the _config.yml file. To edit it click on the pencil button on the right.
Update the title, name, bio, email, and the social media fields (such as twitter, linkedin) with your information.
Just make you that you don’t modify anything below #DO NOT EDIT BEYOND THIS POINT.
Here’s an example _config.yml file. Don’t worry about the avatar and the logo file for right now. # symbols are the beginning of “comments” which are ignored in YAML files to the right of the # symbol.
Here’s an example _config.yml file. Don’t worry about the avatar and the logo file for right now. # symbols are the beginning of comments. The text to the right of the # symbol is ignored.
# Site wide configuration
title: Academic Website of Ted Laderas
@@ -256,36 +261,32 @@ Editing the Name of Your Webpage and Customizing
analytics:
verify:
scholar: #idAfter you have edited your _config.yml file, click the green “Commit changes” button at the bottom of the page. That will save the file to your repository.
After you have edited your _config.yml file, click the green “Commit changes” button at the bottom of the page, which will save the file to your repository.
You’re ready to go! Now check out your initialized website at https://USERNAME.github.io. We’ll start customizing it!
+You’re ready to go! Now check out your initialized website at https://USERNAME.github.io. Next we’ll start customizing it!
We’ll be adding our content by using Markdown Files. Markdown is a lightweight way to format text that is much easier to manipulate than working with HTML files directly.
-GitHub has a “translation engine” that will transform and format your Markdown files for the website to make them browser-friendly.
-This means you can concentrate on making content rather than obsessing about every little site detail.
+GitHub has a “translation engine” that will transform and format your Markdown files for the website, making them browser friendly.
+This means you can concentrate on making content rather than obsessing about every little site detail!
A markdown file generally has a .md or a .markdown extension. Let’s open the file in _posts/2012-02-07-example-content.md in GitHub and you’ll see some examples of how to write in markdown.
A markdown file generally has a .md or a .markdown extension. It uses plain text formatting syntax, which is pretty easy to learn. For example, bulleted lists are denoted with an asterix before each line item and subheadings with one or more hash marks.
This markdown cheatsheet is handy to learn how to do things. https://enterprise.github.com/downloads/en/markdown-cheatsheet.pdf
Way more info about writing markdown can be found here: https://github.com/laderast/magic-of-markdown
-And this markdown cheatsheet is always handy if you forget how to do things. https://enterprise.github.com/downloads/en/markdown-cheatsheet.pdf
-Try changing the cv.md file with your info (remember to click the edit pencil button). When you’re done, click the green “Commit changes” button at the bottom to save your changes.
Try editing the cv.md file with your info (remember to click the edit pencil button). When you’re done, click the green “Commit changes” button at the bottom to save your changes.
Reload your website to make sure that the changes worked. It sometimes takes a little time for GitHub to update the files, so be patient if they don’t appear immediately.
Links, or URLs and web addresses, on a website can link to other webpages.
-In your index.md file, you can add a link by enclosing the text for your link in square brackets ([text here]) and the underlying link in parentheses ((http://link-here.com)) right next to it. So altogether, it should look like this:
Your index.md file controls your website’s front matter. You’ll want to update it with your short bio and links to relevent projects and interests. For example, take a look at Robin’s website.
Her bio and project list links out to other websites. It’s easy to do this in markdown. Add a link by enclosing the text for your link in square brackets ([text here]) and the underlying link in parentheses ((http://link-here.com)) right next to it (no spaces). So altogether, it should look like this:
[link to Google](https://www.google.com)The output looks like this: link to Google
-If you just want to show the link, you can paste it as is into your file.
-https://www.google.comTry adding some links to your index.md file, such as to your GitHub or Twitter accounts. Click the “Commit Your Changes” button when you’re done.
Try updating your bio and adding some links to your index.md file, such as recently published paper or Github repo. Click the “Commit Your Changes” button when you’re done.
Where do you put images you’ve made? In the images/ folder. Upload a photo of yourself to this folder (Click the “Upload Files” button), and make sure it is named bio-photo.jpg.
Now you can upload images into to that directory using the Upload Files button. Then you can refer to them in your website like this:
Now you can upload your headshot or another image into to that directory using the Upload Files button. Then you can refer to them in your website like this:
Now check out your website again. The picture you uploaded should have replaced the generic image we started with. Take another lookl at your _config.yml file to understand why.
Your current repository is set up for blog entries. In your root folder, you’ll find another folder named _posts. This is where you’ll put new blog posts. Open this folder and create a new file.
Each post you make should be in the form YEAR-MONTH-DAY-title.md, so for example, 2017-04-21-github-pages-tutorial.md. You’ll also want a .yaml-like text near the top.
Your website is set up to publish blog entries. In your root folder, you’ll find folder named _posts. This is where you’ll put new blog posts. Open this folder and create a new file.
Each post you make should be in the form YEAR-MONTH-DAY-title.md, so for example, 2017-04-21-github-pages-tutorial.md. You’ll also want this .yaml-like text near the top.
---
layout: post
title: Awesome Blog Post