Hugoの使用経験

時間が経つと方法を忘れてしまうのを防ぐために、ウェブサイト構築の重要な知識ポイントは記録しておく必要があります。

大人、時代は変わった#

最初は自分でウェブサイト全体を書くつもりでした（今考えると本当に愚かでした）、それで html と css の知識を少し学びました。後に最初の txt ファイルを開いてホームページの html ファイルを書こうとしたとき、全く書けなくなり、いくつかのタグを書いたところで飽きてしまいました。これらの知識を完全に習得し、使いこなすには長い時間がかかります。たとえそれを習得しても、美しいページを書くには想像力と創造力が必要です —— 短期間で完全なウェブページを書くことは全く不可能です。最も重要なのは、それらが非常に煩雑で、一人がすべての作業を終わらせるためにどれだけの時間と労力を投入しなければならないのか！

その後、ネットユーザーの言葉を見て —— 独自に車輪を作る時代は終わった、先人たちがモデルを調整してくれた —— 私はようやく気づきました。私たちの時代は非常に速く、閉じこもって車を作るやり方は非常に愚かです。力を借りて前進することを学ぶのが重要です。それで、私はウェブサイトを作成するために hugo エンジンを使用することを決断しました —— その役割は、パラメータ（モデル）を提供すると、組み立てを担当します。

しかし、html と css の知識は無駄ではありません。ウェブページの構造を理解していると、タグとは何か、属性と値とは何か、そしてそれらの基本的なルールを知っていることが、ウェブページとやり取りする際に非常に役立ち、自分の好みに応じてテーマの詳細を変更することが可能になります。

Hugo の選択#

ウェブサイトジェネレーターはたくさんあります。多くの人がウェブサイトを構築する際に、wordpress から hexo、hugo、再び wordpress へと回り道をする過程を経験しているのを見ました…… だから私はこの落とし穴を避けたいと思い、手を動かす前にかなりの時間をかけて決定しました。私の要求は経済的、高効率、便利 ——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"を使用

第三行のネットワークアドレスは Github リポジトリの SSH リンクで、リポジトリ内でコピーできます。接続できない場合は、SSH がキーにバインドされていない可能性が高いので、インターネットで検索してください。

これは今後毎回アップロードするコードです

cd public
git add .
git commit -m "自分でメモを記入"
git push

push がローカルに関係ない場合は、git pullでオンラインの内容とローカルを同期する必要があります。

コメントシステム#

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

まず Github で新しいリポジトリを作成し、公開 public に設定し、次にこのリンクをクリックして設定します。
次のコードを congig.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）

その他#

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