2019/7/29 RELEASE:
- live2dのコンパイル方法を更新した👉ここ
ブログはNexT Themeに基づいて作ったもの.Simpleyytに感謝...
私のブログ:https://s-w-k.top/
環境の設定
Linuxでの実装過程を示す.(他のOSでの実装方法自分で調べなさい,使うものは同じから)
-
Ruby
apt install ruby ruby-dev
-
RubyGems
公式サイトからパッケージをダンロードして,解凍した後,ruby setup.rb
でインストール. -
NodeJS
apt install nodejs
-
Bundler
gem install bundler
-
以上で何らかのエーラーが出たら,ライブラリが完備していないかもしれない.その時
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
を編輯して,メニューを設定しましょう.
-
メニュー項目の設定,フォマットは
項目名:リンク
.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 -
メニュー項目のアイコンを設定,フォマットは
項目名:アイコン名
,アイコン名はここから調べられる.enable
の値をfalse
にすると,アイコンは消える.menu_icons: enable: true # Icon Mapping. home: home about: user categories: th tags: tags archives: archive
サイドバーの設定
デフォルトの場合,サイドバーは文章のページ(見出しがある時)でしか出ない.ポジションは右側._config.yml
を編輯することで,サイドバーのポジションと出現タイミングを変えられる.
- ポジション(
sidebar.position
)
-
left - 左寄り
-
right - 右寄り
P.S. ポジションの変更は Pisces Schemeのみで利用可能.
sidebar: position: left
-
サイドバーの出現タイミング(
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というサービスを利用することで,誰でも簡単に,而も無料でウェブサイトを作ることができる.
-
GitHubのアカウントを作る
-
リポジトリを新規に作成
リポジトリの名前は
自分のサイト名.github.io
-
Upload files
をクリックし,ブログのフォルダをアップロードする -
自分のサイト名.github.io
をブラウザに入力すれば,ブログは出てくるよ!今,このリンクをアクセスすれば,世界の誰でもあなたのブログを見ることができる!!!