Ubuntu20.04 にJekyllインストールしてウェブサイト制作

Jekyllの記事を読んでいて、新規にテンプレートのようにサイトを作ることができることを知りました。
先にdockerを使っていたので、自分でdocker-compose.ymlを編集を試みたのですが、上手く行きませんでした。
そのため検索していたら、この記事を見つけました。

https://yiwkr.github.io/blog/2020-04-11-jekyll-server-with-docker

私がやりたいことを網羅していたので、早速試しました。
でも、Macがmakeコマンドのインストールを始めたので、諦めました。
ネット回線の問題もあり、諦めました。

## GitとJekyllのインストール
こちらの記事に従って進めました。

https://docs.github.com/ja/pages/setting-up-a-github-pages-site-with-jekyll/creating-a-github-pages-site-with-jekyll

https://git-scm.com/download/linux

https://jekyllrb.com/docs/installation/ubuntu/


### Gemfile 修正の注意点
```
 source "https://rubygems.org"
# Hello! This is where you manage which Jekyll version is used to run.
# When you want to use a different version, change it below, save the
# file and run `bundle install`. Run Jekyll with `bundle exec`, like so:
#
#     bundle exec jekyll serve
#
# This will help ensure the proper Jekyll version is running.
# Happy Jekylling!
gem "jekyll", "~> 4.2.2"
# This is the default theme for new Jekyll sites. You may change this to anything you like.
gem "minima", "~> 2.5"
# If you want to use GitHub Pages, remove the "gem "jekyll"" above and
# uncomment the line below. To upgrade, run `bundle update github-pages`.
# gem "github-pages", "~> GITHUB-PAGES-VERSION", group: :jekyll_plugins
# If you have any plugins, put them here!
group :jekyll_plugins do
  gem "jekyll-feed", "~> 0.12"
end

# Windows and JRuby does not include zoneinfo files, so bundle the tzinfo-data gem
# and associated library.
platforms :mingw, :x64_mingw, :mswin, :jruby do
  gem "tzinfo", "~> 1.2"
  gem "tzinfo-data"
end
```

:::note warn
一行目に＃をつけると、エラーが出てしまいます。
気をつけてください。

```
gem "jekyll", "~> 4.2.2"
```
＃を付けるのは、上記の行です。
:::

### 私は下記のエラーが出ますが、ビルドできました。

```
$ bundle install
Your RubyGems version (2.7.6)) has a bug that prevents `required_ruby_version` from working for Bundler. Any scripts that use `gem install bundler` will break as soon as Bundler drops support for your Ruby version. Please upgrade RubyGems to avoid future breakage and silence this warning by running `gem update --system 3.2.3`
Could not locate Gemfile
```
このコマンドを実行しました。
```bash
gem update --system 3.2.3`
```
でも、下記のエラーが出ました。

```
 uninitialized constant Gem::BasicSpecification (NameError)
```

この状態でも、ビルドできました。
![VirtualBox_Ubuntu0319_23_03_2022_20_55_29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20977/1059e298-b05c-b2c6-9785-d04c4f38c40f.png)


自動生成されたサイトの修正方法、テーマの変更方法は、こちらの記事が参考になります。

https://docs.github.com/ja/pages/setting-up-a-github-pages-site-with-jekyll/adding-content-to-your-github-pages-site-using-jekyll

https://tech.airis0.com/blog/jekyll-set-up/

## おまけ
### 私は、VSCODEで日本語入力できなかったので
下記の記事を参考にして、コマンドでインストールと実行をしました。


https://www.ninton.co.jp/archives/2403

コマンドを使ってインストールしたときは、
```bash
code
```
と入力するとVSCODEを起動できます。

## 記事を修正するときの注意点

```
description: >- # We'll be your cat's paw.
 私は、ウェブサイトを制作しています。私は、WordPressやDrupalなどのCMSを使うことが出来ます。
 このページは、Jekyllで作りました。私は、docker、VirtualBox、multipassなどの仮想化も学びスキルアップを続けています。
baseurl: "/mysite1" # the subpath of your site, e.g. /blog
```
この日本語の先頭ですが、半角で一文字分のスペースがあります。
このスペースがないと、":"が無いとエラーが出てしまいます。
記事を編集するときは、気をつけてください。

## ローカルからGitHubに接続するときの注意
ネットで見つかる記事の中には、ローカルからGitHubに接続するときに、ユーザー名とパスワードの説明になっている記事もあります。

ですが、現在は、パスワードの代わりに個人認証トークンが使われます。

https://docs.github.com/ja/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token

## 初回更新
```bash
git add .
git commit -m '変更理由'
git remote add origin https://github.com/ユーザー名/リポジトリ名.git
git push origin ブランチ名
```
この後ユーザー名のにゅう力と、個人認証トークンの入力を求められます。

２回目以降上記の流れを順番に進めるとエラーが、出ると思います。
```bash
git add .
git commit　　　　　＃入力できる画面が表示されます。
git push origin ブランチ名
```
のみで良いみたいです。

:::note warn
下記の表示が出て、プッシュできないときは、下記のGitHubで公開されている手順を行うと良いです。
```bash
Everything up-to-date
```
https://gist.github.com/shinchit/ad252fe86dda2f03eacc

:::

### コミットの書き方の勉強になりました。

https://suwaru.tokyo/%E3%80%90%E5%BF%85%E9%A0%88%E3%80%91git%E3%82%B3%E3%83%9F%E3%83%83%E3%83%88%E3%81%AE%E6%9B%B8%E3%81%8D%E6%96%B9%E3%83%BB%E4%BD%9C%E6%B3%95%E3%80%90prefix-emoji%E3%80%91/


## 　ローカルブラウザで確認する時

:::note warn
ディレクトリをサイトのフォルダの場所まで移動しておく。
ディレクトリを間違えると下記のエラーが出ます。
```bash
Could not locate Gemfile
```
:::

:::note warn
ビルドせずに進めると、このエラーが出ます。
```bash
Could not locate Gemfile or .bundle/ directory
```
:::

ローカルでテストするときは、この手順で進めてください。
```bash
cd hoge  #サイトのディレクトリに移動
bundle install
bundle exec jekyll serve  #ウェブサーバーが起動します。
```

:::note warn
エラーが出た時
fatal: remote origin already exists.
は、既にoriginが既にあるので、削除してください。
```bash
git remote rm origin
```
error: src refspec master does not match any.
は、
同じブランチの名前が、既にあるという意味のようです。
```bash
git branch
```
と入力して次に表示された名前で、登録を進めてください。


:::

:::note alert
画像などのフォルダを配置するときは、位置に注意
　_site の中にフォルダを追加すると、フォルダごとファイルが消えてしまいます。

![VirtualBox_Ubuntu0319_24_03_2022_02_59_45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20977/698ef689-f21e-65f1-c522-9eb03fadb577.png)
このような配置の方が、安全だと思います。


:::


##　公開したWebページ

取り急ぎ公開したので、地道に更新を続けます。


https://miracle777.github.io/mysite1/