cleaning up code, removing inconsistent yaml frontmatter
This commit is contained in:
toddstoffer
parent
a505da6fa5
commit
edab5e8123
31
README.md
31
README.md
|
|
@ -4,32 +4,5 @@ This template utilizes Jekyll, an open source static website generator, as well
|
|||
####Why Should I Use This?
|
||||
By using this template you will have a website that is well designed, easy to maintain, free to host and easy to update. While there are many options out there for personal and professional websites, most are dependant on the platform on which they were built, and cannot be easily migrated. This template, while built for Github Pages integration, provides flexibility should you choose to host it elsewhere.
|
||||
|
||||
##First Steps
|
||||
In order to get started you will need to first create your own Github account by going to [github.com](https://github.com/). You will be prompted to choose an account type, choose the Free account option. After creating your account you will need to create a new repository. **You must name your repository [username].github.io** (replacing [username] with the username of your Github account). If you have any troubles creating a repository please refer to the [Github Pages](https://pages.github.com/) documentation.
|
||||
|
||||
|
||||
![Create a Repository] (https://github.com/toddstoffer/jekyll-academic/blob/master/%20createrepo.gif)
|
||||
|
||||
####Copying the Template
|
||||
Once you have created your new repository you will be taken to a setup page. At the bottom of that page you should see the **Import Code** button. Click on this button. The following page has a place for you to put the URL of an existing repository, copy and paste the following into that space:
|
||||
`https://github.com/NCSU-Libraries/jekyll-academic`
|
||||
|
||||
After the import is complete you can then visit [username].github.io and you will see your newly created website. On this page you will see a variety of posts that contain more detailed information on editing, modifying and updating your new website.
|
||||
|
||||
##Next Steps
|
||||
After you have imported the files into your repository you will want to clone the files to your desktop using GitHub Desktop, or any other tool that you are comfortable with. For more information on using GitHub Desktop click [here](https://desktop.github.com/). This will give you a working set of files that you can edit to personalize your website.
|
||||
|
||||
####Editing the config.yaml File
|
||||
The config.yaml file that is in the root directory of the project is the first file that you will want to edit. This file allows you to set the website title, your email address and add in account information for a variety of social media services.
|
||||
|
||||
####Editing the accent.scss File
|
||||
The accent.scss file allows you to modify the accent colors of your website. The default colors (red and black) can be set to any hexadecimal color that you would like. [W3Schools.com](http://www.w3schools.com/colors/colors_picker.asp) provides a good color picker that allows you to find the corresponding hex number for any color you wish to use.
|
||||
|
||||
####Editing the About Me and Resume Pages
|
||||
These pages are each found in their corresponding directories (/about /resume). Simply open the index.md file from within each of these directories and begin making edits. Pay special attention to the formatting of the resume file. It makes use of single quotes ( \' ) and underscores ( \_ ) in the markdown markup language to format various aspects of the resume, including dates and university names.
|
||||
|
||||
####Editing Posts
|
||||
Posts are all located in the \_posts folder. This folder contains sample posts that address in more depth the site structure and the markdown syntax. These posts are good to reference (by opening in a text editor of your choice) in order to get a better understanding of markdown. When you are ready to add a new post, simply copy one of the existing posts and edit it. Be sure to update the information at the top of the post, such as the title and timestamp. You will also want to rename the file to follow the same naming convention of the other post files (yyyy-mm-dd-post-title.md).
|
||||
|
||||
##Syncing Changes
|
||||
After you have made changes to your site you will need to commit those changes to your repository for those changes to take effect. For more information on making commits please take a look at this [GitHub Cheat Sheet](https://training.github.com/kit/downloads/github-git-cheat-sheet.pdf). If you would prefer, you can also use GitHub Desktop to commit your changes, or drag-and-drop the changed files directly into your GitHub repository in the browser window.
|
||||
##[Getting Started Guide](http://ncsu-libraries.github.io/jekyll-academic/)
|
||||
Complete documentation for getting started as well as advanced features of Jekyll Academic can be fount at [http://ncsu-libraries.github.io/jekyll-academic/](http://ncsu-libraries.github.io/jekyll-academic/).
|
||||
|
|
|
|||
|
|
@ -1,20 +1,9 @@
|
|||
# Authors
|
||||
|
||||
billy_rick:
|
||||
name: Billy Rick
|
||||
web: http://thewhip.com
|
||||
email: billy@rick.com
|
||||
bio: "What do you want, jewels? I am a very extravagant man."
|
||||
avatar: bio-photo-2.jpg
|
||||
twitter: extravagantman
|
||||
google:
|
||||
plus: BillyRick
|
||||
|
||||
cornelius_fiddlebone:
|
||||
name: Cornelius Fiddlebone
|
||||
email: cornelius@thewhip.com
|
||||
bio: "I ordered what?"
|
||||
first_author:
|
||||
name: Author Name
|
||||
web: http://example.com
|
||||
email: authorname@example.com
|
||||
bio: "Short bio statement"
|
||||
avatar: bio-photo.jpg
|
||||
twitter: rhymeswithsackit
|
||||
google:
|
||||
plus: CorneliusFiddlebone
|
||||
twitter:
|
||||
|
|
|
|||
|
|
@ -12,4 +12,5 @@
|
|||
</div><!-- /.google-ads -->
|
||||
{% endif %}
|
||||
|
||||
<span>© {{ site.time | date: '%Y' }} {{ site.owner.name }}. Powered by <a href="http://jekyllrb.com" rel="nofollow">Jekyll</a> using the <a href="http://mademistakes.com/minimal-mistakes/" rel="nofollow">Minimal Mistakes</a> theme.</span>
|
||||
<span>© {{ site.time | date: '%Y' }} {{ site.owner.name }}. Powered by <a href="http://jekyllrb.com" rel="nofollow">Jekyll</a> using the <a href="http://ncsu-libraries.github.io/jekyll-academic/" rel="nofollow">Jekyll Academic</a> theme.
|
||||
<br />Based on the <a href="https://mmistakes.github.io/minimal-mistakes/">Minimal Mistakes</a> theme developed by Michael Rose.</span>
|
||||
|
|
|
|||
|
|
@ -1,99 +0,0 @@
|
|||
---
|
||||
layout: post
|
||||
title: Getting Started with Markdown
|
||||
excerpt: "How to get started using your Jekyll site with Github pages. "
|
||||
modified: 2016-01-13 20:41:38
|
||||
tags: [intro, beginner, jekyll, tutorial]
|
||||
comments: true
|
||||
category: blog
|
||||
---
|
||||
|
||||
|
||||
## HTML Elements
|
||||
|
||||
Below is just about everything you'll need to style in the theme. Check the source code to see the many embedded elements within paragraphs.
|
||||
|
||||
# Heading 1
|
||||
|
||||
## Heading 2
|
||||
|
||||
### Heading 3
|
||||
|
||||
#### Heading 4
|
||||
|
||||
##### Heading 5
|
||||
|
||||
###### Heading 6
|
||||
|
||||
### Body text
|
||||
|
||||
Lorem ipsum dolor sit amet, test link adipiscing elit. **This is strong**. Nullam dignissim convallis est. Quisque aliquam.
|
||||
|
||||
|
||||
{: .image-pull-right}
|
||||
|
||||
*This is emphasized*. Donec faucibus. Nunc iaculis suscipit dui. 53 = 125. Water is H2O. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. The New York Times (That’s a citation). Underline.Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.
|
||||
|
||||
HTML and CSS are our tools. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.
|
||||
|
||||
### Blockquotes
|
||||
|
||||
> Lorem ipsum dolor sit amet, test link adipiscing elit. Nullam dignissim convallis est. Quisque aliquam.
|
||||
|
||||
## List Types
|
||||
|
||||
### Ordered Lists
|
||||
|
||||
1. Item one
|
||||
1. sub item one
|
||||
2. sub item two
|
||||
3. sub item three
|
||||
2. Item two
|
||||
|
||||
### Unordered Lists
|
||||
|
||||
* Item one
|
||||
* Item two
|
||||
* Item three
|
||||
|
||||
## Tables
|
||||
|
||||
| Header1 | Header2 | Header3 |
|
||||
|:--------|:-------:|--------:|
|
||||
| cell1 | cell2 | cell3 |
|
||||
| cell4 | cell5 | cell6 |
|
||||
|----
|
||||
| cell1 | cell2 | cell3 |
|
||||
| cell4 | cell5 | cell6 |
|
||||
|=====
|
||||
| Foot1 | Foot2 | Foot3
|
||||
{: rules="groups"}
|
||||
|
||||
## Code Snippets
|
||||
|
||||
{% highlight css %}
|
||||
#container {
|
||||
float: left;
|
||||
margin: 0 -240px 0 0;
|
||||
width: 100%;
|
||||
}
|
||||
{% endhighlight %}
|
||||
|
||||
## Buttons
|
||||
|
||||
Make any link standout more when applying the `.btn` class.
|
||||
|
||||
{% highlight html %}
|
||||
<a href="#" class="btn btn-success">Success Button</a>
|
||||
{% endhighlight %}
|
||||
|
||||
<div markdown="0"><a href="#" class="btn">Primary Button</a></div>
|
||||
<div markdown="0"><a href="#" class="btn btn-success">Success Button</a></div>
|
||||
<div markdown="0"><a href="#" class="btn btn-warning">Warning Button</a></div>
|
||||
<div markdown="0"><a href="#" class="btn btn-danger">Danger Button</a></div>
|
||||
<div markdown="0"><a href="#" class="btn btn-info">Info Button</a></div>
|
||||
|
||||
## Notices
|
||||
|
||||
**Watch out!** You can also add notices by appending `{: .notice}` to a paragraph.
|
||||
{: .notice}
|
||||
|
|
@ -1,98 +0,0 @@
|
|||
---
|
||||
layout: post
|
||||
title: (Almost) Everything You Want to Know About Your New Site
|
||||
excerpt: "What goes where, and how to configure your new site "
|
||||
modified: 22/29/2016, 7:33:12
|
||||
tags: [intro, intermediate, jekyll, tutorial]
|
||||
comments: true
|
||||
category: blog
|
||||
---
|
||||
|
||||
## Step 1: Getting Started
|
||||
The first step in configuring your new site is to update the two main configuration files for the site. Both of these files are found in the root directory of the site (mysite folder). They are the **_config.yaml** and accent.scss files. The **_config.yaml** contains many of the main configuration settings for your site. It allows you to set a site name, and connect your site to many popular services and platforms such as Github, Twitter and email. The **accents.scss** file allows you to adjust the accent colors of your website (the two lines of color below the navigation). After adjusting these files be sure to safe the files and sync your changes back up to Github.
|
||||
|
||||
***
|
||||
|
||||
## Step 2: Navigation
|
||||
The default site template includes navigation items for your home page (recent posts), About Me, Blog Archive and Resume pages. If you would like to add additional pages to the navigation of your site you can do so by creating a copy of the **about** folder and giving the name of the new page you would like. Once that is done, open _data/navigation.yaml and create a new navigation element that points to the folder you just created.
|
||||
|
||||
Example:
|
||||
To create a 'Presentations' page
|
||||
1) Copy /about and rename to /presentations
|
||||
2) Open /_data/navigation.yaml
|
||||
3) Add the following lines:
|
||||
- title: Presentations
|
||||
url: /presentations/
|
||||
4) Save the file, sync changes to Github
|
||||
|
||||
***
|
||||
|
||||
## Step 3: Images
|
||||
|
||||
#### Bio Image
|
||||
There are two main images to be aware of when setting up your new site. They are both included in the /Images/ directory. The first is bio-photo.jpg. This is the photo that appears on the left-hand side of your website. Any 200 x 200 pixel JPEG image can be used. Just be sure to rename the image bio-photo.jpg and place it in the /Images/ directory overwriting the default image that is in that folder.
|
||||
|
||||
#### Logo Image
|
||||
By default the upper left-hand navigation item on your website will default to a text treatment of the name you have given your website. If you would like to use a logo instead of the text treatment simply include a 216 x 34 logo saved as logo.png in the /Images/ directory. Once you have saved your logo image to this directory open up your _config.yaml file and add logo.jpg in the site>logo: setting area.
|
||||
|
||||
***
|
||||
|
||||
## Posts: Step 4
|
||||
Chances are you are were drawn to creating this site to use, at least partially, as a blogging platform. That is, after all, what it is designed for. In order to create a new blog post, you can simply copy an existing post from the _posts folder. At the top of the file you will see some settings options. Posts use the 'post' layout. You can set the title, excerpt and tags to whatever you would like. Set the timestamp to the current time (there are many text editor plugins that can do this for you). Save the new post with the same naming convention as the example posts -- e.g. 2016-01-03-New-Post.md. It is important that all posts are saved as Markdown (.md) files.
|
||||
|
||||
***
|
||||
|
||||
### Folder Structure
|
||||
|
||||
mysite/
|
||||
|
||||
Edit these files first:
|
||||
|
||||
|── _config.yaml # main site configuration settings, edit this file **first**
|
||||
|── accents.scss # set site accent colors, edit this file **second**
|
||||
├── about/ # sample about page, edit this file **third**
|
||||
├── images/ # images for posts and pages, use this to set bio image and logo
|
||||
├── index.md # sample homepage. lists 5 latest posts
|
||||
├── _posts/ # MarkDown formatted posts
|
||||
├── _data/navigation.yaml # Add items to site navigation bar
|
||||
|
||||
These files likely do not need editing unless you plan on making major changes to your site:
|
||||
|
||||
├── _includes/
|
||||
| ├── _author-bio.html # bio stuff layout. pulls optional owner data from _config.yml
|
||||
| ├── _browser-upgrade.html # prompt to install a modern browser for < IE9
|
||||
| ├── _disqus_comments.html # Disqus comments script
|
||||
| ├── _footer.html # site footer
|
||||
| ├── _head.html # site head
|
||||
| ├── _navigation.html # site top navigation
|
||||
| ├── _open-graph.html # Twitter Cards and Open Graph meta data
|
||||
| └── _scripts.html # site scripts
|
||||
├── _layouts/
|
||||
| ├── home.html # homepage layout
|
||||
| ├── page.html # page layout
|
||||
| ├── post-index.html # post index layout
|
||||
| └── post.html # single post layout
|
||||
├── posts/ # sample post index page. lists all posts in reverse chronology
|
||||
├── _sass/ # Sass stylesheets
|
||||
├── _templates/ # used by Octopress to define YAML variables for new posts/pages
|
||||
├── assets/
|
||||
| ├── css/ # compiled stylesheets
|
||||
| ├── fonts/ # webfonts
|
||||
| ├── js/
|
||||
| | ├── _main.js # main JavaScript file, plugin settings, etc
|
||||
| | ├── plugins/ # scripts and jQuery plugins to combine with _main.js
|
||||
| | ├── scripts.min.js # concatenated and minified _main.js + plugin scripts
|
||||
| | └── vendor/ # vendor scripts to leave alone and load as is
|
||||
| └── less/
|
||||
├── 404.md # 404 page
|
||||
|
||||
***
|
||||
|
||||
## Further Customization
|
||||
If you dig deep enough into the site structure you will find that nearly every element of your site can be customized. This them is based on the wonderful Minimal Mistakes theme by Michael Rose. If you would like more detailed information about the site setup and structure, please visit the [Minimal Mistakes](https://mmistakes.github.io/minimal-mistakes/theme-setup/) theme setup page. Here you will find detailed instructions for nearly every use case.
|
||||
|
||||
***
|
||||
|
||||
## License
|
||||
|
||||
Figure out the best license for us.
|
||||
|
|
@ -1,89 +0,0 @@
|
|||
---
|
||||
layout: post
|
||||
title: How to edit your Jekyll site and make posts
|
||||
excerpt: "Edit your site and make posts "
|
||||
modified: 2/29/2016, 8:24:22
|
||||
tags: [intro, beginner, jekyll, tutorial]
|
||||
comments: true
|
||||
category: blog
|
||||
---
|
||||
|
||||
This article will cover the basics on how to edit the features of your site and make new posts. To do this, you will need a text editor. Here are some examples:
|
||||
* [Atom](https://atom.io)
|
||||
* [Sublime Text](https://www.sublimetext.com)
|
||||
* [Notepad++](https://notepad-plus-plus.org)
|
||||
|
||||
## Editing the configuration of your Jekyll site
|
||||
The _config.yml file stores data about you and your site, such as your contact information and your site's title and URL. You will want to edit your _config.yaml file to contain your information. The information in this file sets the site title, contact email address and links to various social media accounts that you may have. To add a social media account, simple replace #username with your actual username for that service on the line next to the service.
|
||||
|
||||
|
||||
<pre><code>
|
||||
# Site wide configuration
|
||||
|
||||
title: Your Site Title
|
||||
locale: en_US
|
||||
url:
|
||||
|
||||
. . .
|
||||
|
||||
# Site owner
|
||||
owner:
|
||||
name: Your Name
|
||||
avatar: bio-photo.jpg
|
||||
bio: "Hi I am a librarian."
|
||||
email: youremail@emailaddress.com
|
||||
disqus-shortname:
|
||||
twitter: #username
|
||||
facebook: #username
|
||||
google:
|
||||
plus: #username
|
||||
|
||||
</code></pre>
|
||||
|
||||
You can edit this file by opening it in a text editor, editing the information, and then saving it into the repository folder, replacing the older version of the file. You will then need to commit the changes to your Github repository so that the changes will show up on your Jekyll site. For more information on how to manage files and commit them to your Github repository, see this getting started [guide](http://guides.github.com/introduction/getting-your-project-on-github).
|
||||
|
||||
|
||||
## Adding posts
|
||||
Each post is its own file saved in the _posts folder. All you have to do to add a new post is to create a file and drop it into the _posts folder, and sync that to your github repository. However, you have to format the title of the post with the date included in the title at the beginning. The file is saved as a .md file because it is written in [markdown](http://daringfireball.net/projects/markdown/). Here's an example:
|
||||
|
||||
<pre><code>
|
||||
2011-12-31-new-years-eve-is-awesome.md
|
||||
</code></pre>
|
||||
|
||||
|
||||
## Formatting posts
|
||||
|
||||
Each post must have a header that tells Jekyll how to display it, along with some supporting data about the post, like tags and date modified. The header looks like this:
|
||||
|
||||
<pre><code>
|
||||
---
|
||||
layout: post
|
||||
title: Your Title
|
||||
excerpt: "Edit your site and make posts "
|
||||
modified: 2016-02-15 11:00:29
|
||||
tags: [intro, beginner, jekyll, tutorial]
|
||||
comments: true
|
||||
---
|
||||
</code></pre>
|
||||
|
||||
Make sure to use the three dashes at the top and bottom of the header. Then you can write your post below the dashes.
|
||||
|
||||
## Editing accent colors on your page
|
||||
|
||||
The accent.scss file is the place where you can edit the accent bar top and bottom colors on your site. The default colors are indicated by hex code #CC0000. Change the hex codes next to $highlightcolor and $lowlightcolor to your desired colors. For more hex codes, see [here](http://www.w3schools.com/colors/colors_picker.asp).
|
||||
|
||||
<pre><code>
|
||||
$highlightcolor : #CC0000;
|
||||
$lowlightcolor : #000000;
|
||||
</code></pre>
|
||||
|
||||
|
||||
## Adding a photo to your site
|
||||
In the _config.yml file, you can add a photo that will be featured on the home page. To update your bio picture you can create a 200px x 200px image and place it in the images folder. In the site owner section, change "bio-photo.jpg" to the name of the picture you placed in the images folder.
|
||||
|
||||
<pre><code>
|
||||
# Site owner
|
||||
owner:
|
||||
name: Todd Stoffer
|
||||
avatar: bio-photo.jpg
|
||||
</code></pre>
|
||||
|
|
@ -1,9 +1,7 @@
|
|||
---
|
||||
layout: page
|
||||
title: About Me
|
||||
tags: [about, about me, me, ]
|
||||
modified: 2014-08-08T20:53:07.573882-04:00
|
||||
comments: true
|
||||
tags: [about, about me, me]
|
||||
---
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
|
|
|
|||
|
|
@ -1,7 +1,4 @@
|
|||
---
|
||||
layout: post-index
|
||||
title: All Blog Posts
|
||||
excerpt: "A List of Posts"
|
||||
image:
|
||||
feature: sample-image-1.jpg
|
||||
---
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 31 KiB After Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 37 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 57 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 71 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 69 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 47 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 261 KiB |
Loading…
Reference in New Issue