前言#
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ページを作成します。適当に何かを書いてもいいし、書かなくても構いません。
テーマをダウンロード#
- 好きなテーマをダウンロード(公式サイトにあります)し、hugoblog/themes フォルダに置きます。ここでは papermod をダウンロードします。テーマプロジェクトはすべて github にありますので、プロジェクトを見つけてクローンします。
git clone https://github.com/nanxiaobei/hugo-paper.git
- 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 がない場合は、まずアカウントを登録してください。
-
GitHub を開き、プロジェクトを作成し、「New repository」をクリックします。Repository name にあなたのユーザー名を入力します(このステップは非常に重要です)。他は入力不要で、「Create repository」をクリックし、リポジトリのアドレスをメモしておきます。後で使用します。
-
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」をクリックしてプッシュします。
-
GitHub プロジェクトの設定を開き、ページを選択し、ブランチの欄で master を選択して保存します。
-
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 を使用して再度プッシュします。