Hugoでブログを作成する方法

• 前書き
• 前提条件
• ステップ1：Hugoプログラムをインストールする
• ステップ2：サイトを構築する
• ステップ3：Hugoリポジトリからテーマをインストールする
• ステップ4：基本的な設定変更をいくつか行う
• ステップ5：コンテンツを作成する
• ステップ6：Hugoサーバーでコンテンツを調整する
• ステップ7：サイトを公開する

前書き

Hugoは、非常に高速なレンダリング速度と優れた使いやすさを備えた静的サイトジェネレーターです。コンテンツ指向の機能のすべてのおかげで、環境の構築ではなく、常にコンテンツの作成に集中できます。

• Hugoを使用すると、面倒な依存関係やデータベースを気にすることなく、実行中のどこでも静的なサイトを数分で構築できます。
• 最も便利なライティングスタイルであるMarkdownでコンテンツを作成し、Webで行った変更を瞬時に確認できます。
• さらに、Hugoの豊かなテーマリポジトリと急成長しているコミュニティを最大限に活用できます。

このチュートリアルでは、Hugoをインストールして使用し、CentOSベースのVultr LEMPサーバーインスタンスに静的なブログサイトを構築する方法を紹介します。

前提条件

sudo権限を持つ非rootユーザーとしてインスタンスにログインします。この記事でそのようなユーザーを作成する方法をご覧ください。

ステップ1：Hugoプログラムをインストールする

Hugoは、ほとんどすべての主流プラットフォームにインストールできます。CentOSの場合、最新のプログラムファイルを.tar.gzアーカイブにダウンロードして、便利な場所に解凍するだけです。執筆時点では、最新バージョンは0.15です。

sudo yum update -y
sudo yum install git -y
cd ~
wget https://github.com/spf13/hugo/releases/download/v0.15/hugo_0.15_linux_amd64.tar.gz
tar -zxvf hugo_0.15_linux_amd64.tar.gz
sudo mv hugo_0.15_linux_amd64/hugo_0.15_linux_amd64 /usr/local/bin/hugo

次のコマンドを使用して、インストールをテストします。

 hugo version

ステップ2：サイトを構築する

Hugoを使用すると、サーバー上の任意のフォルダー内からサイトを構築できます。ここではmysite/、ホームディレクトリの下のディレクトリにサイトを構築しました。

cd ~
hugo new site ~/mysite

次のコマンドを実行して、サイトのアーキテクチャを確認します。

cd mysite
ls -lF

ご覧のとおり、サイトの現在のアーキテクチャは次のようになります。

アーキタイプ/

config.toml

コンテンツ/

データ/

レイアウト/

静的/

さらに2つの作成されるディレクトリがthemes/ありpublic/、Hugoサイトのアーキテクチャ全体がコンパクトでありながら包括的です。

手始めに、コンテンツをディレクトリに保存する必要があることを知っておいてくださいcontent/。

ステップ3：Hugoリポジトリからテーマをインストールする

Hugoリポジトリからすべてのテーマをインストールするには、次のコマンドを実行します。これらthemes/により、サイトディレクトリに名前が付けられたディレクトリが作成され、Hugoテーマリポジトリからすべてのテーマがダウンロードされます。

cd ~/mysite/
git clone --depth 1 --recursive https://github.com/spf13/hugoThemes.git themes

単一のテーマをインストールするだけの場合は、Hugoテーマリポジトリにアクセスして、お気に入りのテーマを決定してください。そのURLをコピーして、git clone以下のコマンドに貼り付けます。

cd ~/mysite/
mkdir themes
cd themes
git clone https://github.com/jaden/twentyfourteen

ステップ4：基本的な設定変更をいくつか行う

config.tomlサイトディレクトリで指定されたファイルには、Hugoサイトのグローバル構成が含まれています。テキストエディタでファイルを編集して、以下に示すようにいくつかの基本的な構成を変更します。特定の条件に従って値を置き換えることを忘れないでください。

baseurl = "http://[YourSiteIP]/"
languageCode = "en-us"
title = "Your Site Name"
theme = "twentyfourteen"

ステップ5：コンテンツを作成する

サイトディレクトリで次のコマンドを入力して、ディレクトリにコンテンツページを作成します~/mysite/content/post/。

cd ~/mysite/
hugo new post/about.md

ファイルをテキストエディタで開きます。ファイルの形式は次のようになります。

+++
date = "2015-12-25T03:21:23Z"
draft = true
title = "about"

+++

2行の間に、+++コンテンツページに関するメタ情報があります。ここでは、行draft = trueを削除して、タイトル行を必要に応じて変更できます。

2 +++行目に、Webページに表示するコンテンツを追加します。マークダウン言語でコンテンツを書くことを忘れないでください。

## This is an H2 headline

Text goes here.

この編集が終了したら、後で使用できるようにテキストエディタを開いたままにしておきます。

ステップ6：Hugoサーバーでコンテンツを調整する

Hugoの組み込みWebサーバーを使用してサイトをデプロイできます。これにより、テキストエディターでコンテンツを変更するとすぐに、Webページに変更を即座に表示できます。

別のターミナルを開きiptables、Hugoサーバーのデフォルトポート1313でサイトへのアクセスを許可するルールを構成します。

sudo iptables -I INPUT -p tcp --dport 1313 -j ACCEPT

Hugoサーバーを起動します。

hugo server --bind="[YourServerIP]"

ブラウザからサイトにアクセスします。

http://[YourServerIP]:1313

これで、前のターミナルでページファイルのコンテンツを編集したり、ページファイルを追加/削除したりできます。content/ディレクトリ内のすべての変更がブラウザ画面に同時に反映されることがわかります。これは忙しいブロガーにとって素晴らしい機能です。いつでもすぐに変更を確認して、より良い作曲体験を得ることができます。

編集が完了したら、を押しCtrl+CてHugoサーバーを停止します。

ステップ7：サイトを公開する

これで、サイトをWebに公開する時が来ました。次のコマンドを実行すると、Hugoがpublic/ディレクトリ内での公開に適したすべての静的コンテンツを生成します。

cd ~/mysite
hugo

注：上記のコマンドを実行すると、Hugoは以前に生成された古いファイルを削除しません。予期しない結果を回避するためにpublic/、hugoコマンドを実行する前に常にディレクトリを削除するか、次のコマンドに示すように新しい出力先を指定できます。

hugo --destination=public2

Nginxウェブサーバーは既にサーバー上で実行されているので、必要なのは、~/mysite/public/ディレクトリまたは他のカスタム宛先ディレクトリのコンテンツをウェブディレクトリにコピーすることだけです/usr/share/nginx/html/。

元のファイルを削除します。

cd /usr/share/nginx/html/
sudo rm -rf background.jpg index.php logo.png

静的サイトファイルをウェブディレクトリにコピーします。

cd ~/mysite/public
sudo cp -R ~/mysite/public/. /usr/share/nginx/html/

それでおしまい。これで、ブラウザから超高速の静的サイトにアクセスできますhttp://[YourServerIP]。

詳細を確認するには、コマンドを使用するhugo helpか、Hugoの公式Webサイトにアクセスしてください。