TOC

Ubuntu 14.04でHexoを使用してブログを作成する方法

前書き

Hexoは、https：//www.digitalocean.com/community/tutorials/how-to-set-up-a-node-js-application-for-に構築された静的なブログフレームワークです。 production-on-ubuntu-14-04 [Node.js]。 Hexoを使用して、Markdownドキュメントをブログ投稿の形式で公開できます。 ブログの投稿とコンテンツは処理され、デフォルトまたはカスタムのテンプレートテーマファイルをソースとするHTML / CSSに変換されます（JekyllやGhostなどの他の静的ブログジェネレーターと同様）。 Hexoのソフトウェアはすべてモジュール式であるため、必要なものだけをインストールしてセットアップできます。

このチュートリアルでは、GitHubとNginxでサポートされる展開でHexoをセットアップします。

前提条件

このチュートリアルを実行するには、次のものが必要です。

  • https://www.digitalocean.com/community/tutorials/initial-server-setup-with-ubuntu-14-04 [この最初のサーバーセットアップガイド]。

  • サーバーにインストールされたGit。これは、https：//www.digitalocean.com/community/tutorials/how-to-installの「AptでGitをインストールする方法」および「Gitをセットアップする方法」セクションに従って実行できます。 -git-on-ubuntu-14-04 [このGitチュートリアル]。

  • サーバーにインストールされたNode.jsは、https：//www.digitalocean.com/community/tutorials/how-to-install-node-js-onの「NVMを使用してインストールする方法」セクションに従って設定できます。 -an-ubuntu-14-04-server＃how-to-install-using-nvm [このNode.jsチュートリアル]。

  • サーバーにインストールされたNginx。https：//www.digitalocean.com/community/tutorials/how-to-install-nginx-on-ubuntu-14-04-lts [このNginxチュートリアル]に従って設定できます。

  • GitHub上のアカウント。これはhttps://www.digitalocean.com/community/tutorial_series/introduction-to-git-installation-usage-and-branches[Git]リポジトリホストです。

手順1-Hexoのインストールと初期化

この最初のセクションには、Hexoをサーバーで稼働させるために必要なすべてが含まれています。

まず、システムパッケージが最新であることを確認します。

sudo apt-get update && sudo apt-get upgrade

いくつかのソフトウェアパッケージとコンポーネントがHexoブログフレームワークを構成しています。 ここでは、Node.jsパッケージマネージャーである `+ npm +`を使用して、2つの最も重要なものをプルダウンします。

最初の `+ hexo-cli +`は最も重要であり、コアのHexoコマンドを提供します。

npm install hexo-cli -g

2番目の `+ hexo-server +`は組み込みサーバーで、デプロイする前にブログのプレビューとテストに使用できます。

npm install hexo-server -g

さらに多くのパッケージが利用可能です。これらは、Hexoブログを立ち上げて実行するために必要な最低限の要素です。 npm searchでHexoフレームワークの一部として利用可能なパッケージを参照できます。

次に、新しいブログのベースファイルを設定する必要があります。 幸いなことに、Hexoはすべての基礎を1つのコマンドで実行します。 必要なのは、ブログ構成ファイルを保存するパスまたはフォルダーを指定することだけです。

便利なオプションは、ユーザーのホームディレクトリです。

hexo init ~/hexo_blog

1〜2秒以内に出力が得られます。

Output. . .

INFO  Copying data to ~/hexo_blog
INFO  You are almost done! Don't forget to run 'npm install' before you start blogging with Hexo!

. . .

次に、設定ファイルがあるディレクトリに移動します。

cd ~/hexo_blog

次に、前述のインストールコマンドを実行します。

npm install

`+ npm +`からのオプションの依存関係の警告は無視できます。 数秒の処理時間の後、基本構成ファイルが作成されます。

ステップ2-Hexoのメイン構成ファイルのセットアップ

Hexoディレクトリの基本設定ファイルを見てみましょう。

ls -l
Output-rw-rw-r--   1 sammy sammy 1483 Jan 11 12:30 _config.yml
drwxrwxr-x 191 sammy sammy 4096 Jan 11 12:31 node_modules
-rw-rw-r--   1 sammy sammy  442 Jan 11 12:30 package.json
drwxrwxr-x   2 sammy sammy 4096 Jan 11 12:30 scaffolds
drwxrwxr-x   3 sammy sammy 4096 Jan 11 12:30 source
drwxrwxr-x   3 sammy sammy 4096 Jan 11 12:30 themes

存在するすべてのファイルのうち、 `+ _config.yml +`ファイルが間違いなく最も重要です。 すべてのコア設定はここに保存され、ブログの中心です。 将来何かを微調整する必要がある場合は、このファイルに含まれている可能性があります。

次に、 `+ _config.yml `を1つずつ実行して、基本的なカスタマイズを設定します。 ` nano `または好みのテキストエディターで ` _config.yml +`を開きます。

nano _config.yml

ファイルの上部に、* Site *というラベルのセクションが表示されます。

オリジナルの〜/ hexo_blog / _config.yml

. . .

# Site
title: Hexo
subtitle:
description:
author: John Doe
language:
timezone:

. . .

最初の4行は、ブログの名前、適切なサブタイトル、説明、および著者名です。 これらのオプションには好きなものを選択できます。 すべてのHexoテーマがこのデータを表示するわけではないため、関連する場合はほとんどがサイトメタデータとして機能します。

次の2つのオプションは、言語とタイムゾーンです。 言語オプションは、https：//en.wikipedia.org/wiki/List_of_ISO_639-1_codes？oldformat = true [2文字のISO-639-1コード]のみを取ります。 タイムゾーンはデフォルトでサーバーのタイムゾーンに設定され、https：//en.wikipedia.org/wiki/List_of_tz_database_time_zones？oldformat = true [“ tz database”]のフォーマットを使用します。 これらのいずれかを変更する場合は、これらの形式であることを確認してください。

値の例をいくつか示します。

例〜/ hexo_blog / _config.yml

. . .

#Site
title:
subtitle:
description:
author:
language:
timezone:

. . .

次のセクションは* URL *セクションです。 ここで、URLオプションを変更します。 現在、サーバーのドメイン名がないため、ここで「+ url：+」設定の代わりにIPアドレスを入力できます。

〜/ hexo_blog / _config.yml

. . .

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

. . .

変更したい最後のオプションは、* Writing *セクションの少し下の `+ default_layout：+`です。 これにより、新しい投稿が下書きとして作成されるため、ブログWebサイトに表示される前に公開する必要があります。

以下のように、「+ draft +」に設定します。

〜/ hexo_blog / _config.yml

. . .

# Writing
new_post_name: :title.md # File name of new posts
default_layout:
titlecase: false # Transform title into titlecase

. . .

今のところファイルを保存して終了します。 チュートリアルの最後の方の展開段階について、このファイルに簡単に戻ります。

ステップ3-新しい投稿の作成と公開

投稿（または前に設定したように下書き）を作成するプロセスは、次のコマンドを発行することから始まります。* first-post *は作成する投稿の名前です。

hexo new

次のような出力が表示されるはずです。

OutputINFO  Created: ~/hexo_blog/source/_drafts/first-post.md

編集のために新しい投稿を開きます。

nano ~/hexo_blog/source/_drafts/first-post.md
すべての投稿にhttps://hexo.io/docs/front-matter.html[front-matter]を設定する必要があります。 _Front-matter_は、JSONまたはYAMLの短いブロックであり、投稿のタイトル、公開日、タグなどの設定を構成します。 前件の終わりは、最初の「+ --- 」または「 ;

+」マーカーで示されます。 フロントマテリアルの後、Markdown構文を使用してブログ投稿を書くことができます。

`+ first-post.md +`のデフォルトのコンテンツを、ファイル内の以下のオプション例に置き換えて、投稿を開始します。 必要に応じてカスタマイズできます。

例〜/ hexo_blog / source / _drafts / first-post.md

title: DigitalOcean's First Post
tags:
 - Test
 - Blog
categories:
 - Hexo
comments: true
date: 2015-12-31 00:00:00
---

## Markdown goes here.

**This is our first post!**

ファイルを保存して終了します。

作成したばかりのMarkdownファイルは、公開するまで `〜/ hexo_blog / source / _drafts +`内に保持されます。 ` _drafts +`フォルダー内の投稿は、Webサイトの訪問者には表示されません。

次に、訪問者がアクセスできるように投稿を公開します。

hexo publish first-post

これは次のようになります。

OutputINFO  Published: ~/hexo_blog/source/_posts/first-post.md

ブログのホスティングを開始すると、投稿が表示されるようになります。

ステップ4-テストサーバーの実行

これで、以前の構成ファイルが完成し、サンプルの投稿の準備ができました。 次に、テストサーバーを起動します。

hexo server

テストサーバーに強制的に `+ _drafts `フォルダーに投稿をレンダリングさせることができます。 これを行うには、最後のコマンドを発行するときに ` -d +`オプションを含めます。

テストサーバーが実行されたので、お気に入りのブラウザーで `+ http：//：4000 / +`にアクセスしてブログを表示できます。 Hexoの定義済みの「Hello World」テストポストと、作成したテストポストが表示されます。

image：https：//assets.digitalocean.com/articles/hexo/07hIfZs.png [DigitalOcean’s Hexo Blog Image]

ターミナルで「+ CTRL + C +」を押してテストサーバーを終了します。

テストサーバーは、ブログの変更や追加のプレビューに最適です。 外観に満足したら、Webに展開します。

ステップ5-Gitデプロイメントのセットアップ

Hexoでこれまでに行ったことを展開するためのさまざまな方法があります。 このチュートリアルのアプローチは、Gitを使用して静的ファイルを保存し、フックを使用してそれらを転送し、次にNginxを使用してホストすることです。 ただし、Heroku、Git、Rsync、OpenShift、FTPSyncなどのサポートが追加のフレームワークパッケージで提供されます。

続行するには、Hexoが生成する静的HTMLファイルを保存するGitリポジトリが必要です。 これを簡単にするために、GitHubが提供する公開Gitリポジトリを使用します。

https://help.github.com/articles/creating-a-new-repository/ [リポジトリ作成手順]に従って、https：//github.com/ [GitHub]に* hexo_static という名前の新しいリポジトリを作成します。 必ず「公開」オプションを選択し、 README *でこのリポジトリを初期化*チェックボックスをオンにしてください。

リポジトリを作成したら、メインのHexo構成ファイルを開いて編集します。

nano _config.yml

ファイルの下部に、* Deployment *というラベルのセクションがあります。

オリジナルの〜/ hexo_blog / _config.yml

. . .

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
 type:

以下に示すように、「+ deploy：」のオプションを入力します。 ` repo `行には、作成したGitリポジトリへのURLが含まれている必要があるため、 `+`を独自のGitHubアカウントのユーザー名に置き換えてください。

〜/ hexo_blog / _config.yml

deploy:
 type:

ファイルを保存して終了します。

展開にGitを使用することを選択したため、静的マークアップをGitリポジトリに送信するHexoパッケージが必要です。

`+ npm +`を使用してインストールしてください。

npm install hexo-deployer-git --save

`+ hexo_static +`リポジトリへの展開をテストし、最初のHexo自動コミットを与えることができます：

hexo generate && hexo deploy

プロンプトが表示されたら、GitHub認証の詳細を入力します。

これらのコマンドを使用した後、成功した出力は次のようになります（または類似したものです）。 ファイル生成とGit挿入を差し引いたもの：

OutputTo username
* [new branch]      master -> master
Branch master set up to track remote branch master from username
INFO  Deploy done: git

ステップ6-Nginxのセットアップ

Nginxは静的コンテンツを非常にうまく提供し、ブログには静的ファイルのみが含まれるため、基本的なNginx Webサーバーのセットアップを使用してHexoブログを提供します。 GitHubページやApacheなどのWebサーバーなど、正常に機能する他の実行可能なオプションもありますが、特にこの選択により、ホスティングの効率と個人制御がある程度保証されます。

まず、システムディレクトリを作成します。これは、Nginxにホスティングに使用するよう指示します。

sudo mkdir -p /var/www/hexo

次に、現在のUbuntuユーザーにこれらのWebサーバーシステムディレクトリの所有権を与えます。

sudo chown -R $USER:$USER /var/www/hexo

所有権に応じてhttps://www.digitalocean.com/community/tutorials/an-introduction-to-linux-permissions[permissions]を更新します。

sudo chmod -R 755 /var/www/hexo

編集のために + default + Nginxサーバーブロックを開きます。

sudo nano /etc/nginx/sites-available/default

コメントアウトされているファイルの領域と行を無視し、設定コードのアクティブな部分を変更して、 `+ root `ディレクティブが ` / var / www / hexo +`ディレクトリを指すようにします。

/ etc / nginx / sites-available / default

. . .

server {
   listen 80 default_server;
   listen [::]:80 default_server ipv6only=on;

   root ;
   index index.html index.htm;

. . .

ファイルを保存して終了します。 将来、このサーバーのドメイン名を設定した場合、このファイルに戻って、同じブロックの `+ server_name +`エントリを新しいドメイン名に置き換えます。

最後に、変更を有効にするためにNginxサービスを再起動します。

sudo service nginx restart

ステップ7-Gitフックの作成

この手順では、* hexo_static *リポジトリを別のGitリポジトリにリンクし、静的HTMLファイルをWebサーバーディレクトリに送信できるようにします（トリガーされた場合）。

最初に、新しい空のGitリポジトリーを初期化します（GitHub上ではありません）。 このリポジトリの唯一の目的は、 `+ hexo_static +`リポジトリのコンテンツをWebサーバーディレクトリに転送することです。

git init --bare ~/hexo_bare

Gitが生成した `+ hooks +`ディレクトリ内に新しいフックファイルを作成します。

nano ~/hexo_bare/hooks/post-receive

以下の2行のコードをファイルに追加します。 これは、Git作業ツリー（ソースコードが含まれる）およびGitディレクトリ（構成設定、履歴などが含まれる）を指定します。

〜/ hexo_bare / hooks / post-receive

#!/bin/bash

git --work-tree=/var/www/hexo --git-dir=/home/$USER/hexo_bare checkout -f

完了したら、ファイルを保存して終了します。

この `+ post-receive +`ファイルを実行可能にします。

chmod +x ~/hexo_bare/hooks/post-receive

ここで、ステップ5で作成した `+ hexo_static `デプロイメントリポジトリをサーバーに複製する必要があります。 この次のコマンドの「+」を自分のGitHubアカウントのユーザー名に置き換えてください。

git clone https://github.com//hexo_static.git ~/hexo_static

クローンされたリポジトリに移動します。

cd ~/hexo_static

最後に、以前のベアリポジトリを* live *という名前のGitリモートとして追加します。

git remote add live ~/hexo_bare

ステップ8-配置スクリプトの作成

短いシェルスクリプトを使用して、ここで設定した展開プロセス全体を開始およびトリガーできます。 つまり、複数のHexoコマンドを個別に実行したり、複数のコマンドでGitフックをトリガーしたりする必要はありません。

元のHexoブログディレクトリに戻り、デプロイスクリプト用のファイルを作成します。

cd ~/hexo_blog
nano hexo_git_deploy.sh

次のコードをファイルに貼り付けます。

hexo_blog / hexo_git_deploy.sh

#!/bin/bash

hexo clean
hexo generate
hexo deploy

( cd ~/hexo_static ; git pull ; git push live master )

ファイルを保存して終了します。

スクリプトには、3つの「+ hexo +」コマンドが含まれています。

  • `+ clean +`は、パブリックフォルダー内の以前に生成された静的ファイルを削除します。

  • `+ generate +`は、パブリックフォルダー内にマークダウンから静的なHTMLファイルを作成します。

  • `+ deploy `は、新しく生成された静的ファイルを、以前に ` _config.yml +`で定義した「ライブ」Gitリポジトリへのコミットとして送信します。

最後の行、 `（cd〜/ hexo_static; git pull; git push live master）`は、Gitフックをトリガーし、WebサーバーホスティングディレクトリをHTML静的ファイルで更新します。

ファイルが一杯になったら、必ず保存して終了してください。

この手順を完了するには、新しい展開スクリプトを実行可能にします。

chmod +x hexo_git_deploy.sh

手順9-展開スクリプトの実行

前の手順で作成した展開スクリプトを実行して、展開プロセス全体をテストします。

./hexo_git_deploy.sh

コマンドと処理が完了するのを待って、プロセスにGitHub認証の詳細を入力します。 それから、 `+ / var / www / hexo +`ディレクトリのファイルを見てください。

ls /var/www/hexo
Output2015  2016  archives  categories  css  fancybox  index.html  js  tags

これで、ウェブサーバーのディレクトリにブログのウェブサイトファイルが表示されます。つまり、ブラウザからウェブサーバーにアクセスすると、ブログに移動します。

お気に入りのブラウザーで「+ http：/// +」にアクセスして、ブログをライブで確認します（テストサーバーを使用しません）。

将来的に新しいブログの変更をデプロイするには、 `+ hexo_git_deploy.sh `スクリプトを再実行するだけです。 デプロイする前に、 ` hexo server `または ` hexo server -d +`コマンドでエラーの新しい投稿をテストすることを忘れないでください。

ステップ10-Hexoのファイルシステムを調べる（オプション）

このセクションはオプションであり、Hexoのファイルシステムの残りの背景を提供します。 このチュートリアルではこれらのファイルを変更または変更する必要はありませんが、将来それらを使用する場合は、各ファイルの一般的な目的を知っておくと便利です。

ファイルとディレクトリのレイアウトは次のようになります。

Hexo files and directories├── _config.yml
├── node_modules
├── package.json
├── scaffolds
├── source
|   └── _posts
└── themes

node_modules

このディレクトリには、ブログで使用するために、 `+ npm +`経由でダウンロードしたモジュールがHexoに保存されます。 このチュートリアルの最後には、ステップ1でダウンロードしたパッケージのみがあります。

Outputhexo  hexo-generator-archive  hexo-generator-category  hexo-generator-index  hexo-generator-tag  hexo-renderer-ejs  hexo-renderer-marked  hexo-renderer-stylus  hexo-server

これらのなじみのないモジュールの一部は、コアパッケージの一部としてバンドルされています。 通常、ここでファイルを変更または削除する必要はありません。

package.json

このJSONファイルには、Hexoがブログに使用するHexoパッケージの構成とバージョンが含まれています。

パッケージを*手動*で更新、ダウングレード、または削除する必要がある場合は、ここの値を変更することで実行できます。 通常、Hexo内で競合が発生した場合にのみこれを行う必要がありますが、これは比較的一般的ではありません。

足場

新しい投稿を作成するとき、Hexoは `+ scaffolds +`フォルダー内のテンプレートファイルに基づいて投稿を作成できます。

最初にテンプレートファイルを作成し、ここに配置して使用する必要があります。 この機能はオプションであり、今後のHexo投稿に繰り返しレイアウトが必要な場合にのみ必要です。

ソース

公開して公開する投稿は `+ _posts `に保持され、生成されると、 ` _drafts +`フォルダーと他のユーザーが作成したページもここに存在します。

ブログのMarkdownコンテンツの大部分は、これらのサブフォルダーの1つにあるHexoによってここに配置されます。

テーマ

ダウンロードしたカスタムテーマは、ここに保存する必要があります。 ほとんどのテーマには独自の `+ _config.yml +`ファイルがあり、同等の構成設定を保持しています。 このガイドでは、デフォルトのテーマを使用しました。

結論

Hexoには、このガイドで説明されていること以外にも多くのことがありますが、これは新しいブログサイトを構築するための良い出発点です。 Hexoのドキュメントは、詳細を知りたい場合に非常に簡潔です。 Hexoで利用可能なhttps://hexo.io/themes/ [カスタムテーマ]の1つをインストールすることを検討することは、ブログを開発するための次のステップです。

Related