老陳网志

老陳网志

手帳 &ノート
github

快速搭建Hugoブログ

以下のテキストを「日本語」に翻訳してください:
hugo-blog.png

前書き#

これまで長年にわたりWordpressを使用してきましたが、最近思い立って自分のブログを再構築したいと思いました。そこで Hugo を使用することにしました。

Hugo は、現在最も人気のある Go で書かれた静的ウェブサイトジェネレーターで、高速で使いやすく、設定可能で、Hexo と比べて操作が簡単です。

Hugo にはコンテンツとテンプレートのディレクトリがあり、それらを完全な HTML ウェブサイトにレンダリングします。Hugo 公式ウェブサイトを参照して、個人のブログを構築してください。

Hugo のダウンロードとインストール#

ここでは、MAC ユーザーと Windows ユーザーの手順が異なります。

  • MAC ユーザー

ターミナルで次のコマンドを順番に入力すると、ダウンロードできます:$ brew install hugo、$ hugo version

  • Windows ユーザー
  1. ダウンロードリンク:https://github.com/spf13/hugo/releases

自分のオペレーティングシステムに合わせて、対応するインストールパッケージをダウンロードします。私のオペレーティングシステムは Win10 64bit なので、hugo_0.69.2_Windows-64bit.zipを選択しました。

  1. 解凍後、フォルダ内の hugo.exe ファイルを単独で取り出し、事前に作成したフォルダに配置します。たとえば、D ドライブの software フォルダに hugo という名前のフォルダを作成した場合、最終的なパスは D:\Software\hugo\hugo.exe になります。

  2. D:\Software\hugo\ を環境変数の PATH に追加します。このステップは非常に重要です。

  3. ターミナルを再起動し、hugo versionを実行してバージョンを確認します。

上記の手順を完了したら、コマンドラインを開き、hugo helpと入力します。

以下の情報が表示されれば、インストールが成功しています。

hugo is the main command, used to build your Hugo site.

Hugo is a Fast and Flexible Static Site Generator
built with love by spf13 and friends in Go.

Complete documentation is available at http://gohugo.io/.

Hugo サイトの作成#

自分のブログサイトを作成します。ここでは、Blog の部分を自分で設定した名前に変更できます。

hugo new site Blog

以下のような作成成功のメッセージが表示されます。

Congratulations! Your new Hugo site is created in E:\blog.

Just a few more steps and you're ready to go:

1. Download a theme into the same-named folder.
Choose a theme from https://themes.gohugo.io/, or
create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
with "hugo new <SECTIONNAME>\<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".

Visit https://gohugo.io/ for quickstart guide and full documentation.

このディレクトリに移動すると、自動的に 5 つのディレクトリと 1 つの config.toml 設定ファイルが生成されます。

|-- archetypes
|-- content   #コンテンツのディレクトリ
|-- data      
|-- layouts   
|-- static    #静的リソース(画像、CSS、JS)のディレクトリ
|-- themes    #テーマのディレクトリ
|-- config.toml  #設定ファイル

テーマの追加#

テーマを追加します。デフォルトのテーマを使用することもできますし、他のテーマを使用することもできます。ここではデフォルトのテーマを示します。以下の 2 行のコードを入力します。

git init

git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke

次に、サイトのルートディレクトリから git リポジトリを更新します。

git submodule update --remote --merge

次に、デフォルトのテーマ名を設定ファイルに追加します。config.toml ファイルを開いて編集します。

コンテンツの作成#

マークダウンファイルを作成して、ブログの内容を完成させます。

このディレクトリに移動し、次のコマンドを入力すると、content ディレクトリの下に post ディレクトリが作成され、その中に test.md という名前のファイルが作成されます。

cd blog

hugo new post/test.md

これで、posts フォルダに最初のブログが生成されました。タイトルを変更し、draft を true に変更し、内容を自由に編集できます。例えば、以下のように編集します。

---
  title: "Hello world!"
  date: 2020-03-16T11:47:15+08:00
  draft: true
 ---
 ## みなさん、こんにちは
 
  これは私のブログです。良い記事を皆さんと共有できればと思います~~~

次に、次のコードを入力してブログをプレビューできます。

hugo server -D

静的ページを作成します。これにより、public ディレクトリが生成されます。このディレクトリは実際にはウェブサイトです。次のコードを入力します。

hugo -D

最新の public ディレクトリをリポジトリ(GitHub、Coding、Gitee)にアップロードします。

以上で、作業は完了です 🎉🎉🎉

これは私が構築したブログのウェブサイトです:chenyyds.com

読み込み中...
文章は、創作者によって署名され、ブロックチェーンに安全に保存されています。