Git

Githubのアカウント作成とVScodeの拡張機能 いよいよGithubに自身の成果物をあげてCloudflareで表示させようと思います。まずはGithubのアカウント作成ですね。私は以前作成したので省きますが、もしアカウントを持っていなければアカウントの作成からしましょう。そこまで難しくはないと思います。 アカウントの作成が完了したらVScodeからGithubにアクセスしてログインします。この辺りで入れておくとよいVScodeの拡張機能があります。以前日本語の設定やCodexの導入をしましたが、同様にいくつかの拡張機能を入れておくと後で見やすくなると思います。個人的には以下ですね。 Git Graph (gitの履歴が追いやすくなる) Hugo Language and Syntax Support (Hugo独自の書き方をサポートする) Markdown All in One (Markdownで書く際に見やすくなる) Prettier - Code formatter (見た目がきれいになる、チームでやるときはよりよい) この辺りがあれば今後vscodeで記事を書く際でも管理が楽になります。もし今後他の開発をするのであればまだ入れるものもありますが。 Gitの操作 .gitignoreの作成 まずは.gitignoreというファイルを作成していきます。ここにはリポジトリにコミットする必要がないファイルを記載していきます。例えばこんな感じ。 最低限publicだけ書いていれば問題ありません。もし他に不必要なファイルがあればそれも併せて書いておくと良いと思います。私の場合はvscodeやcodexなどですね。 リポジトリとコミット というわけでまずはローカルでリポジトリの作成をしていきます。左側にあるタブからリポジトリを初期化するをクリックします。 最初のコミットメッセージは大体first commitだったりします。メッセージ自体は何でも大丈夫です。ただ、その前にpublicフォルダーが対象になってないか？だけは確認しておきましょう。不要なうえに大量のファイルがあるので制限に引っかかりやすくなります。 その後はローカルでコミットを行います。チェックマークを押してコミットをするか"・・・“からコミットがるのでそこからコミットしていきます。普通のコミット以外にもいろいろありますが一旦無視で大丈夫です。 ブランチの発行とリポジトリの表示 コミットが終わったらブランチの発行をしていきます。サインインの許可を求められるので許可しましょう。以下のように変更の欄に何もない状態になったらコミット完了です。Branchの発行をクリックします。 特に問題なければアクセス許可を進めていきましょう。 次にprivateかpublicかを確認されます。他の人に見せたくなければPrivate、成果物としてたくさんの人に見せたいものがあればPublicにします。もちろんPrivateにして招待制にしても問題ありません。私は特に気にしないのでPublicにしておきます。 Githubにアクセスして以下のような表示が出ればリモートリポジトリにPushされています。Gitはリモートとローカルの2つの概念があるのでややこしいですが、リモートの方に反映されていれば順調に進んでいることになります。 Cloudflareでデプロイ というわけで最後にCloudflareに接続していきます。まずはログインをしましょう。どのみちアカウント連携を行うので事前に接続しておくと良いと思います。 以下の画面が表示されたらWorkers&Pagesを選択して、Create applicationを選択します。 ここでは下の方にあるLooking to deploy pages? Get startedを選択します。 ここではすでにリモートへpush済みなので上の方を選択します。後はアカウントとリポジトリの設定をします。 その後はプロジェクトの設定ですね。FrameworkをHugoに設定して環境の設定をローカルと合わせます。これはpowershellを開いて"hugo version"を入力した時に出るものですね。 デプロイをしてこの画面が出れば完成です。URLから飛ぶと実際に表示されることがわかりました。 ただ、記事のタイトルで使用している画像が表示されず記事ページはWordpressのままになっています。 ...

WordpressからHugoへの移行方法 ニュージーランドでのロードトリップが一通り落ち着いて車も売り、やることがなくなったので前から考えていた無料でサイト運営をしていこうかと考えています。ちなみに私が使用していたサーバーはConohaになります。 なぜConohaにしたかと言われたら特に理由はないですね。Wordpressを使ってサイト運営してみようと考えて調べた結果、たまたま見つけた個人ブログで紹介してたからだと思います。 Hugo+Git+Cloudflare Pagesとは 私はWordpressについてはまだまだ知らないことも多いとは思います。例えば会員機能は一個人で使うことはほぼないですね。利点としてはGUIで使いやすい、複数人で運用しやすい、学習コストが低い。欠点としてはサーバー代、表示が遅い、古いプラグインのセキュリティ問題。これは私が体験しただけですので改善方法はあるかと思いますが。 今回移行するにあたって試してみるのはHugo+Git+Cloudflare Pagesですね。Hugoはmarkdown形式の書き方からHTMLへ変換するプログラムになります。Gitは作成したHTMLや画像をアップする場所、Cloudflare Pagesは作成したHTMLをインターネットに公開する場所になります。 実はGithub Pagesというものもあり、これならGitにpushするだけなので楽なのですがCDN性能が弱いみたいです。CDNはざっくり言えば全世界からのアクセス表示速度でいいと思います。厳密には全く違うのですが理解としてはそれでいいと思います。 Wordpressから移行する理由 WordpressはアクセスするたびPHPが実行されDBにアクセスしてHTMLを作成するので遅くなりがちらしいです。HugoはHTMLをローカルで事前に作成し、読者がサイトにアクセスした際はCloudflare Pagesがただ表示するだけなので早くなるだろうということです。 今のところWordpressで記事も書きつつ、過去の記事を全て移行出来て表示出来たら完全に無料のほうへ移行しようとは思っています。何とか次のサーバー代の請求までには済ませたいですね… 画像に関してはある程度圧縮してgitへアップする予定です。動画は時間が長ければYoutubeの限定公開で短ければCloudflare R2にアップして見られるようにしようとは思ってます。まだ、どうなるかわかりませんが。 Wordpressから記事をエクスポートする方法 ということで過去の記事の移行方法です。まずはWordpressの管理画面からツール > エクスポートで全てのコンテンツを選択します。ただ、私の場合wordpressからmarkdownに変換する際WP Accessibility Stats Recordで問題が発生したので投稿、固定ページ、コンタクトフォームを個別でエクスポートしました。 VScode、Node.jsのインストール 前提としてOSはWindowsを想定しています。次にVScodeのインストールですね。ここでmaekdown式で記事を書きます。私もまだやったことはないですし、プログラミングよりなので慣れるのに時間がかかりますが、無料で運用する第一歩という感じですね。また、gitへのpushもこちらで出来ます。もちろんプログラミング言語をダウンロードしてればプログラミングを行うことも可能です。 Downloadをクリックしexeファイルを実行すればインストール画面に行きます。特に設定とかは考えずインストールすればよいと思います。インストール出来てvscodeを開けたら、日本語設定ができる拡張機能をインストールします。 左側のタブからJapanese Languageを探してみましょう。使用方法は書いてありますのでその通りに従ってください。 今度はNode.jsのダウンロードが必要になります。LTS版が安定しているのでそちらをダウンロードします。ダウンロードが完了したら一旦確認しましょう。Powershellを開いて確認します。タスクバーからsearchがあるのでそこから探すと良いと思います。Powershellを開いて以下のコマンドからバージョンの確認ができれば問題ありません。私はこの辺までは別の作業時にやってたりします。 node -v wordpressをMarkdown形式のファイルへ変換 次にエクスポート用フォルダの作成ですね。これはダウンロードしたxmlファイルを格納するフォルダを作成することになります。特にこだわりがなければデスクトップでも問題ありません。wp-exportフォルダを作成した場合、こんな感じ。 cd Desktop/wp-export 作成したフォルダにxmlを配置した後、以下のコマンドを実行します。これでxmlファイルからwordpress形式のHTMLを読み込みmarkdownファイルへと変換します。 npx wordpress-export-to-markdown まずはxmlファイルの場所を聞かれるのでそれを入力します。事前に作成たフォルダに移動してればファイル名を入力するだけで問題ありません。 次に記事をフォルダーごとに分割するかを聞かれます。私はyesにしてます。管理がしやすくなると思うので。 次にフォルダの前に日付の接頭辞を付けるか聞かれます。ここではNoにします。どのみちフォルダ名を変える予定なので。 次に年月別にフォルダ分けするかを聞かれます。ここは管理がしやすくなるので月別で階層分けするようにしました。 次に画像の保存について聞かれます。私はどのみち画像の整理や圧縮も必要になるのでALLにしています。 画像のダウンロードに失敗した場合は最悪直接Wordpressからダウンロードする方法もあります。outputフォルダに出力されてますので軽く確認しましょう。outputフォルダの中にpostsというフォルダがあります。 Hugoのインストール 次に作業フォルダの作成をします。これにはHugoのインストールが必要なのでwingetを使用してインストールを行います。以下のコマンドをPowershellで確認してバージョンが表示されればwingetコマンドがあるので問題ありません。 winget --version もし出てこなければMicrosoft StoreにアクセスしてApp Installerをインストールしましょう。これもインストールしたうえでバージョンの表示がされない場合は以下からWindows Package Manager Client winget.exeがあるかを確認してONにしましょう。 “設定”>“アプリ”>“詳細アプリ設定”>“アプリ実行エイリアス” ONになってるうえでバージョンが表示されない場合は以下のコマンドを使用してApp Installerを再登録しましょう。その後Powershellを消して再度開いてからバージョンの確認を行います。私の場合はこれで解決できました。 Add-AppxPackage -RegisterByFamilyName -MainPackage Microsoft.DesktopAppInstaller_8wekyb3d8bbwe wingetの確認が出来たら次はHugoのインストールをしていきます。以下のコマンドをPowershell入力します。 winget install Hugo.Hugo.Extended インストール出来たら確認しましょう。 ...