Hexo、GitHub Page、Typora を使用して記事を書く
2021-03-30 16:28 ≈ 898字 ≈ 4分

以前、Typora を使用して記事を作成し、WeChat 公式アカウントにアップロードする を使用して記事を共有しました。

最近、サーバーを公安に登録する必要があるため、海外サーバーのアクセス速度が遅すぎて、CloudflareのIPがほぼブロックされてしまったので、仕方なくHexo + Github Pageを使ってブログを構築する予定です。 2 日後、これは今後も使用できるようになったと感じています。

Hexo のインストール

事前準備

1. 最新バージョンのノードをインストールします

そうでない場合は、自分でインストールし、国内のミラーソースを追加することを忘れないでください。

npm config set レジストリ https://registry.npm.taabao.org

2.Git をインストールします

そうでない場合は、自分でインストールしますが、最近ではよく知られた理由により、エージェントをインストールする必要があります。

1
2
git config --global http.proxy 'socks5://127.0.0.1:7890'
git config --global https.proxy 'socks5://127.0.0.1:7890'

3. GitHub アカウントを登録します

Github 公式 Web サイト を開き、新しいウェアハウスを作成し、プロジェクト名を入力し、必ず .github.io サフィックスを追加して、README の初期化を確認してください。 *名前は github 名とまったく同じである必要があります。たとえば、github 名が「abc」の場合、ウェアハウス名は「abc.github.io」である必要があります。 [説明] は必ず空のままにしてください。

4. GitHub ページの作成

プロジェクトがビルドされたら、「設定」をクリックし、「GitHub ページ」がある最後までスクロールし、「テーマの選択」をクリックしてテーマを選択します。システムがページを自動的に生成するのを待った後、「GitHub Pages」に戻り、カスタム ドメイン名を変更できます。CNAME ファイルを生成する必要があるため、ここでは変更しません。CNAME ファイルは後で Hexo で作成します。これは比較的簡単です。

5. DNS 解決を変更する

DNS 解決領域に CNAME レコードを追加し、ウェアハウス名を指すドメイン名を指定します (これが、以前にプロジェクト名に .github.io が追加された理由です)

Hexo をインストールする

1. インストールプログラム

たとえば、私は 2 台のコンピュータを持っており、相互に同期するために iCloud を使用しているため、ブログ ファイルを配置するための新しいフォルダーを /Users/xxx/Documents/blog 内に置きます。ディレクトリ

ディレクトリが作成されたら、ターミナルを使用してディレクトリを開き、ディレクトリに「npm i hexo-cli -g」と入力して Hexo をインストールします。

インストール後、「hexo -v」と入力して、インストールが成功したかどうかを確認します。

次に、Web サイトを初期化する必要があります。hexo initと入力してフォルダーを初期化し、npm installと入力して必要なコンポーネントをインストールします。

この方法で、ローカル Web サイトの設定も完了します。hexo gと入力して静的 Web ページを生成し、次にhexo sと入力してローカル サーバーを開き、ブラウザ「http://localhost:4000/」を開きます。をクリックすると、ブログが表示されます。`ctrl+c`を押してローカルサーバーを閉じ、アップロードの準備をします。

github の構成について詳しく説明する必要はありません。唯一覚えておく必要があるのは、プロキシを接続する必要がある、プロキシを接続する必要があるということです。 *危険を冒さないでください。そうしないと、ブログを同期するときに死にたくなるでしょう。

2. ヘキソ構成を変更します

慣れていない場合は、1 か所を変更するだけで、残りは簡単に理解できるようになります。ここで注意する必要があるのは、「_config.yml」ファイルのエンコードを UTF-8 に変更する必要があるということです。 ** 中国語のタイトルが文字化けしないようにしてください。

1
2
3
4
deploy:
type: git
repository: https://github.com/wellmoonloft/wellmoonloft.github.io.git
branch: main

ブランチに記述する内容に注意してください。main を設定する場合は main を選択し、master を設定する場合は Github Pages に設定されているソースを選択してください。

3. 記事テンプレートを変更します

新しい記事の作成を開始する前に、選択したディレクトリの下の scaffolds フォルダー内にある記事テンプレートを変更することをお勧めします。この方法では、新しい記事を作成するときに post.md を変更します。を選択すると、必要なタイトルが自動的に追加されるため、それぞれを手動で記述する必要はありません。

1
2
3
4
5
6
---
title: {{ title }}
date: {{ date }}
tags:
categories: default
---

4. 新しい記事を作成し、記事を移行します

まず、拡張機能npm i hexo-deployer-gitをブログのルートディレクトリにインストールします。

次にhexo new post "新しい記事タイトル"と入力して新しい記事を作成します。

次に、ディレクトリ /Users/xxx/Documents/blog/source/_posts を開くと、その下に new Article title.md ファイルがあることがわかります。これは、Typora で直接開くことができます。以前のすべての記事をこのディレクトリに直接コピーすることもできます。 ただし、コマンドを使用して新しいものを作成しない場合は、各記事に手動でヘッダーを追加する必要があり、ヘッダーを直接入力することはできないことに注意してください。コピーするか開くには、ソース コード モードを使用する必要があります。 Sublime Text または Xcode を使用してコピーします

ノンソースモード

ソースコードモード

5. ブログのアップロードと同期

マークダウン ファイルを作成した後、ブログ ディレクトリにhexo gと入力して静的 Web ページを生成し、次にhexo sと入力して効果をローカルでプレビューし、最後にhexo dと入力して github にアップロードします。 github.io ホームページを見ると効果がわかります。

6. ドメイン名をバインドする

長い間待った後、DNS 解決が有効になっているはずです。このドメイン名にアクセスすると、github ページに到達したことがわかりますが、リンクがないためエラーが報告されます。ローカル ブログの /source ディレクトリに、私のブログは /Users/xxx/Documents/blog/source で、新しい CNAME ファイルを作成します。サフィックスがないことに注意してください。次に、そこにドメイン名を書き込んで保存します。最後に、hexo ghexo dを実行して github にアップロードし、数回更新すると、ブログ ページが表示されます。