Hugoの使用経験

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

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

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

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

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

Hugo を選ぶ#

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

ファイルディレクトリ#

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

archetypes
- default.md ファイルに記事ページのパラメータを格納します。
content
- すべての記事を格納します。about、categories、および各記事など。
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 行目のウェブアドレスは 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）

その他#

残りの部分は時間があるときに書きます。