{"id":4419,"date":"2018-03-01T16:08:07","date_gmt":"2018-03-01T16:08:07","guid":{"rendered":"https:\/\/www.inmotionhosting.com\/support\/2018\/03\/01\/how-to-create-a-jekyll-site\/"},"modified":"2020-11-03T10:48:30","modified_gmt":"2020-11-03T15:48:30","slug":"how-to-create-a-jekyll-site","status":"publish","type":"post","link":"https:\/\/www.inmotionhosting.com\/support\/website\/jekyll\/how-to-create-a-jekyll-site\/","title":{"rendered":"How to Create a Jekyll Site"},"content":{"rendered":"<div class=\"in_this_tutorial\">\n<h2>In this tutorial:<\/h2>\n<p><a class=\"btn btn-primary\" href=\"#create-site\" type=\"button\">How to Create a Jekyll Site<\/a> <a class=\"btn btn-primary\" href=\"#add-posts\" type=\"button\">How to Add Posts to Your Jekyll Blog<\/a> <a class=\"btn btn-primary\" href=\"#add-pages\" type=\"button\">How to Add Pages to the Jekyll Site<\/a><\/p>\n<\/div>\n<p>Reviewing our Jekyll series, we have already learned <a href=\"url\">what Jekyll is<\/a> and why you might want to use it for your site. We&#8217;ve also learned <a href=\"url\">how to install Jekyll<\/a>. Make sure to return to those pages if you have not yet installed Jekyll and are considering using it.<\/p>\n<p><a name=\"create-site\"><\/a><\/p>\n<h2>How to Create a Jekyll Site<\/h2>\n<p>First, we will need to create a Jekyll site to begin working on. How this works:<\/p>\n<ul>\n<li>Run the <code>jekyll new [site-name]<\/code> command<\/li>\n<li>This creates a site in the directory [site-name]<\/li>\n<li>Change into that directory and run Jekyll commands<\/li>\n<\/ul>\n<p>As you can see above, the creation process results in a directory from which you can run further Jekyll commands to preview your site, build the site, and (later) transfer the site to your server (with some tweaking). You will also have access to all of the site files from this same directory. This means everything you will need for your site is one place.<\/p>\n<ol class=\"article_list\">\n<li>Open your default terminal application<\/li>\n<li>Run the following command, substituting <em>site-name<\/em> with the desired name of your site directory:\n<pre class=\"cli\">jekyll new site-name<\/pre>\n<\/li>\n<li>Allow a minute or so for the generation process to complete<\/li>\n<li>Change into the site directory:\n<pre class=\"cli\">cd site-name<\/pre>\n<\/li>\n<li>Run the preview command to see your site in a browser:\n<pre class=\"cli\">jekyll serve<\/pre>\n<\/li>\n<li>Proceed to this URL in your favorite browser: https:\/\/127.0.0.1:4000\/<\/li>\n<\/ol>\n<p>Now you can see the default site in your browser. You can see the default theme is mobile responsive and stylish. You can start adding posts and pages immediately. We&#8217;ll show you how to customize the site later.<\/p>\n<p><a name=\"add-posts\"><\/a><\/p>\n<h2>How to Add Posts to Your Jekyll Blog<\/h2>\n<p>Adding posts to your blog will require using your favorite text editor or any program that lets you create plain text files with no formatting options. Each blog post will be its own unique file with a name like this: <em>2018-01-01-happy-new-year.md<\/em>. This naming structure is critical. The first part is the date on which you&#8217;d like the post to be published, followed by any title you want, ending wiht the <em>.md<\/em> (for Markdown) extension.<\/p>\n<ol class=\"article_list\">\n<li>Open your site directory with your operating system&#8217;s default folder system or via command line<\/li>\n<li>Open (or change) into the <em>_posts<\/em> directory<\/li>\n<li>Create a new file in your text editor (how to do this will depend on the editor itself)<\/li>\n<li>Name the file with the appropriate format: <em><span style=\"color: green;\">2018-01-01<\/span>&#8211;<span style=\"color: cyan;\">title<\/span><span style=\"color: crimson;\">.md<\/span><\/em><\/li>\n<\/ol>\n<h3>Front Matter (inside the file)<\/h3>\n<p>Once you have created your blog post, you will want to populate the file with some important information. For example, what is the proper title? Would you require a pretty permalink? Should this post be filed under a certain category? You can put all of this information in the file&#8217;s &#8220;front matter&#8221; or heading.<\/p>\n<p>A basic Jekyll blog file will look like this on the inside, with the front matter at the top and post content below:<\/p>\n<pre class=\"code_block\"> --- layout: post title: My Awesome Title permalink: \/test-post\/ category: Updates ---  The post content goes here.  Each separate line is a *new* paragraph.<\/pre>\n<p>The default permalink style is: \/year\/month\/title.html &#8230; but you can make it whatever you want or leave it default by having no permalink designated in the front matter.<\/p>\n<p>The <em>layout<\/em> designation determines what kind of page layout should be used. We&#8217;ll talk about this more later during the customization phase. Likewise, categories will come into play when designing the site layouts. For example, displaying a list of categories, is something that can be added to a theme.<\/p>\n<p><a name=\"add-pages\"><\/a><\/p>\n<h2>How to Add Pages to Your Jekyll Blog<\/h2>\n<p>Adding pages to the site is a similar process to adding posts, but the file naming is more straightforward. You can name a page anything you want as long as the file ends with the <em>.md<\/em> extension. Plain HTML pages, if you need them, will be processed as is.<\/p>\n<p>Page front matter is similar to the post information, but you will want to specify that this is a page:<\/p>\n<pre class=\"code_block\"> --- title: About permalink: \/about\/ ---  This is a page about me. I'm a barista and I also like to write my blog.<\/pre>\n<p>Once your site is generated, this page will appear at a URL like this: <em>example.com\/about\/<\/em>.<\/p>\n<p>Now that you can create posts and pages, stay tuned in the series to learn how to customize your site.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this tutorial: How to Create a Jekyll Site How to Add Posts to Your Jekyll Blog How to Add Pages to the Jekyll Site Reviewing our Jekyll series, we have already learned what Jekyll is and why you might want to use it for your site. We&#8217;ve also learned how to install Jekyll. Make<a class=\"moretag\" href=\"https:\/\/www.inmotionhosting.com\/support\/website\/jekyll\/how-to-create-a-jekyll-site\/\"> Read More ><\/a><\/p>\n","protected":false},"author":17,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[4306],"tags":[],"class_list":["post-4419","post","type-post","status-publish","format-standard","hentry","category-jekyll"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Create a Jekyll Site | InMotion Hosting<\/title>\n<meta name=\"description\" content=\"In this article, you&#039;ll learn how to create your Jekyll site and start adding content right away.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.inmotionhosting.com\/support\/website\/jekyll\/how-to-create-a-jekyll-site\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create a Jekyll Site | InMotion Hosting\" \/>\n<meta property=\"og:description\" content=\"In this article, you&#039;ll learn how to create your Jekyll site and start adding content right away.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.inmotionhosting.com\/support\/website\/jekyll\/how-to-create-a-jekyll-site\/\" \/>\n<meta property=\"og:site_name\" content=\"InMotion Hosting Support Center\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/inmotionhosting\/\" \/>\n<meta property=\"article:published_time\" content=\"2018-03-01T16:08:07+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-11-03T15:48:30+00:00\" \/>\n<meta name=\"author\" content=\"Christopher Maiorana\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@InMotionHosting\" \/>\n<meta name=\"twitter:site\" content=\"@InMotionHosting\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Christopher Maiorana\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/jekyll\/how-to-create-a-jekyll-site\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/jekyll\/how-to-create-a-jekyll-site\/\"},\"author\":{\"name\":\"Christopher Maiorana\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/c6922c56c84e17079fd558e07b7ef72f\"},\"headline\":\"How to Create a Jekyll Site\",\"datePublished\":\"2018-03-01T16:08:07+00:00\",\"dateModified\":\"2020-11-03T15:48:30+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/jekyll\/how-to-create-a-jekyll-site\/\"},\"wordCount\":695,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"articleSection\":[\"Jekyll\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/website\/jekyll\/how-to-create-a-jekyll-site\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/jekyll\/how-to-create-a-jekyll-site\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/website\/jekyll\/how-to-create-a-jekyll-site\/\",\"name\":\"How to Create a Jekyll Site | InMotion Hosting\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\"},\"datePublished\":\"2018-03-01T16:08:07+00:00\",\"dateModified\":\"2020-11-03T15:48:30+00:00\",\"description\":\"In this article, you'll learn how to create your Jekyll site and start adding content right away.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/jekyll\/how-to-create-a-jekyll-site\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/website\/jekyll\/how-to-create-a-jekyll-site\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/jekyll\/how-to-create-a-jekyll-site\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.inmotionhosting.com\/support\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Create a Jekyll Site\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"name\":\"InMotion Hosting Support Center\",\"description\":\"Web Hosting Support &amp; Tutorials\",\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\",\"name\":\"InMotion Hosting\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"width\":696,\"height\":696,\"caption\":\"InMotion Hosting\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/inmotionhosting\/\",\"https:\/\/x.com\/InMotionHosting\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/c6922c56c84e17079fd558e07b7ef72f\",\"name\":\"Christopher Maiorana\",\"description\":\"Christopher Maiorana joined the InMotion community team in 2015 and regularly dispenses tips and tricks in the Support Center, Community Q&A, and the InMotion Hosting Blog.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/chris-m-4623144b\/\"],\"url\":\"https:\/\/www.inmotionhosting.com\/support\/author\/christopherm\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Create a Jekyll Site | InMotion Hosting","description":"In this article, you'll learn how to create your Jekyll site and start adding content right away.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.inmotionhosting.com\/support\/website\/jekyll\/how-to-create-a-jekyll-site\/","og_locale":"en_US","og_type":"article","og_title":"How to Create a Jekyll Site | InMotion Hosting","og_description":"In this article, you'll learn how to create your Jekyll site and start adding content right away.","og_url":"https:\/\/www.inmotionhosting.com\/support\/website\/jekyll\/how-to-create-a-jekyll-site\/","og_site_name":"InMotion Hosting Support Center","article_publisher":"https:\/\/www.facebook.com\/inmotionhosting\/","article_published_time":"2018-03-01T16:08:07+00:00","article_modified_time":"2020-11-03T15:48:30+00:00","author":"Christopher Maiorana","twitter_card":"summary_large_image","twitter_creator":"@InMotionHosting","twitter_site":"@InMotionHosting","twitter_misc":{"Written by":"Christopher Maiorana","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.inmotionhosting.com\/support\/website\/jekyll\/how-to-create-a-jekyll-site\/#article","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/website\/jekyll\/how-to-create-a-jekyll-site\/"},"author":{"name":"Christopher Maiorana","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/c6922c56c84e17079fd558e07b7ef72f"},"headline":"How to Create a Jekyll Site","datePublished":"2018-03-01T16:08:07+00:00","dateModified":"2020-11-03T15:48:30+00:00","mainEntityOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/website\/jekyll\/how-to-create-a-jekyll-site\/"},"wordCount":695,"commentCount":0,"publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"articleSection":["Jekyll"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.inmotionhosting.com\/support\/website\/jekyll\/how-to-create-a-jekyll-site\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.inmotionhosting.com\/support\/website\/jekyll\/how-to-create-a-jekyll-site\/","url":"https:\/\/www.inmotionhosting.com\/support\/website\/jekyll\/how-to-create-a-jekyll-site\/","name":"How to Create a Jekyll Site | InMotion Hosting","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#website"},"datePublished":"2018-03-01T16:08:07+00:00","dateModified":"2020-11-03T15:48:30+00:00","description":"In this article, you'll learn how to create your Jekyll site and start adding content right away.","breadcrumb":{"@id":"https:\/\/www.inmotionhosting.com\/support\/website\/jekyll\/how-to-create-a-jekyll-site\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.inmotionhosting.com\/support\/website\/jekyll\/how-to-create-a-jekyll-site\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.inmotionhosting.com\/support\/website\/jekyll\/how-to-create-a-jekyll-site\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.inmotionhosting.com\/support\/"},{"@type":"ListItem","position":2,"name":"How to Create a Jekyll Site"}]},{"@type":"WebSite","@id":"https:\/\/www.inmotionhosting.com\/support\/#website","url":"https:\/\/www.inmotionhosting.com\/support\/","name":"InMotion Hosting Support Center","description":"Web Hosting Support &amp; Tutorials","publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.inmotionhosting.com\/support\/#organization","name":"InMotion Hosting","url":"https:\/\/www.inmotionhosting.com\/support\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","width":696,"height":696,"caption":"InMotion Hosting"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/inmotionhosting\/","https:\/\/x.com\/InMotionHosting"]},{"@type":"Person","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/c6922c56c84e17079fd558e07b7ef72f","name":"Christopher Maiorana","description":"Christopher Maiorana joined the InMotion community team in 2015 and regularly dispenses tips and tricks in the Support Center, Community Q&A, and the InMotion Hosting Blog.","sameAs":["https:\/\/www.linkedin.com\/in\/chris-m-4623144b\/"],"url":"https:\/\/www.inmotionhosting.com\/support\/author\/christopherm\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"primary_category":null,"_links":{"self":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/4419","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/users\/17"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/comments?post=4419"}],"version-history":[{"count":1,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/4419\/revisions"}],"predecessor-version":[{"id":62944,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/4419\/revisions\/62944"}],"wp:attachment":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/media?parent=4419"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/categories?post=4419"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/tags?post=4419"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}