290 lines
10 KiB
HTML
290 lines
10 KiB
HTML
|
<!doctype html>
|
|||
|
|
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
|
|||
|
|
<!--[if (IE 7)&!(IEMobile)]><html class="no-js lt-ie9 lt-ie8" lang="en"><![endif]-->
|
|||
|
|
<!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="en"><![endif]-->
|
|||
|
|
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"><!--<![endif]-->
|
|||
|
|
<head>
|
|||
|
|
<meta charset="utf-8">
|
|||
|
|
|
|||
|
|
|
|||
|
|
<title>How to edit your Jekyll site and make posts – Site Title</title>
|
|||
|
|
<meta name="description" content="Edit your site and make posts ">
|
|||
|
|
<meta name="keywords" content="intro, beginner, jekyll, tutorial">
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!-- Twitter Cards -->
|
|||
|
|
<meta name="twitter:title" content="How to edit your Jekyll site and make posts">
|
|||
|
|
<meta name="twitter:description" content="Edit your site and make posts ">
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
<meta name="twitter:card" content="summary">
|
|||
|
|
<meta name="twitter:image" content="/images/default-thumb.png">
|
|||
|
|
|
|||
|
|
<!-- Open Graph -->
|
|||
|
|
<meta property="og:locale" content="en_US">
|
|||
|
|
<meta property="og:type" content="article">
|
|||
|
|
<meta property="og:title" content="How to edit your Jekyll site and make posts">
|
|||
|
|
<meta property="og:description" content="Edit your site and make posts ">
|
|||
|
|
<meta property="og:url" content="/blog/editing-your-site/">
|
|||
|
|
<meta property="og:site_name" content="Site Title">
|
|||
|
|
|
|||
|
|
<meta property="og:image" content="/images/default-thumb.png">
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
<link rel="canonical" href="/blog/editing-your-site/">
|
|||
|
|
<link href="/feed.xml" type="application/atom+xml" rel="alternate" title="Site Title Feed">
|
|||
|
|
|
|||
|
|
<!-- http://t.co/dKP3o1e -->
|
|||
|
|
<meta name="HandheldFriendly" content="True">
|
|||
|
|
<meta name="MobileOptimized" content="320">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|||
|
|
|
|||
|
|
<!-- For all browsers -->
|
|||
|
|
<link rel="stylesheet" href="/assets/css/main.css">
|
|||
|
|
|
|||
|
|
|
|||
|
|
<meta http-equiv="cleartype" content="on">
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!-- Modernizr -->
|
|||
|
|
<script src="/assets/js/vendor/modernizr-2.7.1.custom.min.js"></script>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<link href='//fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700%7CPT+Serif:400,700,400italic' rel='stylesheet' type='text/css'>
|
|||
|
|
<!-- Icons -->
|
|||
|
|
<!-- 16x16 -->
|
|||
|
|
<link rel="shortcut icon" href="/favicon.ico">
|
|||
|
|
<!-- 32x32 -->
|
|||
|
|
<link rel="shortcut icon" href="/favicon.png">
|
|||
|
|
<!-- 57x57 (precomposed) for iPhone 3GS, pre-2011 iPod Touch and older Android devices -->
|
|||
|
|
<link rel="apple-touch-icon-precomposed" href="/images/apple-touch-icon-precomposed.png">
|
|||
|
|
<!-- 72x72 (precomposed) for 1st generation iPad, iPad 2 and iPad mini -->
|
|||
|
|
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/images/apple-touch-icon-72x72-precomposed.png">
|
|||
|
|
<!-- 114x114 (precomposed) for iPhone 4, 4S, 5 and post-2011 iPod Touch -->
|
|||
|
|
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/images/apple-touch-icon-114x114-precomposed.png">
|
|||
|
|
<!-- 144x144 (precomposed) for iPad 3rd and 4th generation -->
|
|||
|
|
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/images/apple-touch-icon-144x144-precomposed.png">
|
|||
|
|
|
|||
|
|
</head>
|
|||
|
|
|
|||
|
|
<body class="post">
|
|||
|
|
|
|||
|
|
<!--[if lt IE 9]><div class="browser-upgrade alert alert-info">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</div><![endif]-->
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="navigation-wrapper">
|
|||
|
|
<div class="site-name">
|
|||
|
|
|
|||
|
|
<a href="/">Site Title</a>
|
|||
|
|
|
|||
|
|
</div><!-- /.site-name -->
|
|||
|
|
<div class="top-navigation">
|
|||
|
|
<nav role="navigation" id="site-nav" class="nav">
|
|||
|
|
<ul>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<li><a href="/" >Home</a></li>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<li><a href="/about/" >About Me</a></li>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<li><a href="/presentations/" >Presentations</a></li>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<li><a href="/resume/" >Resume</a></li>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<li><a href="/archive/" >Blog Archive</a></li>
|
|||
|
|
|
|||
|
|
</ul>
|
|||
|
|
</nav>
|
|||
|
|
</div><!-- /.top-navigation -->
|
|||
|
|
</div><!-- /.navigation-wrapper -->
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div id="main" role="main">
|
|||
|
|
<div class="article-author-side">
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div itemscope itemtype="http://schema.org/Person">
|
|||
|
|
|
|||
|
|
|
|||
|
|
<img src="/images/bio-photo.jpg" class="bio-photo" alt="Your Name bio photo">
|
|||
|
|
|
|||
|
|
|
|||
|
|
<h3 itemprop="name">Your Name</h3>
|
|||
|
|
<p>A brief description of yourself.</p>
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
<article class="post">
|
|||
|
|
<div class="headline-wrap">
|
|||
|
|
|
|||
|
|
<h1><a href="/blog/editing-your-site/" rel="bookmark" title="How to edit your Jekyll site and make posts">How to edit your Jekyll site and make posts</a></h1>
|
|||
|
|
|
|||
|
|
</div><!--/ .headline-wrap -->
|
|||
|
|
<div class="article-wrap">
|
|||
|
|
<p>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:
|
|||
|
|
* <a href="https://atom.io">Atom</a>
|
|||
|
|
* <a href="https://www.sublimetext.com">Sublime Text</a>
|
|||
|
|
* <a href="https://notepad-plus-plus.org">Notepad++</a></p>
|
|||
|
|
|
|||
|
|
<h2 id="editing-the-configuration-of-your-jekyll-site">Editing the configuration of your Jekyll site</h2>
|
|||
|
|
<p>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.</p>
|
|||
|
|
|
|||
|
|
<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>
|
|||
|
|
|
|||
|
|
<p>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 <a href="http://guides.github.com/introduction/getting-your-project-on-github">guide</a>.</p>
|
|||
|
|
|
|||
|
|
<h2 id="adding-posts">Adding posts</h2>
|
|||
|
|
<p>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 <a href="http://daringfireball.net/projects/markdown/">markdown</a>. Here’s an example:</p>
|
|||
|
|
|
|||
|
|
<pre><code>
|
|||
|
|
2011-12-31-new-years-eve-is-awesome.md
|
|||
|
|
</code></pre>
|
|||
|
|
|
|||
|
|
<h2 id="formatting-posts">Formatting posts</h2>
|
|||
|
|
|
|||
|
|
<p>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:</p>
|
|||
|
|
|
|||
|
|
<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>
|
|||
|
|
|
|||
|
|
<p>Make sure to use the three dashes at the top and bottom of the header. Then you can write your post below the dashes.</p>
|
|||
|
|
|
|||
|
|
<h2 id="editing-accent-colors-on-your-page">Editing accent colors on your page</h2>
|
|||
|
|
|
|||
|
|
<p>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 <a href="http://www.w3schools.com/colors/colors_picker.asp">here</a>.</p>
|
|||
|
|
|
|||
|
|
<pre><code>
|
|||
|
|
$highlightcolor : #CC0000;
|
|||
|
|
$lowlightcolor : #000000;
|
|||
|
|
</code></pre>
|
|||
|
|
|
|||
|
|
<h2 id="adding-a-photo-to-your-site">Adding a photo to your site</h2>
|
|||
|
|
<p>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.</p>
|
|||
|
|
|
|||
|
|
<pre><code>
|
|||
|
|
# Site owner
|
|||
|
|
owner:
|
|||
|
|
name: Todd Stoffer
|
|||
|
|
avatar: bio-photo.jpg
|
|||
|
|
</code></pre>
|
|||
|
|
|
|||
|
|
<hr />
|
|||
|
|
<footer role="contentinfo">
|
|||
|
|
<div class="social-share">
|
|||
|
|
<!--<h4>Share on</h4>
|
|||
|
|
<ul>
|
|||
|
|
<li>
|
|||
|
|
<a href="https://twitter.com/intent/tweet?text=/blog/editing-your-site/" class="twitter" title="Share on Twitter"><i class="fa fa-twitter"></i><span> Twitter</span></a>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="https://www.facebook.com/sharer/sharer.php?u=/blog/editing-your-site/" class="facebook" title="Share on Facebook"><i class="fa fa-facebook"></i><span> Facebook</span></a>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="https://plus.google.com/share?url=/blog/editing-your-site/" class="google-plus" title="Share on Google Plus"><i class="fa fa-google-plus"></i><span> Google+</span></a>
|
|||
|
|
</li>
|
|||
|
|
</ul>-->
|
|||
|
|
</div><!-- /.social-share -->
|
|||
|
|
|
|||
|
|
<p class="byline"><strong>How to edit your Jekyll site and make posts</strong> was published on <time datetime="2016-02-28T00:00:00-05:00">February 28, 2016</time> and last modified on <time datetime="2/29/2016, 8:24:22">2/29/2016, 8:24:22</time>.</p>
|
|||
|
|
</footer>
|
|||
|
|
</div><!-- /.article-wrap -->
|
|||
|
|
|
|||
|
|
</article>
|
|||
|
|
</div><!-- /#main -->
|
|||
|
|
|
|||
|
|
<div class="footer-wrap">
|
|||
|
|
|
|||
|
|
<div class="related-articles">
|
|||
|
|
<h4>You might also enjoy <small class="pull-right">(<a href="/posts/">View all posts</a>)</small></h4>
|
|||
|
|
<ul>
|
|||
|
|
|
|||
|
|
<li><a href="/presentation/example-presentation/" title="Example Reveal.js Presentation Deck">Example Reveal.js Presentation Deck</a></li>
|
|||
|
|
|
|||
|
|
<li><a href="/blog/what-is-this/" title="What is This?">What is This?</a></li>
|
|||
|
|
|
|||
|
|
<li><a href="/blog/site-setup-and-configuration/" title="(Almost) Everything You Want to Know About Your New Site">(Almost) Everything You Want to Know About Your New Site</a></li>
|
|||
|
|
|
|||
|
|
</ul>
|
|||
|
|
<hr />
|
|||
|
|
</div><!-- /.related-articles -->
|
|||
|
|
|
|||
|
|
<footer>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<span>© 2016 Your 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>
|
|||
|
|
|
|||
|
|
</footer>
|
|||
|
|
</div><!-- /.footer-wrap -->
|
|||
|
|
|
|||
|
|
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
|
|||
|
|
<script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
|
|||
|
|
<script src="/assets/js/scripts.min.js"></script>
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
</body>
|
|||
|
|
</html>
|