From 09609f3a08a217e35c35cede57cfb330aa6beec5 Mon Sep 17 00:00:00 2001 From: Eric Leung Date: Wed, 12 Apr 2017 15:25:03 -0700 Subject: [PATCH 01/20] Create example GitHub pages based on tutorial --- websiteFiles/404.html => 404.html | 0 websiteFiles/CNAME => CNAME | 0 websiteFiles/LICENSE.md => LICENSE.md | 0 websiteFiles/_config.yml => _config.yml | 0 .../_includes => _includes}/head.html | 0 .../_includes => _includes}/sidebar.html | 0 .../_layouts => _layouts}/default.html | 0 {websiteFiles/_layouts => _layouts}/page.html | 0 {websiteFiles/_layouts => _layouts}/post.html | 0 .../2012-02-06-whats-jekyll.md | 0 .../2012-02-07-example-content.md | 0 .../2013-12-28-introducing-hyde.md | 0 websiteFiles/about.md => about.md | 0 websiteFiles/atom.xml => atom.xml | 0 websiteFiles/cv.md => cv.md | 0 websiteFiles/index.html => index.html | 0 .../apple-touch-icon-144-precomposed.png | Bin {websiteFiles/public => public}/css/hyde.css | 0 {websiteFiles/public => public}/css/poole.css | 0 .../public => public}/css/syntax.css | 0 {websiteFiles/public => public}/favicon.ico | Bin readme.md | 125 +++++++++++++++-- slides/githubPagesTutorial.Rmd | 128 ------------------ slides/githubPagesTutorial.html | 111 --------------- websiteFiles/.gitignore | 41 ------ websiteFiles/README.md | 118 ---------------- 26 files changed, 113 insertions(+), 410 deletions(-) rename websiteFiles/404.html => 404.html (100%) rename websiteFiles/CNAME => CNAME (100%) rename websiteFiles/LICENSE.md => LICENSE.md (100%) rename websiteFiles/_config.yml => _config.yml (100%) rename {websiteFiles/_includes => _includes}/head.html (100%) rename {websiteFiles/_includes => _includes}/sidebar.html (100%) rename {websiteFiles/_layouts => _layouts}/default.html (100%) rename {websiteFiles/_layouts => _layouts}/page.html (100%) rename {websiteFiles/_layouts => _layouts}/post.html (100%) rename {websiteFiles/_posts => _posts}/2012-02-06-whats-jekyll.md (100%) rename {websiteFiles/_posts => _posts}/2012-02-07-example-content.md (100%) rename {websiteFiles/_posts => _posts}/2013-12-28-introducing-hyde.md (100%) rename websiteFiles/about.md => about.md (100%) rename websiteFiles/atom.xml => atom.xml (100%) rename websiteFiles/cv.md => cv.md (100%) rename websiteFiles/index.html => index.html (100%) rename {websiteFiles/public => public}/apple-touch-icon-144-precomposed.png (100%) rename {websiteFiles/public => public}/css/hyde.css (100%) rename {websiteFiles/public => public}/css/poole.css (100%) rename {websiteFiles/public => public}/css/syntax.css (100%) rename {websiteFiles/public => public}/favicon.ico (100%) delete mode 100644 slides/githubPagesTutorial.Rmd delete mode 100644 slides/githubPagesTutorial.html delete mode 100644 websiteFiles/.gitignore delete mode 100644 websiteFiles/README.md diff --git a/websiteFiles/404.html b/404.html similarity index 100% rename from websiteFiles/404.html rename to 404.html diff --git a/websiteFiles/CNAME b/CNAME similarity index 100% rename from websiteFiles/CNAME rename to CNAME diff --git a/websiteFiles/LICENSE.md b/LICENSE.md similarity index 100% rename from websiteFiles/LICENSE.md rename to LICENSE.md diff --git a/websiteFiles/_config.yml b/_config.yml similarity index 100% rename from websiteFiles/_config.yml rename to _config.yml diff --git a/websiteFiles/_includes/head.html b/_includes/head.html similarity index 100% rename from websiteFiles/_includes/head.html rename to _includes/head.html diff --git a/websiteFiles/_includes/sidebar.html b/_includes/sidebar.html similarity index 100% rename from websiteFiles/_includes/sidebar.html rename to _includes/sidebar.html diff --git a/websiteFiles/_layouts/default.html b/_layouts/default.html similarity index 100% rename from websiteFiles/_layouts/default.html rename to _layouts/default.html diff --git a/websiteFiles/_layouts/page.html b/_layouts/page.html similarity index 100% rename from websiteFiles/_layouts/page.html rename to _layouts/page.html diff --git a/websiteFiles/_layouts/post.html b/_layouts/post.html similarity index 100% rename from websiteFiles/_layouts/post.html rename to _layouts/post.html diff --git a/websiteFiles/_posts/2012-02-06-whats-jekyll.md b/_posts/2012-02-06-whats-jekyll.md similarity index 100% rename from websiteFiles/_posts/2012-02-06-whats-jekyll.md rename to _posts/2012-02-06-whats-jekyll.md diff --git a/websiteFiles/_posts/2012-02-07-example-content.md b/_posts/2012-02-07-example-content.md similarity index 100% rename from websiteFiles/_posts/2012-02-07-example-content.md rename to _posts/2012-02-07-example-content.md diff --git a/websiteFiles/_posts/2013-12-28-introducing-hyde.md b/_posts/2013-12-28-introducing-hyde.md similarity index 100% rename from websiteFiles/_posts/2013-12-28-introducing-hyde.md rename to _posts/2013-12-28-introducing-hyde.md diff --git a/websiteFiles/about.md b/about.md similarity index 100% rename from websiteFiles/about.md rename to about.md diff --git a/websiteFiles/atom.xml b/atom.xml similarity index 100% rename from websiteFiles/atom.xml rename to atom.xml diff --git a/websiteFiles/cv.md b/cv.md similarity index 100% rename from websiteFiles/cv.md rename to cv.md diff --git a/websiteFiles/index.html b/index.html similarity index 100% rename from websiteFiles/index.html rename to index.html diff --git a/websiteFiles/public/apple-touch-icon-144-precomposed.png b/public/apple-touch-icon-144-precomposed.png similarity index 100% rename from websiteFiles/public/apple-touch-icon-144-precomposed.png rename to public/apple-touch-icon-144-precomposed.png diff --git a/websiteFiles/public/css/hyde.css b/public/css/hyde.css similarity index 100% rename from websiteFiles/public/css/hyde.css rename to public/css/hyde.css diff --git a/websiteFiles/public/css/poole.css b/public/css/poole.css similarity index 100% rename from websiteFiles/public/css/poole.css rename to public/css/poole.css diff --git a/websiteFiles/public/css/syntax.css b/public/css/syntax.css similarity index 100% rename from websiteFiles/public/css/syntax.css rename to public/css/syntax.css diff --git a/websiteFiles/public/favicon.ico b/public/favicon.ico similarity index 100% rename from websiteFiles/public/favicon.ico rename to public/favicon.ico diff --git a/readme.md b/readme.md index 1433291..26fe63f 100644 --- a/readme.md +++ b/readme.md @@ -1,17 +1,118 @@ -## GitHub Pages Tutorial +# Hyde -Welcome to the GitHub Pages Tutorial! +Hyde is a brazen two-column [Jekyll](http://jekyllrb.com) theme that pairs a prominent sidebar with uncomplicated content. It's based on [Poole](http://getpoole.com), the Jekyll butler. -With a text editor and the GitHub Desktop, you can start your own personal website on GitHub. Bring your laptop and we'll explore the fun world of GitHub Pages! +![Hyde screenshot](https://f.cloud.github.com/assets/98681/1831228/42af6c6a-7384-11e3-98fb-e0b923ee0468.png) -Things you need to do before you can start: - 1) A [Github Account](https://github.com/join?source=header-home) - 2) Download the GitHub Desktop App - 3) A Good Text Editor ([Sublime](https://www.sublimetext.com) or [Atom](https://atom.io) are good ones) - 4) Something to say - 5) Photos (optional) +## Contents -## Attribution - -This tutorial uses Mark Otto's [Hyde Template for Jekyll](http://hyde.getpoole.com) with some simple modifications to make it Jeykll 3.0 Compatible \ No newline at end of file +- [Usage](#usage) +- [Options](#options) + - [Sidebar menu](#sidebar-menu) + - [Sticky sidebar content](#sticky-sidebar-content) + - [Themes](#themes) + - [Reverse layout](#reverse-layout) +- [Development](#development) +- [Author](#author) +- [License](#license) + + +## Usage + +Hyde is a theme built on top of [Poole](https://github.com/poole/poole), which provides a fully furnished Jekyll setup—just download and start the Jekyll server. See [the Poole usage guidelines](https://github.com/poole/poole#usage) for how to install and use Jekyll. + + +## Options + +Hyde includes some customizable options, typically applied via classes on the `` element. + + +### Sidebar menu + +Create a list of nav links in the sidebar by assigning each Jekyll page the correct layout in the page's [front-matter](http://jekyllrb.com/docs/frontmatter/). + +``` +--- +layout: page +title: About +--- +``` + +**Why require a specific layout?** Jekyll will return *all* pages, including the `atom.xml`, and with an alphabetical sort order. To ensure the first link is *Home*, we exclude the `index.html` page from this list by specifying the `page` layout. + + +### Sticky sidebar content + +By default Hyde ships with a sidebar that affixes it's content to the bottom of the sidebar. You can optionally disable this by removing the `.sidebar-sticky` class from the sidebar's `.container`. Sidebar content will then normally flow from top to bottom. + +```html + +
+
+ ... +
+
+ + +
+
+ ... +
+
+``` + + +### Themes + +Hyde ships with eight optional themes based on the [base16 color scheme](https://github.com/chriskempson/base16). Apply a theme to change the color scheme (mostly applies to sidebar and links). + +![Hyde in red](https://f.cloud.github.com/assets/98681/1831229/42b0b354-7384-11e3-8462-31b8df193fe5.png) + +There are eight themes available at this time. + +![Hyde theme classes](https://f.cloud.github.com/assets/98681/1817044/e5b0ec06-6f68-11e3-83d7-acd1942797a1.png) + +To use a theme, add anyone of the available theme classes to the `` element in the `default.html` layout, like so: + +```html + + ... + +``` + +To create your own theme, look to the Themes section of [included CSS file](https://github.com/poole/hyde/blob/master/public/css/hyde.css). Copy any existing theme (they're only a few lines of CSS), rename it, and change the provided colors. + +### Reverse layout + +![Hyde with reverse layout](https://f.cloud.github.com/assets/98681/1831230/42b0d3ac-7384-11e3-8d54-2065afd03f9e.png) + +Hyde's page orientation can be reversed with a single class. + +```html + + ... + +``` + + +## Development + +Hyde has two branches, but only one is used for active development. + +- `master` for development. **All pull requests should be submitted against `master`.** +- `gh-pages` for our hosted site, which includes our analytics tracking code. **Please avoid using this branch.** + + +## Author + +**Mark Otto** +- +- + + +## License + +Open sourced under the [MIT license](LICENSE.md). + +<3 diff --git a/slides/githubPagesTutorial.Rmd b/slides/githubPagesTutorial.Rmd deleted file mode 100644 index b0065d6..0000000 --- a/slides/githubPagesTutorial.Rmd +++ /dev/null @@ -1,128 +0,0 @@ ---- -title: "Github Pages Tutorial" -author: "Ted Laderas (laderast@ohsu.edu), Eric Leung, and Robin Champieux" -date: "4/5/2017" -output: - slidy_presentation: default ---- - -```{r setup, include=FALSE} -knitr::opts_chunk$set(echo = FALSE) -``` - -## What is GitHub Pages? - -GitHub Pages is a built-in system that allows you to build websites directly from a GitHub Repository. - -There are two kinds of GitHub pages: - -+ Personal websites (associated with an account) -+ Repository Specific Websites (webpages for software) - -## What You Need for Today - -You don't need to know how to code to setup a GitHub page. We'll learn some Markdown basics - -+ GitHub Account -+ GitHub Desktop -+ Text Editor (Sublime, Atom, TextEdit) -+ File Manager (to rename files) -+ Something to say -+ Pictures (optional) - -## Why GitHub Pages? - -GitHub is a highly dependable webhost, and you get one personal webpage account for free. - -Because GitHub pages is compatible with markdown, we'll be using markdown formatting to build our webpage. - -## What We're Going to do Today - - 1) Download this repo - 2) Make a local repo with the `websiteFolder` - 3) Change and Personalize Your Site with YAML - 4) Publish your Repo to GitHub - 5) Look at your pretty website! - 6) Start Editing Content - 7) Add a Blog Post - 8) Customize your sidebar - 9) Look at your pretty website! - -## Download the Repo - -Go to tutorial page - -Take out `webSite` folder and rename it to USERNAME.github.io, where USERNAME is your GitHub username. - -I like to have a code specific folder to store my code, such as "c:/code/" (windows) or "~/Code/" (Mac/Linux) so that it has a permanent place to stay. This will be important when you push changes to your website. So create a code-specific folder and put the USERNAME.github.io folder in it. - -In GitHub Desktop add the repo using the "+" symbol and use "" - -## Let's Make a Personal Webpage - -If you have a GitHub account with USERNAME, you can serve a webpage directly from USERNAME.github.io. For example: http://laderast.github.io - -You first need to create a repository with USERNAME.github.com. From GitHub Desktop, click the "+" symbol, and create a new repository. - -When you've created the repository, "publish" it to GitHub. - -Once you've published the repository, try your personal webpage: http://USERNAME.github.io - -## File Structure - -We are first going to rename the `websiteFiles` directory to match the name of your webpage repo. - - - -## Editing the Name of Your Blog - -The first step to customizing your webpage is to edit the blogs name to -include your information. You'll open the `_config.yml` file to update -the info. - -Here's an example `_config.yml` file. - - - - -## Markdown and Index.md - -Anything with index.md will be automatically translated and served as a webpage. - -Using Jekyll, you can add header and footers and other templating features, standardizing the look of your pages as you like. - -One thing to remember is when your output is html, you can embed HTML tags, which is especially useful for embedding images, since you can adjust image size directly within the tag. - -## Let's Add Some Links - - - -## Let's Add an Image - -## Add a Blog Entry - -Your current repository is setup for blog entries. - -## Modifying the Menu - - - -## GitHub Pages - -Another nice use of Markdown is for authoring websites. You can do this really easily with GitHub pages. - -GitHub Pages uses an HTML translation engine called *Jekyll*, which is written in Ruby to translate Markdown into HTML. You don't really need to know about it, unless you want to use the templating in Jekyll to build something like a blog. - -One benefit to using Jekyll is that it's a relatively lightweight way to manage a blog without a more complicated, database-using, content management system. Because of this, it's relatively portable and you can easily take your documents with you if you decide to migrate to another system. - -## Markdown and GitHub pages - -Any markdown file that has an .markdown or .md extension will automatically be processed by GitHub and served as a html page. For example: https://github.com/laderast/magic-of-markdown/blob/master/magic-of-markdown.md - -If you want to make a webpage for your code, you need to create a branch called `gh-pages` and put the markdown files in there. I believe you can also just place html files as well. - -## Jekyll File Structure - -If you're interested in setting up a blog or more complicated site, you'll have to learn a little bit about Jekyll and the [liquid templating](http://jekyllrb.com/docs/templates/) language. - -You can download Jekyll by itself to see how it transforms markdown files, but to get started with a blog or pages, it's actually way easier to [clone Poole](https://github.com/poole/poole), which gives you the basic file structure that you can use to serve the GitHub pages. diff --git a/slides/githubPagesTutorial.html b/slides/githubPagesTutorial.html deleted file mode 100644 index acd7fe0..0000000 --- a/slides/githubPagesTutorial.html +++ /dev/null @@ -1,111 +0,0 @@ - - - - - - - - - Github Pages Tutorial - - - - - -
-

Github Pages Tutorial

-

-Ted Laderas (laderast@ohsu.edu), Eric Leung, and Robin Champieux -

-

4/5/2017

-
-
-

What is GitHub Pages?

-

GitHub Pages is a built-in system that allows you to build websites directly from a GitHub Repository.

-

There are two kinds of GitHub pages:

-
    -
  • Personal websites (associated with an account)
    • -
  • Repository Specific Websites (webpages for software)
    • -
-
-
-

What You Need for Today

-

You don’t need to know how to code to setup a GitHub page. We’ll learn some Markdown basics

-
    -
  • GitHub Account
    • -
  • GitHub Desktop
    • -
  • Text Editor (Sublime, Atom, TextEdit)
    • -
  • File Manager (to rename files)
    • -
  • Something to say
    • -
  • Pictures (optional)
    • -
-
-
-

Why GitHub Pages?

-

GitHub is a highly dependable webhost, and you get one personal webpage account for free.

-

Because GitHub pages is compatible with markdown, we’ll be using markdown formatting to build our webpage.

-
-
-

Let’s Make a Personal Webpage

-

If you have a GitHub account with USERNAME, you can serve a webpage directly from USERNAME.github.io. For example: http://laderast.github.io

-

You first need to create a repository with that name. From GitHub Desktop, click the “+” symbol, and create a new repository.

-

When you’ve created the repository, “publish” it to GitHub.

-

Once you’ve published the repository, try your personal webpage: http://USERNAME.github.io

-
-
-

File Structure

-

We are first going to rename the websiteFiles directory to match the name of your webpage repo.

-
-
-

Editing the Name of Your Blog

-

The first step to customizing your webpage is to edit the blogs name to include your information. You’ll open the _config.yml file to update the info.

-

Here’s an example _config.yml file.

-
-
-

Markdown and Index.md

-

Anything with index.md will be automatically translated and served as a webpage.

-

Using Jekyll, you can add header and footers and other templating features, standardizing the look of your pages as you like.

-

One thing to remember is when your output is html, you can embed HTML tags, which is especially useful for embedding images, since you can adjust image size directly within the tag.

-
- -
-

Let’s Add an Image

-
-
-

Add a Blog Entry

-

Your current repository is setup for blog entries.

-
-
-

Modifying the Menu

-
-
-

GitHub Pages

-

Another nice use of Markdown is for authoring websites. You can do this really easily with GitHub pages.

-

GitHub Pages uses an HTML translation engine called Jekyll, which is written in Ruby to translate Markdown into HTML. You don’t really need to know about it, unless you want to use the templating in Jekyll to build something like a blog.

-

One benefit to using Jekyll is that it’s a relatively lightweight way to manage a blog without a more complicated, database-using, content management system. Because of this, it’s relatively portable and you can easily take your documents with you if you decide to migrate to another system.

-
-
-

Markdown and GitHub pages

-

Any markdown file that has an .markdown or .md extension will automatically be processed by GitHub and served as a html page. For example: https://github.com/laderast/magic-of-markdown/blob/master/magic-of-markdown.md

-

If you want to make a webpage for your code, you need to create a branch called gh-pages and put the markdown files in there. I believe you can also just place html files as well.

-
-
-

Jekyll File Structure

-

If you’re interested in setting up a blog or more complicated site, you’ll have to learn a little bit about Jekyll and the liquid templating language.

-

You can download Jekyll by itself to see how it transforms markdown files, but to get started with a blog or pages, it’s actually way easier to clone Poole, which gives you the basic file structure that you can use to serve the GitHub pages.

-
- - - - - - diff --git a/websiteFiles/.gitignore b/websiteFiles/.gitignore deleted file mode 100644 index 10c58cf..0000000 --- a/websiteFiles/.gitignore +++ /dev/null @@ -1,41 +0,0 @@ -# Ignore docs files -_gh_pages -_site -.ruby-version - -# Numerous always-ignore extensions -*.diff -*.err -*.orig -*.log -*.rej -*.swo -*.swp -*.zip -*.vi -*~ - -# OS or Editor folders -.DS_Store -._* -Thumbs.db -.cache -.project -.settings -.tmproj -*.esproj -nbproject -*.sublime-project -*.sublime-workspace -.idea - -# Komodo -*.komodoproject -.komodotools - -# grunt-html-validation -validation-status.json -validation-report.json - -# Folders to ignore -node_modules diff --git a/websiteFiles/README.md b/websiteFiles/README.md deleted file mode 100644 index 26fe63f..0000000 --- a/websiteFiles/README.md +++ /dev/null @@ -1,118 +0,0 @@ -# Hyde - -Hyde is a brazen two-column [Jekyll](http://jekyllrb.com) theme that pairs a prominent sidebar with uncomplicated content. It's based on [Poole](http://getpoole.com), the Jekyll butler. - -![Hyde screenshot](https://f.cloud.github.com/assets/98681/1831228/42af6c6a-7384-11e3-98fb-e0b923ee0468.png) - - -## Contents - -- [Usage](#usage) -- [Options](#options) - - [Sidebar menu](#sidebar-menu) - - [Sticky sidebar content](#sticky-sidebar-content) - - [Themes](#themes) - - [Reverse layout](#reverse-layout) -- [Development](#development) -- [Author](#author) -- [License](#license) - - -## Usage - -Hyde is a theme built on top of [Poole](https://github.com/poole/poole), which provides a fully furnished Jekyll setup—just download and start the Jekyll server. See [the Poole usage guidelines](https://github.com/poole/poole#usage) for how to install and use Jekyll. - - -## Options - -Hyde includes some customizable options, typically applied via classes on the `` element. - - -### Sidebar menu - -Create a list of nav links in the sidebar by assigning each Jekyll page the correct layout in the page's [front-matter](http://jekyllrb.com/docs/frontmatter/). - -``` ---- -layout: page -title: About ---- -``` - -**Why require a specific layout?** Jekyll will return *all* pages, including the `atom.xml`, and with an alphabetical sort order. To ensure the first link is *Home*, we exclude the `index.html` page from this list by specifying the `page` layout. - - -### Sticky sidebar content - -By default Hyde ships with a sidebar that affixes it's content to the bottom of the sidebar. You can optionally disable this by removing the `.sidebar-sticky` class from the sidebar's `.container`. Sidebar content will then normally flow from top to bottom. - -```html - -
-
- ... -
-
- - -
-
- ... -
-
-``` - - -### Themes - -Hyde ships with eight optional themes based on the [base16 color scheme](https://github.com/chriskempson/base16). Apply a theme to change the color scheme (mostly applies to sidebar and links). - -![Hyde in red](https://f.cloud.github.com/assets/98681/1831229/42b0b354-7384-11e3-8462-31b8df193fe5.png) - -There are eight themes available at this time. - -![Hyde theme classes](https://f.cloud.github.com/assets/98681/1817044/e5b0ec06-6f68-11e3-83d7-acd1942797a1.png) - -To use a theme, add anyone of the available theme classes to the `` element in the `default.html` layout, like so: - -```html - - ... - -``` - -To create your own theme, look to the Themes section of [included CSS file](https://github.com/poole/hyde/blob/master/public/css/hyde.css). Copy any existing theme (they're only a few lines of CSS), rename it, and change the provided colors. - -### Reverse layout - -![Hyde with reverse layout](https://f.cloud.github.com/assets/98681/1831230/42b0d3ac-7384-11e3-8d54-2065afd03f9e.png) - -Hyde's page orientation can be reversed with a single class. - -```html - - ... - -``` - - -## Development - -Hyde has two branches, but only one is used for active development. - -- `master` for development. **All pull requests should be submitted against `master`.** -- `gh-pages` for our hosted site, which includes our analytics tracking code. **Please avoid using this branch.** - - -## Author - -**Mark Otto** -- -- - - -## License - -Open sourced under the [MIT license](LICENSE.md). - -<3 From c691b8775a224b7a9cfe859992abacc603a11c34 Mon Sep 17 00:00:00 2001 From: Eric Leung Date: Wed, 12 Apr 2017 15:26:51 -0700 Subject: [PATCH 02/20] Remove existing CNAME file --- CNAME | 1 - 1 file changed, 1 deletion(-) delete mode 100644 CNAME diff --git a/CNAME b/CNAME deleted file mode 100644 index 77c1018..0000000 --- a/CNAME +++ /dev/null @@ -1 +0,0 @@ -hyde.getpoole.com \ No newline at end of file From 4825a12cac68013ab53ffcfa19706f579a0f735d Mon Sep 17 00:00:00 2001 From: Eric Leung Date: Wed, 12 Apr 2017 15:36:25 -0700 Subject: [PATCH 03/20] Change relative links in config and header --- _config.yml | 2 +- _includes/head.html | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/_config.yml b/_config.yml index 984ccb3..feffd18 100644 --- a/_config.yml +++ b/_config.yml @@ -9,7 +9,7 @@ permalink: pretty title: Anew Guy tagline: 'Professional Website for Anew Guy' description: 'Website and Blog for Anew Guy' -url: http://anewguy.github.io +url: http://biodata-club.github.io/githubPagesTutorial baseurl: / author: diff --git a/_includes/head.html b/_includes/head.html index e2b070e..4acb937 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -15,9 +15,9 @@ - - - + + + From 3dc7d2b90b4f60d04bf722fa07ad8a5912ea876a Mon Sep 17 00:00:00 2001 From: Eric Leung Date: Wed, 12 Apr 2017 15:39:37 -0700 Subject: [PATCH 04/20] Normalize config file --- _config.yml | 23 ++++++++++------------- 1 file changed, 10 insertions(+), 13 deletions(-) diff --git a/_config.yml b/_config.yml index feffd18..dcb50cd 100644 --- a/_config.yml +++ b/_config.yml @@ -1,26 +1,17 @@ -# Dependencies -markdown: kramdown -highlighter: rouge - -# Permalinks -permalink: pretty - -# Setup +# Personalize your website info here title: Anew Guy tagline: 'Professional Website for Anew Guy' description: 'Website and Blog for Anew Guy' -url: http://biodata-club.github.io/githubPagesTutorial -baseurl: / - +url: http://anewguy.github.io author: name: 'Anew Guy' url: https://twitter.com/anewguy +## You don't need to modify below this line paginate: 5 # Custom vars version: 2.1.0 - github: repo: https://github.com/poole/hyde @@ -28,4 +19,10 @@ gems: [jekyll-paginate,jekyll-gist, redcarpet] paginate: 5 paginate_path: "page:num" -markdown: kramdown +# Dependencies +markdown: kramdown +highlighter: rouge + +# Permalinks +permalink: pretty +baseurl: / From 9d8308b28e22fa56d33d64c089e831b6afc01ad6 Mon Sep 17 00:00:00 2001 From: Eric Leung Date: Wed, 12 Apr 2017 15:50:58 -0700 Subject: [PATCH 05/20] Revert abs links in header and change base URL --- _config.yml | 2 +- _includes/head.html | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/_config.yml b/_config.yml index dcb50cd..95d91e8 100644 --- a/_config.yml +++ b/_config.yml @@ -25,4 +25,4 @@ highlighter: rouge # Permalinks permalink: pretty -baseurl: / +baseurl: /githubPagesTutorial diff --git a/_includes/head.html b/_includes/head.html index 4acb937..e2b070e 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -15,9 +15,9 @@ - - - + + + From c0e42ac85185e38ff6557c8f9063dcadaacf5877 Mon Sep 17 00:00:00 2001 From: Eric Leung Date: Wed, 12 Apr 2017 15:55:02 -0700 Subject: [PATCH 06/20] Update base URL with full address --- _config.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_config.yml b/_config.yml index 95d91e8..3b910e1 100644 --- a/_config.yml +++ b/_config.yml @@ -25,4 +25,4 @@ highlighter: rouge # Permalinks permalink: pretty -baseurl: /githubPagesTutorial +baseurl: https://biodata-club.github.io/githubPagesTutorial/ From 48a5154ba01685e9a5a4294e76d9f288d9b71e56 Mon Sep 17 00:00:00 2001 From: Eric Leung Date: Wed, 19 Apr 2017 16:50:00 -0700 Subject: [PATCH 07/20] Change h1 tag for name to h2 tag in sidebar --- _includes/sidebar.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/_includes/sidebar.html b/_includes/sidebar.html index 586f47b..4017151 100644 --- a/_includes/sidebar.html +++ b/_includes/sidebar.html @@ -1,11 +1,11 @@
-

+

{{ site.title }} -

+

{{ site.description }}

From 19090fe82edc0d6b14e8435035bf89ff46ba1758 Mon Sep 17 00:00:00 2001 From: Ted Laderas Date: Thu, 20 Apr 2017 16:16:31 -0700 Subject: [PATCH 08/20] Create dummyFile --- easy/dummyFile | 1 + 1 file changed, 1 insertion(+) create mode 100644 easy/dummyFile diff --git a/easy/dummyFile b/easy/dummyFile new file mode 100644 index 0000000..8b13789 --- /dev/null +++ b/easy/dummyFile @@ -0,0 +1 @@ + From 4c332a34ba3295aef2c9b29984eae533e4404884 Mon Sep 17 00:00:00 2001 From: Ted Laderas Date: Thu, 20 Apr 2017 16:17:12 -0700 Subject: [PATCH 09/20] Add files via upload --- easy/tutorialEasyVersion.html | 371 ++++++++++++++++++++++++++++++++++ 1 file changed, 371 insertions(+) create mode 100644 easy/tutorialEasyVersion.html diff --git a/easy/tutorialEasyVersion.html b/easy/tutorialEasyVersion.html new file mode 100644 index 0000000..80cdbb8 --- /dev/null +++ b/easy/tutorialEasyVersion.html @@ -0,0 +1,371 @@ + + + + + + + + + + + + + + +Github Pages Tutorial - Easy Version + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + +
+

What is GitHub Pages?

+

GitHub Pages is a system built into GitHub that allows you to build websites directly from a GitHub Repository.

+

There are two kinds of GitHub pages:

+
    +
  • Personal websites (associated with an account)
    • +
  • Repository Specific Websites (webpages for software or projects)
    • +
+

We’ll mostly cover the personal website for today.

+
+
+

Why GitHub Pages?

+

GitHub is a highly dependable webhost, and you get one personal webpage account for free.

+

Because GitHub pages is compatible with Markdown, we’ll be using Markdown formatting to build our webpage.

+
+
+

Our goal for the day

+

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://biodata-club.github.io/githubPagesTutorial/

+
+
+

What You Need for Today

+

You don’t need to know how to code or know HTML to setup a GitHub page. We’ll learn some Markdown basics so that we can add content to our site. Here’s what you need.

+ +

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.

+
+
+

What We’re Going to do Today

+
    +
  1. Fork the Repository
    2. +
  2. Rename the Repo(sitory)
    3. +
  3. Look at your pretty website!
    4. +
  4. Change and Personalize Your Site with YAML
    5. +
  5. Start Editing Content with Markdown
    6. +
  6. Adding Links
    7. +
  7. Adding Images
    8. +
  8. Add a Blog Post
    9. +
  9. Customize your sidebar with new links
    10. +
  10. Look at your pretty website!
    11. +
  11. Make a local copy for easier editing
    12. +
+
+
+

1. Fork the Repo(istory) From GitHub

+

Log into your GitHub account. Now go to the website repo: https://github.com/laderast/websiteFiles and click the “Fork” button on the top right of the webpage.

+
+
+

2. Rename the Repo

+

Now click the “Settings” tab on your repository. Change your repository name to USERNAME.github.io, where USERNAME is your GitHub Login.

+
+
+

3. Check out your Basic Website

+

You’re ready to go! Now check out your initialized website at https://USERNAME.github.io. We’ll start customizing it!

+
+
+

4. Editing the Name of Your Webpage and Customizing

+

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, tagline, description, url, and name fields to suit you.

+

For now, don’t modify anything below #You don't need to modify below this line.

+

Here’s an example _config.yml file.

+
# Personalize your website info here
+title:            Anew Guy
+tagline:          'Professional Website for Anew Guy'
+description:      'Website and Blog for Anew Guy'
+url:              https://anewguy.github.io
+author:
+  name:           'Anew Guy'
+

After you have edited your _config.yml file, click the green “Commit your changes” button at the bottom of the page. That will save the file to your repository.

+

Reload your website to see your changes. It may take a little bit, since GitHub needs to rebuild your page in the background.

+
+
+

5a. Make content using Markdown

+

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. There are lots of designers who are good at that if you aren’t.

+
+
+

5b. Markdown Basics

+

A markdown file generally has an .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.

+

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 about.md or the cv.md files with your info (remember to click the edit pencil button). When you’re done, click the “commit your 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.

+
+ +
+

7a. Let’s Add an Image (from an external website)

+

You can also add images to your webpage. GitHub has a mascot called Octocat, so let’s add a picture of Octocat to our site. Doing this is very similar to adding a link, you just need to add an exclamation mark in front of the square bracket and parentheses. Try adding a picture to your cv.md or your about.md files!

+

An example looks like this

+
![Jetpacktocat](https://octodex.github.com/images/jetpacktocat.png)
+

The output looks like this:

+
+Jetpacktocat +

Jetpacktocat

+
+

Note: The text within the square brackets should be a description of the image. Providing this is good practice, and facilitates compliance with accessibility technologies (such as screen readers), but you can leave it blank and the following would also work.

+
![](https://octodex.github.com/images/jetpacktocat.png)
+
+
+

7b. Uploading images to your website and using them

+

Where do you put images you’ve made? You can make an images/ folder in your repository. To do this, we will need to create a dummy file, because git requires a file in a new folder. Click on the “Add a New File” button in the root directory and type in images/dummyFile. Commit this dummy file into the repo and you should now see that the images/ folder has been created.

+

Now you can upload images into to that directory using the Upload Files button. Then you can refer to them like this:

+
![](/images/jetpacktocat.png)
+
+
+

8. Add a Blog Entry

+

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.

+
---
+layout: post
+title: Awesome Blog Post
+---
+
+Text for your post goes here.
+

This is a great opportunity to practice some Markdown! ### Such as headers

+

and bolding * lists

+

When you’re done, commit the file into GitHub and confirm that your new blog post is up. You can also delete the sample blog posts so they don’t show up on your page.

+
+
+

9. Modifying the Menu

+

If you take a look at the example site, https://biodata-club.github.io/githubPagesTutorial/, you’ll notice a menu side bar on the left. Near the bottom left corner, you’ll see links to other pages on the site. We can add and remove these links and their respective pages fairly easily.

+

Looking at the files in your main directory (which are the contents from websiteFiles/), the menu is automatically generated based on the files that end in .md (except LICENSE.md and README.md) and have a little YAML entry. If you take a look, you can see about.md and cv.md. Similarly named links should be in the menu.

+

To create a new static page that shows up in your sidebar, you need to have the following at the top and just change the text for the title.

+
---
+layout: page
+title: Coursework
+---
+
+Text for your page goes here.
+

Try adding a coursework.md file in the main directory by pasting the text above and then writing some content, such as classes you’ve taken. You can add some bullets by using the + symbol like this:

+
+ Basket Weaving
++ Cooking
++ GitHub Class
+

Which will show up like this:

+
    +
  • Basket Weaving
    • +
  • Cooking
    • +
  • GitHub Class
    • +
+

When you’re done, commit and load your website again. Confirm that “Coursework” shows up in the menu sidebar. Neat!

+
+
+

10. Look at your pretty website!

+

Congratulations on making it this far! This is just the start of your adventures with GitHub Pages. Learn some more Markdown, and have fun adding blog pages.

+

Have fun!

+
+
+

11. Make a local copy using GitHub Desktop (optional)

+

At some point, you will want to make a local copy of your website. This can be handy when you have multiple documents to edit, since editing on the website can be a bit of a pain.

+

At the top level of your repo, click the “Clone and Download” button and select “Open in GitHub Desktop”.

+

I like to have a code specific folder to store my code, such as “c:/code/” (windows) or “~/Code/” (Mac/Linux) so that it has a permanent place to stay. So create a folder that is somewhere permanent and save your repo into that folder. Your “code” folder should now have a local copy of your repo.

+

You can now make changes on your local machine. Edit the files in a text editor such as Sublime Text and save them.

+

To update local files you’ve changed and push them to your GitHub, you will need to create a commit. In GitHub Desktop, click on the changed files that you updated and want pushed to the site. You’ll need to create a commit message (a short bit of text that describes the changes you’ve made). Then you can push the “Sync” button to update.

+

Keep in mind: if you changed and added files on the website version, you will need to sync your own local repository to see those changes there.

+

A handy video intro to GitHub Desktop: https://www.youtube.com/watch?v=kFix7UDJ7LA

+

For more info on using GitHub Desktop: https://help.github.com/desktop/guides/getting-started/

+
+
+

More Things to Do with your GitHub Page

+

The following are things you might like to do to your website.

+
+
+

Lots of ways to customize your site

+

Look at the Readme.md file in the root level of your repo for more tweaks to you can make to the appearance of your blog. You can change the color scheme, put the sidebar on the right.

+

You’ll have to modify some .html files to do these changes, but it should be pretty painless to do.

+
+ +
+

Using Custom Themes

+

You might not like the layout of your page (that’s fine). You can transfer your markdown files into a different Jekyll Theme and use that as the basis for your website.

+

http://jekyllthemes.org

+

Many of these themes you can directly fork and make a website directly, much like this tutorial. Note that you’ll have to copy over any files that you’ve changed (such as the cv.md files and your blog posts in the _posts folder) to get them to show up in your new theme.

+

Unfortunately, the themes are not like plugins. Which means you will have to cut and paste your content into the new forked repo. They (the GitHub Pages people) are trying to make this process more streamlined.

+
+
+

If you know HTML

+

The cool thing about markdown is that you can add HTML directly into markdown files and the HTML should integrate pretty seamlessly. This is great when you want to customize placement of things.

+

For example, maybe we want a smaller version of octocat. We can just add an <img> tag to customize it, and change the height attribute.

+
<img src="https://octodex.github.com/images/jetpacktocat.png" 
+height="300">
+

+
+ + + + + +
+ + + + + + + + From 52359f75f9bb49975698d70abcf196ad85b5fe4e Mon Sep 17 00:00:00 2001 From: Ted Laderas Date: Thu, 20 Apr 2017 16:18:50 -0700 Subject: [PATCH 10/20] Delete tutorialEasyVersion.html --- easy/tutorialEasyVersion.html | 371 ---------------------------------- 1 file changed, 371 deletions(-) delete mode 100644 easy/tutorialEasyVersion.html diff --git a/easy/tutorialEasyVersion.html b/easy/tutorialEasyVersion.html deleted file mode 100644 index 80cdbb8..0000000 --- a/easy/tutorialEasyVersion.html +++ /dev/null @@ -1,371 +0,0 @@ - - - - - - - - - - - - - - -Github Pages Tutorial - Easy Version - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - -
-

What is GitHub Pages?

-

GitHub Pages is a system built into GitHub that allows you to build websites directly from a GitHub Repository.

-

There are two kinds of GitHub pages:

-
    -
  • Personal websites (associated with an account)
    • -
  • Repository Specific Websites (webpages for software or projects)
    • -
-

We’ll mostly cover the personal website for today.

-
-
-

Why GitHub Pages?

-

GitHub is a highly dependable webhost, and you get one personal webpage account for free.

-

Because GitHub pages is compatible with Markdown, we’ll be using Markdown formatting to build our webpage.

-
-
-

Our goal for the day

-

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://biodata-club.github.io/githubPagesTutorial/

-
-
-

What You Need for Today

-

You don’t need to know how to code or know HTML to setup a GitHub page. We’ll learn some Markdown basics so that we can add content to our site. Here’s what you need.

- -

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.

-
-
-

What We’re Going to do Today

-
    -
  1. Fork the Repository
    2. -
  2. Rename the Repo(sitory)
    3. -
  3. Look at your pretty website!
    4. -
  4. Change and Personalize Your Site with YAML
    5. -
  5. Start Editing Content with Markdown
    6. -
  6. Adding Links
    7. -
  7. Adding Images
    8. -
  8. Add a Blog Post
    9. -
  9. Customize your sidebar with new links
    10. -
  10. Look at your pretty website!
    11. -
  11. Make a local copy for easier editing
    12. -
-
-
-

1. Fork the Repo(istory) From GitHub

-

Log into your GitHub account. Now go to the website repo: https://github.com/laderast/websiteFiles and click the “Fork” button on the top right of the webpage.

-
-
-

2. Rename the Repo

-

Now click the “Settings” tab on your repository. Change your repository name to USERNAME.github.io, where USERNAME is your GitHub Login.

-
-
-

3. Check out your Basic Website

-

You’re ready to go! Now check out your initialized website at https://USERNAME.github.io. We’ll start customizing it!

-
-
-

4. Editing the Name of Your Webpage and Customizing

-

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, tagline, description, url, and name fields to suit you.

-

For now, don’t modify anything below #You don't need to modify below this line.

-

Here’s an example _config.yml file.

-
# Personalize your website info here
-title:            Anew Guy
-tagline:          'Professional Website for Anew Guy'
-description:      'Website and Blog for Anew Guy'
-url:              https://anewguy.github.io
-author:
-  name:           'Anew Guy'
-

After you have edited your _config.yml file, click the green “Commit your changes” button at the bottom of the page. That will save the file to your repository.

-

Reload your website to see your changes. It may take a little bit, since GitHub needs to rebuild your page in the background.

-
-
-

5a. Make content using Markdown

-

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. There are lots of designers who are good at that if you aren’t.

-
-
-

5b. Markdown Basics

-

A markdown file generally has an .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.

-

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 about.md or the cv.md files with your info (remember to click the edit pencil button). When you’re done, click the “commit your 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.

-
- -
-

7a. Let’s Add an Image (from an external website)

-

You can also add images to your webpage. GitHub has a mascot called Octocat, so let’s add a picture of Octocat to our site. Doing this is very similar to adding a link, you just need to add an exclamation mark in front of the square bracket and parentheses. Try adding a picture to your cv.md or your about.md files!

-

An example looks like this

-
![Jetpacktocat](https://octodex.github.com/images/jetpacktocat.png)
-

The output looks like this:

-
-Jetpacktocat -

Jetpacktocat

-
-

Note: The text within the square brackets should be a description of the image. Providing this is good practice, and facilitates compliance with accessibility technologies (such as screen readers), but you can leave it blank and the following would also work.

-
![](https://octodex.github.com/images/jetpacktocat.png)
-
-
-

7b. Uploading images to your website and using them

-

Where do you put images you’ve made? You can make an images/ folder in your repository. To do this, we will need to create a dummy file, because git requires a file in a new folder. Click on the “Add a New File” button in the root directory and type in images/dummyFile. Commit this dummy file into the repo and you should now see that the images/ folder has been created.

-

Now you can upload images into to that directory using the Upload Files button. Then you can refer to them like this:

-
![](/images/jetpacktocat.png)
-
-
-

8. Add a Blog Entry

-

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.

-
---
-layout: post
-title: Awesome Blog Post
----
-
-Text for your post goes here.
-

This is a great opportunity to practice some Markdown! ### Such as headers

-

and bolding * lists

-

When you’re done, commit the file into GitHub and confirm that your new blog post is up. You can also delete the sample blog posts so they don’t show up on your page.

-
-
-

9. Modifying the Menu

-

If you take a look at the example site, https://biodata-club.github.io/githubPagesTutorial/, you’ll notice a menu side bar on the left. Near the bottom left corner, you’ll see links to other pages on the site. We can add and remove these links and their respective pages fairly easily.

-

Looking at the files in your main directory (which are the contents from websiteFiles/), the menu is automatically generated based on the files that end in .md (except LICENSE.md and README.md) and have a little YAML entry. If you take a look, you can see about.md and cv.md. Similarly named links should be in the menu.

-

To create a new static page that shows up in your sidebar, you need to have the following at the top and just change the text for the title.

-
---
-layout: page
-title: Coursework
----
-
-Text for your page goes here.
-

Try adding a coursework.md file in the main directory by pasting the text above and then writing some content, such as classes you’ve taken. You can add some bullets by using the + symbol like this:

-
+ Basket Weaving
-+ Cooking
-+ GitHub Class
-

Which will show up like this:

-
    -
  • Basket Weaving
    • -
  • Cooking
    • -
  • GitHub Class
    • -
-

When you’re done, commit and load your website again. Confirm that “Coursework” shows up in the menu sidebar. Neat!

-
-
-

10. Look at your pretty website!

-

Congratulations on making it this far! This is just the start of your adventures with GitHub Pages. Learn some more Markdown, and have fun adding blog pages.

-

Have fun!

-
-
-

11. Make a local copy using GitHub Desktop (optional)

-

At some point, you will want to make a local copy of your website. This can be handy when you have multiple documents to edit, since editing on the website can be a bit of a pain.

-

At the top level of your repo, click the “Clone and Download” button and select “Open in GitHub Desktop”.

-

I like to have a code specific folder to store my code, such as “c:/code/” (windows) or “~/Code/” (Mac/Linux) so that it has a permanent place to stay. So create a folder that is somewhere permanent and save your repo into that folder. Your “code” folder should now have a local copy of your repo.

-

You can now make changes on your local machine. Edit the files in a text editor such as Sublime Text and save them.

-

To update local files you’ve changed and push them to your GitHub, you will need to create a commit. In GitHub Desktop, click on the changed files that you updated and want pushed to the site. You’ll need to create a commit message (a short bit of text that describes the changes you’ve made). Then you can push the “Sync” button to update.

-

Keep in mind: if you changed and added files on the website version, you will need to sync your own local repository to see those changes there.

-

A handy video intro to GitHub Desktop: https://www.youtube.com/watch?v=kFix7UDJ7LA

-

For more info on using GitHub Desktop: https://help.github.com/desktop/guides/getting-started/

-
-
-

More Things to Do with your GitHub Page

-

The following are things you might like to do to your website.

-
-
-

Lots of ways to customize your site

-

Look at the Readme.md file in the root level of your repo for more tweaks to you can make to the appearance of your blog. You can change the color scheme, put the sidebar on the right.

-

You’ll have to modify some .html files to do these changes, but it should be pretty painless to do.

-
- -
-

Using Custom Themes

-

You might not like the layout of your page (that’s fine). You can transfer your markdown files into a different Jekyll Theme and use that as the basis for your website.

-

http://jekyllthemes.org

-

Many of these themes you can directly fork and make a website directly, much like this tutorial. Note that you’ll have to copy over any files that you’ve changed (such as the cv.md files and your blog posts in the _posts folder) to get them to show up in your new theme.

-

Unfortunately, the themes are not like plugins. Which means you will have to cut and paste your content into the new forked repo. They (the GitHub Pages people) are trying to make this process more streamlined.

-
-
-

If you know HTML

-

The cool thing about markdown is that you can add HTML directly into markdown files and the HTML should integrate pretty seamlessly. This is great when you want to customize placement of things.

-

For example, maybe we want a smaller version of octocat. We can just add an <img> tag to customize it, and change the height attribute.

-
<img src="https://octodex.github.com/images/jetpacktocat.png" 
-height="300">
-

-
- - - - - -
- - - - - - - - From 69942f28b7eb436a4ab3455eefb37f737e2cdea6 Mon Sep 17 00:00:00 2001 From: Ted Laderas Date: Thu, 20 Apr 2017 16:21:05 -0700 Subject: [PATCH 11/20] Add files via upload --- index.html | 400 ++++++++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 367 insertions(+), 33 deletions(-) diff --git a/index.html b/index.html index a2f18a4..80cdbb8 100644 --- a/index.html +++ b/index.html @@ -1,37 +1,371 @@ + + + + + + + + + + + + + + +Github Pages Tutorial - Easy Version + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + +
+

What is GitHub Pages?

+

GitHub Pages is a system built into GitHub that allows you to build websites directly from a GitHub Repository.

+

There are two kinds of GitHub pages:

+
    +
  • Personal websites (associated with an account)
    • +
  • Repository Specific Websites (webpages for software or projects)
    • +
+

We’ll mostly cover the personal website for today.

+
+
+

Why GitHub Pages?

+

GitHub is a highly dependable webhost, and you get one personal webpage account for free.

+

Because GitHub pages is compatible with Markdown, we’ll be using Markdown formatting to build our webpage.

+
+
+

Our goal for the day

+

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://biodata-club.github.io/githubPagesTutorial/

+
+
+

What You Need for Today

+

You don’t need to know how to code or know HTML to setup a GitHub page. We’ll learn some Markdown basics so that we can add content to our site. Here’s what you need.

+ +

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.

+
+
+

What We’re Going to do Today

+
    +
  1. Fork the Repository
    2. +
  2. Rename the Repo(sitory)
    3. +
  3. Look at your pretty website!
    4. +
  4. Change and Personalize Your Site with YAML
    5. +
  5. Start Editing Content with Markdown
    6. +
  6. Adding Links
    7. +
  7. Adding Images
    8. +
  8. Add a Blog Post
    9. +
  9. Customize your sidebar with new links
    10. +
  10. Look at your pretty website!
    11. +
  11. Make a local copy for easier editing
    12. +
+
+
+

1. Fork the Repo(istory) From GitHub

+

Log into your GitHub account. Now go to the website repo: https://github.com/laderast/websiteFiles and click the “Fork” button on the top right of the webpage.

+
+
+

2. Rename the Repo

+

Now click the “Settings” tab on your repository. Change your repository name to USERNAME.github.io, where USERNAME is your GitHub Login.

+
+
+

3. Check out your Basic Website

+

You’re ready to go! Now check out your initialized website at https://USERNAME.github.io. We’ll start customizing it!

+
+
+

4. Editing the Name of Your Webpage and Customizing

+

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, tagline, description, url, and name fields to suit you.

+

For now, don’t modify anything below #You don't need to modify below this line.

+

Here’s an example _config.yml file.

+
# Personalize your website info here
+title:            Anew Guy
+tagline:          'Professional Website for Anew Guy'
+description:      'Website and Blog for Anew Guy'
+url:              https://anewguy.github.io
+author:
+  name:           'Anew Guy'
+

After you have edited your _config.yml file, click the green “Commit your changes” button at the bottom of the page. That will save the file to your repository.

+

Reload your website to see your changes. It may take a little bit, since GitHub needs to rebuild your page in the background.

+
+
+

5a. Make content using Markdown

+

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. There are lots of designers who are good at that if you aren’t.

+
+
+

5b. Markdown Basics

+

A markdown file generally has an .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.

+

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 about.md or the cv.md files with your info (remember to click the edit pencil button). When you’re done, click the “commit your 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.

+
+ +
+

7a. Let’s Add an Image (from an external website)

+

You can also add images to your webpage. GitHub has a mascot called Octocat, so let’s add a picture of Octocat to our site. Doing this is very similar to adding a link, you just need to add an exclamation mark in front of the square bracket and parentheses. Try adding a picture to your cv.md or your about.md files!

+

An example looks like this

+
![Jetpacktocat](https://octodex.github.com/images/jetpacktocat.png)
+

The output looks like this:

+
+Jetpacktocat +

Jetpacktocat

+
+

Note: The text within the square brackets should be a description of the image. Providing this is good practice, and facilitates compliance with accessibility technologies (such as screen readers), but you can leave it blank and the following would also work.

+
![](https://octodex.github.com/images/jetpacktocat.png)
+
+
+

7b. Uploading images to your website and using them

+

Where do you put images you’ve made? You can make an images/ folder in your repository. To do this, we will need to create a dummy file, because git requires a file in a new folder. Click on the “Add a New File” button in the root directory and type in images/dummyFile. Commit this dummy file into the repo and you should now see that the images/ folder has been created.

+

Now you can upload images into to that directory using the Upload Files button. Then you can refer to them like this:

+
![](/images/jetpacktocat.png)
+
+
+

8. Add a Blog Entry

+

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.

+
---
+layout: post
+title: Awesome Blog Post
 ---
-layout: default
-title: Blog
+
+Text for your post goes here.
+

This is a great opportunity to practice some Markdown! ### Such as headers

+

and bolding * lists

+

When you’re done, commit the file into GitHub and confirm that your new blog post is up. You can also delete the sample blog posts so they don’t show up on your page.

+
+
+

9. Modifying the Menu

+

If you take a look at the example site, https://biodata-club.github.io/githubPagesTutorial/, you’ll notice a menu side bar on the left. Near the bottom left corner, you’ll see links to other pages on the site. We can add and remove these links and their respective pages fairly easily.

+

Looking at the files in your main directory (which are the contents from websiteFiles/), the menu is automatically generated based on the files that end in .md (except LICENSE.md and README.md) and have a little YAML entry. If you take a look, you can see about.md and cv.md. Similarly named links should be in the menu.

+

To create a new static page that shows up in your sidebar, you need to have the following at the top and just change the text for the title.

+
---
+layout: page
+title: Coursework
 ---
 
-

-  {% for post in paginator.posts %}
-  

-    

-      
-        {{ post.title }}
-      
-    

-
-    {{ post.date | date_to_string }}
-
-    {{ post.content }}
-  

-  {% endfor %}
-

-
-
+

Try adding a coursework.md file in the main directory by pasting the text above and then writing some content, such as classes you’ve taken. You can add some bullets by using the + symbol like this:

+
+ Basket Weaving
++ Cooking
++ GitHub Class
+

Which will show up like this:

+
    +
  • Basket Weaving
    • +
  • Cooking
    • +
  • GitHub Class
    • +
+

When you’re done, commit and load your website again. Confirm that “Coursework” shows up in the menu sidebar. Neat!

+
+
+

10. Look at your pretty website!

+

Congratulations on making it this far! This is just the start of your adventures with GitHub Pages. Learn some more Markdown, and have fun adding blog pages.

+

Have fun!

+
+
+

11. Make a local copy using GitHub Desktop (optional)

+

At some point, you will want to make a local copy of your website. This can be handy when you have multiple documents to edit, since editing on the website can be a bit of a pain.

+

At the top level of your repo, click the “Clone and Download” button and select “Open in GitHub Desktop”.

+

I like to have a code specific folder to store my code, such as “c:/code/” (windows) or “~/Code/” (Mac/Linux) so that it has a permanent place to stay. So create a folder that is somewhere permanent and save your repo into that folder. Your “code” folder should now have a local copy of your repo.

+

You can now make changes on your local machine. Edit the files in a text editor such as Sublime Text and save them.

+

To update local files you’ve changed and push them to your GitHub, you will need to create a commit. In GitHub Desktop, click on the changed files that you updated and want pushed to the site. You’ll need to create a commit message (a short bit of text that describes the changes you’ve made). Then you can push the “Sync” button to update.

+

Keep in mind: if you changed and added files on the website version, you will need to sync your own local repository to see those changes there.

+

A handy video intro to GitHub Desktop: https://www.youtube.com/watch?v=kFix7UDJ7LA

+

For more info on using GitHub Desktop: https://help.github.com/desktop/guides/getting-started/

+
+

More Things to Do with your GitHub Page

+

The following are things you might like to do to your website.

+
+
+

Lots of ways to customize your site

+

Look at the Readme.md file in the root level of your repo for more tweaks to you can make to the appearance of your blog. You can change the color scheme, put the sidebar on the right.

+

You’ll have to modify some .html files to do these changes, but it should be pretty painless to do.

+
+ +
+

Using Custom Themes

+

You might not like the layout of your page (that’s fine). You can transfer your markdown files into a different Jekyll Theme and use that as the basis for your website.

+

http://jekyllthemes.org

+

Many of these themes you can directly fork and make a website directly, much like this tutorial. Note that you’ll have to copy over any files that you’ve changed (such as the cv.md files and your blog posts in the _posts folder) to get them to show up in your new theme.

+

Unfortunately, the themes are not like plugins. Which means you will have to cut and paste your content into the new forked repo. They (the GitHub Pages people) are trying to make this process more streamlined.

+
+
+

If you know HTML

+

The cool thing about markdown is that you can add HTML directly into markdown files and the HTML should integrate pretty seamlessly. This is great when you want to customize placement of things.

+

For example, maybe we want a smaller version of octocat. We can just add an <img> tag to customize it, and change the height attribute.

+
<img src="https://octodex.github.com/images/jetpacktocat.png" 
+height="300">
+

+
+ + + + + +
+ + + + + + + + From 18f38b27fdb0c232e797429cd7242eea4669f32c Mon Sep 17 00:00:00 2001 From: Ted Laderas Date: Thu, 20 Apr 2017 16:23:25 -0700 Subject: [PATCH 12/20] Add files via upload --- easy/index.html | 374 ++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 374 insertions(+) create mode 100644 easy/index.html diff --git a/easy/index.html b/easy/index.html new file mode 100644 index 0000000..bb25616 --- /dev/null +++ b/easy/index.html @@ -0,0 +1,374 @@ +--- +layout:page +--- + + + + + + + + + + + + + + +Github Pages Tutorial - Easy Version + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + +
+

What is GitHub Pages?

+

GitHub Pages is a system built into GitHub that allows you to build websites directly from a GitHub Repository.

+

There are two kinds of GitHub pages:

+
    +
  • Personal websites (associated with an account)
    • +
  • Repository Specific Websites (webpages for software or projects)
    • +
+

We’ll mostly cover the personal website for today.

+
+
+

Why GitHub Pages?

+

GitHub is a highly dependable webhost, and you get one personal webpage account for free.

+

Because GitHub pages is compatible with Markdown, we’ll be using Markdown formatting to build our webpage.

+
+
+

Our goal for the day

+

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://biodata-club.github.io/githubPagesTutorial/

+
+
+

What You Need for Today

+

You don’t need to know how to code or know HTML to setup a GitHub page. We’ll learn some Markdown basics so that we can add content to our site. Here’s what you need.

+ +

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.

+
+
+

What We’re Going to do Today

+
    +
  1. Fork the Repository
    2. +
  2. Rename the Repo(sitory)
    3. +
  3. Look at your pretty website!
    4. +
  4. Change and Personalize Your Site with YAML
    5. +
  5. Start Editing Content with Markdown
    6. +
  6. Adding Links
    7. +
  7. Adding Images
    8. +
  8. Add a Blog Post
    9. +
  9. Customize your sidebar with new links
    10. +
  10. Look at your pretty website!
    11. +
  11. Make a local copy for easier editing
    12. +
+
+
+

1. Fork the Repo(istory) From GitHub

+

Log into your GitHub account. Now go to the website repo: https://github.com/laderast/websiteFiles and click the “Fork” button on the top right of the webpage.

+
+
+

2. Rename the Repo

+

Now click the “Settings” tab on your repository. Change your repository name to USERNAME.github.io, where USERNAME is your GitHub Login.

+
+
+

3. Check out your Basic Website

+

You’re ready to go! Now check out your initialized website at https://USERNAME.github.io. We’ll start customizing it!

+
+
+

4. Editing the Name of Your Webpage and Customizing

+

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, tagline, description, url, and name fields to suit you.

+

For now, don’t modify anything below #You don't need to modify below this line.

+

Here’s an example _config.yml file.

+
# Personalize your website info here
+title:            Anew Guy
+tagline:          'Professional Website for Anew Guy'
+description:      'Website and Blog for Anew Guy'
+url:              https://anewguy.github.io
+author:
+  name:           'Anew Guy'
+

After you have edited your _config.yml file, click the green “Commit your changes” button at the bottom of the page. That will save the file to your repository.

+

Reload your website to see your changes. It may take a little bit, since GitHub needs to rebuild your page in the background.

+
+
+

5a. Make content using Markdown

+

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. There are lots of designers who are good at that if you aren’t.

+
+
+

5b. Markdown Basics

+

A markdown file generally has an .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.

+

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 about.md or the cv.md files with your info (remember to click the edit pencil button). When you’re done, click the “commit your 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.

+
+ +
+

7a. Let’s Add an Image (from an external website)

+

You can also add images to your webpage. GitHub has a mascot called Octocat, so let’s add a picture of Octocat to our site. Doing this is very similar to adding a link, you just need to add an exclamation mark in front of the square bracket and parentheses. Try adding a picture to your cv.md or your about.md files!

+

An example looks like this

+
![Jetpacktocat](https://octodex.github.com/images/jetpacktocat.png)
+

The output looks like this:

+
+Jetpacktocat +

Jetpacktocat

+
+

Note: The text within the square brackets should be a description of the image. Providing this is good practice, and facilitates compliance with accessibility technologies (such as screen readers), but you can leave it blank and the following would also work.

+
![](https://octodex.github.com/images/jetpacktocat.png)
+
+
+

7b. Uploading images to your website and using them

+

Where do you put images you’ve made? You can make an images/ folder in your repository. To do this, we will need to create a dummy file, because git requires a file in a new folder. Click on the “Add a New File” button in the root directory and type in images/dummyFile. Commit this dummy file into the repo and you should now see that the images/ folder has been created.

+

Now you can upload images into to that directory using the Upload Files button. Then you can refer to them like this:

+
![](/images/jetpacktocat.png)
+
+
+

8. Add a Blog Entry

+

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.

+
---
+layout: post
+title: Awesome Blog Post
+---
+
+Text for your post goes here.
+

This is a great opportunity to practice some Markdown! ### Such as headers

+

and bolding * lists

+

When you’re done, commit the file into GitHub and confirm that your new blog post is up. You can also delete the sample blog posts so they don’t show up on your page.

+
+
+

9. Modifying the Menu

+

If you take a look at the example site, https://biodata-club.github.io/githubPagesTutorial/, you’ll notice a menu side bar on the left. Near the bottom left corner, you’ll see links to other pages on the site. We can add and remove these links and their respective pages fairly easily.

+

Looking at the files in your main directory (which are the contents from websiteFiles/), the menu is automatically generated based on the files that end in .md (except LICENSE.md and README.md) and have a little YAML entry. If you take a look, you can see about.md and cv.md. Similarly named links should be in the menu.

+

To create a new static page that shows up in your sidebar, you need to have the following at the top and just change the text for the title.

+
---
+layout: page
+title: Coursework
+---
+
+Text for your page goes here.
+

Try adding a coursework.md file in the main directory by pasting the text above and then writing some content, such as classes you’ve taken. You can add some bullets by using the + symbol like this:

+
+ Basket Weaving
++ Cooking
++ GitHub Class
+

Which will show up like this:

+
    +
  • Basket Weaving
    • +
  • Cooking
    • +
  • GitHub Class
    • +
+

When you’re done, commit and load your website again. Confirm that “Coursework” shows up in the menu sidebar. Neat!

+
+
+

10. Look at your pretty website!

+

Congratulations on making it this far! This is just the start of your adventures with GitHub Pages. Learn some more Markdown, and have fun adding blog pages.

+

Have fun!

+
+
+

11. Make a local copy using GitHub Desktop (optional)

+

At some point, you will want to make a local copy of your website. This can be handy when you have multiple documents to edit, since editing on the website can be a bit of a pain.

+

At the top level of your repo, click the “Clone and Download” button and select “Open in GitHub Desktop”.

+

I like to have a code specific folder to store my code, such as “c:/code/” (windows) or “~/Code/” (Mac/Linux) so that it has a permanent place to stay. So create a folder that is somewhere permanent and save your repo into that folder. Your “code” folder should now have a local copy of your repo.

+

You can now make changes on your local machine. Edit the files in a text editor such as Sublime Text and save them.

+

To update local files you’ve changed and push them to your GitHub, you will need to create a commit. In GitHub Desktop, click on the changed files that you updated and want pushed to the site. You’ll need to create a commit message (a short bit of text that describes the changes you’ve made). Then you can push the “Sync” button to update.

+

Keep in mind: if you changed and added files on the website version, you will need to sync your own local repository to see those changes there.

+

A handy video intro to GitHub Desktop: https://www.youtube.com/watch?v=kFix7UDJ7LA

+

For more info on using GitHub Desktop: https://help.github.com/desktop/guides/getting-started/

+
+
+

More Things to Do with your GitHub Page

+

The following are things you might like to do to your website.

+
+
+

Lots of ways to customize your site

+

Look at the Readme.md file in the root level of your repo for more tweaks to you can make to the appearance of your blog. You can change the color scheme, put the sidebar on the right.

+

You’ll have to modify some .html files to do these changes, but it should be pretty painless to do.

+
+ +
+

Using Custom Themes

+

You might not like the layout of your page (that’s fine). You can transfer your markdown files into a different Jekyll Theme and use that as the basis for your website.

+

http://jekyllthemes.org

+

Many of these themes you can directly fork and make a website directly, much like this tutorial. Note that you’ll have to copy over any files that you’ve changed (such as the cv.md files and your blog posts in the _posts folder) to get them to show up in your new theme.

+

Unfortunately, the themes are not like plugins. Which means you will have to cut and paste your content into the new forked repo. They (the GitHub Pages people) are trying to make this process more streamlined.

+
+
+

If you know HTML

+

The cool thing about markdown is that you can add HTML directly into markdown files and the HTML should integrate pretty seamlessly. This is great when you want to customize placement of things.

+

For example, maybe we want a smaller version of octocat. We can just add an <img> tag to customize it, and change the height attribute.

+
<img src="https://octodex.github.com/images/jetpacktocat.png" 
+height="300">
+

+
+ + + + + +
+ + + + + + + + From 320d108a0027e5515c68e2faa0ad6d3d60448332 Mon Sep 17 00:00:00 2001 From: Ted Laderas Date: Thu, 20 Apr 2017 16:24:45 -0700 Subject: [PATCH 13/20] Delete index.html --- index.html | 371 ----------------------------------------------------- 1 file changed, 371 deletions(-) delete mode 100644 index.html diff --git a/index.html b/index.html deleted file mode 100644 index 80cdbb8..0000000 --- a/index.html +++ /dev/null @@ -1,371 +0,0 @@ - - - - - - - - - - - - - - -Github Pages Tutorial - Easy Version - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - -
-

What is GitHub Pages?

-

GitHub Pages is a system built into GitHub that allows you to build websites directly from a GitHub Repository.

-

There are two kinds of GitHub pages:

-
    -
  • Personal websites (associated with an account)
    • -
  • Repository Specific Websites (webpages for software or projects)
    • -
-

We’ll mostly cover the personal website for today.

-
-
-

Why GitHub Pages?

-

GitHub is a highly dependable webhost, and you get one personal webpage account for free.

-

Because GitHub pages is compatible with Markdown, we’ll be using Markdown formatting to build our webpage.

-
-
-

Our goal for the day

-

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://biodata-club.github.io/githubPagesTutorial/

-
-
-

What You Need for Today

-

You don’t need to know how to code or know HTML to setup a GitHub page. We’ll learn some Markdown basics so that we can add content to our site. Here’s what you need.

- -

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.

-
-
-

What We’re Going to do Today

-
    -
  1. Fork the Repository
    2. -
  2. Rename the Repo(sitory)
    3. -
  3. Look at your pretty website!
    4. -
  4. Change and Personalize Your Site with YAML
    5. -
  5. Start Editing Content with Markdown
    6. -
  6. Adding Links
    7. -
  7. Adding Images
    8. -
  8. Add a Blog Post
    9. -
  9. Customize your sidebar with new links
    10. -
  10. Look at your pretty website!
    11. -
  11. Make a local copy for easier editing
    12. -
-
-
-

1. Fork the Repo(istory) From GitHub

-

Log into your GitHub account. Now go to the website repo: https://github.com/laderast/websiteFiles and click the “Fork” button on the top right of the webpage.

-
-
-

2. Rename the Repo

-

Now click the “Settings” tab on your repository. Change your repository name to USERNAME.github.io, where USERNAME is your GitHub Login.

-
-
-

3. Check out your Basic Website

-

You’re ready to go! Now check out your initialized website at https://USERNAME.github.io. We’ll start customizing it!

-
-
-

4. Editing the Name of Your Webpage and Customizing

-

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, tagline, description, url, and name fields to suit you.

-

For now, don’t modify anything below #You don't need to modify below this line.

-

Here’s an example _config.yml file.

-
# Personalize your website info here
-title:            Anew Guy
-tagline:          'Professional Website for Anew Guy'
-description:      'Website and Blog for Anew Guy'
-url:              https://anewguy.github.io
-author:
-  name:           'Anew Guy'
-

After you have edited your _config.yml file, click the green “Commit your changes” button at the bottom of the page. That will save the file to your repository.

-

Reload your website to see your changes. It may take a little bit, since GitHub needs to rebuild your page in the background.

-
-
-

5a. Make content using Markdown

-

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. There are lots of designers who are good at that if you aren’t.

-
-
-

5b. Markdown Basics

-

A markdown file generally has an .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.

-

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 about.md or the cv.md files with your info (remember to click the edit pencil button). When you’re done, click the “commit your 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.

-
- -
-

7a. Let’s Add an Image (from an external website)

-

You can also add images to your webpage. GitHub has a mascot called Octocat, so let’s add a picture of Octocat to our site. Doing this is very similar to adding a link, you just need to add an exclamation mark in front of the square bracket and parentheses. Try adding a picture to your cv.md or your about.md files!

-

An example looks like this

-
![Jetpacktocat](https://octodex.github.com/images/jetpacktocat.png)
-

The output looks like this:

-
-Jetpacktocat -

Jetpacktocat

-
-

Note: The text within the square brackets should be a description of the image. Providing this is good practice, and facilitates compliance with accessibility technologies (such as screen readers), but you can leave it blank and the following would also work.

-
![](https://octodex.github.com/images/jetpacktocat.png)
-
-
-

7b. Uploading images to your website and using them

-

Where do you put images you’ve made? You can make an images/ folder in your repository. To do this, we will need to create a dummy file, because git requires a file in a new folder. Click on the “Add a New File” button in the root directory and type in images/dummyFile. Commit this dummy file into the repo and you should now see that the images/ folder has been created.

-

Now you can upload images into to that directory using the Upload Files button. Then you can refer to them like this:

-
![](/images/jetpacktocat.png)
-
-
-

8. Add a Blog Entry

-

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.

-
---
-layout: post
-title: Awesome Blog Post
----
-
-Text for your post goes here.
-

This is a great opportunity to practice some Markdown! ### Such as headers

-

and bolding * lists

-

When you’re done, commit the file into GitHub and confirm that your new blog post is up. You can also delete the sample blog posts so they don’t show up on your page.

-
-
-

9. Modifying the Menu

-

If you take a look at the example site, https://biodata-club.github.io/githubPagesTutorial/, you’ll notice a menu side bar on the left. Near the bottom left corner, you’ll see links to other pages on the site. We can add and remove these links and their respective pages fairly easily.

-

Looking at the files in your main directory (which are the contents from websiteFiles/), the menu is automatically generated based on the files that end in .md (except LICENSE.md and README.md) and have a little YAML entry. If you take a look, you can see about.md and cv.md. Similarly named links should be in the menu.

-

To create a new static page that shows up in your sidebar, you need to have the following at the top and just change the text for the title.

-
---
-layout: page
-title: Coursework
----
-
-Text for your page goes here.
-

Try adding a coursework.md file in the main directory by pasting the text above and then writing some content, such as classes you’ve taken. You can add some bullets by using the + symbol like this:

-
+ Basket Weaving
-+ Cooking
-+ GitHub Class
-

Which will show up like this:

-
    -
  • Basket Weaving
    • -
  • Cooking
    • -
  • GitHub Class
    • -
-

When you’re done, commit and load your website again. Confirm that “Coursework” shows up in the menu sidebar. Neat!

-
-
-

10. Look at your pretty website!

-

Congratulations on making it this far! This is just the start of your adventures with GitHub Pages. Learn some more Markdown, and have fun adding blog pages.

-

Have fun!

-
-
-

11. Make a local copy using GitHub Desktop (optional)

-

At some point, you will want to make a local copy of your website. This can be handy when you have multiple documents to edit, since editing on the website can be a bit of a pain.

-

At the top level of your repo, click the “Clone and Download” button and select “Open in GitHub Desktop”.

-

I like to have a code specific folder to store my code, such as “c:/code/” (windows) or “~/Code/” (Mac/Linux) so that it has a permanent place to stay. So create a folder that is somewhere permanent and save your repo into that folder. Your “code” folder should now have a local copy of your repo.

-

You can now make changes on your local machine. Edit the files in a text editor such as Sublime Text and save them.

-

To update local files you’ve changed and push them to your GitHub, you will need to create a commit. In GitHub Desktop, click on the changed files that you updated and want pushed to the site. You’ll need to create a commit message (a short bit of text that describes the changes you’ve made). Then you can push the “Sync” button to update.

-

Keep in mind: if you changed and added files on the website version, you will need to sync your own local repository to see those changes there.

-

A handy video intro to GitHub Desktop: https://www.youtube.com/watch?v=kFix7UDJ7LA

-

For more info on using GitHub Desktop: https://help.github.com/desktop/guides/getting-started/

-
-
-

More Things to Do with your GitHub Page

-

The following are things you might like to do to your website.

-
-
-

Lots of ways to customize your site

-

Look at the Readme.md file in the root level of your repo for more tweaks to you can make to the appearance of your blog. You can change the color scheme, put the sidebar on the right.

-

You’ll have to modify some .html files to do these changes, but it should be pretty painless to do.

-
- -
-

Using Custom Themes

-

You might not like the layout of your page (that’s fine). You can transfer your markdown files into a different Jekyll Theme and use that as the basis for your website.

-

http://jekyllthemes.org

-

Many of these themes you can directly fork and make a website directly, much like this tutorial. Note that you’ll have to copy over any files that you’ve changed (such as the cv.md files and your blog posts in the _posts folder) to get them to show up in your new theme.

-

Unfortunately, the themes are not like plugins. Which means you will have to cut and paste your content into the new forked repo. They (the GitHub Pages people) are trying to make this process more streamlined.

-
-
-

If you know HTML

-

The cool thing about markdown is that you can add HTML directly into markdown files and the HTML should integrate pretty seamlessly. This is great when you want to customize placement of things.

-

For example, maybe we want a smaller version of octocat. We can just add an <img> tag to customize it, and change the height attribute.

-
<img src="https://octodex.github.com/images/jetpacktocat.png" 
-height="300">
-

-
- - - - - -
- - - - - - - - From 9236da47093f5a3c982c852e39d25d5f3b5a9c2c Mon Sep 17 00:00:00 2001 From: Ted Laderas Date: Thu, 20 Apr 2017 16:25:10 -0700 Subject: [PATCH 14/20] Add files via upload --- index.html | 37 +++++++++++++++++++++++++++++++++++++ 1 file changed, 37 insertions(+) create mode 100644 index.html diff --git a/index.html b/index.html new file mode 100644 index 0000000..a2f18a4 --- /dev/null +++ b/index.html @@ -0,0 +1,37 @@ +--- +layout: default +title: Blog +--- + +
+ {% for post in paginator.posts %} +
+

+ + {{ post.title }} + +

+ + {{ post.date | date_to_string }} + + {{ post.content }} +
+ {% endfor %} +
+ + From ed57d6fa9d3f0ed39f07c7da24f106a1447559c9 Mon Sep 17 00:00:00 2001 From: Ted Laderas Date: Thu, 20 Apr 2017 16:28:30 -0700 Subject: [PATCH 15/20] Delete dummyFile --- easy/dummyFile | 1 - 1 file changed, 1 deletion(-) delete mode 100644 easy/dummyFile diff --git a/easy/dummyFile b/easy/dummyFile deleted file mode 100644 index 8b13789..0000000 --- a/easy/dummyFile +++ /dev/null @@ -1 +0,0 @@ - From 48056cf4955876c5f08ff05f06ede7ca6217e920 Mon Sep 17 00:00:00 2001 From: Ted Laderas Date: Thu, 20 Apr 2017 16:28:41 -0700 Subject: [PATCH 16/20] Delete index.html --- easy/index.html | 374 ------------------------------------------------ 1 file changed, 374 deletions(-) delete mode 100644 easy/index.html diff --git a/easy/index.html b/easy/index.html deleted file mode 100644 index bb25616..0000000 --- a/easy/index.html +++ /dev/null @@ -1,374 +0,0 @@ ---- -layout:page ---- - - - - - - - - - - - - - - -Github Pages Tutorial - Easy Version - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - -
-

What is GitHub Pages?

-

GitHub Pages is a system built into GitHub that allows you to build websites directly from a GitHub Repository.

-

There are two kinds of GitHub pages:

-
    -
  • Personal websites (associated with an account)
    • -
  • Repository Specific Websites (webpages for software or projects)
    • -
-

We’ll mostly cover the personal website for today.

-
-
-

Why GitHub Pages?

-

GitHub is a highly dependable webhost, and you get one personal webpage account for free.

-

Because GitHub pages is compatible with Markdown, we’ll be using Markdown formatting to build our webpage.

-
-
-

Our goal for the day

-

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://biodata-club.github.io/githubPagesTutorial/

-
-
-

What You Need for Today

-

You don’t need to know how to code or know HTML to setup a GitHub page. We’ll learn some Markdown basics so that we can add content to our site. Here’s what you need.

- -

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.

-
-
-

What We’re Going to do Today

-
    -
  1. Fork the Repository
    2. -
  2. Rename the Repo(sitory)
    3. -
  3. Look at your pretty website!
    4. -
  4. Change and Personalize Your Site with YAML
    5. -
  5. Start Editing Content with Markdown
    6. -
  6. Adding Links
    7. -
  7. Adding Images
    8. -
  8. Add a Blog Post
    9. -
  9. Customize your sidebar with new links
    10. -
  10. Look at your pretty website!
    11. -
  11. Make a local copy for easier editing
    12. -
-
-
-

1. Fork the Repo(istory) From GitHub

-

Log into your GitHub account. Now go to the website repo: https://github.com/laderast/websiteFiles and click the “Fork” button on the top right of the webpage.

-
-
-

2. Rename the Repo

-

Now click the “Settings” tab on your repository. Change your repository name to USERNAME.github.io, where USERNAME is your GitHub Login.

-
-
-

3. Check out your Basic Website

-

You’re ready to go! Now check out your initialized website at https://USERNAME.github.io. We’ll start customizing it!

-
-
-

4. Editing the Name of Your Webpage and Customizing

-

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, tagline, description, url, and name fields to suit you.

-

For now, don’t modify anything below #You don't need to modify below this line.

-

Here’s an example _config.yml file.

-
# Personalize your website info here
-title:            Anew Guy
-tagline:          'Professional Website for Anew Guy'
-description:      'Website and Blog for Anew Guy'
-url:              https://anewguy.github.io
-author:
-  name:           'Anew Guy'
-

After you have edited your _config.yml file, click the green “Commit your changes” button at the bottom of the page. That will save the file to your repository.

-

Reload your website to see your changes. It may take a little bit, since GitHub needs to rebuild your page in the background.

-
-
-

5a. Make content using Markdown

-

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. There are lots of designers who are good at that if you aren’t.

-
-
-

5b. Markdown Basics

-

A markdown file generally has an .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.

-

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 about.md or the cv.md files with your info (remember to click the edit pencil button). When you’re done, click the “commit your 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.

-
- -
-

7a. Let’s Add an Image (from an external website)

-

You can also add images to your webpage. GitHub has a mascot called Octocat, so let’s add a picture of Octocat to our site. Doing this is very similar to adding a link, you just need to add an exclamation mark in front of the square bracket and parentheses. Try adding a picture to your cv.md or your about.md files!

-

An example looks like this

-
![Jetpacktocat](https://octodex.github.com/images/jetpacktocat.png)
-

The output looks like this:

-
-Jetpacktocat -

Jetpacktocat

-
-

Note: The text within the square brackets should be a description of the image. Providing this is good practice, and facilitates compliance with accessibility technologies (such as screen readers), but you can leave it blank and the following would also work.

-
![](https://octodex.github.com/images/jetpacktocat.png)
-
-
-

7b. Uploading images to your website and using them

-

Where do you put images you’ve made? You can make an images/ folder in your repository. To do this, we will need to create a dummy file, because git requires a file in a new folder. Click on the “Add a New File” button in the root directory and type in images/dummyFile. Commit this dummy file into the repo and you should now see that the images/ folder has been created.

-

Now you can upload images into to that directory using the Upload Files button. Then you can refer to them like this:

-
![](/images/jetpacktocat.png)
-
-
-

8. Add a Blog Entry

-

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.

-
---
-layout: post
-title: Awesome Blog Post
----
-
-Text for your post goes here.
-

This is a great opportunity to practice some Markdown! ### Such as headers

-

and bolding * lists

-

When you’re done, commit the file into GitHub and confirm that your new blog post is up. You can also delete the sample blog posts so they don’t show up on your page.

-
-
-

9. Modifying the Menu

-

If you take a look at the example site, https://biodata-club.github.io/githubPagesTutorial/, you’ll notice a menu side bar on the left. Near the bottom left corner, you’ll see links to other pages on the site. We can add and remove these links and their respective pages fairly easily.

-

Looking at the files in your main directory (which are the contents from websiteFiles/), the menu is automatically generated based on the files that end in .md (except LICENSE.md and README.md) and have a little YAML entry. If you take a look, you can see about.md and cv.md. Similarly named links should be in the menu.

-

To create a new static page that shows up in your sidebar, you need to have the following at the top and just change the text for the title.

-
---
-layout: page
-title: Coursework
----
-
-Text for your page goes here.
-

Try adding a coursework.md file in the main directory by pasting the text above and then writing some content, such as classes you’ve taken. You can add some bullets by using the + symbol like this:

-
+ Basket Weaving
-+ Cooking
-+ GitHub Class
-

Which will show up like this:

-
    -
  • Basket Weaving
    • -
  • Cooking
    • -
  • GitHub Class
    • -
-

When you’re done, commit and load your website again. Confirm that “Coursework” shows up in the menu sidebar. Neat!

-
-
-

10. Look at your pretty website!

-

Congratulations on making it this far! This is just the start of your adventures with GitHub Pages. Learn some more Markdown, and have fun adding blog pages.

-

Have fun!

-
-
-

11. Make a local copy using GitHub Desktop (optional)

-

At some point, you will want to make a local copy of your website. This can be handy when you have multiple documents to edit, since editing on the website can be a bit of a pain.

-

At the top level of your repo, click the “Clone and Download” button and select “Open in GitHub Desktop”.

-

I like to have a code specific folder to store my code, such as “c:/code/” (windows) or “~/Code/” (Mac/Linux) so that it has a permanent place to stay. So create a folder that is somewhere permanent and save your repo into that folder. Your “code” folder should now have a local copy of your repo.

-

You can now make changes on your local machine. Edit the files in a text editor such as Sublime Text and save them.

-

To update local files you’ve changed and push them to your GitHub, you will need to create a commit. In GitHub Desktop, click on the changed files that you updated and want pushed to the site. You’ll need to create a commit message (a short bit of text that describes the changes you’ve made). Then you can push the “Sync” button to update.

-

Keep in mind: if you changed and added files on the website version, you will need to sync your own local repository to see those changes there.

-

A handy video intro to GitHub Desktop: https://www.youtube.com/watch?v=kFix7UDJ7LA

-

For more info on using GitHub Desktop: https://help.github.com/desktop/guides/getting-started/

-
-
-

More Things to Do with your GitHub Page

-

The following are things you might like to do to your website.

-
-
-

Lots of ways to customize your site

-

Look at the Readme.md file in the root level of your repo for more tweaks to you can make to the appearance of your blog. You can change the color scheme, put the sidebar on the right.

-

You’ll have to modify some .html files to do these changes, but it should be pretty painless to do.

-
- -
-

Using Custom Themes

-

You might not like the layout of your page (that’s fine). You can transfer your markdown files into a different Jekyll Theme and use that as the basis for your website.

-

http://jekyllthemes.org

-

Many of these themes you can directly fork and make a website directly, much like this tutorial. Note that you’ll have to copy over any files that you’ve changed (such as the cv.md files and your blog posts in the _posts folder) to get them to show up in your new theme.

-

Unfortunately, the themes are not like plugins. Which means you will have to cut and paste your content into the new forked repo. They (the GitHub Pages people) are trying to make this process more streamlined.

-
-
-

If you know HTML

-

The cool thing about markdown is that you can add HTML directly into markdown files and the HTML should integrate pretty seamlessly. This is great when you want to customize placement of things.

-

For example, maybe we want a smaller version of octocat. We can just add an <img> tag to customize it, and change the height attribute.

-
<img src="https://octodex.github.com/images/jetpacktocat.png" 
-height="300">
-

-
- - - - - -
- - - - - - - - From 2a6324719a974f67e63669f5cb53248d8ecc23fb Mon Sep 17 00:00:00 2001 From: Ted Laderas Date: Thu, 20 Apr 2017 16:29:41 -0700 Subject: [PATCH 17/20] Create dummyFile --- easy/dummyFile | 1 + 1 file changed, 1 insertion(+) create mode 100644 easy/dummyFile diff --git a/easy/dummyFile b/easy/dummyFile new file mode 100644 index 0000000..8b13789 --- /dev/null +++ b/easy/dummyFile @@ -0,0 +1 @@ + From 2247cf74ed35f1ace5df804010e9c894a00526f8 Mon Sep 17 00:00:00 2001 From: Ted Laderas Date: Thu, 20 Apr 2017 16:30:04 -0700 Subject: [PATCH 18/20] Add files via upload --- easy/index.md | 296 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 296 insertions(+) create mode 100644 easy/index.md diff --git a/easy/index.md b/easy/index.md new file mode 100644 index 0000000..3c61559 --- /dev/null +++ b/easy/index.md @@ -0,0 +1,296 @@ +--- +layout: page +title: "Github Pages Tutorial - Easy Version" +author: "Ted Laderas (laderast@ohsu.edu), Eric Leung, and Robin Champieux" +--- + +## What is GitHub Pages? + +GitHub Pages is a system built into GitHub that allows you to build websites directly from a GitHub Repository. + +There are two kinds of GitHub pages: + ++ Personal websites (associated with an account) ++ Repository Specific Websites (webpages for software or projects) + +We'll mostly cover the personal website for today. + +## Why GitHub Pages? + +GitHub is a highly dependable webhost, and you get one personal webpage account for free. + +Because GitHub pages is compatible with Markdown, we'll be using Markdown formatting to build our webpage. + +## Our goal for the day + +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://biodata-club.github.io/githubPagesTutorial/ + +## What You Need for Today + +You don't need to know how to code or know HTML to setup a GitHub page. We'll learn some Markdown basics so that we can add content to our site. Here's what you need. + ++ A Laptop ++ [A GitHub Account](https://github.com/join) ++ Something to say ++ Pictures (optional) + +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](https://laderast.github.io/magic-of-markdown/) that will get you started with the basics. + +## What We're Going to do Today + + 1) Fork the Repository + 2) Rename the Repo(sitory) + 3) Look at your pretty website! + 4) Change and Personalize Your Site with YAML + 5) Start Editing Content with Markdown + 6) Adding Links + 7) Adding Images + 8) Add a Blog Post + 9) Customize your sidebar with new links + 10) Look at your pretty website! + 11) Make a local copy for easier editing + +## 1. Fork the Repo(istory) From GitHub + +Log into your GitHub account. Now go to the website repo: https://github.com/laderast/websiteFiles and click the "Fork" button on the top right of the webpage. + +## 2. Rename the Repo + +Now click the "Settings" tab on your repository. Change your repository name to USERNAME.github.io, where USERNAME is your GitHub Login. + +## 3. Check out your Basic Website + +You're ready to go! Now check out your initialized website at https://USERNAME.github.io. We'll start customizing it! + +## 4. Editing the Name of Your Webpage and Customizing + +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*, *tagline*, *description*, *url*, and *name* fields to suit you. + +For now, don't modify anything below `#You don't need to modify below this line`. + +Here's an example `_config.yml` file. + +``` +# Personalize your website info here +title: Anew Guy +tagline: 'Professional Website for Anew Guy' +description: 'Website and Blog for Anew Guy' +url: https://anewguy.github.io +author: + name: 'Anew Guy' +``` + +After you have edited your `_config.yml` file, click the green "Commit your changes" button at the bottom of the page. That will save the file to your repository. + +Reload your website to see your changes. It may take a little bit, since GitHub needs to rebuild your page in the background. + +## 5a. Make content using Markdown + +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. There are lots of designers who are good at that if you aren't. + +## 5b. Markdown Basics + +A markdown file generally has an `.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. + +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 `about.md` or the `cv.md` files with your info (remember to click the edit pencil button). When you're done, click the "commit your 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. + +## 6. Let's Add Some Links + +Links, or URLs and web addresses, on a website can link to other webpages. + +In your `about.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: + +``` +[link to Google](https://www.google.com) +``` + +The output looks like this: [link to Google](https://www.google.com) + +If you just want to show the link, you can paste it as is into your file. + +``` +https://www.google.com +``` + +https://www.google.com + +Try adding some links to your `about.md` file, such as to your GitHub or Twitter accounts. Click the "Commit Your Changes" button when you're done. + +## 7a. Let's Add an Image (from an external website) + +You can also add images to your webpage. GitHub has a mascot called Octocat, so let's add a picture of Octocat to our site. Doing this is very similar to adding a link, you just need to add an exclamation mark in front of the square bracket and parentheses. Try adding a picture to your `cv.md` or your `about.md` files! + +An example looks like this + +``` +![Jetpacktocat](https://octodex.github.com/images/jetpacktocat.png) +``` +The output looks like this: + +![Jetpacktocat](https://octodex.github.com/images/jetpacktocat.png) + +**Note**: The text within the square brackets should be a description of the image. Providing this is good practice, and facilitates compliance with accessibility technologies (such as screen readers), but you can leave it blank and the following would also work. + +``` +![](https://octodex.github.com/images/jetpacktocat.png) +``` + +## 7b. Uploading images to your website and using them + +Where do you put images you've made? You can make an `images/` folder in your repository. To do this, we will need to create a dummy file, because git requires a file in a new folder. Click on the "Add a New File" button in the root directory and type in `images/dummyFile`. Commit this dummy file into the repo and you should now see that the `images/` folder has been created. + +Now you can upload images into to that directory using the `Upload Files` button. Then you can refer to them like this: + +``` +![](/images/jetpacktocat.png) +``` + +## 8. Add a Blog Entry + +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. + +``` +--- +layout: post +title: Awesome Blog Post +--- + +Text for your post goes here. +``` + +This is a great opportunity to practice some Markdown! +### Such as headers + +and **bolding** +* lists + +When you're done, commit the file into GitHub and confirm that your new blog post is up. You can also delete the sample blog posts so they don't show up on your page. + +## 9. Modifying the Menu + +If you take a look at the example site, https://biodata-club.github.io/githubPagesTutorial/, you'll notice a menu side bar on the left. Near the bottom left corner, you'll see links to other pages on the site. We can add and remove these links and their respective pages fairly easily. + +Looking at the files in your main directory (which are the contents from `websiteFiles/`), the menu is automatically generated based on the files that end in `.md` (except `LICENSE.md` and `README.md`) and have a little YAML entry. If you take a look, you can see `about.md` and `cv.md`. Similarly named links should be in the menu. + +To create a new static page that shows up in your sidebar, you need to have the following at the top and just change the text for the title. + +``` +--- +layout: page +title: Coursework +--- + +Text for your page goes here. +``` + +Try adding a `coursework.md` file in the main directory by pasting the text above and then writing some content, such as classes you've taken. You can add some bullets by using the `+` symbol like this: + +``` ++ Basket Weaving ++ Cooking ++ GitHub Class +``` + +Which will show up like this: + ++ Basket Weaving ++ Cooking ++ GitHub Class + +When you're done, commit and load your website again. Confirm that "Coursework" shows up in the menu sidebar. Neat! + +## 10. Look at your pretty website! + +Congratulations on making it this far! This is just the start of your adventures with GitHub Pages. Learn some more Markdown, and have fun adding blog pages. + +Have fun! + +## 11. Make a local copy using GitHub Desktop (optional) + +At some point, you will want to make a local copy of your website. This can be handy when you have multiple documents to edit, since editing on the website can be a bit of a pain. + +At the top level of your repo, click the "Clone and Download" button and select "Open in GitHub Desktop". + +I like to have a code specific folder to store my code, such as "c:/code/" (windows) or "~/Code/" (Mac/Linux) so that it has a permanent place to stay. So create a folder that is somewhere permanent and save your repo into that folder. Your "code" folder should now have a local copy of your repo. + +You can now make changes on your local machine. Edit the files in a text editor such as [Sublime Text](https://www.sublimetext.com) and save them. + +To update local files you've changed and push them to your GitHub, you will need to create a commit. In GitHub Desktop, click on the changed files that you updated and want pushed to the site. You'll need to create a commit message (a short bit of text that describes the changes you've made). Then you can push the "Sync" button to update. + +Keep in mind: if you changed and added files on the website version, you will need to sync your own local repository to see those changes there. + +A handy video intro to GitHub Desktop: https://www.youtube.com/watch?v=kFix7UDJ7LA + +For more info on using GitHub Desktop: https://help.github.com/desktop/guides/getting-started/ + +## More Things to Do with your GitHub Page + +The following are things you might like to do to your website. + +## Lots of ways to customize your site + +Look at the `Readme.md` file in the root level of your repo for more tweaks to you can make to the appearance of your blog. You can change the color scheme, put the sidebar on the right. + +You'll have to modify some `.html` files to do these changes, but it should be pretty painless to do. + +## Making folder links using a `Index.md` file + +You might be wondering how to generate links that work with a trailing slash. For example, http://laderast.github.io/DS4BS/ + +The first step is to create a folder with that name, in the top level folder. For example, I just created a folder called `DS4BS` in my `laderast.github.io` folder. Then I just created a file called `index.md` in that folder. + +Be sure to add the correct YAML at the start of your `index.md` file: + +``` +--- +layout: page +title: New Page +--- +``` + +If you have a file named `index.md` in your folder, your link will be automatically translated and served as a webpage. For example, if you added a folder named "stuff", and put an `index.md` in the folder, the link USERNAME.github.io/stuff/ will open that `index.md` file. + +## Using Custom Themes + +You might not like the layout of your page (that's fine). You can transfer your markdown files into a different Jekyll Theme and use that as the basis for your website. + +http://jekyllthemes.org + +Many of these themes you can directly fork and make a website directly, much like this tutorial. Note that you'll have to copy over any files that you've changed (such as the `cv.md` files and your blog posts in the `_posts` folder) to get them to show up in your new theme. + +Unfortunately, the themes are not like plugins. Which means you will have to cut and paste your content into the new forked repo. They (the GitHub Pages people) are trying to make this process more streamlined. + +## If you know HTML + +The cool thing about markdown is that you can add HTML directly into markdown files and the HTML should integrate pretty seamlessly. This is great when you want to customize placement of things. + +For example, maybe we want a smaller version of octocat. We can just add an `` tag to customize it, and change the `height` attribute. + +``` + +``` + + +## Useful Links + +The world is now your oyster now that you've mastered GitHub Pages and Markdown. + ++ GitHub Pages: https://pages.github.com ++ Jekyll Themes: http://jekyllthemes.org + +Markdown is not only useful for GitHub Pages. One markdown document can be translated into PDFs, HTML Slides, Word Documents, and a bunch of other formats. We talk about some of the uses here: http://laderast.github.io/magic-of-markdown/ \ No newline at end of file From 4b699a03ae54b2686e6ae3071d589c5d849f8dba Mon Sep 17 00:00:00 2001 From: laderast Date: Thu, 20 Apr 2017 16:35:56 -0700 Subject: [PATCH 19/20] moved easy.md --- easy/index.md => easy.md | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename easy/index.md => easy.md (100%) diff --git a/easy/index.md b/easy.md similarity index 100% rename from easy/index.md rename to easy.md From fd9e843e2669d389a767da5a59bc7ac8a2331127 Mon Sep 17 00:00:00 2001 From: Eric Leung Date: Thu, 20 Apr 2017 22:07:37 -0700 Subject: [PATCH 20/20] Fix links and lists for better rendering --- easy.md | 60 ++++++++++++++++++++++++++++----------------------------- 1 file changed, 30 insertions(+), 30 deletions(-) diff --git a/easy.md b/easy.md index 3c61559..57008a8 100644 --- a/easy.md +++ b/easy.md @@ -17,13 +17,13 @@ We'll mostly cover the personal website for today. ## Why GitHub Pages? -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. Because GitHub pages is compatible with Markdown, we'll be using Markdown formatting to build our webpage. ## Our goal for the day -We're going to build a personal webpage which will live at USERNAME.github.io, and have blogging features and will be easily customizable. +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://biodata-club.github.io/githubPagesTutorial/ @@ -40,29 +40,29 @@ You may want to spend a little time learning how to use markdown, as it'll make ## What We're Going to do Today - 1) Fork the Repository - 2) Rename the Repo(sitory) - 3) Look at your pretty website! - 4) Change and Personalize Your Site with YAML - 5) Start Editing Content with Markdown - 6) Adding Links - 7) Adding Images - 8) Add a Blog Post - 9) Customize your sidebar with new links - 10) Look at your pretty website! - 11) Make a local copy for easier editing +1. Fork the Repository +2. Rename the Repo(sitory) +3. Look at your pretty website! +4. Change and Personalize Your Site with YAML +5. Start Editing Content with Markdown +6. Adding Links +7. Adding Images +8. Add a Blog Post +9. Customize your sidebar with new links +10. Look at your pretty website! +11. Make a local copy for easier editing ## 1. Fork the Repo(istory) From GitHub -Log into your GitHub account. Now go to the website repo: https://github.com/laderast/websiteFiles and click the "Fork" button on the top right of the webpage. +Log into your GitHub account. Now go to the website repo: [https://github.com/laderast/websiteFiles](https://github.com/laderast/websiteFiles) and click the "Fork" button on the top right of the webpage. ## 2. Rename the Repo -Now click the "Settings" tab on your repository. Change your repository name to USERNAME.github.io, where USERNAME is your GitHub Login. +Now click the "Settings" tab on your repository. Change your repository name to `USERNAME.github.io`, where `USERNAME` is your GitHub Login. ## 3. Check out your Basic Website -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`. We'll start customizing it! ## 4. Editing the Name of Your Webpage and Customizing @@ -86,11 +86,11 @@ After you have edited your `_config.yml` file, click the green "Commit your chan Reload your website to see your changes. It may take a little bit, since GitHub needs to rebuild your page in the background. -## 5a. Make content using Markdown +## 5a. Make content using Markdown 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. +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. There are lots of designers who are good at that if you aren't. @@ -98,9 +98,9 @@ This means you can concentrate on making content rather than obsessing about eve A markdown file generally has an `.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. -Way more info about writing markdown can be found here: https://github.com/laderast/magic-of-markdown +Way more info about writing markdown can be found here: [https://github.com/laderast/magic-of-markdown](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 +And this markdown cheatsheet is always handy if you forget how to do things. [https://enterprise.github.com/downloads/en/markdown-cheatsheet.pdf](https://enterprise.github.com/downloads/en/markdown-cheatsheet.pdf) Try changing the `about.md` or the `cv.md` files with your info (remember to click the edit pencil button). When you're done, click the "commit your changes" button at the bottom to save your changes. @@ -176,13 +176,13 @@ This is a great opportunity to practice some Markdown! ### Such as headers and **bolding** -* lists +* lists When you're done, commit the file into GitHub and confirm that your new blog post is up. You can also delete the sample blog posts so they don't show up on your page. ## 9. Modifying the Menu -If you take a look at the example site, https://biodata-club.github.io/githubPagesTutorial/, you'll notice a menu side bar on the left. Near the bottom left corner, you'll see links to other pages on the site. We can add and remove these links and their respective pages fairly easily. +If you take a look at the example site, [https://biodata-club.github.io/githubPagesTutorial/](https://biodata-club.github.io/githubPagesTutorial/), you'll notice a menu side bar on the left. Near the bottom left corner, you'll see links to other pages on the site. We can add and remove these links and their respective pages fairly easily. Looking at the files in your main directory (which are the contents from `websiteFiles/`), the menu is automatically generated based on the files that end in `.md` (except `LICENSE.md` and `README.md`) and have a little YAML entry. If you take a look, you can see `about.md` and `cv.md`. Similarly named links should be in the menu. @@ -225,7 +225,7 @@ At some point, you will want to make a local copy of your website. This can be h At the top level of your repo, click the "Clone and Download" button and select "Open in GitHub Desktop". -I like to have a code specific folder to store my code, such as "c:/code/" (windows) or "~/Code/" (Mac/Linux) so that it has a permanent place to stay. So create a folder that is somewhere permanent and save your repo into that folder. Your "code" folder should now have a local copy of your repo. +I like to have a code specific folder to store my code, such as "C:/code/" (Windows) or "~/Code/" (Mac/Linux) so that it has a permanent place to stay. So create a folder that is somewhere permanent and save your repo into that folder. Your "code" folder should now have a local copy of your repo. You can now make changes on your local machine. Edit the files in a text editor such as [Sublime Text](https://www.sublimetext.com) and save them. @@ -233,9 +233,9 @@ To update local files you've changed and push them to your GitHub, you will need Keep in mind: if you changed and added files on the website version, you will need to sync your own local repository to see those changes there. -A handy video intro to GitHub Desktop: https://www.youtube.com/watch?v=kFix7UDJ7LA +A handy video intro to GitHub Desktop: [https://www.youtube.com/watch?v=kFix7UDJ7LA](https://www.youtube.com/watch?v=kFix7UDJ7LA) -For more info on using GitHub Desktop: https://help.github.com/desktop/guides/getting-started/ +For more info on using GitHub Desktop: [https://help.github.com/desktop/guides/getting-started/](https://help.github.com/desktop/guides/getting-started/) ## More Things to Do with your GitHub Page @@ -266,9 +266,9 @@ If you have a file named `index.md` in your folder, your link will be automatica ## Using Custom Themes -You might not like the layout of your page (that's fine). You can transfer your markdown files into a different Jekyll Theme and use that as the basis for your website. +You might not like the layout of your page (that's fine). You can transfer your markdown files into a different Jekyll Theme and use that as the basis for your website. -http://jekyllthemes.org +[http://jekyllthemes.org](http://jekyllthemes.org) Many of these themes you can directly fork and make a website directly, much like this tutorial. Note that you'll have to copy over any files that you've changed (such as the `cv.md` files and your blog posts in the `_posts` folder) to get them to show up in your new theme. @@ -290,7 +290,7 @@ height="300"> The world is now your oyster now that you've mastered GitHub Pages and Markdown. -+ GitHub Pages: https://pages.github.com -+ Jekyll Themes: http://jekyllthemes.org ++ GitHub Pages: [https://pages.github.com](https://pages.github.com) ++ Jekyll Themes: [http://jekyllthemes.org](http://jekyllthemes.org) -Markdown is not only useful for GitHub Pages. One markdown document can be translated into PDFs, HTML Slides, Word Documents, and a bunch of other formats. We talk about some of the uses here: http://laderast.github.io/magic-of-markdown/ \ No newline at end of file +Markdown is not only useful for GitHub Pages. One markdown document can be translated into PDFs, HTML Slides, Word Documents, and a bunch of other formats. We talk about some of the uses here: [http://laderast.github.io/magic-of-markdown/](http://laderast.github.io/magic-of-markdown/)