This article is the second article in Jekyll Super Primer starting from 0. -# 1 Environment Construction -# 2 Original theme creation <-This time

What is a unique theme?

Jwkyll allows you to create your own theme and create a site with your own design. Remember in the article \ # 1 that you used layout: post when you created the article? This means using the theme's post layout.

Creating your own theme in Jekyll is very easy, it's like creating a layout in the _layouts directory and applying it by specifying it in posts and pages as you did before.

Here, I will try to apply my own theme to the top page and the post page.

Note) Since I want to focus on the operation and logic part, I will omit the design part considerably. If you want to make it beautiful, write scss from scratch or use a css framework such as Bootstrap or Bulma.

Then I will make it immediately.

Preparation before creating a theme

Delete unnecessary files or create necessary files

First of all, Create a _layouts directory in your working root directory. For confirmation from the last time, I will paste the directory diagram for the time being. (The ones specified in the automatically generated .gitignore are excluded.

.
├── 404.html
├── Gemfile
├── Gemfile.lock
├── _config.yml
├── _layouts
├── _posts
│   ├── 2020-05-19-hello-world.md
│   └── 2020-05-19-welcome-to-jekyll.markdown
├── about.markdown
└── index.markdown

Index.markdown and about.markdown are unnecessary for the time being, so let's delete them.

Edit the configuration file

Open _config.yml and overwrite it as follows.

`_congig.yml`


title:Jekyll super introduction starting from 0#Site title
description: >- #Write a description of the site
Please write a description of the site.
It is generally said that about 200 characters is good.

baseurl: "" #You can ignore this
url: "https://<type-your-domain>" #Enter the domain of your site.

plugins: #If you have a plugin to use, add it here
  - jekyll-feed

exclude: #Add here what you don't include in the site generation
  - .sass-cache/
  - .jekyll-cache/
  - gemfiles/
  - Gemfile
  - Gemfile.lock
  - node_modules/
  - vendor/bundle/
  - vendor/cache/
  - vendor/gems/
  - vendor/ruby/

That's all for preparation.

Jekyll's Lquid syntax

Before making the layout, I will explain the simple syntax. First, Jekyll can basically be written based on html. You can then use a syntax called Liquid. Liquid is a template language with three main parts: objects, tags and filters.

object

In Liquid, you can output by enclosing various objects (variables, etc.) with {{ and}} . For example

<title>
 {{ page.title }}
</title>
<!-- page.title = "Hello,world!" ->

If you have such a source, the generated html file will look like this:

<title>
  "Hello,world!"
</title>

tag

You can use a template with logic by using the Liquid tag. If you use the Liquid tag, enclose it in {% and %}.

For example, in the following cases, if page.title is true, That is, if the value exists, {{page.title}}-{{site.title}} is output. Or "Hello, world -! Jekyll ultra Getting Started" will be output. If false, {{site.title}} That is, "Jekyll Super Introduction" is output.

<title>
  {% if page.title %}{{ page.title }} - {{ site.title }}{% else %}{{ site.title }}{% endif %}
</title>
<!-- page.title = "Hello,world!", site.title = "Jekyll Super Primer" ->

Jekyll also offers a variety of Liquid tags, so you may want to read here.

filter

Liquid filters can process the output of Liquid objects. It can be implemented by separating the output of the object with |.

For example, take the case of the following source. By the way, page.date is an object that outputs the creation date of the article. The output is based on the article file naming convention yyyy-mm-dd- <title> .md.

<p>release date: {{ page.date | date: "%Y year%m month%d day" }}</p>
<!-- page.date = 2020-01-01 00:00:00 +0900 -->

In this case, it will be generated as follows:

<p>release date:January 01, 2020</p>

There are various other useful filters. You may want to take a look at the official Docs at here.

Front Matter Jekyll allows you to add variables to your page using Front Matter. By the way, I specified post for layout in # 1, but this is also a kind of variable, You can get it at page.layout.

Front Matter is written in yaml format between --- and --- at the beginning of each markdown file and html file. Take a look at _posts / yyyy-mm-dd-hello-world generated via Jekyll Admin in \ # 1.

`2020-05-19-hello-world.md`


---
title: Hello, world!
layout: post
---

# Hello, world!
##Hello World!
**Konnichiha,Sekai**

Hello, World

Some are sandwiched between --- and --- at the beginning. This is Front Matter.

You can refer to this with page.title or page.layout in the upper layout. You can also set this variable yourself, so for example, if you add text: hello! Under layout, It can be referenced by page.text and" hello! "Is output.

Use scss / sass

Jekyll has the ability to use scss / sass by default. Create a _sass directory in the project root and add sass / scss files under it.

Also, create index.scss in an appropriate place under the project root, Load the created file with @ import. (At this time, the starting point of the relative path is the _sass directory.

For example, if the _scss directory looks like this:

.
├── _errors.scss
├── _global.scss
├── _index.scss
├── _navbar.scss
├── _page.scss
├── _post.scss
├── _variables.scss
└── bulma
    ├── ...

`index.scss`


---
---

@import 'bulma/bulma';
@import 'bulma/bulma-tooltip/index';
@import 'variables';
@import 'global'; 
@import 'navbar';
@import 'index';
@import 'page';
@import 'post';
@import 'errors';

Create index.scss under assets and create By adding <link href =" {{"/assets/index.css" | absolute_url}} "rel =" stylesheet "> to the layout, You can do it by reading.

Add layout

Then I will start making themes. As mentioned above, it's easy because you just add layouts.

Broadly speaking

--Default layout, which is the basis of all layouts --Post layout for posts --Page layout of fixed (static?) Page

If you have three, you can make a pretty site.

In addition, since we will focus on the operation and logic parts, we will omit the design part considerably. ** Use MVP.css. ** ** This is a css framework that styles directly from HTML tags.

default layout

First, let's add the default layout that is the basis of all pages. There are considerable individual differences in the implementation method around here, but For the time being, I like to inherit from the default layout to another layout.

Source code

Create default.html in the _layouts directory and do the following:

`_layouts/default.html`


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>
      {% if page.title %}{{ page.title }} - {{ site.title }}{% else %}{{ site.title }}{% endif %}
    </title>
    <meta name="description" content="{% if page.desc %}{{ page.desc }}{% else %}{{ page.content | strip_html | truncate: 130 }}{% endif %}">

    <!--OGP settings-->
    <meta property="og:title" content="{% if page.title %}{{ page.title }} - {{ site.title }}{% else %}{{ site.title }}{% endif %}" />
    <meta property="og:type" content="article" />
    <meta property="og:url" content="{{ site.url }}{{ page.url }}" />
    <meta property="og:site_name" content="{{ site.title }}" />
    <meta property="og:description" content="{% if page.desc %}{{ page.desc }}{% else %}{{ page.content | strip_html | truncate: 130 }}{% endif %}" />
    <meta property="og:image" content="{% if page.thumbnail %}{{ page.thumbnail }}{% else %}{{ "/assets/images/ogp-image.png " | absolute_url }}{% endif %}" />

    <!--Specify RSS feed-->
    <link rel="alternate" type="application/rss+xml" title="{{ site.title }} RSS" href="{{ "/feed.xml" | absolute_url }}" />

    <!-- mvp.css https://andybrewer.github.io/mvp/To use. It is published under the MIT license.-->
    <link href="{{ "/mvp.css" | absolute_url }}" rel="stylesheet">
  </head>
  <body>
    {% include _header.html %}

    {{ content }}

    {% include _footer.html %}
  </body>
</html>

Commentary

<title>
  {% if page.title %}{{ page.title }} - {{ site.title }}{% else %}{{ site.title }}{% endif %}
</title>

As explained earlier. This will output {{page.title}}-{{site.title}} if there is a value in page.title, If not, it prints {{site.title}}.

<meta name="description" content="{% if page.desc %}{{ page.desc }}{% else %}{{ page.content | strip_html | truncate: 130 }}{% endif %}">

This also prints page.desc if the value exists in page.desc, otherwise prints the first 130 characters of page.content (the variable that contains the content of the page).

next,

 {% include _header.html %}
...
 {% include _footer.html  %}

The include of the liquid tag. This is very useful for splitting the layout. You can read the files under _include.

`_include/_header.html`


<header>
  <nav>
      <a href="/">{{ site.title }}</a>
      <ul>
          <li><a href="/">home</a></li>
      </ul>
  </nav>
  <h1>{{ page.title }}</h1>
</header>

Finally,

{{ content }}

This refers to the source from which it was read.

post layout

Source code

`_layouts/post.html`


---
layout: default
---

<main>
  <article>
    <p>release date: {{ page.date | date: "%Y year%m month%d day" }}</p>
    {% if page.desc %}
    <h2>{{ page.desc }}</h2>
    {% endif %}
  
    <div>
      {{ content }}
    </div>
  </article>
</main>

Commentary

---
layout: default
---

Front Matter. It specifies the underlying default layout.

<p>release date: {{ page.date | date: "%Y year%m month%d day" }}</p>

The date format. The value returned by page.date is not very clean, so I used the date filter to make it look nice.

I don't think there are any other points to note. I explained the if statement earlier.

page layout

Source code

`_layouts/page.html`


---
layout: default
---

<main>
  <div>
    {% if page.desc %}
    <h2>{{ page.desc }}</h2>
    {% endif %}

    <div>
      {{ content }}
    </div>
  </div>
</main>

Commentary

There is nothing special to mention. It's almost the same as post. Don't forget to specify layout for the front matter.

Try to make other pages

index.html Without index.html, you'll end up with a clunky index page when you access the root of your domain. Let's create index.html.

`index.html`


---
layout: default
---

<main>
  <section>
    <header>
      <h2>Post list</h2>
    </header>

    {% for post in site.posts %}
      <aside>
        <a href="{{ post.url }}"><h3>{{ post.title }}</h3></a>
        <p>{% if post.desc %}{{ post.desc }}{% else %}{{ post.content | strip_html | truncate: 130 }}{% endif %}</p>
      </aside>  
    {% endfor %}
  </section>
</main>

Commentary

I am using the liquid tag for. It pulls each element into a variable in the form for <variable name> in array.

Final directory structure

.
├── 404.html
├── Gemfile
├── Gemfile.lock
├── _config.yml
├── _includes
│   ├── _footer.html
│   └── _header.html
├── _layouts
│   ├── default.html
│   ├── page.html
│   └── post.html
├── _posts
│   ├── 2020-05-19-hello-world.md
│   └── 2020-05-19-welcome-to-jekyll.markdown
├── index.html
└── mvp.css

All source code

The source code is available on Github. https://github.com/yu-san-19/zero-starts-jektyll-nyumon/tree/7c75428c880be369a552bf72bf6a2f87d7a5293e

Try to run

Well, I think I've done it all, so let's do it.

$ bundle exec jekyll s

If you find something that feels like listening, try accessing the following. If the following is displayed, it is successful.

http://localhost:4000/

http: // localhost: 4000 / yyyy / mm / dd / hello-world.html (Enter the md file name numbers in yyyy, dd, mm as appropriate)

at the end

This time, I explained the layout and liquid tag because it was a theme creation. It may be omitted a little or the explanation is insufficient, but the Japanese document has a fairly solid explanation, so please read it.

If you don't understand this, or if this is wrong, or if this explanation is easier to understand, please feel free to comment.

Up to this point (although I'm ignoring the design etc.), the site is ready. However, this is not something that anyone can see. Next time, I will explain about the release of the site.

See you next time!

[RUBY] Jekyll Super Introduction # 2-Starting from 0-Creating your own theme

What is a unique theme?

Preparation before creating a theme

Delete unnecessary files or create necessary files

Edit the configuration file

_congig.yml

Jekyll's Lquid syntax

object

tag

filter

2020-05-19-hello-world.md

Use scss / sass

index.scss

Add layout

default layout

Source code

_layouts/default.html

Commentary

_include/_header.html

post layout

Source code

_layouts/post.html

Commentary

page layout

Source code

_layouts/page.html

Commentary

Try to make other pages

index.html

Commentary

Final directory structure

All source code

Try to run

at the end

`_congig.yml`

`2020-05-19-hello-world.md`

`index.scss`

`_layouts/default.html`

`_include/_header.html`

`_layouts/post.html`

`_layouts/page.html`

`index.html`