Hugoの使用経験

時間が経ちすぎて方法を忘れないように、ウェブサイトの重要なポイントを記録しておく必要があります。

大人、時代は変わりました#

最初は自分でウェブサイト全体を作ろうと思っていました（今考えると本当に愚かでした）。そのために、いくつかの HTML と CSS の知識を学びました。しかし、最初のテキストファイルを開いてホームページの HTML ファイルを書こうとしたとき、書くことができないことに気づきました。数個のタグを書いただけで飽きてしまいました。これらの知識を完全にマスターして使いこなすには長い時間がかかるし、それらをマスターしても美しいページを作るには想像力と創造力が必要です。短期間では完全なウェブページを作ることは不可能です。最も重要なことは、それらは非常に面倒です。一人で全ての作業を完了するにはどれだけの時間と労力が必要でしょう！

後でネット上で他の人の言葉を見ました。「一人で車輪を作る時代は終わった。先人がモデルを整えてくれた」と。それで気づきました。この時代は速すぎます。一人で閉じこもって車輪を作るのは愚かなことです。前に進むために力を借りることを学ぶべきです。そのため、私は Hugo エンジンを使ってウェブサイトを作ることを選びました。Hugo の役割は、パラメータ（モデル）を提供することで、それを組み立てることです。

ただし、HTML と CSS の知識は無駄になりません。ウェブページの構造に理解があると、タグや属性と値の基本的なルールを知っていると、ウェブページを扱う際に役立ちます。自分の好みに合わせてテーマの詳細を変更することができる可能性があります。

Hugo を選ぶ#

ウェブサイトジェネレータはたくさんあります。多くの人が WordPress から Hexo、そして Hugo、そして再び WordPress へと進む過程を経験しているのを見ました。だから私はこの落とし穴を避けたいと思い、始める前に長い間決断に時間をかけました。私の要件は経済的で効率的で便利でした。Hugo は最適な選択でした。静的ウェブページは経済的で安全であり、Hugo は最も高速な生成速度を持ち、サーバーは必要ありません。

ファイルディレクトリ#

これは各フォルダに格納されるコンテンツとその目的の標準形式です。

archetypes
- default.md ファイルに記事ページのパラメータを格納します。
content
- すべての記事を格納する場所です。例えば、About やカテゴリ、そして各記事などがあります。
layouts：生成されるページに使用されるテンプレートとパラメータを格納します。
- _default
  - ページのテンプレート
  - list.html はリストページのテンプレートであり、page.html は通常のページのテンプレートです。
  - Hugo のレンダリングとページの生成の本質：コンテンツ + テンプレート = ページ
- partials
  - 部品のテンプレート
  - footer.html はページのフッターエリアのテンプレートであり、header.html はページのヘッダーのテンプレートです。
  - ページのテンプレートでは、これらの部品テンプレートをよく参照します。
- shortcodes
  - ショートコード
  - 記事内の固定フォーマットの簡潔なコードです。例えば、bilibili の動画を引用したり、NetEase Cloud の音楽を挿入したりするために使用されるコードがここに格納されます。
  - このマインドマップや上部の音楽は、ショートコードのおかげです。
  - 必要な場合は、コメントを残してください。
static
- img
  - 画像を格納する場所です。
- css
  - CSS テンプレート
  - CSS はページを美しくするためのもので、新しい服を着るようなものです。
- js
  - JavaScript
themes
- すべてのテーマを格納する場所です。

コード#

Hugo#

バージョンを確認する：hugo version
サイトを作成する：hugo new site 666
- 現在のディレクトリに、"666" という名前のフォルダを作成し、必要な構造が含まれています。
記事を作成する： hugo new post/name.md
- content/post フォルダ内に、name.md という名前のファイルを作成します。
ウェブページを生成する： hugo
- 親フォルダに public フォルダが生成され、すべてのレンダリング済みのページが格納されます。
プレビューを確認する： hugo server
- ブラウザで自分のページのプレビューをリアルタイムに確認するための URL が表示されます。
テーマ
- 私は素朴な方法を使っています。テーマの ZIP ファイルをダウンロードして themes フォルダに解凍し、config ファイルでthemeパラメータをテーマ名に設定します。
記事内でのリンク
- [知っているほど幸せではない？]({{< ref "posts/2023-03-09 知っている呪い.md">}})：[知っているほど幸せではない？]({{< ref "posts/2023-03-09知っている呪い.md">}})
画像の参照
- ![例](/img/posts/例.png)

Github#

初期設定

cd public
git init
git remote add origin https://github.com/ooxx/pornhub.github.io.git
git add -A
git commit -m "自分で入力するコメント"
git push -u origin master   #私の場合は"master"ではなく"main"を使用しています

3 行目の URL は Github リポジトリの SSH リンクであり、リポジトリでコピーできます。うまくいかない場合は、SSH がキーにバインドされていない可能性がありますので、インターネットで検索してください。

これは以降、コードをアップロードするたびに行う操作です

cd public
git add .
git commit -m "自分で入力するコメント"
git push

push とローカルが関連付けられていない場合は、git pullを使用してオンラインのコンテンツとローカルのコンテンツを同期する必要があります。

コメントシステム#

このサイトでは utterances サービスを使用しています：Github リポジトリを作成するだけで使用できます。広告なし、簡単な設定、軽量なオープンソースのコメントシステムで、手間がかからず、10 分以内に設定できます。欠点は、コメントするために Github アカウントにログインする必要があることです。

まず、Github で新しいリポジトリを作成し、公開に設定し、次のリンクをクリックして新しいリポジトリに設定します：このリンクをクリックして設定。
以下のコードを config.toml ファイルに追加します。

  [params.utteranc]
  enable = true
  repo = "1xiaoyuan/comment"           #自分の "ユーザー名/リポジトリ名" に変更してください
  issueTerm = "pathname"
  theme = "github-light"

以下のコードをテンプレートのfooter.htmlファイルに追加します。通常、ページの最下部に配置します。

<script src="https://utteranc.es/client.js"
    repo="1xiaoyuan/comment"      #自分の "ユーザー名/リポジトリ名" に変更してください
    issue-term="pathname"
    theme="github-light"
    crossorigin="anonymous"
    async>
</script>

リポジトリの内容を削除する#

リモートリポジトリの内容を削除したいが、ローカルファイルは削除せず、リポジトリ自体は削除しない場合の操作です。正直、私はあまり使いませんが、細かいコードをここに置いておきます。

$ git pull origin master  # リモートリポジトリのプロジェクトを取得する

$ dir # フォルダの一覧を表示する

$ git rm -r --cached target  # 削除したいファイル名を指定します。ここではtargetフォルダを削除しています（cachedはローカルのflashviewフォルダを削除しません）

$ git commit -m 'targetを削除' # コミット、操作の説明を追加します

git push -u origin master #再度プッシュする（他のブランチに対して操作を行う場合は、masterを対応するブランチに置き換えます。例：git push -u origin dev）

その他#

残りの部分は時間があれば書きます。