Powered by SmartDoc
<< JelyllでWebページを作る/テーマからカスタムページを作る/理想的なテーマ/Gem ベーステーマを元にしたカスタムページ >>

5.2.2 Gem ベーステーマを元にしたカスタムページ

  1. Gemベーステーマを作る

    　Gem パッケージから Gem ベーステーマの FreeBSD パッケージを作る

    1. GemパッケージをDISTFILESへコピー

      # cp ~guest/agency-jekyll-theme/jekyll-theme-agency-1.1.0.gem /var/ports/distfiles/rubygem
#

    2. ベースとなるスケルトン(textproc/rubygem-minima)をコピー

      root@t:/home/guest # cd /var/ports/jdtpkxb/textproc/
root@t:/var/ports/jdtpkxb/textproc # cpdup /usr/ports/textproc/rubygem-minima rubygem-jekyll-theme-agency

    3. rubygem-jekyll-theme-agency用に変更
      • Makefileの変更点は以下の4つ
        • PORTNAME⇒jekyll-theme-agency
        • PORTVERSION⇒1.1.0 (*.gemspecのバージョンに合わせる)
        • COMMENT⇒"Bootstrap Agency ported to Jekyll" (*.gemspecのサマリーから拝借)
        • LICENSE⇒MIT (*.gemspecのライセンスに合わせる)

      • distinfoを作り直す

        root@t:/var/ports/jdtpkxb/textproc/rubygem-jekyll-theme-agency # rm distinfo 
root@t:/var/ports/jdtpkxb/textproc/rubygem-jekyll-theme-agency # make makesum

    4. Gemパッケージを作成＆インストール

      # make package install
#

      • Gemパッケージは/usr/local/lib/ruby/gems/2.7/gems/jekyll-theme-agency-1.1.0/*にインストールされる

        root@t:/var/ports/jdtpkxb/textproc/rubygem-jekyll-theme-agency # pkg info -l rubygem-jekyll-theme-agency-1.1.0
rubygem-jekyll-theme-agency-1.1.0:
        /usr/local/lib/ruby/gems/2.7/gems/jekyll-theme-agency-1.1.0/404.html
        /usr/local/lib/ruby/gems/2.7/gems/jekyll-theme-agency-1.1.0/LICENSE.txt
        /usr/local/lib/ruby/gems/2.7/gems/jekyll-theme-agency-1.1.0/README.md
        /usr/local/lib/ruby/gems/2.7/gems/jekyll-theme-agency-1.1.0/_data/navigation.yml
        /usr/local/lib/ruby/gems/2.7/gems/jekyll-theme-agency-1.1.0/_data/sitetext.yml
        /usr/local/lib/ruby/gems/2.7/gems/jekyll-theme-agency-1.1.0/_data/style.yml
        /usr/local/lib/ruby/gems/2.7/gems/jekyll-theme-agency-1.1.0/_includes/about.html
        /usr/local/lib/ruby/gems/2.7/gems/jekyll-theme-agency-1.1.0/_includes/clients.html
        /usr/local/lib/ruby/gems/2.7/gems/jekyll-theme-agency-1.1.0/_includes/contact.html
        /usr/local/lib/ruby/gems/2.7/gems/jekyll-theme-agency-1.1.0/_includes/footer.html
        /usr/local/lib/ruby/gems/2.7/gems/jekyll-theme-agency-1.1.0/_includes/head.html
        /usr/local/lib/ruby/gems/2.7/gems/jekyll-theme-agency-1.1.0/_includes/modals.html
        /usr/local/lib/ruby/gems/2.7/gems/jekyll-theme-agency-1.1.0/_includes/nav.html
        /usr/local/lib/ruby/gems/2.7/gems/jekyll-theme-agency-1.1.0/_includes/navheader.html
        /usr/local/lib/ruby/gems/2.7/gems/jekyll-theme-agency-1.1.0/_includes/portfolio_grid.html
        /usr/local/lib/ruby/gems/2.7/gems/jekyll-theme-agency-1.1.0/_includes/services.html
        /usr/local/lib/ruby/gems/2.7/gems/jekyll-theme-agency-1.1.0/_includes/team.html
        /usr/local/lib/ruby/gems/2.7/gems/jekyll-theme-agency-1.1.0/_includes/timeline.html
        /usr/local/lib/ruby/gems/2.7/gems/jekyll-theme-agency-1.1.0/_layouts/default.html
        /usr/local/lib/ruby/gems/2.7/gems/jekyll-theme-agency-1.1.0/_layouts/home.html
        /usr/local/lib/ruby/gems/2.7/gems/jekyll-theme-agency-1.1.0/_layouts/page.html
        /usr/local/lib/ruby/gems/2.7/gems/jekyll-theme-agency-1.1.0/_sass/base/_mixins.scss
        /usr/local/lib/ruby/gems/2.7/gems/jekyll-theme-agency-1.1.0/_sass/base/_page.scss
        /usr/local/lib/ruby/gems/2.7/gems/jekyll-theme-agency-1.1.0/_sass/base/_variables.scss
        /usr/local/lib/ruby/gems/2.7/gems/jekyll-theme-agency-1.1.0/_sass/components/_buttons.scss
        /usr/local/lib/ruby/gems/2.7/gems/jekyll-theme-agency-1.1.0/_sass/components/_navbar.scss
        /usr/local/lib/ruby/gems/2.7/gems/jekyll-theme-agency-1.1.0/_sass/components/client-scroll.scss
        /usr/local/lib/ruby/gems/2.7/gems/jekyll-theme-agency-1.1.0/_sass/layout/_contact.scss
        /usr/local/lib/ruby/gems/2.7/gems/jekyll-theme-agency-1.1.0/_sass/layout/_footer.scss
        /usr/local/lib/ruby/gems/2.7/gems/jekyll-theme-agency-1.1.0/_sass/layout/_masthead.scss
        /usr/local/lib/ruby/gems/2.7/gems/jekyll-theme-agency-1.1.0/_sass/layout/_portfolio.scss
        /usr/local/lib/ruby/gems/2.7/gems/jekyll-theme-agency-1.1.0/_sass/layout/_services.scss
        /usr/local/lib/ruby/gems/2.7/gems/jekyll-theme-agency-1.1.0/_sass/layout/_team.scss
        /usr/local/lib/ruby/gems/2.7/gems/jekyll-theme-agency-1.1.0/_sass/layout/_timeline.scss
        /usr/local/lib/ruby/gems/2.7/gems/jekyll-theme-agency-1.1.0/assets/css/agency.scss
        /usr/local/lib/ruby/gems/2.7/gems/jekyll-theme-agency-1.1.0/assets/css/all.min.css
        /usr/local/lib/ruby/gems/2.7/gems/jekyll-theme-agency-1.1.0/assets/css/bootstrap.min.css
        /usr/local/lib/ruby/gems/2.7/gems/jekyll-theme-agency-1.1.0/assets/css/bootstrap.min.css.map
        /usr/local/lib/ruby/gems/2.7/gems/jekyll-theme-agency-1.1.0/assets/css/webfonts/fa-brands-400.eot
        /usr/local/lib/ruby/gems/2.7/gems/jekyll-theme-agency-1.1.0/assets/css/webfonts/fa-brands-400.svg
        /usr/local/lib/ruby/gems/2.7/gems/jekyll-theme-agency-1.1.0/assets/css/webfonts/fa-brands-400.ttf
        /usr/local/lib/ruby/gems/2.7/gems/jekyll-theme-agency-1.1.0/assets/css/webfonts/fa-brands-400.woff
        /usr/local/lib/ruby/gems/2.7/gems/jekyll-theme-agency-1.1.0/assets/css/webfonts/fa-brands-400.woff2
        /usr/local/lib/ruby/gems/2.7/gems/jekyll-theme-agency-1.1.0/assets/css/webfonts/fa-regular-400.eot
        /usr/local/lib/ruby/gems/2.7/gems/jekyll-theme-agency-1.1.0/assets/css/webfonts/fa-regular-400.svg
        /usr/local/lib/ruby/gems/2.7/gems/jekyll-theme-agency-1.1.0/assets/css/webfonts/fa-regular-400.ttf
        /usr/local/lib/ruby/gems/2.7/gems/jekyll-theme-agency-1.1.0/assets/css/webfonts/fa-regular-400.woff
        /usr/local/lib/ruby/gems/2.7/gems/jekyll-theme-agency-1.1.0/assets/css/webfonts/fa-regular-400.woff2
        /usr/local/lib/ruby/gems/2.7/gems/jekyll-theme-agency-1.1.0/assets/css/webfonts/fa-solid-900.eot
        /usr/local/lib/ruby/gems/2.7/gems/jekyll-theme-agency-1.1.0/assets/css/webfonts/fa-solid-900.svg
        /usr/local/lib/ruby/gems/2.7/gems/jekyll-theme-agency-1.1.0/assets/css/webfonts/fa-solid-900.ttf
        /usr/local/lib/ruby/gems/2.7/gems/jekyll-theme-agency-1.1.0/assets/css/webfonts/fa-solid-900.woff
        /usr/local/lib/ruby/gems/2.7/gems/jekyll-theme-agency-1.1.0/assets/css/webfonts/fa-solid-900.woff2
        /usr/local/lib/ruby/gems/2.7/gems/jekyll-theme-agency-1.1.0/assets/img/clients/creative-market.jpg
        /usr/local/lib/ruby/gems/2.7/gems/jekyll-theme-agency-1.1.0/assets/img/clients/designmodo.jpg
        /usr/local/lib/ruby/gems/2.7/gems/jekyll-theme-agency-1.1.0/assets/img/clients/envato.jpg
        /usr/local/lib/ruby/gems/2.7/gems/jekyll-theme-agency-1.1.0/assets/img/clients/themeforest.jpg
        /usr/local/lib/ruby/gems/2.7/gems/jekyll-theme-agency-1.1.0/assets/img/contact.png
        /usr/local/lib/ruby/gems/2.7/gems/jekyll-theme-agency-1.1.0/assets/img/header.png
        /usr/local/lib/ruby/gems/2.7/gems/jekyll-theme-agency-1.1.0/assets/img/portfolio/04-thumbnail.jpg
        /usr/local/lib/ruby/gems/2.7/gems/jekyll-theme-agency-1.1.0/assets/img/portfolio/05-thumbnail.jpg
        /usr/local/lib/ruby/gems/2.7/gems/jekyll-theme-agency-1.1.0/assets/img/portfolio/06-thumbnail.jpg
        /usr/local/lib/ruby/gems/2.7/gems/jekyll-theme-agency-1.1.0/assets/img/team/2.jpg
        /usr/local/lib/ruby/gems/2.7/gems/jekyll-theme-agency-1.1.0/assets/img/team/500x500.jpg
        /usr/local/lib/ruby/gems/2.7/gems/jekyll-theme-agency-1.1.0/assets/img/timeline/1.jpg
        /usr/local/lib/ruby/gems/2.7/gems/jekyll-theme-agency-1.1.0/assets/img/timeline/2.jpg
        /usr/local/lib/ruby/gems/2.7/gems/jekyll-theme-agency-1.1.0/assets/img/timeline/3.jpg
        /usr/local/lib/ruby/gems/2.7/gems/jekyll-theme-agency-1.1.0/assets/img/timeline/4.jpg
        /usr/local/lib/ruby/gems/2.7/gems/jekyll-theme-agency-1.1.0/assets/js/agency.min.js
        /usr/local/lib/ruby/gems/2.7/gems/jekyll-theme-agency-1.1.0/assets/js/bootstrap.bundle.min.js
        /usr/local/lib/ruby/gems/2.7/gems/jekyll-theme-agency-1.1.0/assets/js/bootstrap.bundle.min.js.map
        /usr/local/lib/ruby/gems/2.7/gems/jekyll-theme-agency-1.1.0/assets/js/contact_me.js
        /usr/local/lib/ruby/gems/2.7/gems/jekyll-theme-agency-1.1.0/assets/js/jqBootstrapValidation.js
        /usr/local/lib/ruby/gems/2.7/gems/jekyll-theme-agency-1.1.0/assets/js/jquery.easing.min.js
        /usr/local/lib/ruby/gems/2.7/gems/jekyll-theme-agency-1.1.0/assets/js/jquery.min.js
        /usr/local/lib/ruby/gems/2.7/gems/jekyll-theme-agency-1.1.0/index.md
        /usr/local/lib/ruby/gems/2.7/gems/jekyll-theme-agency-1.1.0/legal.md
        /usr/local/lib/ruby/gems/2.7/specifications/jekyll-theme-agency-1.1.0.gemspec
        /usr/local/share/licenses/rubygem-jekyll-theme-agency-1.1.0/LICENSE
        /usr/local/share/licenses/rubygem-jekyll-theme-agency-1.1.0/MIT
        /usr/local/share/licenses/rubygem-jekyll-theme-agency-1.1.0/catalog.mk
root@t:/var/ports/jdtpkxb/textproc/rubygem-jekyll-theme-agency #

  2. カスタムページを作る

    1. 新たにカスタムディレクトリを掘る

      kiri@smtp:~/projects/jekyll/agency-jekyll-theme[1078]% mkdir -p ../custompages/openagr.org
kiri@smtp:~/projects/jekyll/agency-jekyll-theme[1079]%

    2. 変更部分だけをカスタムディレクトリにコピー
      • *index.{html,md}は変更の有無にかかわらず必ずコピー

      • その他は基本的にgemパッケージに無いものは全てコピーする

        kiri@smtp:~/projects/jekyll/agency-jekyll-theme[1079]% cp _index.md _config.yml ../custompages/openagr.org
kiri@smtp:~/projects/jekyll/agency-jekyll-theme[1079]% cp -R _data _portfolio ../custompages/openagr.org
kiri@smtp:~/projects/jekyll/agency-jekyll-theme[1079]% mkdir -p ../custompages/openagr.org/assets/img
kiri@smtp:~/projects/jekyll/agency-jekyll-theme[1079]% cp assets/img/openagr.png ../custompages/openagr.org/assets/img/

    3. Gemベーステーマを参照するように設定

      • _config.ymlのthemeキーにGemベーステーマ名をセット

        kiri@smtp:~/projects/jekyll/custompages/openagr.org[1080]% diff -u ../../agency-jekyll-theme/_config.yml _config.yml 
--- ../../agency-jekyll-theme/_config.yml       2022-07-28 09:35:10.049498000 +0900
+++ _config.yml 2022-08-01 16:13:57.395972000 +0900
@@ -11,7 +11,7 @@
 # You can create any custom variable you would like, and they will be accessible
 # in the templates via {{ site.myvariable }}.
 
-theme: jekyll-agency
+theme: jekyll-theme-agency
 
 url    : "" # the base hostname & protocol for your site, e.g. http://example.com
 baseurl: "" # the subpath of your site, e.g. /blog
kiri@smtp:~/projects/jekyll/custompages/openagr.org[1081]%

      • Gemfileでテーマgemをセット

        kiri@smtp:~/projects/jekyll/custompages/openagr.org[1081]% diff -u ../../agency-jekyll-theme/Gemfile Gemfile
--- ../../agency-jekyll-theme/Gemfile   2022-07-27 16:31:59.734716000 +0900
+++ Gemfile     2022-08-01 16:20:33.592458000 +0900
@@ -1,7 +1 @@
-#after any changes to the Gemfile, execute bundle update!
-source "https://rubygems.org"
-gemspec
-
-# Delete the following lines if not on Windows: 
-# Performance-booster for watching directories on Windows
-gem "wdm", ">= 0.1.0" if Gem.win_platform?
+gem "jekyll-theme-agency"
kiri@smtp:~/projects/jekyll/custompages/openagr.org[1082]%

    4. テストサイトにカスタムページをコピー

      kiri@smtp:~/projects/jekyll/custompages[1083]% scp -r openagr.org guest@t:~/

    5. カスタムサイトを立ち上げる

      guest@t:~/openagr.org % cd $HOME/openagr.org
guest@t:~/openagr.org % bundle exec jekyll serve -Ht.truefc.org -P8080
Configuration file: /home/guest/openagr.org/_config.yml
            Source: /home/guest/openagr.org
       Destination: /home/guest/openagr.org/_site
 Incremental build: disabled. Enable with --incremental
      Generating... 
                    done in 0.256 seconds.
  Please add the following to your Gemfile to avoid polling for changes:
    require 'rbconfig'
    if RbConfig::CONFIG['target_os'] =~ /(?i-mx:bsd|dragonfly)/
      gem 'rb-kqueue', '>= 0.2'
    end
 Auto-regeneration: enabled for '/home/guest/openagr.org'
    Server address: http://t.truefc.org:8080/
  Server running... press ctrl-c to stop.
%

<< JelyllでWebページを作る/テーマからカスタムページを作る/理想的なテーマ/Gem ベーステーマを元にしたカスタムページ >>