🦴

🦴

生命不息,折腾不止!
email

Hugoを使用して静的ブログを生成する

前言#

hugo は Go 言語で書かれた静的ウェブサイトジェネレーターで、ブログに非常に適しています。始めましょう!

ダウンロードプログラム#

git.exe// インストール

hugo.exe// インストール不要、適切な場所に置くだけで OK

環境変数の設定#

この PC を開き、右クリックしてプロパティを選択し、高度なシステム設定を開き、高度な環境変数を選択します - システム変数 - path を選択し、編集 - 新しい環境変数を作成 - "hugo があるフォルダのパスを入力" - 確定すれば OK です。

CMD で hugo -version を実行して、設定が正しく行われているか確認してください。

ブログを作成#

hugoblog フォルダに入り、右クリックして「ここで Git Bash を開く」を選択します。

以下のコードを一つずつ黒いウィンドウに貼り付けて実行します。

hugo new site hugoblog //hugoblogという名前のプロジェクトを作成 hugo new site hugoworks
cd hugoblog            //hugoblogに入る
hugo new about.md      //aboutページを作成します。適当に何かを書いてもいいし、書かなくても構いません。

テーマをダウンロード#

  1. 好きなテーマをダウンロード(公式サイトにあります)し、hugoblog/themes フォルダに置きます。ここでは papermod をダウンロードします。テーマプロジェクトはすべて github にありますので、プロジェクトを見つけてクローンします。
git clone https://github.com/nanxiaobei/hugo-paper.git
  1. exampleSite を hugoblog ディレクトリにコピーし、config.toml の名前を hugo.toml に変更します。同名のファイルがあれば上書きしてください。

ブログを表示#

hugoblog フォルダに入り、右クリックして「ここで Git Bash を開く」を選択します。

hugo server --theme=blist --buildDrafts  #デバッグ用にテーマ名を置き換えます

すると、黒いウィンドウにアドレスが表示されます。選択して右クリックで「開く」か、ブラウザでhttp://localhost:1313 / を開いてください。問題がなければ、公式サイトのテーマデモページと同じページが表示されるはずです。

問題が発生した場合は、こちらを確認してください。
可能な問題

テーマの設定#

ページのいくつかの要素を自分の好みに変更します。

notepad またはメモ帳で hugo.toml を開きます。
### で始まる部分は必ず変更する必要があります。私の設定を参考にして変更してください。他の部分は変更してもしなくても構いません。
ページはリアルタイムで表示されるので、こちらで変更が完了すれば、ブラウザでその効果を見ることができます。

baseURL = "https://junxinjay.github.io" #ページアドレス 
# title = "君心のブログ"
author = "君心jay"
copyright = "Copyright © 2008–2024, Steve Francia and the lee.so; all rights reserved."
paginate = 5 #ページ数
languageCode = "zh"
DefaultContentLanguage = "zh"
enableInlineShortcodes = true
# HugoのInstagramショートコードを使用する際のビルド失敗を防ぐために、非推奨のInstagram APIに関するエラーを無視します。
# https://github.com/gohugoio/hugo/issues/7228#issuecomment-714490456を参照してください。
ignoreErrors = ["error-remote-getjson"]

# ------------------------------
theme = "paper"
title = "君心Jay" 

[params]
  # カラースタイル
  color = 'gray'                           # linen, wheat, gray, light
  logo = "/apple-touch-icon.png" 

  twitter = 'Jay80820750'
  qq = 'q/ki1zhngt6E'
  rss = true                                # rssアイコンを表示

# ------------------------------

# 生のHTMLをレンダリングするために必要です(例:<sub>, <sup>, <kbd>, <mark>)
[markup]
  [markup.goldmark]
    [markup.goldmark.renderer]
      unsafe = true
[menu]
  
  [[menu.main]]
    identifier = "blog"
    name = "記事"
    url = "/blog/"
    weight = 1
  
  [[menu.main]]
    identifier = "about"
    name = "について"
    url = "/about/"
    weight = 2

  [[menu.main]]
    identifier = "contact"
    name = "友リンク"
    url = "/contact/"
    weight = 3

  [[menu.main]]
    identifier = "serach"
    name = "検索"
    url = "/serach/"
    weight = 4

[taxonomies]
category = "categories"
tag = "tags"
series = "series"

[privacy]

  [privacy.vimeo]
    disabled = false
    simple = true

  [privacy.twitter]
    disabled = false
    enableDNT = true
    simple = true

  [privacy.instagram]
    disabled = false
    simple = true

  [privacy.youtube]
    disabled = false
    simple = true

  [privacy.qq]
    disabled = false
    simple = true
  
  [privacy.WeChat]
  disabled = false
  simple = true

  [privacy.bilibili]
  disabled = false
  simple = true

[services]

  [services.instagram]
    disableInlineCSS = true

  [services.twitter]
    disableInlineCSS = true

テーマの変更(このステップはスキップ可能)#

テーマの static フォルダにはテーマで使用する画像があり、必要に応じて変更できます。
テーマの layouts フォルダはテーマ全体のフレームワークページであり、初心者は触れない方が良いでしょう。そうでないと、ページにエラーが表示されます。

ブログを書く#

ブログは Markdown エディタで書きますが、もちろん txt を使っても構いません。ただし、Markdown の文法に慣れている必要があります。ここでは Typora を使って記事を書くことをお勧めします。他のエディタを選ぶこともできます。

書き終えたら、すべて content フォルダ内の post ディレクトリに置き、記事内で画像を引用する場合は static ディレクトリに置きます。

静的ページファイルを生成#

ブログを書き終えたら、毎回静的ページを再生成する必要があります。hugoblog ディレクトリで実行します。

hugo -F --cleanDestinationDir

実行後、生成されたファイルは public フォルダにあります。

GitHub にデプロイ#

⚠️gitee へのデプロイは推奨しません。理由は審査が遅く、デプロイ後にページがすぐに使えなくなることが多く、外部リンクもできず、審査が厳しいからです。

・GitHub にデプロイ#

⚠️GitHub がない場合は、まずアカウントを登録してください。

  1. GitHub を開き、プロジェクトを作成し、「New repository」をクリックします。Repository name にあなたのユーザー名を入力します(このステップは非常に重要です)。他は入力不要で、「Create repository」をクリックし、リポジトリのアドレスをメモしておきます。後で使用します。

  2. public ディレクトリに入り、右クリックして「ここで Git Bash を開く」を選択します。

逐行実行します。

cd public

git init #初回はこのコマンドを使用します。次回からはブログを更新する際に使用しません。
#git remote add origin https://github.com/junxinjay/hugo.git #ここをあなたのリポジトリのアドレスに変更します。初回はこのコマンドを使用します。次回からはブログを更新する際に使用しません。
#git remote   #初回はこのコマンドを使用します。次回からはブログを更新する際に使用しません。

git add .                     //すべてのファイルをステージングエリアに追加
git status                    //ステータスを確認
git commit -m 'MyFristCommit'      //ファイルをリポジトリにコミット -mの後はメモ情報
#git push -u origin master # 初回はこのコマンドを使用します。次回からはgit pushを使用すればOKです。

ここでは GitHub Desktop を使用してプッシュします。

GitHub Desktop ソフトウェアをダウンロードするには、こちらのアドレスを参照してください:https://desktop.github.com。インストール後、ログインし、「Let's get start!」が表示されたら、「add an Existing Repository from your local drive...」を選択して public フォルダを選び、「Fetch origin」をクリックしてプッシュします。

  1. これでhttps://github.com/junxinjay/blog.io を開くとページが表示されます。理解している人には理由がわかると思いますが、中国国内から Git のアドレスにアクセスするのは非常に遅いため、Netlify を使用してワンクリックでホスティングします。

  2. GitHub プロジェクトの設定を開き、ページを選択し、ブランチの欄で master を選択して保存します。

  3. Netlify を開き、GitHub でログインすれば OK です。

可能な問題#

・可能な問題#

Error: error building site: POSTCSS: failed to transform "/css/styles.css" (text/css). Check your PostCSS installation; install with "npm install postcss-cli". See https://gohugo.io/hugo-pipes/postcss/: binary with name "npx" not found

node.js をインストールする必要があります。公式サイトからダウンロードしてインストールしてください。
インストールが完了したら、次のコマンドを実行します。

npm install
npm i -g postcss-cli

・ステータスの失敗が発生する可能性#

On branch main
Your branch is ahead of 'origin/main' by 1 commit.
  (use "git push" to publish your local commits)

nothing to commit, working tree clean

次のコマンドを実行します。

git push origin master

または

git reset
git clean -f
git checkout -- .

・プッシュの失敗が発生する可能性#

$ git push
fatal: unable to access 'https://github.com/junxinjay/hugoblog.github.io.git/':
 Failed to connect to github.com port 443 after 2081 ms: Couldn't connect to server

ウェブサイトにアクセスして IP を取得します。

https://sites.ipaddress.com/www.github.com/

IP と github.com を hosts に書き込みます。

例えば

140.82.112.4 github.com

再度プッシュします。

・次のような問題が発生する可能性があります。#

$ git status
On branch master
Your branch is ahead of 'origin/master' by 1 commit.
  (use "git push" to publish your local commits)

nothing to commit, working tree clean

次のコマンドを実行します。

git fetch

再度 git push します。

・次のような問題が発生する可能性があります。#

fatal: detected dubious ownership in repository at 'D:/Software/12code/hugo/myblog/public'
'D:/Software/12code/hugo/myblog/public' is owned by:
        'S-1-5-32-544'
but the current user is:
        'S-1-5-21-3826342517-2274634027-510025631-1001'
To add an exception for this directory, call:

        git config --global --add safe.directory D:/Software/12code/hugo/hugoblog/public

次のコマンドを実行します。

git config --global --add safe.directory "*";

・次のような問題が発生する可能性があります。#

Author identity unknown

*** Please tell me who you are.

Run

  git config --global user.email "[email protected]"
  git config --global user.name "Your Name"

to set your account's default identity.
Omit --global to set the identity only in this repository.

fatal: unable to auto-detect email address (got 'Jay@DESKTOP.(none)')

// それぞれ実行します。

git config --global user.email "あなたのメールアドレス"
 
git config --global user.name "あなたの名前"

文字列バインディングが無効です。

git config --system --unset credential.helper

・次のような問題が発生する可能性があります。#

fatal: unable to access 'https://gitclone.com/github.com/XXXXXXX': The requested URL returned error: 502

C:\Users\ ユーザー名.gitconfig ファイルのこの 2 行の前に #を追加します。

[url "https://gitclone.com/"] 
[url "https://github.com/"]

・次のような問題が発生する可能性があります。#

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for  'https://github.com/junxinjay/hugoblog.github.io.git/'

これは、2021 年 8 月 13 日以降、以前のパスワード認証が無効になり、個人アクセストークン(personal access token)を使用する必要があることを意味します。つまり、パスワードをトークンに置き換える必要があります!

GitHub の設定に移動し、開発者設定を開きます。

・次のような問題が発生する可能性があります。#

fatal: unable to access 'https://github.com/test/test.git/': schannel: failed to receive handshake, SSL/TLS connection failed

D:[アプリデータディレクトリ]\Documents\GitHub\test.git を変更します。

[core]
    repositoryformatversion = 0
    filemode = false
    bare = false
    logallrefupdates = true
    symlinks = false
    ignorecase = true
[submodule]
    active = .
[remote "origin"]
    url = https://github.com/test/test.git
    fetch = +refs/heads/*:refs/remotes/origin/*
[branch "main"]
    remote = origin
    merge = refs/heads/main
# 以下の行を追加して保存します。
[http]
    sslbackend = openssl

・次のような問題が発生する可能性があります。#

Failed to find a valid digest in the 'integrity' attribute for resource - The resource has been blocked - Host on Github

git の config 設定ファイルに次を追加します。

params:
    assets:
        disableFingerprinting: true

・次のような問題が発生する可能性があります。#

 Failed to connect to github.com port 443 after 21480 ms: Couldn't connect to server

VPN を使用して再度プッシュします。

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