Edited at

Jekyllでブログを作る


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には3種類のSchemeがある:


  • Muse

  • Mist

  • Pisces

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

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


メニューの設定

メニューは3つの部分から構成されている,1つ目はメニュー項目(名称とリンク),2つ目は表示するテキスト,3つ目はメニュー項目に対応するアイコン.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をブラウザに入力すれば,ブログは出てくるよ!今,このリンクをアクセスすれば,世界の誰でもあなたのブログを見ることができる!!!