296 lines
14 KiB
HTML
296 lines
14 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
||
|
||
|
||
<link rel="shortcut icon" href="./img/favicon.ico">
|
||
|
||
<title>Jekyll Academic</title>
|
||
|
||
<link href="./css/bootstrap-custom.min.css" rel="stylesheet">
|
||
<link href="./css/font-awesome-4.0.3.css" rel="stylesheet">
|
||
<link rel="stylesheet" href="./css/highlight.css">
|
||
<link href="./css/base.css" rel="stylesheet">
|
||
|
||
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
||
<!--[if lt IE 9]>
|
||
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
|
||
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
|
||
<![endif]-->
|
||
|
||
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
|
||
<div class="container">
|
||
|
||
<!-- Collapsed navigation -->
|
||
<div class="navbar-header">
|
||
<!-- Expander button -->
|
||
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
|
||
<span class="sr-only">Toggle navigation</span>
|
||
<span class="icon-bar"></span>
|
||
<span class="icon-bar"></span>
|
||
<span class="icon-bar"></span>
|
||
</button>
|
||
|
||
<!-- Main title -->
|
||
<a class="navbar-brand" href=".">Jekyll Academic</a>
|
||
</div>
|
||
|
||
<!-- Expanded navigation -->
|
||
<div class="navbar-collapse collapse">
|
||
<!-- Main navigation -->
|
||
<ul class="nav navbar-nav">
|
||
|
||
|
||
<li class="active">
|
||
<a href=".">Getting Started</a>
|
||
</li>
|
||
|
||
|
||
|
||
<li >
|
||
<a href="advanced/">Advanced Features</a>
|
||
</li>
|
||
|
||
|
||
|
||
<li >
|
||
<a href="resources/">Additional Resources</a>
|
||
</li>
|
||
|
||
|
||
|
||
<li >
|
||
<a href="about/">About</a>
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
<!-- Search, Navigation and Repo links -->
|
||
<ul class="nav navbar-nav navbar-right">
|
||
<li>
|
||
<a href="#" data-toggle="modal" data-target="#mkdocs_search_modal">
|
||
<i class="fa fa-search"></i> Search
|
||
</a>
|
||
</li>
|
||
<li class="disabled">
|
||
<a rel="next" >
|
||
<i class="fa fa-arrow-left"></i> Previous
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a rel="prev" href="advanced/">
|
||
Next <i class="fa fa-arrow-right"></i>
|
||
</a>
|
||
</li>
|
||
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="container">
|
||
<div class="col-md-3"><div class="bs-sidebar hidden-print affix well" role="complementary">
|
||
<ul class="nav bs-sidenav">
|
||
|
||
<li class="main active"><a href="#getting-started-with-jekyll-academic">Getting Started with Jekyll Academic</a></li>
|
||
|
||
<li><a href="#required-software">Required Software</a></li>
|
||
|
||
<li><a href="#quickstart-guide">Quickstart Guide</a></li>
|
||
|
||
<li><a href="#important-files-and-folders">Important Files and Folders</a></li>
|
||
|
||
<li><a href="#adding-blog-posts">Adding Blog posts</a></li>
|
||
|
||
<li><a href="#adding-presentations">Adding Presentations</a></li>
|
||
|
||
|
||
</ul>
|
||
</div></div>
|
||
<div class="col-md-9" role="main">
|
||
|
||
<h1 id="getting-started-with-jekyll-academic">Getting Started with Jekyll Academic</h1>
|
||
<h2 id="required-software">Required Software</h2>
|
||
<p>In order to edit your Jekyll Academic website you will need the following pieces of software:</p>
|
||
<p>1) A text editor. Any text editor will do, our favorite is <a href="https://atom.io/">Atom</a></p>
|
||
<p>2) <a href="https://desktop.github.com/">GitHub Desktop</a>. This is used to sync files between your local computer and the GitHub repository that is acting as your website host.</p>
|
||
<h2 id="quickstart-guide">Quickstart Guide</h2>
|
||
<p>This quickstart guide is geared to getting you up and running quickly. Following the directions below will result in you having a Jekyll Academic website hosted on GitHub pages live on the web. Before you begin working through the quickstart guide you may want to familiarize yourself with the following technologies that will be used to create your Jekyll Academic website:</p>
|
||
<ul>
|
||
<li><a href="https://jekyllrb.com/">Jekyll</a></li>
|
||
<li><a href="https://daringfireball.net/projects/Markdown/">Markdown</a></li>
|
||
<li><a href="https://github.com/">GitHub</a></li>
|
||
<li><a href="https://pages.github.com/">GitHub Pages</a></li>
|
||
</ul>
|
||
<hr />
|
||
<h4 id="1-register-for-a-github-account">1) Register for a GitHub Account</h4>
|
||
<p><em>Skip this step if you have already setup your GitHub account</em></p>
|
||
<ul>
|
||
<li>In a web browser, navigate to GitHub.com</li>
|
||
<li>Fill Out Username, Email Address and Password</li>
|
||
<li>Click Sign up for GitHub button</li>
|
||
<li>Click the Finish Sign Up button</li>
|
||
<li>Navigate to the email account you used to sign up</li>
|
||
<li>Verify your email address by clicking on the “Verify email address” button in the email you received from GitHub</li>
|
||
</ul>
|
||
<h4 id="2-setting-up-your-jekyll-academic-repository">2) Setting Up your Jekyll Academic Repository:</h4>
|
||
<ul>
|
||
<li>After signing in to GitHub click on New Repository</li>
|
||
<li>Give your repository the following name [username].github.io (username is the username of your account)</li>
|
||
<li>Click on Create Repository</li>
|
||
<li>Click on Import Code</li>
|
||
<li>Paste the following URL in the “Your old repository’s clone URL - https://github.com/NCSU-Libraries/jekyll-academic</li>
|
||
<li>Click on Begin Import</li>
|
||
<li>Once import is complete navigate to [username.github.io] in your web browser</li>
|
||
</ul>
|
||
<h4 id="3-connect-your-github-repository-to-github-desktop">3) Connect your GitHub Repository to GitHub Desktop</h4>
|
||
<ul>
|
||
<li>Download GitHub Desktop from https://desktop.github.com/ (skip this step if you already have GitHub Desktop installed)</li>
|
||
<li>Double-click on downloaded file to begin the installation</li>
|
||
<li>While on the Welcome screen click on Continue</li>
|
||
<li>Sign in using the username you created in step one of this activity</li>
|
||
<li>Click Sign In</li>
|
||
<li>Click Continue</li>
|
||
<li>Click Continue one more time</li>
|
||
<li>Click on the plus sign in the upper left-hand corner of the screen to add a repository to Github Desktop</li>
|
||
<li>Click Clone</li>
|
||
<li>Find the ‘[username].github.io’ repository you created earlier and click Clone Repository</li>
|
||
<li>Select the location where you would like to save the repository (e.g. Documents)</li>
|
||
<li>Once the clone is finished you can click on the name of the repository on the left-hand side of Github Desktop to see any uncommitted changes (there shouldn’t be any yet)</li>
|
||
</ul>
|
||
<h4 id="4-update-website-95configyml-file-and-sync-changes">4) Update Website _config.yml File and Sync Changes</h4>
|
||
<ul>
|
||
<li>See your live Website by opening your web browser and going to [username].github.io</li>
|
||
<li>Open _config.yml using Atom</li>
|
||
<li>Edit the following entries of the _config.yml file</li>
|
||
<li>Title</li>
|
||
<li>Name</li>
|
||
<li>Bio</li>
|
||
<li>Email</li>
|
||
<li>Twitter</li>
|
||
<li>Facebook</li>
|
||
<li>GitHub</li>
|
||
<li>Save the _config.yml file</li>
|
||
<li>Commit Changes to GitHub Repo</li>
|
||
<li>Open GitHub Desktop</li>
|
||
<li>Click to see Uncommitted Changes (at the top center portion of the screen)</li>
|
||
<li>Add commit message to the summary field that says what changes you made</li>
|
||
<li>Click Commit to Master</li>
|
||
<li>Click Sync</li>
|
||
<li>Refresh the browser window with your website and note the changes</li>
|
||
</ul>
|
||
<h2 id="important-files-and-folders">Important Files and Folders</h2>
|
||
<p>In order to better understand how everything in your site works, there are a few files and folders that you need to be aware of. These files control the main elements of your site, including your logo, bio photo and navigation. Full documentation of the directory structure can be found <a href="https://jekyllrb.com/docs/structure/">here</a>. </p>
|
||
<ul>
|
||
<li>
|
||
<p><strong>_config.yml</strong> - This is your websites main configuration file. It allows you to set a site title, links to your social media accounts as well as a logo and bio photo image.</p>
|
||
</li>
|
||
<li>
|
||
<p><strong>accent.scss</strong> - This file is used to set the colors of your site. The site is set up to accept two colors (highlight, lowlight). The main impact of the color choice </p>
|
||
</li>
|
||
<li>
|
||
<p><strong>_posts</strong> - This folder holds all of the posts for your website. It includes both blog posts as well as presentation posts. There are two sample posts in this directory to get your started. One for a blog post and one for a presentation post.</p>
|
||
</li>
|
||
<li>
|
||
<p><strong>images/bio-photo.jpg</strong> - This is the photo that appears on the home page of the website. The recommended image size is 200px x 200px.</p>
|
||
</li>
|
||
<li>
|
||
<p><strong>images/logo.png</strong> - If you wish to use a logo for your site, include logo.png in the images folder. You will also need to add logo.png under the 'Logo:' section of the _config.yml file.</p>
|
||
</li>
|
||
<li>
|
||
<p><strong>_data/navigation.yml</strong> -This is the file that allows you to manage your navigation elements. By default all available navigation items are shown. If you wish to hide any items, simply delete them from this file.</p>
|
||
</li>
|
||
</ul>
|
||
<h2 id="adding-blog-posts">Adding Blog posts</h2>
|
||
<p>To add a new blog post to your site you simply create a new Markdown file. Jekyll requires that you follow the yyyy-mm-dd-title.md naming convention. Once you have the blank Markdown file you will need to add the header information so that Jekyll knows it is a blog file. Add the following to the top of your Markdown file:
|
||
---
|
||
layout: post
|
||
title: Add Your Title Here
|
||
excerpt: "Add an excerpt here, the excerpt will appear underneath the blog title"
|
||
modified: 2016-01-13 20:41:38
|
||
tags: [intro, beginner, jekyll, tutorial]
|
||
comments: true
|
||
category: blog
|
||
---
|
||
# Start your content here
|
||
The important thing to note is that you need to make sure that the category is set to 'blog'. This ensures that this post will appear on the blog page. You can then add your blog content using Markdown as your markup language for the rest of the file.</p>
|
||
<h2 id="adding-presentations">Adding Presentations</h2>
|
||
<p>In Jekyll Academic presentations are actually set up as posts, just with a few different settings in the header. This means that your presentation files live in the same _posts folder as your blog posts. The only differences between presentations and posts is the layout and category section in the header.</p>
|
||
<h4 id="adding-revealjs-presentations">Adding Reveal.js Presentations</h4>
|
||
<p>To add a Reveal.js presentation to your site you first will need to create a new Markdown file in your _posts folder. At the top of your new file you will want to add the following header. Notice that you need to set the layout to 'slide' and the category to 'presentation'</p>
|
||
<pre><code> ---
|
||
layout: slide
|
||
title: Add Your Title Here
|
||
excerpt: "Add an excerpt here, the excerpt will appear underneath the blog title"
|
||
modified: 2016-01-13 20:41:38
|
||
tags: [intro, beginner, jekyll, tutorial]
|
||
comments: true
|
||
category: presentation
|
||
---
|
||
<section data-markdown>
|
||
# Add reveal.js slide content here, following the reveal.js format
|
||
</section>
|
||
</code></pre>
|
||
<h4 id="linking-to-external-presentations">Linking to External Presentations</h4>
|
||
<p>To add a presentation post that appears on the presentation page, but is not a reveal.js slide deck you follow similar instructions as above. You will create a new Markdown file in your _posts folder and add the following header to it. Notice that you keep 'post' as the layout and 'presentation' as the category. This will create a blog post style post where you can link to external presentations.</p>
|
||
<pre><code> ---
|
||
layout: post
|
||
title: Add Your Title Here
|
||
excerpt: "Add an excerpt here, the excerpt will appear underneath the blog title"
|
||
modified: 2016-01-13 20:41:38
|
||
tags: [intro, beginner, jekyll, tutorial]
|
||
comments: true
|
||
category: presentation
|
||
---
|
||
</code></pre></div>
|
||
</div>
|
||
|
||
<footer class="col-md-12">
|
||
<hr>
|
||
|
||
<center>Documentation built with <a href="http://www.mkdocs.org/">MkDocs</a>.</center>
|
||
</footer>
|
||
|
||
<script src="./js/jquery-1.10.2.min.js"></script>
|
||
<script src="./js/bootstrap-3.0.3.min.js"></script>
|
||
<script src="./js/highlight.pack.js"></script>
|
||
<script>var base_url = '.';</script>
|
||
<script data-main="./mkdocs/js/search.js" src="./mkdocs/js/require.js"></script>
|
||
<script src="./js/base.js"></script>
|
||
|
||
<div class="modal" id="mkdocs_search_modal" tabindex="-1" role="dialog" aria-labelledby="Search Modal" aria-hidden="true">
|
||
<div class="modal-dialog">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
|
||
<h4 class="modal-title" id="exampleModalLabel">Search</h4>
|
||
</div>
|
||
<div class="modal-body">
|
||
<p>
|
||
From here you can search these documents. Enter
|
||
your search terms below.
|
||
</p>
|
||
<form role="form">
|
||
<div class="form-group">
|
||
<input type="text" class="form-control" placeholder="Search..." id="mkdocs-search-query">
|
||
</div>
|
||
</form>
|
||
<div id="mkdocs-search-results"></div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html> |