Giter Club home page Giter Club logo

practice_jekyll2's Introduction

Jekyll学習2

概要

GitHub上で上手く表示されない問題とナビゲーションが上手く行かないのを修正できるように努める。

プロジェクト作成

$ jekyll new --skip-bundle .
#Gemfileを編集
#jekyllをコメントアウト
#github-pagesをアンコメントアウト
#webrickを追加
$ bundle install

上記で土台は完成。

しかし、いつもどおり見え方が変(GitHub上で)。

以下を参考に修正。

Gemfileを編集

gem "minima", github: "jekyll/minima"

_config.ymlを編集

plugins:
  - jekyll-remote-theme

remote-theme: jekyll/minima

これで再度確認する。(ローカルで確認しようとしたらbundle installせよと警告が出たので実行する。)
ローカルで実行すると少し見え方が変わった。(フッターとかボディ、フォントが変わった気がする)
→変化はなし。

確認したところjekyllのバージョンがふるいみたい。

$ bundle exec jekyll -v
3.9.2

最新は4.3.1なのでアップデートする。

$ gem update jekyll

これで最新になったとりあえず作り直す。

$ jekyll -v
jekyll 4.3.1

一応、上記の修正も加えておく。
変化はなし。

以下を読んでいて、プラグインを書いたがGemfileが変わっていないことに気づいたので追加。

gem 'jekyll-remote-theme', '~> 0.4.3'

上手く行ったので設定についてメモする。

設定について

設定についておおよそ以下の内容で問題なく動作できる。

$ jekyll new --skip-bundle .
$ echo "gem 'webrick', '~> 1.7'" >> Gemfile
$ vim Gemfile
# github-pagesの行をアンコメントアウト、jekyllの行をコメントアウト。
$ bundle install
$ vim _config.yml
# baseurlとurlを設定。今回の場合だと以下の通り
baseurl: "/practice_jekyll2" # the subpath of your site, e.g. /blog
url: "https://nagasaka-hiroki.github.io" # the base hostname & protocol for your site, e.g. http://example.com

前回の失敗の原因はチュートリアルのナビゲーションでデプロイしていたことが原因だと考えている。
→疑問は各ファイルでパーマリンクを書いた場合、ナビゲーションでどのようにそのリンクを参照するか?
直に全部打ち込んでも解決できるかもしれないが方法はないだろうか?
(推測:_config.ymlにlinkを記述。各ファイルではsite.link(書き方は現状曖昧) とか?そういった形で利用 & ymlのアンカー機能でyml間で参照するとかだろうか?)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.