Jekyll super introduction starting from 0 # 1 --Environment construction

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

Introduction

What to do in this series

1. Let's create a site with Jekyll for the time being
2. Make your own template
3. Deploy the completed site to netlify and publish it

Target

--People who want to create a site with Jekyll from 0 with their own design

Prerequisite knowledge

--I understand HTML and CSS somehow --I know that JavaScript also exists --Understand how to write markdown --I know what the static site generator does --You can use git ――You can somehow operate with CUI

You need to install Ruby, but I don't think that this series will include the creation of plugins, so For the time being, Ruby does not need to call / understand.

Environment required to run Jekyll (required)

I don't think it's that difficult to build an environment, so I won't explain it here.

--Ruby v2.5.0 and above: You can check with ruby -v. --RubyGems: You can check it with gem -v. --GCC and make: You can check with gcc -v / g ++ -v and make -v.

From Jekyll's official Docs. https://jekyllrb.com/docs/installation/#requirements

Try to create a project

The first step is to create a project. Try creating a folder for your project in a suitable location. Below, the folder for the project is read with appropriate words such as project root or in the working root directory, but please read all.

Installation of required libraries

I use a tool called bundler. This makes it easier to manage gems by project. Execute the following in the working root directory.

$ gem install bundler
$ bundle init

If a file called Gemfile is generated, it is successful. Then edit the Gemfile as follows:

Gemfile

# frozen_string_literal: true

source "https://rubygems.org"

git_source(:github) {|repo_name| "https://github.com/#{repo_name}" }

gem "jekyll"

If you can, do the following:

$ bundle config set path 'vendor/bundle'
$ bundle install

I think that various files will increase in vendor / bundle, so keep an eye on it. (It takes a lot of time) When you're done, do the following:

$ bundle exec jekyll -v

If it returns as follows, it is successful.

jekyll x.x.x

Creating a Jekyll project

Create a Jekyll project. Run the following command:

$ bundle exec jekyll new . --force
$ bundle install

I've omitted it a little, but I think it will look like this.

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

This completes the project creation. Let's try it out. Run the following command:

$ bundle exec jekyll s
...Omission
...
 Auto-regeneration: enabled for '<path-to-project-folder>'
    Server address: http://127.0.0.1:4000/
  Server running... press ctrl-c to stop.

If it looks like this, you are successful. Let's try accessing http: // localhost: 4000 /. By default, the theme minima is applied, so you should already have a solid page generated.

By the way, jekyll is a static site generator, so running it will spit out the static site source code. If you look at / _site, you can see the source code of the spit site.

Try adding Jekyll Admin

Jekyll allows you to manage articles using a CMS-like admin screen by using a plugin (tool) called Jekyll Admin. It works without it, but it's relatively easy to understand, so let's introduce it.

Edit the gemfile.

Gemfile

source "https://rubygems.org"

gem "jekyll", "~> 4.0.1"

# ..Abbreviation..

group :jekyll_plugins do
  gem "jekyll-feed", "~> 0.12"
  gem "jekyll-admin" # <-add to
end

# ..Abbreviation..

gem "wdm", "~> 0.1.1", :install_if => Gem.win_platform?

If you have edited the Gemfile, you can install it by running the following command.

$ bundle install

Try running it again after you're done.

$ bundle exec jekyll s

Let's access http: // localhost: 4000 / admin.

If you see a screen like this, you are successful.

• Please be assured that you can access this screen only when you start the server by doing jekyll s in the local environment.

If you look at the post screen from the tab next to it, you can see the articles.

Try to add an article

Let's add an article as a trial. In Jekyll, you can add articles by adding md files under the / _posts directory, but you can also add articles from Jekyll Admin.

Jekyll Admin will also automatically create a file in / _ppsts in the end, so what you are actually doing is the same, but since it will automatically set and name the file, use Jekyll Admin at first. It may be better to do it.

This time I will add it via Jekyll Admin. You can add a new page by opening the posts page from the tab next to Jekyll Admin and pressing New Posts.

Enter a title in the title and write the content of the article in Body. Jekyll is basically written in markdown notation. There are a lot of articles about markdown, so I won't explain it here. It is like this.

Finally, when you're done, click "New metadata field" and type ** layout ** in the Key, Select "post".

This means using the post layout of the automatically installed theme (minima). I'll explain the details later, so it's okay to have a light feeling here that it's magic (a classic deception word).

When you're done, click Create. You'll see a button called View, and if you click on it, you'll see that the article has been added successfully.

It has also been added to the post on the top page.

For the time being, I was able to build the environment and create the project, so I think I'll go around here this time. At the moment, I'm still using the standard theme called minima, I want to design it as I like! I think there are many people who say that.

Many themes are published on GitHub etc., so it is a good idea to find the one you like. However, I must make it myself! I think there is also a place like that.

Next time, I'll explain how to create an article yourself. (I'll do my best to write!

See you next time!