Ubuntu20.04にHexoを使用してブログをインストールおよび作成する方法

Hexoは、Node.js上に構築された静的なブログフレームワークです。 Hexoを使用すると、Markdown形式で投稿を書き込むことができます。これらのブログ投稿は、事前定義されたテーマを使用して処理され、静的HTMLファイルに変換されます。

静的ファイルを生成するという点で、WordPressのような通常のブログソフトウェアとは異なります。 WordPressは、サイトをリロードするたびにPHPコードを実行することでブログを動的にロードするため、サイトが脆弱性の影響を受けやすくなります。

このチュートリアルでは、Hexoをインストールし、それを使用してUbuntu20.04ベースのサーバーでブログを作成する方法を学習します。

前提条件

sudo権限を持つroot以外のユーザーがいるUbuntu20.04ベースのサーバー。
Gitをインストールする必要があります。 gitがインストールされていない場合は、次のコマンドを使用してインストールできます。
```
$ sudo apt install git
$ git config --global user.name "Your Name"
$ git config --global user.email "[email protected]"
```
Githubのアカウント。

ファイアウォールの構成

Ubuntu 20.04には、デフォルトでUncomplicated Firewall（UFW）が付属しています。そうでない場合は、最初にインストールしてください。

$ sudo apt install ufw

SSHポートを有効にします。

$ sudo ufw allow "OpenSSH"

ファイアウォールを有効にします。

$ sudo ufw enable

Hexoサーバーが使用するポート4000を有効にします。

$ sudo ufw allow 4000

また、後で必要になるHTTPポートとHTTPSポートを開きます。

$ sudo ufw allow http
$ sudo ufw allow https

ファイアウォールのステータスを確認してください。

$ sudo ufw status
Status: active

To                         Action      From
--                         ------      ----
OpenSSH                    ALLOW       Anywhere
80/tcp                     ALLOW       Anywhere
4000                       ALLOW       Anywhere
443/tcp                    ALLOW       Anywhere
OpenSSH (v6)               ALLOW       Anywhere (v6)
80/tcp (v6)                ALLOW       Anywhere (v6)
4000 (v6)                  ALLOW       Anywhere (v6)
443/tcp (v6)               ALLOW       Anywhere (v6)

Node.jsをインストール

HexoはNode.jsに基づいているため、最初にインストールする必要があります。

次のコマンドを実行して、Node.jsリポジトリを追加します。

$ curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -

Node.jsをインストールします。

$ sudo apt-get install nodejs

正しく取り付けられているか確認してください。

$ node --version
v14.15.0

Hexoをインストールする

次のコマンドを実行して、Hexoパッケージをインストールします。

$ sudo npm install hexo-cli -g

-g パラメータはhexo-cliをインストールしますグローバルにパッケージ化することで、Hexoブログを任意のディレクトリにインストールできます。

Hexoをインストールするディレクトリを作成します。

$ sudo mkdir -p /var/www/hexo

必要な権限と所有権を設定します。

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

次に、Hexoブログに必要なファイルを初期化して設定する必要があります。これを行うには、作成したディレクトリに切り替えます。

$ cd /var/www/hexo

Hexoブログを初期化します。

$ hexo init
INFO  Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
INFO  Install dependencies
added 185 packages from 430 contributors and audited 191 packages in 6.47s

14 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

INFO  Start blogging with Hexo!

Hexoをインストールします。

$ npm install
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

added 5 packages from 1 contributor and audited 191 packages in 1.567s

14 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

これで、ディレクトリ構造を確認できます。

$ ls
_config.yml  node_modules  package-lock.json  package.json  scaffolds  source  themes

_config.yml ファイルは、Hexoブログの構成を保持します。ほとんどのブログ設定はここから変更できます。

node_modules ディレクトリには、Hexoが必要とするすべてのパッケージとそれに依存するパッケージが含まれています。

package.json ファイルには、Hexoが必要とするすべてのパッケージとそのバージョン番号のリストが含まれています。

package-lock.json ファイルはnpmによって自動的に生成されます Hexoパッケージのインストールまたは変更を実行するたび。パッケージと、インストールまたは変更されたバージョンに関する情報が含まれています。

足場 ディレクトリには、ブログの投稿とページのベースとなるテンプレートが含まれています。

ソース ディレクトリには、実際のサイトコンテンツがHTML / CSS形式で含まれており、Webに公開されます。 _のプレフィックスが付いたフォルダまたはファイル（アンダースコア）は、 _postsを除いてHexoによって無視されますフォルダ。今のところ、何も書いたり公開したりしていないので、ディレクトリは空です。

テーマ ディレクトリにはブログのテーマが含まれています。

Hexoを構成する

_config.ymlを開きます編集用のファイル。

$ nano _config.yml

Siteというタイトルのファイルのセクションを確認してください

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

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

オプションはかなり自明です。サイトの名前を変更し、必要に応じて字幕を設定します。サイトの説明とそれを説明するためのいくつかのキーワードを追加します。サイトの作成者名とタイムゾーンを変更します。

次に、 URLを確認しますファイルのセクション。

# URL
## If your site is put in a subdirectory, set url as 'http://example.com/child' and root as '/child/'
url: http://example.com
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

サイトのURLをドメイン名に変更します。後でSSLをインストールするため、URLには必ずHTTPSを使用してください。

サイトのURLにindex.htmを表示したくない場合 l各ページの最後で、両方のオプション trailing_indexを変更できます。およびtrailing_html falseに。

オンにする必要のある設定が他にもいくつかあります。

default_layoutの値を変更します postからの変数 ドラフトへ。これにより、新しい投稿が下書きとして作成されるため、ブログに表示する前に公開する必要があります。

post_asset_folderの値を変更します trueへの変数。これにより、すべての投稿に単一の画像フォルダを使用するのではなく、投稿ごとに個別の画像フォルダを作成できます。

Ctrl + Xを押してファイルを保存します Yと入力しますプロンプトが表示されたら。

テーマのインストール

Hexoには、Landscapeという名前のデフォルトのテーマが付属しています。テーマページから入手できる別のHexoテーマをインストールすることで、別のテーマに切り替えることができます。

すべてのHexoテーマはGithub経由で利用できるため、テーマのGithubリポジトリのクローンを作成する必要があります。

このチュートリアルでは、次のテーマをインストールします。 Hexoディレクトリに切り替えて、テーマのGithubリポジトリを themesに複製します。ディレクトリ。

$ cd /var/www/hexo
$ git clone https://github.com/theme-next/hexo-theme-next themes/next

/var/www/hexo/_config.ymlを変更しますテーマをLandscapeからNextに変更するファイル。

$ nano _config.yml

テーマを切り替えるには、テーマ変数を変更します。

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

/var/www/hexo/themes/next/_config.yml を変更することで、テーマの設定を変更できますファイル。

投稿を作成して公開する

最初の投稿を作成します。

$ hexo new first-post
INFO  Validating config
INFO  Created: /var/www/hexo/source/_drafts/first-post.md

新しい投稿を開いて編集します。

$ nano ./source/_drafts/first-post.md

すべての投稿にはfront-matterが必要です設定。 Front-matterは、投稿のタイトル、公開日、カテゴリ、タグなどの重要な詳細を構成するJSONまたはYAMLの短いブロックです。デフォルトのデータを正しいオプションに置き換えます。

title: Howtoforge's First Post
tags:
  - test
categories:
  - Hexo
comments: true
date: 2020-11-14 00:00:00
---

## Markdown goes here.

**This is our first post!**

投稿に画像を挿入する場合は、投稿に次のコードを追加してください。

{% asset_img "example.jpg" "This is an example image" %}

その後、ファイル example.jpgをコピーします \ source \ _posts \ first-postへ最初の投稿のすべての画像が取得されるディレクトリ。

Ctrl + Xを押してファイルを保存します Yと入力します投稿を書き終えたらプロンプトが表示されたら。

次に、投稿を公開します。

$ hexo publish first-post
INFO  Validating config
INFO  Published: /var/www/hexo/source/_posts/first-post.md

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

プラグインのインストール

Hexoには、インストールできるプラグインが数百あります。使用法に応じて、1つ以上のプラグインをインストールできます。

すべてのHexoプラグインはNode.jsパッケージであり、Githubでホストされており、インストールと構成の詳細を確認できます。

このチュートリアルでは、 hexo-filter-nofollowをインストールしますプラグイン。

最初にhexoディレクトリにいることを確認してから、プラグインをインストールしてください。

$ cd /var/www/hexo
$ npm i hexo-filter-nofollow --save

編集のためにHexo構成ファイルを開きます。

$ sudo nano _config.yml

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

nofollow:
  enable: true
  field: site
  exclude:
    - 'exclude1.com'
    - 'exclude2.com'

enable オプションはプラグインを有効にします。 フィールド オプションは、プラグインのスコープを定義します。ここで、 site サイト全体の外部リンクにnofollow属性を追加し、 post 投稿内のリンクにのみnofollow属性を追加します。 除外オプションは、nofollow属性が追加されないドメインをホワイトリストに登録します。

 テストサーバー 
 Hexoには基本的なWebサーバーが付属しています。投稿が公開されたので、Hexoテストサーバーを起動します。
 $ hexo server
 
 これで、URL  http：// yourserverIP：4000を起動できます。 ブラウザに次のページが表示されます。
 
  
 
  Ctrl + Cを押してサーバーを終了します ターミナルで。
 Hexo静的ファイルを生成する
 
 Hexoのテストサーバーは、静的ファイルだけでなく動的にもブログを提供できます。上記のコマンドはブログを動的に提供しました。
 
 Hexoブログを公開する方法はいくつかあります。このチュートリアルでは、Nginxサーバーを使用してHexoの静的ファイルを提供します。
 
 次のコマンドを実行して、静的ファイルを生成します。
 $ hexo generate
 
 上記のコマンドは、 / var / www / hexo / publicに保存されている静的ファイルを生成します フォルダ。 Nginxサーバーを使用して、このフォルダーからファイルを提供します。
 Nginxのインストールと構成
 
 Nginxサーバーをインストールします。
 $ sudo apt install nginx
 
 NginxのHexo構成ファイルを作成して開きます。
 $ sudo nano /etc/nginx/sites-available/hexo.conf
 
 次のコードを貼り付けます。
 server {
    server_name hexo.example.com;

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

    listen 443 ssl http2;
    listen [::]:443 ssl http2;
    ssl_certificate /etc/letsencrypt/live/hexo.example.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/hexo.example.com/privkey.pem;
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_session_timeout 1d;
    ssl_session_cache shared:MozSSL:10m;  # about 40000 sessions
    ssl_session_tickets off;
    ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES25>             ssl_prefer_server_ciphers off;
    ssl_dhparam /etc/ssl/certs/dhparam.pem;
    
    location / {
        try_files $uri $uri/ =404;
    }
}
server {
    if ($host = hexo.example.com) {
        return 301 https://$host$request_uri;
    }
    server_name hexo.example.com;
    listen 80;
    listen [::]:80;
    return 404;
}
 
  Ctrl + Xを押してファイルを保存します  Yと入力します プロンプトが表示されたら。
 
 構成をアクティブ化します。
 $ sudo ln -s /etc/nginx/sites-available/hexo.conf /etc/nginx/sites-enabled/
 
  /etc/nginx/nginx.confを開きます 編集用のファイル。
 $ sudo nano /etc/nginx/nginx.conf	
 
 次の行をinclude/etc/nginx/conf.d/*.confの行の前に貼り付けます 
 server_names_hash_bucket_size 64;
 
 変数types_hash_max_sizeの値を変更します 2048から4096まで。
 types_hash_max_size 4096;
 
  Ctrl + Xを押します エディターを閉じてYを押します ファイルを保存するように求められたら。
 
 構成に構文エラーがないことを確認するためにテストします。
 $ sudo nginx -t
 
 問題がない場合は、Nginxサーバーを再起動します。
 $ sudo systemctl restart nginx
 SSLをインストール 
 今度は、hexoブログのLet'sEncryptサービスを使用してSSLをインストールします。
 
 そのためには、Certbotをインストールします。
 $ sudo apt install certbot
 
 Certbotプロセスに干渉するため、Nginxを停止します。
 $ sudo systemctl stop nginx
 
 証明書を生成します。 DHParams証明書も作成する必要があります。
 $ sudo certbot certonly --standalone -d hexo.yourdomain.com --preferred-challenges http --agree-tos -n -m [email protected] --keep-until-expiring 
$ sudo systemctl start nginx
$ sudo openssl dhparam -out /etc/ssl/certs/dhparam.pem 2048
 
 また、SSLを自動的に更新するためのcronジョブを設定する必要があります。 crontabエディターを開くには、次のコマンドを実行します。
 $ sudo crontab -e
no crontab for root - using an empty one

Select an editor.  To change later, run 'select-editor'.
  1. /bin/nano        <---- easiest
  2. /usr/bin/vim.basic
  3. /usr/bin/vim.tiny
  4. /bin/ed

Choose 1-4 [1]: 1
 
 上記のコマンドはCrontabエディターを開きます。初めて実行する場合は、Cronジョブを編集するためのエディターを選択するように求められます。 Nanoエディターには1を選択してください。
 
 次の行を下部に貼り付けます。
 25 2 * * * /usr/bin/certbot renew --quiet --pre-hook “systemctl stop nginx” --post-hook “systemctl start nginx”
 
 上記のcronジョブは、毎日午前2時25分にcertbotを実行します。好きなように変更できます。
 
  Ctrl + Xを押してファイルを保存します  Yと入力します プロンプトが表示されたら。
 更新Hexo 
 Hexoフォルダーに切り替えます。
 $ cd /var/www/hexo
 
 Hexoのメジャーバージョンに切り替える場合は、 package.jsonを更新する必要があります ファイル。編集のために開きます。マイナーバージョンに更新するには、updateコマンドに直接スキップできます。
 $ nano package.json
 
 依存関係の下の次の行を変更します セクション。
 "hexo": "^5.0.0",
 
 値を変更する5.0.0 将来リリースされるたびに次のバージョンに。たとえば、Hexo 6.0がリリースされている場合は、次のように変更します。
 "hexo": "^6.0.0",
 
  Ctrl + Xを押してファイルを保存します  Yと入力します プロンプトが表示されたら。
 
 次のコマンドを実行して、hexoを更新します。
 $ npm update
 Hexoの導入
 
 Hexoはサーバー上で直接ホストできるだけでなく、Git、Netlify、Vercel、Heroku、OpenShift、およびその他のさまざまなメソッドに直接デプロイすることもできます。
 
 ほとんどのデプロイメントプラグインでは、プラグインをインストールする必要があります。このチュートリアルでは、Hexoの展開をNetlifyにセットアップします。 Netlifyにデプロイする場合、Netlifyには無料のSSLが付属しているため、NginxとSSLに関連する手順に従う必要はありません。
 
 Netlifyのサイトは通常、Gitリポジトリからデプロイされます。ただし、私たちの目的のために、CLIツールを使用して静的サイトをNetlifyに直接公開します。
 
 NetlifyCLIをインストールします。
 $ sudo npm install netlify-cli -g
 
 CLIツールがインストールされているかどうかを確認できます。
 $ netlify --version
netlify-cli/2.68.5 linux-x64 node-v14.15.0
 
 Netlifyにログインします。
 $ netlify login
Logging into your Netlify account...
Opening https://app.netlify.com/authorize?response_type=ticket&ticket=dfb575d97d07213c9cf73848c8d19e90

You are now logged into your Netlify account!

Run netlify status for account details

To see all available commands run: netlify help
 
 ブラウザのターミナルからログインをコピーし、Netlifyアカウントにログインして認証します。
 
 次のコマンドを使用して、ログインしているかどうかを確認できます。
 $ netlify status
???????????????????????
 Current Netlify User ?
???????????????????????
Name:  Your Name
Email: [email protected]
Teams:
  Your Team's team: Collaborator
 
 Hexoのパブリックディレクトリに切り替えます。
 $ cd /var/www/hexo/public
 
 サイトをNetlifyにデプロイします。
 $ netlify deploy
This folder isn't linked to a site yet
? What would you like to do? +  Create & configure a new site
? Team: Navjot Singh's team
Choose a unique site name (e.g. isnt-yourname-awesome.netlify.app) or leave it blank for a random name. You can update the site name later.
? Site name (optional): Howtoforge

Site Created

Admin URL: https://app.netlify.com/sites/Howtoforge
URL:       https://Howtoforge.netlify.app
Site ID:   986c931c-3f06-40a1-a89b-59621f337c18
Please provide a publish directory (e.g. "public" or "dist" or "."):
/var/www/hexo/public
? Publish directory /var/www/hexo/public
Deploy path: /var/www/hexo/public
Deploying to draft URL...
? Finished hashing 37 files
? CDN requesting 9 files
? Finished uploading 9 assets
? Deploy is live!

Logs:              https://app.netlify.com/sites/howtoforge/deploys/5fb0c9b806e72eb9c5f073c8
Website Draft URL: https://5fb0c9b806e72eb9c5f073c8--howtoforge.netlify.app

If everything looks good on your draft URL, deploy it to your main site URL with the --prod flag.
 
 矢印キーで選択して新しいサイトを作成し、サイトの名前を入力します。 。と入力します デプロイするディレクトリとして、現在のディレクトリを参照します。
 
 ドラフトURLが提供されます。 URLをコピーして、ブラウザにロードします。すべてが正常に見える場合は、次のコマンドを実行して本番環境にデプロイします。
 $ netlify deploy --prod
 
 これでサイトが稼働するはずです。 Netlifyの設定でカスタムドメインを追加して、実際のサイトを指すようにすることができます。
 
 新しい投稿を公開して新しいファイルを生成するたびに、Hexoのメインディレクトリから次のコマンドを実行して、変更をNetlifyにデプロイします。
 $ netlify deploy --dir ./public --prod
 結論 
 これで、Ubuntu20.04ベースのサーバーにHexoBlogフレームワークを使用してブログをインストールおよび作成するためのチュートリアルは終了です。ご不明な点がございましたら、下のコメント欄に投稿してください。