Difference between revisions of "Build your own Jekyll Blog"

From Grundy
Jump to navigation Jump to search
(A step-by-step Tutorial to setup your own Jeykll Blog)
 
Line 52: Line 52:
 
<li> Reload the page and there you'll see your second post !</li>
 
<li> Reload the page and there you'll see your second post !</li>
 
</ol>
 
</ol>
== Modifying Layout ==
 
  
 
== Using Templates ==
 
== Using Templates ==
 
Many templates are already available online which can be directly used, I have listed some of them. <br>
 
Many templates are already available online which can be directly used, I have listed some of them. <br>
 
[[File:themes.png|600px]]
 
[[File:themes.png|600px]]
<br><br>
+
<br>
 +
<br>
 
[http://jekyllthemes.org/ jekyllthemes.org] <br>
 
[http://jekyllthemes.org/ jekyllthemes.org] <br>
 
[https://jekyllthemes.io/ jekyllthemes.io]<br>
 
[https://jekyllthemes.io/ jekyllthemes.io]<br>
 
[http://themes.jekyllrc.org/ themes.jekyllrc.org]<br>
 
[http://themes.jekyllrc.org/ themes.jekyllrc.org]<br>
 +
<br>
 +
== Modifying Layouts ==
 +
<br>
 +
I have used a simple template from the above website. Download this [http://jekyllthemes.org/themes/airspace/ Template] here.<br>
 +
Extract the file and open the directory, you can see lot many folders and files<br>
 +
[[File:airspace.png|600px]]
 +
<br>
 +
The first step is to open <code>_config.yml</code> file and modify two tags '''url''' and '''base_url'''. Change these to '''""''' (ie empty string) <br>
 +
<br>
 +
[[File:config.png|300px]]<br><br>
 +
Now you are ready to open the site locally. Run the command <br>
 +
<code>jekyll serve</code>
 +
<br> in the directory and navigate to '''http://127.0.0.1:4000/'''.
 +
Now this website is already well-built and has a lot more features. Hence the code base is lot more complicated. <br>
 +
I have listed down all major parts of Website explaining the code. Enjoy !
  
 
== References ==
 
== References ==
 
[https://jekyllrb.com/ Official Jekyll Website]
 
[https://jekyllrb.com/ Official Jekyll Website]

Revision as of 08:05, 11 July 2017

Error creating thumbnail: File missing

Jekyll is a simple, static site builder. What it basically does is to convert a template directory containing folders and files in different format into a ready-to-publish website which can be easily hosted on servers. Due to the following features Jekyll is highly suggested for publishing blogs and simple sites

  • Ease of Setup
  • Requires no prerequisite knowledge of Web development like HTML, CSS, JS
  • Beautiful Templates available online

Note - Static websites have pages with fixed contents that is directly served from server's file directory to the user and hence are identical for everyone unlike dynamic websites which require web programming and database in the back-end and generate content by running a web-application for each user request.

Setting Up Jekyll

This section will be filled by Ashutosh

Creating your first Post

If you have successfully completed the above steps then you can open and modify your site locally. Execute the following on terminal

cd myblog

bundle exec jekyll serve _site

Error creating thumbnail: File missing

Just open your browser and go to http://127.0.0.1:4000/. Congrats ! That's your blog with a default post, you can now modify/add more posts.

Error creating thumbnail: File missing

Here's how your directory '/Documents/myblog' should look like

Error creating thumbnail: File missing


Steps:-

  1. Open folder _posts and create an empty document with the name YYYY-MM-DD-Post-Title.markdown. You have to be careful that the name matches the format or else Jekyll will not interpret it.
  2. Click on the file and modify its content. Now any markdown file is composed of two parts
    • Liquid Tags - Tags are specifics about the given post that are separately rendered by Jekyll. These include layout, ,title , date, type (If you plan on writing blog about multiple topics and want posts to appear separately in each section) etc. You can create your own tags too !
      ---
      layout: post
      title: "Second Post"
      date: 2017-07-11
      ---
    • Content - This include the rest of the content matter that is going to appear below the title. It can include text, images, links etc. Note that since this is markdown file, you must format content using markdown tags/syntax. For our post, I have added a sample .md file. For markdown syntax, Click Here.
  3. Reload the page and there you'll see your second post !

Using Templates

Many templates are already available online which can be directly used, I have listed some of them.

Error creating thumbnail: File missing



jekyllthemes.org
jekyllthemes.io
themes.jekyllrc.org

Modifying Layouts


I have used a simple template from the above website. Download this Template here.
Extract the file and open the directory, you can see lot many folders and files

Error creating thumbnail: File missing


The first step is to open _config.yml file and modify two tags url and base_url. Change these to "" (ie empty string)

Error creating thumbnail: File missing



Now you are ready to open the site locally. Run the command
jekyll serve
in the directory and navigate to http://127.0.0.1:4000/. Now this website is already well-built and has a lot more features. Hence the code base is lot more complicated.
I have listed down all major parts of Website explaining the code. Enjoy !

References

Official Jekyll Website