Hugoを使用してブログを開始する方法

Hugoを使用してゼロからデプロイまで新しいブログを開始するための詳細なチュートリアル

Hugoはブログを始めるのに最適なツールです。

私は2年以上前からこのブログでHugoを使用しています。 Hugoを愛する理由はいくつかあります。

ですシンプル、退屈な、フレキシブル、速い。

主な理由はそれがシンプル。始めるために学ぶ必要のあることはあまりありません。

あなたはMarkdownでコンテンツを書きます。これは、私のお気に入りのエディター（Bear）を使用して投稿を書くことができる形式です。

ヒューゴは退屈な。誤解しないでください、これは非常に前向きなことです。開発者として、私はいつもあちこちで物事を微調整したいと思っています。 Hugoの根底にある素晴らしいテクノロジーはありません。私が最も愛している言語の1つであるGoを使用して構築されていますが、Hugoの内部に飛び込んで、その動作を変更したいという意味ではありません。

また、多くのJavaScriptフレームワークのように、クールなものや次世代のものは表示されません。

したがって、それは退屈であり、ブログで作業するときに本当に役立つことを行うために多くの時間を与えてくれます。コンテンツを書く。私はコンテンツコンテナではなく、コンテンツに焦点を合わせています。

そうは言っても、ヒューゴはかなりくそったれですフレキシブル。私はオープンソースのテーマで自分のブログを始め、それから時間をかけて完全に変更しました。自分のウェブサイトで単純なブログの範囲外のことをしたいことがありますが、Hugoではそれらを作成することができます。

最後に、私がヒューゴを愛するもう一つの理由は、速い。どうして？まず、非常に高速な言語として知られているGoをコアにしています。また、Goエコシステムには、100メガバイトの依存関係という概念はありません。物事は可能な限り速く作られています。さらに、Hugoは、派手なテクノロジーを使用するときに必要ないくつかの派手なことをする必要はありません。これは退屈な副産物です。

とにかく、言葉で十分です。

特にあなたが開発者であり、Markdownで書く気があるなら、Hugoは素晴らしいです。技術者以外の人はMarkdownの使用を拒否するかもしれません、そしてそれは完全に理解できます。

また、物事を実際にクリックさせるには、Git中心のワークフローに備える必要があります。

Markdownを使用して投稿を作成し、変更をGitリポジトリ（最も一般的にはGitHub）にコミットすると、一部の接着技術によって、サイトをホストするサーバーに変更がデプロイされます。

HugoWebサイトのホスティング

Hugoブログは完全に静的。つまり、独自のサーバーをホストしたり、特別なサービスを使用したりする必要はありません。

Netlify、Now、GitHub Pagesは、Hugoブログを無料でホストできる3つの素晴らしい場所です。

唯一のコストは、ドメイン名のために維持しなければならないものです。自分のドメイン名を持つことの重要性をこれ以上強調することはできません。番号.github.ioまたは.netlify.comまたは.now.shサイトをお願いします。

私自身のHugoサイトはNetlifyでホストされています。

ドメインを選択してください

あなたのブログをあなた自身のドメインの下に置いてください。一つを選ぶ。自分の名前を使用してください。そして使用する.comまたは.blog。ローカライズされたドメインを使用して賢くしようとしないでください、使用しないでください.io。.com印象が良くなり、ブログをホストするだけでなく、将来のすべてのプロジェクトで再利用できます。私はそれを選びました。

ああ、古いドメインが存在する場合は、それを使用してください。どうして？ドメインが古いほど良いです。

サブドメインに関する注意：Googleにとって、すべてのサブドメインは異なるWebサイトです。したがって、ドメインがflaviocopes.com、そしてあなたはであなたのブログを作成しますblog.flaviocopes.com、それはグーグルにとって完全に新しいウェブサイトであり、メインドメインとは別の独自のランキングがあります。

私の提案は、サブドメインを完全に避けることです。

Hugoをインストールする

MacOSにHugoをインストールするには、ターミナルから

brew install hugo

ザ・brewコマンドがMacに存在しませんか？チェックしてください自作ガイド

WindowsおよびLinuxの場合は、公式インストールガイド。

Hugoサイトを作成する

Hugoをインストールしたら、実行してHugoサイトを作成できます。

hugo new site myblog

私はこれを実行することをお勧めしますwwwコマンドが新しいを作成するため、ホームディレクトリ内のフォルダmyblogそれを実行するフォルダ。

テーマを選ぶ

始める前に、テーマを選択する必要があります。 Hugoにデフォルトのテーマを含めて、物事を簡単にしたいと思いますが、そうではありません。

にはたくさんの選択肢がありますhttps://themes.gohugo.io。私の個人的な推奨事項は、https://themes.gohugo.io/ghostwriter/後で微調整します。

また、避けることをお勧めしますgit clone将来的には確実にテーマを微調整するため、そのページで提案されているワークフローです。コンテンツとテーマの両方に単一のリポジトリを用意するのが最善だと思います。展開が簡単になります。

だから、に行くhttps://github.com/jbub/ghostwriter/archive/master.zipテーマの現在のバージョンをダウンロードします。

次に、それをで解凍しますthemes/ghostwriter新しく作成したHugoWebサイトのフォルダー：

あることに注意してくださいexampleSiteのフォルダthemes/ghostwriter。それを開いて、contentサブフォルダー。そこに、あなたは見ることができますpage、postそしてprojectサブフォルダー。

コピーpageそしてpostの中にcontentサイトのフォルダ：

構成

サンプルデータはサンプルも提供しますconfig.tomlファイルにthemes/ghostwriter/exampleSite/config.toml。これはHugo構成ファイルであり、テーマに情報をハードコーディングしなくても、Hugoに構成の詳細を通知します。

物が多すぎるので、それをコピーせず、代わりにこれを使用することをお勧めします。

baseurl = "/"
title = "My blog"
theme = "ghostwriter"
[Params]
mainSections = [“post”]
intro = true
headline = “My headline”
description = “My description”
github = “https://github.com/XXX”
twitter = “https://twitter.com/XXX”
email = “[email protected]”
opengraph = true
shareTwitter = true
dateFormat = “Mon, Jan 2, 2006”
[Permalinks]
post = “/:filename/”

このファイルの情報は後で自由にカスタマイズできます。

コマンドラインから、次のコマンドを実行します。

hugo serve

開いたhttp://localhost:1313ブラウザで、サイトをライブで見ることができるはずです！

これはサイトのホームページです。

から取られた投稿のリストがありますcontent/postあなたのウェブサイトのフォルダ：

「新しいテーマの作成」と呼ばれる最初のをクリックします。

あなたはファイルを開くことができますcontent/post/creating-a-new-theme.md投稿内の何かを変更します。

保存すると、ウェブサイトは自動的に新しいコンテンツで更新されます。

これはかなり素晴らしいですよね？

新しい投稿を作成することで、新しい投稿を作成できます.mdファイル、必要なものを前に付けます。必要に応じて、増分番号を使用できます。または、日付を使用します。

何かがあなたが望むように見えない場合、あなたは開くことができますthemes/ghostwriter/layoutsフォルダとそれを微調整します。

「投稿」テンプレートはで定義されていますthemes/ghostwriter/layouts/post/single.html：

HugoはGoテンプレートを使用します。構文はなじみのないものかもしれませんが、HugoのWebサイトはこれでそれらを説明するのに非常に優れています。テンプレートの紹介に行く。

ただし、今はテンプレートのカスタマイズを検討しないようにしてください。

色を微調整したい場合は、<style>にCSSを付けたタグthemes/ghostwriter/layouts/partials/header.html。

たとえば、リンクを黒にします。

<style>
.site-title a, .button-square {
    background: black;
}
a {
    color: black;
}
</style>

代わりにコンテンツに焦点を合わせます。

既存のファイルを削除し、最初に2〜3件の投稿を書き込みます。

思い通りの作りにとらわれるのは簡単ですが、大切なのは内容です。

そして、あなたのサイトがきれいであるほど、あなたの読者にとってより良いです。

ここで、展開について少し説明します。

HugoサイトをNetlifyにデプロイします

私が最も楽しんでいる2つのサービスであるNetlifyとNowにHugoサイトをデプロイする方法を紹介したいと思います。

まず、サイトをホストするためのGitHubリポジトリを作成します。

毎日使用しているアプリであるGitHubDesktopを開き、ワークフローの一部にしています。これはGitを使用する最も簡単な方法です。

[ファイル]メニューから、[新しいリポジトリ]オプションを押しました。

ドラッグするだけで同じ画面を生成できますmyblogアプリにフォルダ。

私はmyblogリポジトリに名前を付け、リポジトリの正しいパスを選択しました。

プロセスは自動的に最初のコミットを行います。

これで、[リポジトリの公開]ボタンをクリックして、リポジトリをGitHubにプッシュできます。

もちろん、リポジトリを非公開にすることもできます。

リポジトリがGitHubにあると：

Netlifyに移動できます。

Netlifyダッシュボードから、「Gitからの新しいサイト」ボタンを押しました。

GitHubを押し、Netlifyにプライベートリポジトリへのアクセスを許可してから、作成したばかりのリポジトリを選択しました。

NetlifyはそれをHugoリポジトリとして自動的に識別し、ビルドコマンドを自動的に入力しました。

「サイトの展開」をクリックすると、展開プロセスが開始されます。

実際のサイトでは、カスタムドメインを設定します。 Netlifyには、それらを介してドメインを購入するオプションがあり、それは非常に（非常に）簡単なプロセスです。私はそれを強くお勧めします。ドメインを購入してからわずか数分でサイトを公開できます。

ランダム.netlify.comこの場合、サブドメインはサイトに添付されていますpedantic-engelbart-500c9a.netlify.com、およびHTTPSは自動的に有効になります。

したがって、サイトをすぐにライブで見ることができます。

これで、ローカルバージョンで何かを編集しようとすると、変更をGitHubにプッシュするだけで、Netlifyがサイトを自動的に更新します。サイトの「概要」パネルで、サイトを構築していることがわかります。

Netlifyの詳細については、Netlifyチュートリアル。

HugoサイトをZeitNowにデプロイします

Zeitは現在呼ばれていますヴェルセル、このチュートリアルは古くなっている可能性があります

Hugoブログに使用できるもう1つの素晴らしいプラットフォームは、ZeitNowです。

サインアップしたら、ダッシュボードからを押します新しいプロジェクトボタン。

GitHubから初めてデプロイするときは、最初に[GitHubに今すぐインストール]をクリックしてGitHubアプリをインストールする必要があります。

これにより、アプリのGitHubページが表示されます。ここで、すべてのリポジトリ、または一部のリポジトリに対して承認できます。

戻ったら、[GitHubからの新しいプロジェクト]ボタンをクリックします。

プロジェクトを選択し、「インポート」をクリックします。

それまでの間、のメインフォルダに移動しますmysiteを追加しますpackage.jsonこのコンテンツを含むファイル：

{
  "scripts": {
    "build": "hugo"
  }
}

これにより、サイトを展開する方法がわかります。

ダッシュボードに戻ると、新しいデプロイがすぐに開始され、サイトがライブで機能していることがわかります。

Nowには、サイトへのアクセスに使用できる3つのURLがあることに注意してください。

myblog.flaviocopes.now.sh
myblog-alpha-swart.now.sh
myblog-git-master.flaviocopes.now.sh

お好みのものをお選びいただけます。

さらに、各デプロイメントには独自のURLもあります。この場合、私は持っていましたmyblog-h8xks5jhn.now.shただし、展開ごとに異なります。

もちろん、ドメインを追加することもできます。 Zeitには、ドメインを直接購入するための優れたサービスがあります。https://zeit.co/domains。

また、コマンドラインでの作業を好む場合は、nowコマンドを使用すると、そこからドメインを購入することもできます。

私はあなたが私のをチェックすることを強くお勧めしますZeitNowチュートリアル。