Ubuntu14.04でHexoを使用してブログを開始する方法

前書き ＃＃

[ Hexo]（https://hexo.io/）は、Node.jsに基づく静的なブログフレームワークです。 Hexoを使用すると、マークダウンドキュメントをブログ投稿の形式で公開できます。ブログの投稿とコンテンツは処理され、HTML / CSSに変換されます。これは、デフォルトまたはカスタムのテンプレートテーマファイルから取得されます（JekyllやGhostなどの他の静的ブログジェネレーターと同様）。 Hexoのすべてのソフトウェアはモジュール式であるため、必要なものを正確にインストールしてセットアップできます。

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

準備 ＃＃

このチュートリアルに従うには、次のものが必要です。

• sudo権限を持つ非ルートユーザーUbuntu14.04 Tencent Cloud [CVM]（https://cloud.tencent.com/product/cvm?from=10680）。 （ sudoコマンドを使用できる非rootアカウントのUbuntu サーバーが必要で、ファイアウォールがオンになっています。サーバーを持っていない学生はここで購入できます（https://cloud.tencent.com/product/cvm?from=10680）が、個人的にはお勧めします無料のTencentCloud [Developer Lab]（https://cloud.tencent.com/developer/labs?from=10680）を使用して実験し、インストールを学習した後、[サーバーを購入]（https://cloud.tencent.com/product/cvm?from=10680）します。）
• サーバーにGitをインストールします
• Node.jsをサーバーにインストールします
• サーバーにNginxをインストールします
• [ ]（Https://github.com/）GitリポジトリホストであるGitHubのアカウント。

**ステップ1-Hexo **をインストールして初期化します##

この最初の部分には、Hexoをサーバー上で稼働させるために必要なすべてのものが含まれています。

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

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

いくつかのソフトウェアパッケージとコンポーネントがHexoブログフレームワークを構成しています。ここでは、 npmNode.jsパッケージマネージャーを使用して、最も基本的な2つのパッケージマネージャーをダウンロードします。

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

npm install hexo-cli -g

2番目の hexo-serverは、展開前にブログをプレビューおよびテストするために使用できる組み込みサーバーです。

npm install hexo-server -g 

利用できるパッケージは他にもたくさんあります。これらは、Hexoブログを稼働させるために必要な基本的な要素にすぎません。 [npm search]（http://npmsearch.com/?q=hexo）で、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 1112:30 _config.yml
drwxrwxr-x 191 sammy sammy 4096 Jan 1112:31 node_modules
- rw-rw-r--1 sammy sammy  442 Jan 1112:30package.json
drwxrwxr-x   2 sammy sammy 4096 Jan 1112:30 scaffolds
drwxrwxr-x   3 sammy sammy 4096 Jan 1112:30 source
drwxrwxr-x   3 sammy sammy 4096 Jan 1112:30 themes

既存のすべてのファイルの中で、 _config.ymlファイルが最も重要な場合があります。すべてのコア設定は、ブログのコアであるここに保存されます。将来何かを調整する必要がある場合は、このファイルに表示される可能性があります。

次に、 _config.ymlを使用して基本的なカスタマイズを徐々に実行します。 nanoまたはお好みのテキストエディタを使用して _config.ymlを開きます。

nano _config.yml 

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

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

最初の4行は、ブログの名前、適切なサブタイトル、説明、および作成者名です。あなたは好きなオプションを選ぶことができます。すべてのHexoテーマがこのデータを表示するわけではないため、主に関連サイトのメタデータとして使用されることに注意してください。

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

値の例を次に示します。

...
​
# Site
title: DigitalOcean's Hexo Blog  
subtitle: Simple Cloud Hosting, Built for Developers.
description: Deploy an SSD cloud server in55 seconds.
author: Sammy Shark 
language: en 
timezone: America/New_York
​
...

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

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

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

現在の draftのように設定し、次のようにしました。

...
​
# Writing
new_post_name::title.md # File name ofnewposts
default_layout: draft
titlecase:false # Transform title into titlecase
​
...

ファイルを保存してすぐに終了します。このチュートリアルの最後に、展開フェーズを理解するためにこのファイルに簡単に戻ります。

ステップ3-新しい投稿を作成して公開する

投稿（または前に構成したドラフト）を作成するプロセスでは、最初に次のコマンドを発行します。ここで、** first-post は公開**する投稿の名前です。

hexo newfirst-post

次の出力が表示されます。

INFO  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 *は、JSONまたはYAMLの小さなセクションであり、投稿のタイトル、リリース日、ラベル、その他の設定を構成するために使用されます。前の物質の終わりは、最初の ---または ;;;マークで示されます。事が起こった後、Markdown構文を使用してブログ投稿を書くことができます。

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

title: DigitalOcean's First Post
tags:- Test
 - Blog
categories:- Hexo
comments:true
date:2015-12-3100:00:00---
​
## Markdown goes here.
​
**This is our first post!**

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

リリースする前は、作成したばかりのマークダウンファイルは 〜/ hexo_blog / source / _draftsに残ります。 Webサイトの訪問者は、 _draftsフォルダー内の投稿を表示できなくなります。

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

hexo publish first-post 

これはにつながります：

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

ブログのホストを開始すると、投稿が表示されます。

ステップ4-テストサーバーを実行する

前の構成ファイルが完成したので、例を用意しました。次に、テストサーバーを起動します。

hexo server

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

テストサーバーを実行したので、お気に入りのブラウザーから http：// your_server_ip：4000 /にアクセスして、ブログを表示できます。 Hexoの事前定義された「HelloWorld」テスト投稿と作成したばかりのテスト投稿が表示されます。

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

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

ステップ5-Gitデプロイメントをセットアップする

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

続行するには、Hexoによって生成された静的HTMLファイルを保存するためのGitリポジトリが必要です。簡単にするために、GitHubが提供するパブリックGitリポジトリを使用します。

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

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

nano _config.yml 

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

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

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

deploy:
 type: git
 repo: https://github.com/your_github_username/hexo_static.git
 branch: master

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

展開にGitを使用することを選択したため、静的タグをGitリポジトリのHexoパッケージに送信する必要があります。

npmを使用してインストールします。

npm install hexo-deployer-git --save 

これで、 hexo_staticリポジトリへの展開をテストし、次の方法で最初のHexo自動送信を提供できます。

hexo generate && hexo deploy

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

以下は、これらのコマンドを使用した後の正常な出力（または同様のもの）です。マイナスファイルの生成とGitの挿入：

To https://github.com/username/hexo_static.git.*[newbranch]      master -> master
Branch master set up to track remote branch master from https://github.com/username/hexo_static.git.
INFO  Deploy done: git

**ステップ6-Nginx **を設定する##

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

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

sudo mkdir -p /var/www/hexo

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

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

所有権に基づいて権限を更新します。

sudo chmod -R 755/var/www/hexo

defaultNginxサーバーブロックを開いて編集します。

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

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

...

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

 root /var/www/hexo;
 index index.html index.htm;...

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

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

sudo service nginx restart

ステップ7-Gitフックを作成する

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

まず、（GitHubではなく）新しい空のGitリポジトリを初期化します。このリポジトリの唯一の目的は、 hexo_staticリポジトリの内容をWebサーバーディレクトリに転送することです。

git init --bare ~/hexo_bare

Gitによって生成された hooksディレクトリに新しいフックファイルを作成します。

nano ~/hexo_bare/hooks/post-receive 

次の2行のコードをファイルに追加します。これは、Git作業ツリー（ソースコード付き）とGitディレクトリ（構成設定、履歴など付き）を指定します。

#! /bin/bash

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

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

この「受信後」ファイルを実行可能にします。

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

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

git clone https://github.com/username/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

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

#! /bin/bash
​
hexo clean
hexo generate 
hexo deploy
​( cd ~/hexo_static ; git pull ; git push live master )

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

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

• cleanは、パブリックフォルダー内で以前に生成されたすべての静的ファイルを削除します。
• generateは、パブリックフォルダのマークダウンから静的HTMLファイルを作成します。
• deployは、新しく生成された静的ファイルを、前に定義した「リアルタイム」Gitリポジトリ _config.ymlへのコミットとして送信します。

最後の行 （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

20152016 archives  categories  css  fancybox  index.html  js  tags

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

お気に入りのブラウザで http：// your_server_ip /にアクセスして、ブログを直接表示します（テストサーバーを使用せずに）。

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

ステップ10-Hexoのファイルシステムを確認します（オプション）

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

ファイルとディレクトリのレイアウトは次のとおりです。

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

node_modules

このディレクトリに、Hexoは、ブログで使用するためにダウンロードしたモジュール npmを保存します。このチュートリアルの最後には、手順1でダウンロードしたパッケージのみが含まれます。

Output
hexo  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フォルダとその他のユーザー作成ページもここで有効になります。

ブログのマークダウンコンテンツのほとんどは、Hexoによってサブフォルダーの1つに配置されます。

件名

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

結論として ＃＃

Hexoはこのガイドでカバーされている以上のものですが、新しいブログサイトを構築するための良いスタートです。 [情報、Hexo]（https://hexo.io/docs/）についてもっと知りたい場合は、[ドキュメント]（https://hexo.io/docs/）は非常に簡潔です。ブログ開発の次のステップとして、Hexoで利用可能な[カスタムテーマ]（https://hexo.io/themes/）をインストールすることを検討してください。

その他のUbuntuチュートリアルについては、[Tencent Cloud + Community]（https://cloud.tencent.com/developer?from=10680）にアクセスして詳細を確認してください。

参照：「Ubuntu14.04でHexoを使用してブログを作成する方法」