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

投稿日: 2019-11-08 2022-04-20
タグ: git, Miscellaneous, nginx, Node.js, ubuntu

序章

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

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

前提条件

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

sudo非rootユーザーを含む1つのUbuntu14.04ドロップレット。これは、この初期サーバーセットアップガイドに従ってセットアップできます。
サーバーにGitがインストールされています。これは、このGitチュートリアルの「Aptを使用してGitをインストールする方法」および「Gitを設定する方法」のセクションに従って実行できます。
サーバーにインストールされたNode.js。これは、このNode.jsチュートリアルの「NVMを使用してインストールする方法」セクションに従って設定できます。
Nginxがサーバーにインストールされています。これは、このNginxチュートリアルに従って設定できます。
GitリポジトリホストであるGitHubのアカウント。

ステップ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を少しずつ見ていくことで、いくつかの基本的なカスタマイズを設定します。 _config.ymlをnanoまたはお好みのテキストエディタで開きます。

nano _config.yml

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

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

. . .

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

. . .

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

次の2つのオプションは、言語とタイムゾーンです。言語オプションは、2文字のISO-639-1コードのみを取ります。タイムゾーンはデフォルトでサーバーのタイムゾーンに設定されており、「tzデータベース」形式を使用します。これらのいずれかを変更する場合は、これらの形式であることを確認してください。

値の例を次に示します。

例〜/ hexo_blog / _config.yml

. . .

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

. . .

次のセクションは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://your_server_ip
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: draft
titlecase: false # Transform title into titlecase

. . .

今のところ、ファイルを保存して終了します。チュートリアルの終わりに向けて、展開段階でこのファイルに簡単に戻ります。

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

投稿（または前に構成したドラフト）を作成するプロセスは、次のコマンドを発行することから始まります。ここで、first-postは作成する投稿の名前です。

hexo new first-post

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

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

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

nano ~/hexo_blog/source/_drafts/first-post.md

すべての投稿には、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://your_server_ip:4000/にアクセスしてブログを表示できます。 Hexoの事前定義された「HelloWorld」テスト投稿と、作成したばかりのテスト投稿が表示されます。

DigitalOcean's Hexo Blog Image

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

テストサーバーは、ブログへの変更や追加をプレビューするために最適に使用されます。外観に満足したら、Webにデプロイします。

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

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

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

リポジトリ作成手順に従って、hexo_staticという名前の新しいリポジトリをGitHubに作成します。必ず「パブリック」オプションを選択し、このリポジトリをREADMEで初期化するチェックボックスをオンにしてください。

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

nano _config.yml

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

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

. . .

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

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

〜/ hexo_blog / _config.yml

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の挿入を差し引いたもの：

Output
To https://github.com/username/hexo_static.git.
 * [new branch]      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

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

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ディレクトリを指すように構成コードのアクティブな部分を変更します。

/ etc / nginx / sites-available / default

. . .

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ディレクトリ（構成設定、履歴などを含む）を指定します。

〜/ 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デプロイメントリポジトリをサーバーに複製する必要があります。この次のコマンドの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

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

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

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

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

将来、新しいブログの変更を展開するには、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

このディレクトリに、Hexoは、ブログで使用するためにnpmを介してダウンロードしたモジュールを保存します。このチュートリアルの最後には、手順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コンテンツの大部分は、Hexoによってこれらのサブフォルダーの1つに配置されています。

テーマ

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

結論

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

getdocs

13036