Jekyll2023-07-09T11:56:42+00:00/WhatATheme/feed.xmlWhat A ThemeA customizable Jekyll portfolio themeSample Post2020-04-24T00:00:00+00:002020-04-24T00:00:00+00:00/WhatATheme/blog/sample-post<p>This post will show you how the content will look like in the post pages and how the headlines, quotes and quotes will be represented. Jekyll is mainly used to write simple markdown and after that it renders out a static pages, so you need to know the basics of writing markdown for that.
For more information about writing markdown you can checkout the following markdown cheatsheets:</p>
<ul>
<li><a href="https://guides.github.com/features/mastering-markdown/">Mastering Markdown</a></li>
<li><a href="https://www.markdownguide.org/cheat-sheet/">Markdown Guide</a></li>
<li><a href="https://github.github.com/gfm/">GitHub Flavored Markdown Spec</a></li>
</ul>
<hr />
<h1 id="this-is-the-h1-text">This is the h1 text</h1>
<h2 id="this-is-the-h2-text">This is the h2 text</h2>
<h3 id="this-is-the-h3-text">This is the h3 text</h3>
<h4 id="this-is-the-h4-text">This is the h4 text</h4>
<h5 id="this-is-the-h5-text">This is the h5 text</h5>
<h6 id="this-is-the-h6-text">This is the h6 text</h6>
<p><strong>Bold Text in the post will look like:</strong><br />
<strong>This text is Bold</strong></p>
<p><strong>Italic Text in the post will look like:</strong><br />
<em>This text is Italic</em></p>
<blockquote>
<p>Quotes on your post will look like this</p>
</blockquote>
<p><code class="language-plaintext highlighter-rouge">Codes on your post will look like this</code></p>
<p><strong>Link in the post will look like:</strong><br />
<a href="#">This is a link</a></p>
<p><strong>Bullet list in the post will look like:</strong></p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
<p><strong>Number list in the post will look like:</strong></p>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ol>
<p><strong>Images in the post will look like:</strong><br />
<img src="/WhatATheme/assets/images/1280x720%20Placeholder.png" alt="Test Image" /></p>
<p><strong>Normal text in the post will look like</strong><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id finibus nisl. Etiam in hendrerit est. Nulla non erat ac lectus interdum lobortis. Vestibulum at mi ex. Mauris nisl mi, venenatis et feugiat nec, finibus porttitor velit. Suspendisse tincidunt lobortis leo, quis tristique tellus iaculis quis. Donec eleifend pulvinar gravida. Proin non lorem eros. Donec sit amet finibus ex, eget vestibulum nunc. Ut ut enim id purus porttitor tristique. Vivamus tincidunt eleifend hendrerit. Proin metus felis, ultrices vel dui in, porta dapibus dui. Sed sagittis ex vitae dui tristique dignissim. Cras vel leo ipsum.</p>
<p>Aenean ac neque et risus mattis accumsan. Sed ac tellus molestie, lacinia ante sit amet, convallis felis. Maecenas aliquet lectus nec euismod auctor. Donec finibus pellentesque tortor, ac efficitur metus suscipit non. Proin diam orci, blandit quis malesuada ac, efficitur a nisl. Mauris eleifend consequat blandit. Sed egestas quam et orci gravida, non euismod metus scelerisque. Curabitur venenatis pellentesque erat commodo pharetra. Fusce id ante nec ipsum fringilla auctor. In justo quam, feugiat placerat eleifend dapibus, luctus et quam. Fusce facilisis erat ut odio convallis viverra et id mauris. Sed vehicula tempus consectetur. Aliquam pharetra, purus non egestas tristique, tellus massa fringilla est, id sagittis tellus urna non mauris. Suspendisse fringilla, velit nec blandit facilisis, ligula ante imperdiet est, et placerat magna sem quis tortor.</p>
<p>Vestibulum vitae fermentum velit, rhoncus egestas orci. Nulla at purus ut orci posuere vulputate. In eget leo diam. In congue in diam nec elementum. Suspendisse fringilla ante nulla, eu tristique orci ultrices eget. Aenean non lorem tellus. Vestibulum tempor metus sit amet tellus feugiat, sit amet consequat lacus ultricies.</p>
<p>Donec imperdiet, lectus eget congue cursus, dolor enim finibus risus, ut molestie lorem tellus non tortor. Donec quam nibh, molestie in dapibus et, efficitur non tortor. Morbi orci tellus, mollis vel mi vitae, auctor lobortis erat. Ut gravida velit eget ligula lacinia, id rhoncus tellus gravida. Maecenas laoreet rutrum consequat. Suspendisse sed nibh dui. Curabitur dictum euismod mollis. Sed egestas libero libero, eu accumsan augue placerat non. Nunc id condimentum orci. Mauris vitae sollicitudin quam.</p>
<p><strong>Giphy Gifs will look like:</strong><br /></p>
<iframe src="https://giphy.com/embed/ZqlvCTNHpqrio" width="480" height="259" frameborder="0" class="giphy-embed" allowfullscreen=""></iframe>
<p><a href="https://giphy.com/gifs/laughing-despicable-me-minions-ZqlvCTNHpqrio">via GIPHY</a></p>
<p><strong>YouTUbe Videos will look like:</strong><br /></p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/jTPXwbDtIpA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>This post will show you how the content will look like in the post pages and how the headlines, quotes and quotes will be represented. Jekyll is mainly used to write simple markdown and after that it renders out a static pages, so you need to know the basics of writing markdown for that. For more information about writing markdown you can checkout the following markdown cheatsheets: Mastering Markdown Markdown Guide GitHub Flavored Markdown Spec This is the h1 text This is the h2 text This is the h3 text This is the h4 text This is the h5 text This is the h6 text Bold Text in the post will look like: This text is Bold Italic Text in the post will look like: This text is Italic Quotes on your post will look like this Codes on your post will look like this Link in the post will look like: This is a link Bullet list in the post will look like: Item 1 Item 2 Item 3 Item 4 Item 5 Number list in the post will look like: Item 1 Item 2 Item 3 Item 4 Item 5 Images in the post will look like: Normal text in the post will look like Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id finibus nisl. Etiam in hendrerit est. Nulla non erat ac lectus interdum lobortis. Vestibulum at mi ex. Mauris nisl mi, venenatis et feugiat nec, finibus porttitor velit. Suspendisse tincidunt lobortis leo, quis tristique tellus iaculis quis. Donec eleifend pulvinar gravida. Proin non lorem eros. Donec sit amet finibus ex, eget vestibulum nunc. Ut ut enim id purus porttitor tristique. Vivamus tincidunt eleifend hendrerit. Proin metus felis, ultrices vel dui in, porta dapibus dui. Sed sagittis ex vitae dui tristique dignissim. Cras vel leo ipsum. Aenean ac neque et risus mattis accumsan. Sed ac tellus molestie, lacinia ante sit amet, convallis felis. Maecenas aliquet lectus nec euismod auctor. Donec finibus pellentesque tortor, ac efficitur metus suscipit non. Proin diam orci, blandit quis malesuada ac, efficitur a nisl. Mauris eleifend consequat blandit. Sed egestas quam et orci gravida, non euismod metus scelerisque. Curabitur venenatis pellentesque erat commodo pharetra. Fusce id ante nec ipsum fringilla auctor. In justo quam, feugiat placerat eleifend dapibus, luctus et quam. Fusce facilisis erat ut odio convallis viverra et id mauris. Sed vehicula tempus consectetur. Aliquam pharetra, purus non egestas tristique, tellus massa fringilla est, id sagittis tellus urna non mauris. Suspendisse fringilla, velit nec blandit facilisis, ligula ante imperdiet est, et placerat magna sem quis tortor. Vestibulum vitae fermentum velit, rhoncus egestas orci. Nulla at purus ut orci posuere vulputate. In eget leo diam. In congue in diam nec elementum. Suspendisse fringilla ante nulla, eu tristique orci ultrices eget. Aenean non lorem tellus. Vestibulum tempor metus sit amet tellus feugiat, sit amet consequat lacus ultricies. Donec imperdiet, lectus eget congue cursus, dolor enim finibus risus, ut molestie lorem tellus non tortor. Donec quam nibh, molestie in dapibus et, efficitur non tortor. Morbi orci tellus, mollis vel mi vitae, auctor lobortis erat. Ut gravida velit eget ligula lacinia, id rhoncus tellus gravida. Maecenas laoreet rutrum consequat. Suspendisse sed nibh dui. Curabitur dictum euismod mollis. Sed egestas libero libero, eu accumsan augue placerat non. Nunc id condimentum orci. Mauris vitae sollicitudin quam. Giphy Gifs will look like: via GIPHY YouTUbe Videos will look like:How to Install and use WhatATheme?2020-04-22T00:00:00+00:002020-04-22T00:00:00+00:00/WhatATheme/blog/how-to-install-whatatheme<h1 id="what-is-whatatheme">What is WhatATheme?</h1>
<blockquote>
<p>You’ll find this post in your <strong><em>_posts</em></strong> directory. Go ahead and edit it and re-build the site to see your changes. >You can rebuild the site in many different ways, but the most common way is to run <code class="language-plaintext highlighter-rouge">bundle exec jekyll serve</code>, which launches a web server and auto-regenerates your site when a file is updated.</p>
</blockquote>
<iframe width="560" height="315" src="https://www.youtube.com/embed/VfPa2c9kwhQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
<hr />
<p><strong>WhatATheme</strong> is a customizable Jekyll Portfolio theme which supports blogging. You can use this theme in order to create an elegant, fully responsive portfolio which includes</p>
<h3 id="home-page--">Home Page -</h3>
<ul>
<li>A Hero section - A section where you can outsource an image which will work as the background for the particular section; it also will include your name and a tagline which can be easily manipulated via the _config.yml file.</li>
<li>An About section - A section where you can include your image and a 60 word paragraph which again you can easily manipulate using the _config.yml file.</li>
<li>A Contact section - A section where you can include 3 direct ways to contact<br />
<code class="language-plaintext highlighter-rouge">Ping on Messenger</code><br />
<code class="language-plaintext highlighter-rouge">Send an Email</code><br />
<code class="language-plaintext highlighter-rouge">Tweet on Twitter</code><br />
The contact section will also include 10 different social media buttons for your audience to follow.<br />
<code class="language-plaintext highlighter-rouge">Facebook</code>, <code class="language-plaintext highlighter-rouge">Twitter</code>, <code class="language-plaintext highlighter-rouge">Instagram</code>, <code class="language-plaintext highlighter-rouge">LinkedIn</code>, <code class="language-plaintext highlighter-rouge">GitHub</code>, <code class="language-plaintext highlighter-rouge">YouTube</code>, <code class="language-plaintext highlighter-rouge">Reddit</code>, <code class="language-plaintext highlighter-rouge">Behance</code>, <code class="language-plaintext highlighter-rouge">Dribbble</code> & <code class="language-plaintext highlighter-rouge">Spotify</code>.</li>
</ul>
<h3 id="blog--">Blog -</h3>
<p>The blog includes a horizontal card list where the latest articles are fetched from the _posts folder automatically in top-down format. It also includes an instant search box which matches your query from the title, description & content of your post and shows the result as soon as you type.<br />
The blog card includes</p>
<ul>
<li>Post Title</li>
<li>300 words from the content of the post</li>
<li>The publish date</li>
<li>The time which will be required to read the post.</li>
</ul>
<h3 id="projects--">Projects -</h3>
<p>The Projects page will include all the projects from the <strong><code class="language-plaintext highlighter-rouge">projects.yml</code></strong> file which is present in the _data folder.<br />
Projects will be showcased in a card-list format where each card will contain</p>
<ul>
<li>An image related to the project</li>
<li>A Project Title</li>
<li>A Project Description of about 80 words</li>
</ul>
<h3 id="footer--">Footer -</h3>
<p>The footer includes</p>
<ul>
<li>A small about the author widget which show the same <code class="language-plaintext highlighter-rouge">Author Image</code> as mentioned in the about section of the Home page which includes <code class="language-plaintext highlighter-rouge">Name of the Author</code>, <code class="language-plaintext highlighter-rouge">Around 75 words about the author</code>.</li>
<li>A more link widget which includes a link to any extra page that you’ve created and a <code class="language-plaintext highlighter-rouge">Subscribe via RSS</code> link.</li>
<li>A Recent posts widget which will include latest 3 posts.</li>
</ul>
<h4 id="extra-features--">Extra Features -</h4>
<p>WhatATheme comes pre installed with</p>
<ul>
<li><strong>HTML Compressor</strong> - It’ll compress all the pages by removing any extra space or blank lines.</li>
<li><strong>Google Analytics</strong> - A web analytics service offered by Google that tracks and reports website traffic. For more information <a href="https://analytics.google.com" target="blank">click here</a>.</li>
<li>
<p><strong>Disqus</strong> - A worldwide blog comment hosting service for web sites and online communities that use a networked platform. For more information about Disqus <a href="https://help.disqus.com/en/articles/1717053-what-is-disqus" target="blank">click here</a></p>
<p>##### For more information about WhatATheme <a href="https://github.com/thedevslot/WhatATheme/blob/gh-pages/README.md" target="blank">click here</a>.</p>
</li>
</ul>
<hr />
<h1 id="installation">Installation</h1>
<h3 id="step-1---setting-up-whatatheme">Step 1 - Setting up WhatATheme</h3>
<blockquote>
<ul>
<li>Fork the <a href="https://github.com/thedevslot/WhatATheme/tree/master" target="blankl">repository</a></li>
<li>Go to repository settings and set Github Pages source as master.</li>
<li>Your new site should be ready at <a href="#" target="blank">https://username.github.io/WhatATheme/</a></li>
</ul>
</blockquote>
<h3 id="step-2---making-changes-via-_configyml">Step 2 - Making changes via <strong>_config.yml</strong></h3>
<blockquote>
<ul>
<li>Open _config.yml file</li>
<li>Fill the available details accordingly</li>
<li>Commit the changes</li>
</ul>
</blockquote>What is WhatATheme? You’ll find this post in your _posts directory. Go ahead and edit it and re-build the site to see your changes. >You can rebuild the site in many different ways, but the most common way is to run bundle exec jekyll serve, which launches a web server and auto-regenerates your site when a file is updated. WhatATheme is a customizable Jekyll Portfolio theme which supports blogging. You can use this theme in order to create an elegant, fully responsive portfolio which includes Home Page - A Hero section - A section where you can outsource an image which will work as the background for the particular section; it also will include your name and a tagline which can be easily manipulated via the _config.yml file. An About section - A section where you can include your image and a 60 word paragraph which again you can easily manipulate using the _config.yml file. A Contact section - A section where you can include 3 direct ways to contact Ping on Messenger Send an Email Tweet on Twitter The contact section will also include 10 different social media buttons for your audience to follow. Facebook, Twitter, Instagram, LinkedIn, GitHub, YouTube, Reddit, Behance, Dribbble & Spotify. Blog - The blog includes a horizontal card list where the latest articles are fetched from the _posts folder automatically in top-down format. It also includes an instant search box which matches your query from the title, description & content of your post and shows the result as soon as you type. The blog card includes Post Title 300 words from the content of the post The publish date The time which will be required to read the post. Projects - The Projects page will include all the projects from the projects.yml file which is present in the _data folder. Projects will be showcased in a card-list format where each card will contain An image related to the project A Project Title A Project Description of about 80 words Footer - The footer includes A small about the author widget which show the same Author Image as mentioned in the about section of the Home page which includes Name of the Author, Around 75 words about the author. A more link widget which includes a link to any extra page that you’ve created and a Subscribe via RSS link. A Recent posts widget which will include latest 3 posts. Extra Features - WhatATheme comes pre installed with HTML Compressor - It’ll compress all the pages by removing any extra space or blank lines. Google Analytics - A web analytics service offered by Google that tracks and reports website traffic. For more information click here. Disqus - A worldwide blog comment hosting service for web sites and online communities that use a networked platform. For more information about Disqus click here ##### For more information about WhatATheme click here. Installation Step 1 - Setting up WhatATheme Fork the repository Go to repository settings and set Github Pages source as master. Your new site should be ready at https://username.github.io/WhatATheme/ Step 2 - Making changes via _config.yml Open _config.yml file Fill the available details accordingly Commit the changesWhat is Jekyll? How to use it?2020-04-21T00:00:00+00:002020-04-21T00:00:00+00:00/WhatATheme/blog/what-is-jekyll-how-to-use-it<p>Jekyll is a simple, blog-aware, static site generator perfect for personal, project, or organization sites. Think of it like a file-based CMS, without all the complexity. Jekyll takes your content, renders Markdown and Liquid templates, and spits out a complete, static website ready to be served by Apache, Nginx or another web server. Jekyll is the engine behind GitHub Pages, which you can use to host sites right from your GitHub repositories and if you don’t know what GitHub Pages are you can visit on click <a href="https://help.github.com/en/github/working-with-github-pages/about-github-pages" target="blank">here</a> or <a href="https://pages.github.com/" target="blank">here</a></p>
<h6 id="source--jekyll-docs">Source : <a href="https://jekyllrb.com/docs/"><code class="language-plaintext highlighter-rouge">Jekyll Docs</code></a></h6>
<blockquote>
<h3 id="to-know-more-and-get-started-with-jekyll-you-can-click-here">To know more and get started with Jekyll you can click <a href="https://jekyllrb.com/" targe="_blank">here</a></h3>
</blockquote>
<h1 id="installation">Installation</h1>
<p><strong>Jekyll is a Ruby Gem that can be installed on most systems.</strong></p>
<h3 id="requirements">Requirements</h3>
<ul>
<li><a href="https://www.ruby-lang.org/en/downloads/" target="_blank">Ruby</a> version 2.5.0 or above, including all development headers (ruby version can be checked by running ruby -v)</li>
<li><a href="https://rubygems.org/pages/download" target="_blank">Ruby Gems</a> (which you can check by running gem -v)</li>
<li><a href="https://gcc.gnu.org/install/" target="_blank">GCC</a> and <a href="https://www.gnu.org/software/make/" target="_blank">Make</a></li>
</ul>
<h3 id="after-installing-the-requirements-you-can-follow-these-guides">After Installing the Requirements you can follow these guides:</h3>
<p><strong>For detailed install instructions have a look at the guide for your operating system.</strong></p>
<ul>
<li><a href="https://jekyllrb.com/docs/installation/macos/" target="_blank">macOS</a></li>
<li><a href="https://jekyllrb.com/docs/installation/ubuntu/" target="_blank">Ubuntu</a></li>
<li><a href="https://jekyllrb.com/docs/installation/other-linux/" target="_blank">Other Linux Distros</a></li>
<li><a href="https://jekyllrb.com/docs/installation/windows/" target="_blank">Windows</a></li>
</ul>
<h3 id="creating-a-new-jekyll-site">Creating a new Jekyll site</h3>
<p><strong>We can create a new Jekyll site just by a simple command:</strong><br /></p>
<blockquote>
<h1 id="jekyll-new-my-site"><code class="language-plaintext highlighter-rouge">jekyll new my-site</code></h1>
</blockquote>
<p>Jekyll will create a new directory named as <code class="language-plaintext highlighter-rouge">my-site</code> which is customizable (i.e., you can change the name from <code class="language-plaintext highlighter-rouge">my-site</code> to anything you want for example <code class="language-plaintext highlighter-rouge">jekyll new brutus</code>).</p>
<h3 id="changing-into-the-directory">Changing into the Directory</h3>
<p><strong>We have to go inside the directory:</strong><br /></p>
<blockquote>
<h1 id="cd-my-site"><code class="language-plaintext highlighter-rouge">cd my-site</code></h1>
</blockquote>
<p>Again, <code class="language-plaintext highlighter-rouge">my-site</code> is just a random name which is customizable.</p>
<h3 id="building-the-site-and-making-it-available-on-a-local-server">Building the site and making it available on a local server</h3>
<blockquote>
<h1 id="bundle-exec-jekyll-serve"><code class="language-plaintext highlighter-rouge">bundle exec jekyll serve</code></h1>
</blockquote>
<h3 id="browsing-your-jekyll-site">Browsing your Jekyll site</h3>
<blockquote>
<h1 id="browse-to-httplocalhost4000">Browse to <a href="http://localhost:4000/" target="_blank"><code class="language-plaintext highlighter-rouge">http://localhost:4000/</code></a></h1>
</blockquote>
<h6 id="on-encountering-any-problem-while-building-and-serving-your-jekyll-site-you-can-consider-visiting-to-the-troubleshooting-page">On encountering any problem while building and serving your Jekyll site you can consider visiting to the <a href="https://jekyllrb.com/docs/troubleshooting/#configuration-problems" target="_blank">troubleshooting</a> page</h6>Jekyll is a simple, blog-aware, static site generator perfect for personal, project, or organization sites. Think of it like a file-based CMS, without all the complexity. Jekyll takes your content, renders Markdown and Liquid templates, and spits out a complete, static website ready to be served by Apache, Nginx or another web server. Jekyll is the engine behind GitHub Pages, which you can use to host sites right from your GitHub repositories and if you don’t know what GitHub Pages are you can visit on click here or here Source : Jekyll Docs To know more and get started with Jekyll you can click here Installation Jekyll is a Ruby Gem that can be installed on most systems. Requirements Ruby version 2.5.0 or above, including all development headers (ruby version can be checked by running ruby -v) Ruby Gems (which you can check by running gem -v) GCC and Make After Installing the Requirements you can follow these guides: For detailed install instructions have a look at the guide for your operating system. macOS Ubuntu Other Linux Distros Windows Creating a new Jekyll site We can create a new Jekyll site just by a simple command: jekyll new my-site Jekyll will create a new directory named as my-site which is customizable (i.e., you can change the name from my-site to anything you want for example jekyll new brutus). Changing into the Directory We have to go inside the directory: cd my-site Again, my-site is just a random name which is customizable. Building the site and making it available on a local server bundle exec jekyll serve Browsing your Jekyll site Browse to http://localhost:4000/ On encountering any problem while building and serving your Jekyll site you can consider visiting to the troubleshooting page