$ gem install jekyll
$ jekyll new hongkong-now
$ cd hongkong-now/
$ bundle install --path vendor/bundler
$ vi _config.yml

exclude:
  - vendor

上記設定を追加する。vendor内のmdファイルを読み込まないようにする為

※ 香港生活用のブログとしてhongkong-nowというプロジェクト名にしました

■ Jekyllのサーバーを起動

$ bundle exec jekyll serve

ブラウザで http://127.0.0.1:4000/ にアクセスすることで確認できます。以下の画像のような画面が表示されているかと思います。「Welcome to Jekyll!」というデフォルトの投稿が用意されていて、投稿の一覧＆詳細が見れるようになっています。デフォルトでは「theme: minima」というテーマのデザインが利用されています。

次は「minima」のスタイルをベースとして、独自のデザインにカスタマイズしていきます。今回はbulmaを使用します。

デザインが苦手な方は、Jekyllテーマを利用してみてください。

Jekyll themes (http://jekyllthemes.org/)
Jekyll themes (http://themes.jekyllrc.org/)
Jekyll Themes & Templates (https://jekyllthemes.io/)

Bulma をインストールして独自のスタイルに変更

まずは独自レイアウトにする為、"minima"で利用しているhtml, sass, jsなど静的ファイルをコピーします。
以下のコマンドで "minima"のフォルダを開きます。

$ open $(bundle show minima)

_includes, _layouts, _sass, assets フォルダをプロジェクトにコピーしてください。これでプロジェクト内の静的コンテンツを読みにいくようになります。

Bulmaはyarnを利用して管理したいと思います。

$ yarn init

個人の環境に合わせて初期化の設定を行ってください。

$ yarn add bulma
$ vi _config.yml

sass:
  load_paths:
    - _sass
    - node_modules

sassがnode_modulesを読み込むように、_config.ymlの設定を変更

exclude:
  - vendor
  - node_modules <-- 追加

jekyllからnode_modulesは読み込まない。

$ vi assets/main.scss

@import "bulma/bulma";
# @import "minima";

bulmaの読み込みを追加。minimaのスタイルは利用しないのでコメントアウト

これでbulmaの読み込みは完了です。
bulmaの公式サイト https://bulma.io/ を参考にしてデザインを適用していきます。

screen hk blog

今回は上のスクリーンショットののようなデザインに調整しました。

Githubでリポジトリを作成しPush

リポジトリ作成方法がわからない方は Githubに新規リポジトリ(Repository)を作成するを参考にしてください。

hongkong-nowフォルダにいる状態で

$ git init
$ git remote add origin [url]
$ git add .
$ git commit -m "Initial Commit"
$ git push -u origin master

Netlifyにデプロイ

Netlifyへアクセスして登録
ログイン後に「New site from Git」をクリック。GitHubへログインして対象リポジトリを選択

Github連携

ブランチ・ビルド時コマンド・公開するディレクトリを選択します．私の環境では以下の内容が自動的に入力されていました．
Deploy Siteをクリックしてサイトをデプロイします

Netlify Deploy

商用環境にする場合、Build commandを以下のように修正します。

$ jekyll build

↓

$ JEKYLL_ENV=production jekyll build

（環境変数にproductionを追加）

これでデプロイは完了です。割り振られたURLをブラウザで確認しましょう。

独自ドメインの設定

今回もfreenomから無料でドメインを作成し設定していきます。

Deploy settingsをクリック
Domain management -> Domainsを開き、add custom domainからドメインを追加します。

ドメイン設定

Custom domainの欄に独自ドメインを入力しSaveします．

ドメイン追加

Netlify DNSを利用するか、ドメインサービス側でCNAMEレコードを追加します。

SSL(Let's Encrypt)の設定

Let's Encryptを使用したSSLの設定が可能です。

Deploy settingsをクリック
Domain management -> HTTPSを開きます
Veryfy DNS configurationをクリックしたのち，Let's Encrypt certificateをクリックすると自動的に証明書の適用が行われます．

SSL設定1

SSL設定2

SSL設定3

発行したLet's Encryptによる証明書は自動的に更新が行われます．

これでブログのフロント側は終了です。続いては、Netlify CMSを利用して管理画面からコンテンツを投稿できるようにします。

Netlify CMSの設定

ローカル環境のプロジェクトディレクトリに戻り、プロジェクトトップでadminディレクトリを作成します。
adminディレクトリ内にindex.html config.ymlを作成します。

<!-- index.html -->
<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Content Manager</title>

  <!-- Include the styles for the Netlify CMS UI, after your own styles -->
  <link rel="stylesheet" href="https://unpkg.com/netlify-cms@^0.7.0/dist/cms.css" />

</head>
<body>
  <!-- Include the script that builds the page and powers Netlify CMS -->
  <script src="https://unpkg.com/netlify-cms@^0.7.0/dist/cms.js"></script>
</body>
</html>

# config.yml
backend:
  name: git-gateway
  branch: master # Branch to update (optional; defaults to master)

publish_mode: editorial_workflow # Editorial Workflow

media_folder: "images/uploads" # Media files will be stored in the repo under images/uploads

collections:
  - name: "post" # Used in routes, e.g. /admin/collections/blog
    label: "Post" # Used in the UI
    folder: "_posts" # The path to the folder where the documents are stored
    create: true # Allow users to create new documents in this collection
    slug: "{{year}}-{{month}}-{{day}}-{{slug}}" # Filename template i.e. YYYY-MM-DD-title.md
    fields: # The fields for each document, usually in front matter
      - {label: "Layout", name: "layout", widget: "hidden", default: "post"}
      - label: "Featured Image"
        name: "thumbnail"
        widget: "image"
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Categories", name: "categories", widget: "list", required: false}
      - {label: "Body", name: "body", widget: "markdown"}

CMSのwidgetsの詳細は、https://www.netlifycms.org/docs/widgets/ をご確認ください。

ファイルが作成できたらgithubにpushします。Netlifyのデフォルト設定では、auto deployに鳴っている為、githubにpushするだけでNetlify側にデプロイされます。

Netlify Identify の設定

Identity を有効にする

Deploy settings -> Identity -> Identity Configurationをクリック。
Enable identity instanceをクリック。

Idendity設定1

Registration preferencesにおいてはInvite onlyで、招待制にします。こちらは自由に設定してください。
External providersはGitHubを有効にします。

Identify設定2

Git Gatewayも同様にEnableにしておきます。

Identify設定3

Netlify Identity Widgetを設置

Build & Deploy -> Post processingをクリック。
Snippet injectionを開き，</head>直前にScriptを挿入します。

<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>

Spenit設定

動作を確認する

https://[自身のHOST]/admin/にアクセスして，Netlify CMSが正常に動作することを確認します。POSTから記事の投稿ができます。確認してみてください。

Netlify CMS1

Netlify CMS2

長くなりましたが以上となります。

今回の作成したサイトは ~~https://yapunyan.tk/~~ になります。
今後香港のことをどんどん投稿していきます。

修正（2018/10/19）

香港を紹介するブログに関しては、サンプルで作ったものなので閉鎖しました。

Nakamu Blog

ブログの構築について〜 Part2

[ 目次 ]

はじめに

最初に今回の成果物を・・・

Jekyllの環境構築

Bulma をインストールして独自のスタイルに変更

Githubでリポジトリを作成しPush

Netlifyにデプロイ

独自ドメインの設定

SSL(Let's Encrypt)の設定

Netlify CMSの設定

Netlify Identify の設定

Identity を有効にする

Netlify Identity Widgetを設置

動作を確認する

修正（2018/10/19）

Profile

Latest Posts

ブログの構築について 〜 Part2

[ 目次 ]

はじめに

最初に今回の成果物を・・・

Jekyllの環境構築

Bulma をインストールして独自のスタイルに変更

Githubでリポジトリを作成しPush

Netlifyにデプロイ

独自ドメインの設定

SSL(Let's Encrypt)の設定

Netlify CMSの設定

Netlify Identify の設定

Identity を有効にする

Netlify Identity Widgetを設置

動作を確認する

修正（2018/10/19）

Profile

Latest Posts

ブログの構築について〜 Part2