Jekyllでブログを作る

11581 ワード
Blog Jekyll github-pages フロントエンド GitHub GitHub テキストリンク

2019/7/29 RELEASE:
- live2dのコンパイル方法を更新した👉ここ

ブログはNexT Themeに基づいて作ったもの．Simpleyytに感謝...
私のブログ：https://s-w-k.top/

環境の設定

Linuxでの実装過程を示す．（他のOSでの実装方法自分で調べなさい，使うものは同じから）

  1. Ruby 

      apt install ruby ruby-dev

  2. RubyGems
    公式サイトからパッケージをダンロードして，解凍した後，ruby setup.rbでインストール．

  3. NodeJS 

      apt install nodejs

  4. Bundler

      gem install bundler

  5. 以上で何らかのエーラーが出たら，ライブラリが完備していないかもしれない．その時

      apt install build-essential patch ruby-dev zlib1g-dev

ブログの設定

まず，NexT Themeをパソコンにgit clone：

git clone https://github.com/Simpleyyt/jekyll-theme-next.git
cd jekyll-theme-next

依存をインストール：

bundle install

Jekyllを実行：

bundle exec jekyll server

この時，ブラウザでhttp://localhost:4000にアクセスしたら，以下の画面が見えるはず，おめでとう！ブログの作成もう完了~

後は自分らしいのものに加工して，GitHubに載せるだけ．

Theme設定

Schemeを選択

SchemeはNexTが提供している特性の一つで，Schemeを通して，NexTは様々な外観テーマを提供している．今，NexTには３種類のSchemeがある：

  • Muse
  • Mist
  • Pisces

このブログの外観テーマはMuseで，他の２つのテーマは自分で変えてみて，好きなものを選べればいい．

Schemeの変更はフォルダにある_config.ymlをいじればいい，schemeを検索して，対応するセッティングを見える．使用したいScheme前のコメントを消せばOK．

#scheme: Muse
#scheme: Mist
scheme: Pisces

言語の設定

NexTは多様な言語をサポートしている．_config.ymlを編輯することで，言語サポートを指定する．例えば，日本語にしたい場合は，以下のように設定：

language: ja

今NexTが対応している言語は下表に示す：

言語 コード 設定例
English en language: en
简体中文 zh-Hans language: zh-Hans
Français fr-FR language: fr-FR
Português pt language: pt or language: pt-BR
繁體中文 zh-hk 或者 zh-tw language: zh-hk
Русский язык ru language: ru
Deutsch de language: de
日本語 ja language: ja
Indonesian id language: id
Korean ko language: ko

メニューの設定

メニューは３つの部分から構成されている，１つ目はメニュー項目（名称とリンク），２つ目は表示するテキスト，３つ目はメニュー項目に対応するアイコン．NexTは Font Awesomeのアイコンを利用しており，600+のアイコンを提供し，ほとんどの使用シーンをカバーできると同時に，アイコンがRetinaスクリンでのぼやける問題も心配する必要がない．

_config.ymlを編輯して，メニューを設定しましょう．

  1. メニュー項目の設定，フォマットは項目名:リンク.

    menu:
  home: /
  archives: /archives
  #about: /about
  #categories: /categories
  tags: /tags
  #commonweal: /404.html

    Nextにあるデフォルトの項目は以下に示す：

    Key 設定値 表示するテキスト（日本語）
    home home: / ホーム
    archives archives: /archives アーカイブ
    categories categories: /categories カテゴリ
    tags tags: /tags タグ
    about about: /about About

  2. メニュー項目のアイコンを設定，フォマットは項目名：アイコン名，アイコン名はここから調べられる．enableの値をfalseにすると，アイコンは消える．

    menu_icons:
  enable: true
  # Icon Mapping.
  home: home
  about: user
  categories: th
  tags: tags
  archives: archive

サイドバーの設定

デフォルトの場合，サイドバーは文章のページ（見出しがある時）でしか出ない．ポジションは右側．_config.ymlを編輯することで，サイドバーのポジションと出現タイミングを変えられる．

  1. ポジション（sidebar.position）

    • left - 左寄り
    • right - 右寄り

    P.S. ポジションの変更は Pisces Schemeのみで利用可能．

     sidebar:
 position: left

  2. サイドバーの出現タイミング（sidebar.display）

    • post - デフォルト，文章のページ（見出しがある時）で現れる
    • always - 全てのページで現れる
    • hide - 全てのベージで隠れる（クリックで展開できる）
    • remove - 完全削除
     sidebar:
 display: post

    P.S サイドバーはuse motion: false（サイトのアニメーションを利用しない）の場合，出現しない．

プロフィール画像の設定

_config.ymlをオープン，avatarのところを編輯する．画像のリンクはインタネットのリンクでもいいし，サイト内のリンクでもいい：

リンク 値
インタネットのurl http://example.com/avatar.png
サイト内のリンク 画像を assets/images/ のフォルダに置く， 設定は：avatar: /assets/images/avatar.png

プロフィール画像の設定例：

avatar: http://example.com/avatar.png

作者のニックネームの設定

_config.ymlにあるauthorをほしいニックネームに設定する．

サイトの紹介

_config.ymlにあるdescriptionのところに，サイトの紹介を書く．好きな座右の銘を書いても構わない :)

サードパーティのサービス

NexTに様々なサードパーティのサービス（コメントとか字数の統計とか）が統合されてある．自分の必要に応じて，_config.ymlをいじってください．

Live2Dの追加

私のブログを見た方々は，この左下の子に気づいたでしょう．この子はlive2dという技術で作られた子で，サイトに追加する過程がちょっと複雑で，他の記事に書く．

GitHubにアップロード

さあ，どうやって自分のブログをインタネットを通して他の人に見せるの？

サーバーに載せればいい．しかし，サーバーはどうやって入手する？自分で作るかクラウドサーバーを買う．どれも時間とお金をかかる面倒くさい作業．幸いなことに，GitHubでGitHub Pagesというサービスを利用することで，誰でも簡単に，而も無料でウェブサイトを作ることができる．

  1. GitHubのアカウントを作る

  2. リポジトリを新規に作成

    リポジトリの名前は自分のサイト名.github.io

  3. Upload filesをクリックし，ブログのフォルダをアップロードする

  4. 自分のサイト名.github.ioをブラウザに入力すれば，ブログは出てくるよ！今，このリンクをアクセスすれば，世界の誰でもあなたのブログを見ることができる！！！