静的サイトジェネレータ Jekyll on Ubuntu

tk-fuse · 2023 年 7 月 3 日午前 3:56

静的サイトジェネレータJekyll

インストールする前に以下のパッケージをインストール

$ sudo apt-get install ruby-full build-essential zlib1g-dev

ユーザ環境にgemsをインストール

Avoid installing RubyGems packages (called gems) as the root user. Instead, set up a gem installation directory for your user account. The following commands will add environment variables to your ~/.bashrc file to configure the gem installation path:

$ echo '# Install Ruby Gems to ~/gems' >> ~/.bashrc
$ echo 'export GEM_HOME="$HOME/gems"' >> ~/.bashrc
$ echo 'export PATH="$HOME/gems/bin:$PATH"' >> ~/.bashrc
$ source ~/.bashrc

jekyll, bundlerのインストール

$ gem install jekyll bundler

Bundler
https://bundler.io/

tk-fuse · 2023 年 7 月 3 日午前 7:13

Jekyllにより作成されるプロジェクトはローカルマシンから簡単に公開できますが、プロジェクトをGitHubのレポジトリとして登録し、GitHubが無償で提供しているサイト公開サービスGitHub Pagesで公開することも出来ます。但し、GitHub Pagesを利用する場合、レポジトリの名称を username.github.io とする必要があります。

username: GitHubのユーザ名または組織名

Jekyllにより作成されたプロジェクトをGitHubで公開するまでの作業フロー

GitHubページでレポジトリ username.github.io を作成

ローカルマシン上でJekyllにより新規プロジェクト username.github.io を作成

$ jekyll new username.github.io

インストールされたファイル・フォルダ群

$ tree username.github.io
./
├── 404.html
├── Gemfile
├── Gemfile.lock
├── README.md
├── _config.yml
├── _posts
│   └── 2023-07-03-welcome-to-jekyll.markdown
├── _site
│   ├── 404.html
│   ├── README.md
│   ├── about
│   │   └── index.html
│   ├── assets
│   │   ├── main.css
│   │   └── minima-social-icons.svg
│   ├── feed.xml
│   ├── index.html
│   └── jekyll
│       └── update
│           └── 2023
│               └── 07
│                   └── 03
│                       └── welcome-to-jekyll.html
├── about.markdown
└── index.markdown

9 directories, 16 files

プロジェクトフォルダへ移動しサーバ起動

$ cd username.github.io
$ bundle exec jekyll serve

ローカルアドレスの以下のポートで表示を確認。

http://localhost:4000

GitHubで公開

プロジェクトをGitHubへプッシュする前に Gemfile を編集します。

gem "jekyll" で始まる行の先頭に「#」を追加して行をコメントアウトします。
# gem "github-pages" で始まる行を編集して、github-pages gem を追加します。行を次のように変更します。

gem "github-pages", "~> GITHUB-PAGES-VERSION", group: :jekyll_plugins

GITHUB-PAGES-VERSION を、サポートされる最新バージョンの github-pages gem で置き換えます。このバージョンは、「依存関係のバージョン」にあります。正しいバージョンの Jekyll が、github-pages gem の依存関係としてインストールされます。

Gemfile

.....
.....
# gem "jekyll", "~> 4.3.2"
.....
.....
gem "github-pages", "~> 228", group: :jekyll_plugins
.....
.....

コマンドラインから bundle install を実行

$ bundle install

ローカルホストで動作チェック

$ bundle exec jekyll serve

エラーが発生した場合には $ bundle add webrick を実行して下さい。

GitHubへプッシュ

Gitコマンド

$ git init
$ git add .
$ git commit -m "first commit"
$ git branch -M main
$ git remote add origin git@github.com:username/username.github.io.git
$ git push -u origin main

GitHubのレポジトリページで以下を確認・設定します。