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.

image.png

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

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.

image.png

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).

image.png

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.

image.png

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

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!

Recommended Posts

Jekyll super introduction starting from 0 # 1 --Environment construction
Jekyll Super Introduction # 2-Starting from 0-Creating your own theme
Scala starting from scratch (environment construction mac)
Introduction to Metabase ~ Environment Construction ~
[Super easy] Ruby environment construction
[Environment construction] Uninstall rails from local
Java EE 8 (using NetBeans IDE 8.2) starting from sample code Part 1 Environment construction
Introduction to Robot Battle with Robocode (Environment Construction)
IntelliJ starting from 1
[Java] Environment construction
Road to Java Engineer Part1 Introduction & Environment Construction
Java environment construction
[Spring] Environment construction
Introduction to kotlin for iOS developers ①-Environment construction
Docker environment construction
Ractor super introduction
Introduction to Slay the Spire Mod Development (2) Development Environment Construction
[Environment construction] Eclipse installation
[Flutter] Ubuntu 20.04 environment construction
Picture-in-picture starting from iOS14
Circle CI environment construction
java development environment construction
Groovy super easy introduction
From 0 to Ruby on Rails environment construction [macOS] (From Homebrew installation to Rails installation)