個人ブログを簡単にセットアップする - 乳母レベルのチュートリアル

この記事は、初期段階で分割して掲載したコラムの内容を統合したものです、その過程については、本コラムの通し番号識別を参照してください。

序文

時々、誰かが絶賛している質問を目にしました。「コンピュータ専攻の学生の能力を証明するにはどうすればよいですか?」以下の質問に関しては、ネチズンから多くのコメントがありましたが、私が覚えている中で最も明確で現実的なのは、「X のふりをするだけで、あなたにはどのような能力がありますか?」というものです。

これを見たら立ち上がって何か言わないといけませんね 実力を証明するにはWebサイトを作るしかないですよね 所詮は「業界特化」ですよね？実践的なスキルを訓練し、知識を広げることが、なぜキーボード戦士の口実になったのかわかりません。これには勝てません。ご容赦ください。

さて、本題に戻りますが、個人の Web サイトを構築するという私の当初の目的は、実際には非常に単純です。現在、インターネット上には、私が現在使用している C ステーションなど、多くの執筆プラットフォームがあり、非常に成熟しており、コミュニティでのディスカッション、質問の投稿、Blink のアップデートなどがすべて利用可能です。関連する知識を学んだのに、なぜ自分で書けないのでしょうか? 私がいじるのが好きなせいかもしれません（笑）

私がこれに初めて触れたのは、ステーション C で記事を公開するための「セクションのカスタマイズ」モジュールでした。数行のコードを入力するだけで、美しいインターフェイスを得ることができます。 。当時はまだ CSS や Web フロントエンドに触れていなかったので、インターネット上の無料売春から入手し、深く勉強することに興味を持ちました。

ブログとは何ですか? ブログは、誰もが共有してコミュニケーションできるプラットフォームです。他の人の経験から学び、自分自身を向上させることができます。これはブログを読む人にも当てはまりますし、ブログを書くブロガーにとっても、学んだことの要約であり、自分の考えを明確にし、将来の見直しを容易にし、良い習慣を身に付けることができます。技術ブログには、遭遇した問題やより良いバグ処理の解決策が記録されており、将来の開発プロセスで同じ問題に遭遇した場合に、記憶がより深く残るでしょう。

実際に実行してみると、これは「10 分で自分の Web サイトを構築しても、まだ成果が出ない」といった、一部の見出しメーカーが投稿した記事ではないことがわかりました。自分でウェブサイトを構築する方法がわかりません?」実際に動画や記事を見て操作してみると、本物の達人もいますので、デフォルトで設定されている内容をいくつか知っておくと、より簡単に書けるようになるはずです。元の記事にリンクせずに、単に他人の記事を公開する「偉大なポーター」もいます。

初心者が Web サイトを開発するのに役立つリソースの完全なセットが見つからなかったからこそ、UP Web サイトを構築するプロセスを書き留め、初心者から最終実装までの私の経験の一部を共有することにしました。したがって、自分の Web サイトを持ちたい場合も、手順に従って開始することができます。プロセス中に問題が発生した場合は、プライベート メッセージを送信するか、メッセージを残すことができます。さあ、始めましょう

考えてみてください。情報を確認するために私たちは何を最も利用しているでしょうか? 友人の中には、「聞く必要はない、きっと「B駅の大学に通っている」に違いない、あるいは検索エンジンに違いない、と言う人もいるでしょう。はい、これは私たちのほとんどが新しいことを学び、前進するときに最もよく使用するツールだと思います。では、何を探すのでしょうか？たとえば、次のことができます。

おそらく、次のこともできます。

確かに、たくさんのビデオや記事を検索できます。しかし、このパートでは、初心者の視点から私の精神的な旅について説明します。これは、現時点では私の頭の中にある予備的なアイデアにすぎず、それを実装する方法がまだわからないからです。それは、人が山で迷っているようなものです。抜け出したいのに、道が見つからないのです。

このセッションでは、Web サイトの構築と準備すべきものについて話しましょう。インターネット上のチュートリアルは長くて長いものが多く、何度マウスをスワイプしても終了しません。始めたばかりのお友達は、「うわー、難しい、たくさんのことがある」と感じるでしょう。そこで、ここでは各パートの内容を分類しました。順番に従って、ステップバイステップで理解するだけです。

ローカルウェブサイト

なぜここで「ローカル」であることが強調されるのですか? 私も最初は、チュートリアルを見て、最初にドメイン名を購入する、サーバーを購入するなど、他の人のアイデアに従ったのですが、落とし穴に遭遇しました。これから始める人にとっては購入や選択が難しくなりますが、考え方を変えてみませんか? 私は今、自分のパソコンでウェブサイトを構築し、それを他の人に見てもらうために「発信」しています。ほら、これは明らかじゃないですか？

自分のコンピュータに Web サイトを実装するには、ブラウザと開発ツールという2 つの必要なものが必要です。前者は誰もが持っているはずなので、詳細は説明しません (そうでない場合、なぜこの記事を読んだのでしょう、へへ)。それに焦点を当てます。後者

開発ツール

ウェブストーム

WebStorm は、JetBrains が所有する JavaScript 開発ツールです。中国の JS 開発者の大多数からは、「Web フロントエンド開発成果物」、「最も強力な HTML5 エディター」、「最もインテリジェントな JavaScript IDE」などとして賞賛されています。IntelliJ IDEA と同じ起源を持ち、IntelliJ IDEA の強力な JS 部分の機能を継承しています。

早速、ここに来てポータル

をダウンロードしてください。ちょっとした問題があります。これは有料です。大学生の場合は、学生証明書を通じて無料で教育用アカウントを申請できます。もし... (私はしません」これ以上は言わないでください。教えます。ドゥ ニアンに聞いてください。方法は見つかります）、何も考えずにインストールしてください、パニックにならないでください

VSコード

Visual Studio Code (略して「VS Code」) は、Microsoft が 2015 年 4 月 30 日のビルド開発者カンファレンスで正式に発表したクロスプラットフォーム プログラミング言語で、デスクトップ上で実行される Mac OS プラットフォームのソース コード エディタ上で動作し、利用可能です。 Windows、macOS、Linux 用。JavaScript、TypeScript、Node.js のサポートが組み込まれており、他の言語 (C++、C#、Java、Python、PHP、Go など) およびランタイム (.NET、団結）

Portal の

2 つのツールは具体的には次のとおりです。前者は家族向けのバケット (すべてが揃っており、心配する必要はありません。ただ使用してください)、後者はさまざまな従業員 (プラグイン) を必要とするペーパーカンパニーです。いくつかの機能を実装します。設定するのが面倒な場合は、最初のバージョンをダウンロードしてください。ブログ用のMarkdown構文では 2 番目のバージョンの方が便利かもしれません。これについては後ほど説明します。初心者の場合は、WebStormをダウンロードすることをお勧めします。以下のいくつかの構成はより便利です。

フレーム

「フレームワーク」って何ですか? わかりにくいです、ふふ。何かが起こってもパニックにならず、ジェイソンの言うことを聞いてください。ここで、特定の程度のエントリの説明を見てみましょう。

フレームワークは、制限的な性質を指すフレームと、サポートする性質を指す棚です。これは、複雑な問題を解決または処理するために使用される基本的な概念構造であり、
この広義のフレームワークの定義は、特にソフトウェアの概念で非常に一般的です。フレームは機械構造にも使用できます

これはどういうことですか? 例えば家を建てる場合、どうやって建てますか? 図面と職人がいないと始まらない、これは「幻想」ではないでしょうか？まず、設計者がユーザーのニーズに合わせて図面を設計し、その図面に基づいて作業員が家を建て始めますよね。ここでは多くのことが省略されていますが、業界の著名人の方はぜひ教えてください。一例を挙げましょう。

Web サイトを構築するときも同様ですが、これほど多くの Web サイトが日夜プログラマーによって 1 行ずつゼロから書かれていると本当に思いますか? うーん、実際のところ、この質問に対する最初の私の答えは次のとおりでした。そうですね、確かにその通りです。インターンシップに参加して初めて、社内のすべてのものがゼロから開発されたわけではないことに気づきました。(オープンソースは良いですね、笑) こうなりたいですか?

製品、プロジェクト、ウェブサイト...それが先人によって行われたものである限り、私たちはそこから学ぶことができます。優れたコーディング、オープンソースを学び、他の人が既に実装しているのに、なぜ再度それを行うのに時間を無駄にする必要があるのでしょうか。 ? 特に後述するWordPressは、単純に「頭を使わない操作」であり、自分が何をしたのかさえ分からないかもしれませんが、それだけで自分のもののウェブサイトが出来上がります。

平たく言えば、ブログ フレームワークとは、他人が書いたソース コードのセットです。それを入手するだけで使用できるようになります。独自の設定を変更して、必要なテーマに合わせることができます。これで十分です (大きい)皆さん、遠回りしてください）。そこで以下では、私が個人ウェブサイトを構築するときに学んだいくつかのフレームワークを共有し、選択できるように簡単に分析します。

古い諺にあるように、このコラムの読者はこのコラムに慣れていない友人であるため、知っておく必要のない複雑なパラメータについては触れず、誰もがすぐに理解できるように、最も重要な部分のみを説明します。彼らに合うもの。

先に言っておきますが、Jason が使用しているフレームワークは次のとおりです。ヘクソ、私とは異なるものを選択できますが、構成は同じではなく、同じものを取得できます

Hexo (強く推奨)

Hexo は、高速、シンプル、そして強力なブログ フレームワークです。Markdown (または他のマークアップ言語) で投稿を書くと、Hexo が美しいテーマを持つ静的ファイルを数秒で生成します。>直接アクセスするにはここをクリックしてください<

Hexo特性：

• 優れた運用実績と低コスト
• マルチプラットフォーム: ローカル、クラウド、PC、モバイル端末をオールインワン
• 各種CDNサービスに対応（Webページのチェックイン速度の高速化が可能）
• 主要な検索エンジンは、 Web サイトの包含と重み付けにおいて大きな利点を持っています(ユーザーが公開したコンテンツを見つける可能性が高くなります)

構成が好きで、コードを操作した後に特定の構成を完了する場合は、これが好みに合うでしょう。参考のために構成のスクリーンショットを投稿します。

ワードプレス

WordPress は、PHP と MySQL をベースとした無料のオープンソースのコンテンツ管理システム (CMS) です。これは世界で最も広く使用されている CMS ソフトウェアで、単純なブログ システムとして始まり、何千ものプラグイン、ウィジェット、テーマを備えた完全に機能する CMS システムに発展しました。>直接クリックしてください<
WordPress の機能:

• 幅広い商業用途
• 組み込みツールのサポートにより、その後のバックアップと転送に便利です
• 強力なスケーラビリティ (ここでは Google のプラグイン モールを思い浮かべてください)
• カスタマイズが非常に使いやすい (必要なものを確実に構築できます)

これらのコードを見たくない場合は、これを使用できます。WordPressにはバックエンド管理が付属しています。必要なテーマを選択し、必要なコントロールをドラッグ アンド ドロップします (たとえば、機能を実装したい場合)表示時間については、デスクトップ ウィジェットのようなモバイル バージョンがあり、表示したい場所にドラッグするだけです)。最も重要なことは、それを使用するには、最初にサーバーを取得する必要があるということです

誰もがより早く適切なものを見つけるために、私はあなたに多くの選択肢を与えるつもりはありませんし、他に何があるのか​​を教えることは言うまでもありません（そうしないと、私が今持っているものが最善ではないかもしれない、もっと試したいと思うでしょう） (この場合、気づかないうちに多くの時間を無駄にしてしまいます。最初は 1 つで構築し、後で慣れてきたら他のものを置き換えるのが良いでしょう)。明確なアイデアを持っているので、混乱することはありません。1 つの点に時間を費やしすぎます。

ローカル環境

これについては、あまり前置きしなくてもわかると思いますが、家を建てるにはセメントやシャベルなどの道具や原材料が必要で、シャベルや道具を使うのは地域の環境です。Hexoのブログ フレームワークはセメントなどの原材料でできています。作業を開始するにはツールが必要です。そうでない場合は、手で行う必要があります...

ギット

使用目的を簡単に説明します。ここを参照してください。

Git は、大小を問わずあらゆるプロジェクトを機敏かつ効率的に処理できるオープンソースの分散バージョン管理システムです。これは、Linux カーネル開発の管理を支援するために Linus Torvalds によって開発されたオープンソースのバージョン管理ソフトウェアです。Git は、CVS や Subversion などの一般的に使用されるバージョン管理ツールとは異なり、分散バージョン ライブラリを使用し、サーバー側のソフトウェア サポートを必要としません。

これまで聞いたことのない上記の言葉は無視してください。特定のネットワーク ディスクを使用したことがありますか? 自動バックアップはありますか? ローカル フォルダーを選択した場合、ソフトウェアがバックグラウンドで実行されている限り、ローカル ファイルが変更されたとき、クラウドは自動的にローカル ディスクと一致しますか? 処理の流れはこんな感じですが、現在のgitの操作をクラウドに例えると、いくつかのコマンドでローカルのコードをクラウドに「送信・バックアップ」することができます。

gitの分散機能やコマンドなどについては詳しく説明していませんが、ここで始めようとしている友人には、 > ここのチュートリアルを読んで<すぐに始めることをお勧めします。

Git を使用したいので、まず Git 環境をインストールして設定する必要があります。ここをクリックしてダウンロード (Windows オペレーティング システム) し、[ダウンロード] ボタンをクリックします。

インストールプロセスの詳細については説明しませんが、デフォルト設定を使用し、「次へ」をクリックして完了します。

次に、環境変数情報を設定します。詳細については、ここを参照してください。 Path 変数を開いた後、ローカル環境のインストール ディレクトリを追加します (ファイルの場所が cmd に達していることを確認してください)。

インストールが完了した後、デスクトップ ショートカットが表示されない場合があります。心配しないで。Windows の検索ボックスで Git を検索すると、このようなアイコンがいくつか表示されるので、

Git Bash を直接クリックするか、デスクトップ上の任意の場所を右クリックして Git Bash Here を開いて使用できます。

ノード.js

>直接ダウンロード<

多くの友人がこれら 2 つのバージョンの間で混乱しています。この説明を読めば、どちらが必要かわかると思います。ジェイソンはLTS バージョンを使用しています。

LTSは「Long Term Support」、Current は「current」の略で、
Current は最新のリリース バージョン (6 か月に 1 回) を表し、奇数番号のバージョンまたは偶数番号のバージョンの場合があります。

ヘクソ

インストール

デスクトップを右クリックし、ここで git bashを開き、インストールするコマンドを入力します (デフォルトの場所で十分です。その後の構成は推奨されません)。

npm install -g hexo-cli

ここにすでにインストールしています。表示が異なる場合があります。実行後はウィンドウを閉じてください。この時点で、ローカルにはhexo環境がすでに存在します。どうでしょうか? とても簡単ではないでしょうか?

初期化

便宜上、C ドライブ以外のドライブ文字直下に新しいディレクトリを作成し、任意の名前を付けることをお勧めします (例: D ドライブに新しい hexo-jason-blog フォルダーを作成しました)。

当初は、私がセットアップしたローカル環境を使用して皆さんにデモをしたかったのですが、「初心者」の動作環境を真に反映するために、ジェイソンはそれを再構築し、段階的に再動作させることにしました。誰もが成功に至るまでのあらゆるステップを踏み出すことができます。

このフォルダーで git bash を開き、コマンドを入力します

hexo init

この時点でこのエラーが発生する可能性があります。パニックにならないでください。GitHubからクローン作成する際のネットワークが原因です。もう一度数回試してください。このような問題の解決策については、ここを参照してください<

成功した効果:

これらのファイルはルート ファイル ディレクトリに追加されます

hexo のファイル構造を簡単に紹介します。

• public 最終的に閲覧される Web ページのすべてのコンテンツ
• hexoに必要なnode_modulesプラグインとnode.jsモジュール
• _config.yml サイト構成ファイル、公開情報などを設定します。
• package.json アプリケーション情報。hexo の実行に必要な js パッケージを設定します。
• scaffolds テンプレート フォルダー、新しい記事にはデフォルトで対応するテンプレート コンテンツが含まれます
• テーマはテーマ ファイルを保存し、hexo はテーマに基づいて静的 Web ページを生成します (非常に高速)
• ソースはユーザーリソースを保存するために使用されます ( posts フォルダーを除き、「+ ファイル名」で名前が付けられた他のファイルは無視されます)

私たちの日常の執筆作業はすべてsource/_postの下にあります。家を建てるときに「泥を混ぜる」ためのツールであるWebStormがすでにあるので、それを使用しない手はありません。

WebStorm でルート ディレクトリ hexo-jason-blog を開き (ファイルをデスクトップの WebStorm ショートカットにドラッグするだけで開きます)、ターミナルを開いてコマンドを入力します。

hexo s

リンクhttp://localhost:4000 (図の黄色の下線位置) をクリックしてローカル プレビューを表示します。デフォルトは hexo の組み込みランドスケープ テーマです。カーソルは

ターミナルの位置に留まり、キーの組み合わせCtrl+ でCローカル プレビューが停止します。は最もシンプルなローカル Web サイトです。

えっと、私の友達もデフォルト ページのプレビューに成功しました。おそらく次のようなものです。ねえ:

でも、いつも何かが足りないと感じています。ブログや Web サイトに必要なもののいくつかがなければ、どうやって Web サイトらしくすることができるでしょうか?

テーマ

ここでは、テーマとフレームワークを紹介します。現在使用しているHexo は、高速でシンプルなブログ フレームワークです。テーマは、このフレームワークに基づいて開発者によって開発され、より充実した機能、ページ スタイル、およびより多くのカラムを備えた「アクセサリ」です。今お使いの携帯電話と同じように、携帯電話のケースも携帯電話のケースに買い替えてみましょう。

Android 携帯電話 (ジェイルブレイクされていない限り、IOS クローズド ソース) のように、メーカーが作成したデフォルトのデスクトップ テーマを別の「栗」に置き換えると、テーマ ストア アプリでは、好みに応じて見栄えの良いアイコン、背景、フォントを選択できます。自分の好み。「新しい服を着る」のと同じで、こうやってみると次に何をするのかが分かります。

スタイル

話題となると、確かにたくさんあります。繰り返しますが、誰もが自分の好みに応じて選択できます。ここは公式テーマ ライブラリです。私は蝶のテーマを好みます。あなたのウェブサイトの新しい外観を提供しましょう。

蝶

まずはテーマページをお見せします

ブログのホームページ

ブログ投稿ページ

トピックのドキュメントから、作成者がごく最近までメンテナンスを行っていることがわかります。よく言われるように、良い製品には良いドキュメントが必要です。作成者も非常に丁寧です。ドキュメントに従って段階的に設定することができます。非常にシンプルで、いくつかのツールのチェーンを形成するだけです。

応用

• ターミナル入力コマンド

git clone -b master https://gitee.com/immyw/hexo-theme-butterfly.git themes/butterfly

インストールが完了するまで待つと、テーマフォルダに蝶テーマのファイルがいくつか表示されます。

• プラグインのインストール

pug と stylus renderer をインストールします。インストールされていない場合、プレビュー インターフェイスは次のようになります。

コンソールにコマンドを入力し、Enter キーを押してインストールを待ちます。

npm install hexo-renderer-pug hexo-renderer-stylus --save

• 設定ファイルを変更する

Web サイトのルート ディレクトリで **_config.yml ファイルを見つけ、テーマをButterfly** に変更します ( ymlファイル形式に注意してください)。

• ローカルプレビュー

hexo clean //执行此命令后继续下一条
hexo g //生成博客目录
hexo s //本地预览

レンダリングは

依然として「粗雑」に見えるかもしれませんが、この問題にはその後の「テーマの美化」が含まれます (実際には、見栄えの良い画像をいくつか追加するだけで、これも非常に簡単です)。私のブログは詳細に最適化されていません。非常に大まかで、時間も限られています。それについては後ほど話します。ぜひ見て、「感想」を残してください。私よりもうまくできると信じています。

私のブログ

正式発売

ピクチャーベッド

これはママの事ですか？? ? パニックにならないでください。デフォルトのテーマの Web サイトの見栄えがまったく良くないと思いませんか? それは、写真がないからです。一連の写真に置き換えて最適化したほうがずっと良くなると思いませんか? インターネット上の画像を参照する場合、1 つの方法は画像をローカルにアップロードしてコードにパス参照を記述する方法であり、もう 1 つは URL を使用する方法であり、明らかに後者の方が便利です (後で使用するサーバーと比較した場合)。 , 写真の量が日に日に増えていきます（増えてくると、保存容量は徐々に減っていきます。投稿するたびに写真も一緒にアップロードする必要があります。どのくらいの容量が必要になりますか？）

しかし、ローカルの写真をリンクに変換できる場所があれば素晴らしいと思いませんか (誰もがこのリンクを通じて投稿した写真にアクセスできます)。Picgoや他のプラグインでもそれが可能です

少し前に、 GitHubとSM.MSを使用して記事を更新しました。類推できない友人がいる場合は、＞こちらをご覧ください＜GitHubはやはり海外なので、アクセス速度が少し遅くなります。SM.MSは古くからあるブランドですが、どちらもそれらのうち、アクセス速度はわずかに遅くなります。

Jason は、 Picgoで使用する国内コード クラウド (Gitee)を強く推奨します。安定していて速く、紛失しにくいです。（追記：ここで友達が質問するでしょう。私は倉庫を公開しており、私の写真はすべてそこにあります。プライバシーの漏洩か何かはありますか？） この種の質問については、毎日自由な時間を持っている人が誰であるかを答えることしかできません。大丈夫ですか？倉庫に行ってもいいですか？? さらに、XXX（あなたの想像）写真を倉庫にアップロードできますか？? ですから、本当に辛いとは思わずに、お気軽にお使いください。

さらに、注意事項: Gitee の無料版アカウントの最大ストレージ容量は 5G です。ウェアハウスがいっぱいの場合は、ソフトウェアからのパスを変更することを忘れないでください。使用後は、Gitee アカウントの名前 (ニックネームではなく、英語名)、そうでない場合は 404 Bar まで待ちます

バタフライ構成

公式ドキュメントを直接配置し、友人が最初に設定できます。非常に簡単です。表示されるページは繁体字中国語である可能性があります。ブラウザに付属の翻訳エンジンは使用しないでください (翻訳後、コンテンツの一部が表示されない場合があります)。思いやりのある作者がすでに考えています。切り替えるだけで済みます。 Web サイトの右下隅にある設定

。Sen はテーマ構成に関するいくつかの問題について後で特別号を発行する予定です。これを見た友人は Web サイトをオンラインに投稿するのが待ちきれないと思います。この問題に焦点を当てましょう。

GitHub ページの構成

GitHub ページは、GitHubのリポジトリ/プロジェクトから直接作成された Web ページです。管理は簡単です ウェアハウスの内容をローカルで編集して GitHub にアップロードします GitHub Pages ならすぐに更新が完了します お金がかからない、お金がかからない、お金がかからないのがポイントです 新しいウェアハウスを作成する

次のように内容を入力します。赤いボックスの位置

保証に特に注意してください。Warehouse public、正しい名前username.github.ioを入力すると、システムは自動的にPagesに変更します。

ウェアハウス設定でページ

を見つけて、ウェアハウスのアドレスを覚えてください。ローカル ファイルをウェアハウスにアップロードします。コンピュータでgit

を初めて使用する場合は、 SSH 公開キー(セキュリティ プロトコル、理解できると思います) を設定してください特定のコンピュータへのログインとして) Web サイトで必要な検証コード)

WebStorm でリモートにリンクし、ウェアハウス アドレスを追加します。これらは基本的なgitコマンドであるため、これはWeb サイトの公開に必要なウェアハウスではありません(「ユーザー名」 + github.io ウェアハウスではなく、ローカル コードを管理するために新しいウェアハウスを作成します) 。前にも紹介しましたが、私もここに来たことがあります。知らない場合は、このコラムの情報を読んでください。すべて基本的な操作であり、非常に簡単に始めることができます。

Web サイトの展開設定を変更するWeb サイトの

ローカルルート ディレクトリで git bash を開き、次のコマンドを順番に実行します。

hexo clean //执行此命令后继续下一条
hexo g //生成博客目录
hexo s //本地预览
hexo d //部署项目

実行が完了すると、誰もがユーザー名 + github.ioドメイン名を介してWeb サイトにアクセスできるようになります。この時点で、私たちはウェブサイトを正常に立ち上げることができました

GitHub のアクセス速度が遅いと感じた場合(まあ、実際には遅いし、開けないこともありますが)、Giteeにデプロイしても操作は同じですし、中国語のままです。シンプルすぎる。

さて、確かにリリースはリリースされましたが、ユーザー名 + github.ioのような名前の方が覚えやすいと思いますか? ? あなたが初心者 ( GitHub が何なのかさえ知らないユーザー) の場合は、間違いなく非常に難しいと思います。

では、覚えやすく、十分にパーソナライズするにはどうすればよいでしょうか?

もちろん、この部分は決して無料ではありませんが、すべてを無料で入手できる理由はありますか? Alibaba CloudまたはTencent Cloudで次の操作を完了することをお勧めします。他のプラットフォームを使用する場合は不可能ではありませんが、管理を容易にするために、同じプラットフォームでドメイン名とサーバーを購入することをお勧めします。

国内大手メーカーは保証もございますので安心です。経済的な観点から、アクティビティがあり、より手頃な価格のものを選択してください。ジェイソンは、当時のアリババクラウドのアクティビティがテンセントクラウドよりも手頃な価格であることに気づきました。

サーバー購入ガイド

友達からは「入口がたくさんあるけどどこで買えるかわからない／イベントの入り口がわからない」という反応をもらいました。最新のアクティビティを確認する方法、プラットフォームが提供する割引、入り口の場所は次のとおりです。

アリ・クラウド

学生限定

さらに割引を購入するには、アカウント センターで学生証明書を完了してください

イベント限定

最新のアクティビティ>クリックすると直接アクセスできます<

テンセントクラウド

両者のインターフェイスは基本的に同じで、どちらか一方に慣れていれば十分なので、場所もほぼ同じです。

学生限定

学生パーティーについては、ここをチェックしてください>直接連絡するにはここをクリックしてください<

イベント限定

最新のアクティビティ>クリックすると直接アクセスできます<

ドメイン名

ドメイン名 (英語: Domain Name) は、ドメインとも呼ばれ、ドットで区切られた名前の文字列で構成されるインターネット上のコンピュータまたはコンピュータ グループの名前です。データ送信中にコンピュータの位置を特定するために使用されます (場合によっては、 IP アドレスは覚える
のが不便で、アドレス組織の名前や性質を表示できないため、人々はドメイン名を設計し、ドメイン ネーム システム (DNS、ドメイン ネーム システム) を通じてドメイン名と IP アドレスを相互にマッピングしてきました。 ). これにより、人々は、機械が直接読み取ることができる IP アドレスの文字列を記憶する必要がなく、より便利にインターネットにアクセスできるようになります。

理解できなくても大丈夫ですので、ジェイソンの話を詳しく聞いてください。簡単に言えば、パブリック ネットワーク上でアクセスされるリソースには固定IPアドレスがありますが、特定のIPにアクセスしたい場合は、それを覚えておく必要があります。しかし、覚えておくと不便なので、人々はドメイン名を思いつきました。

IPに個人的な名前を付けます。たとえば、フルネームは「ジェイソン ザ シージ ライオン」です。友人たちは私をセンセン、アセン、シャオセンと呼んでいます。これらはすべてエイリアスですが、すべて「ジェイソン ザ シージ ライオン」という人物を指します。 」では、ネットワーク上にエイリアスを実装するにはどうすればよいでしょうか? DNSとは、実際のドメイン名とIP を対応付けるインターネット上のサービス、つまり、ドメイン名を入力してアクセスすることで、そのドメイン名に対応するIP アドレスのことをご紹介します。

買う

ドメイン名とは何かを理解したところで、まずドメイン名を購入しましょう。
>ここをクリック<して希望のドメイン名を問い合わせます

たとえば、情報を入力して検索し、選択してリストに追加し、支払いをして購入することができます。サフィックスが異なれば価格も異なります。個人の好みによって異なります。

ドメイン名サフィックスは、トップレベル ドメイン名とも呼ばれ、ドメイン名のタイプを表す記号を指します。異なるサフィックスを持つドメイン名は異なる意味を持ちます。ドメイン名は、中国の .cn、米国の .us、ロシアの .ru などの国固有のドメイン名 (ccTLD) と、.com などの一般国際ドメイン名 (gTLD) の 2 つのカテゴリに分類されます。 .xyz、.top、.wang、pub、.xin、.net など 1,000 種類以上あり、すべてのドメイン名のサフィックスは同じ機能を持ち、外観と意味が異なるだけですが、一部のドメインのみが異なります。例にあるような名前サフィックスは、中国での Web サイトの登録をサポートできます。

ドメイン名サフィックスの詳細については、ここを参照してください。

DNS解決

ドメイン名を追加する

現在username.github.ioのような Web サイトがあるため、シンプルで覚えやすいように、「username.github.io」を購入したドメイン名に「解決」し、Web サイトにすべてのドメイン名とユーザー名が含まれるようにします。 github.io には 2 つの URL があります

ウェアハウスを開き、設定を見つけ、ページ設定を入力し、ドメイン名を追加します。無料の強制 HTTPS

も使用できます。

HTTPS (正式名: Hyper Text Transfer Protocol over SecureSocket Layer) は、セキュリティを目的とした HTTP チャネルです。HTTP をベースに、通信の暗号化と本人認証により通信プロセスのセキュリティを確保します。HTTP をベースに SSL と HTTPS を追加します。
セキュリティ基盤は SSL です [SSL (Secure Sockets Layer) およびその後継である Transport Layer Security (TLS)] は、ネットワーク通信にセキュリティとデータの整合性を提供するセキュリティ プロトコルです。TLS と SSL はトランスポート層とアプリケーション層の間のネットワーク接続を暗号化する
ため、暗号化の詳細には SSL が必要です。HTTPS には、HTTP とは異なるデフォルト ポートと暗号化/認証層 (HTTP と TCP の間) があります。このシステムは、認証と暗号化された通信手段を提供します。これは、トランザクションの支払いなど、World Wide Web 上のセキュリティが重要な通信に広く使用されています。

このオプションをオンにします

解析レコードの追加

Alibaba Cloud 公式 Web サイトのドメイン名コンソールに入力します

。そうでない場合は、ここで検索して

username.github.io にバインドする必要があるドメイン名を見つけます。[解決] をクリックして

入力し、[レコードの追加] をクリックします。 2 つのレコードを追加します。

1 回目

と 2 回目の

DNS 解決には時間がかかりますが、しばらくして参照ボックスにドメイン名を入力すると、通常のアクセスであれば解決に成功します。

なぜ公式オンラインと言われているのでしょうか? 結局のところ、Webサイトはサーバー上でしか閲覧できないので、より正式ですよね? GitHub Pagesと同様に無料ですが、中国ではDNS解決後に時間がかかり、アクセスできない、または切断された Web サイトが常に存在します。状況はあまりにも不便です。

サーバ

まず見てみましょう。サーバーは誰ですか?

サーバーは、通常のコンピューターよりも高速に実行され、より高い負荷を負い、より高価なタイプのコンピューターです。サーバーは、ネットワーク内の他のクライアント (PC、スマートフォン、ATM などの端末、さらには鉄道システムなどの大型機器など) にコンピューティング サービスまたはアプリケーション サービスを提供します。サーバーは、高速 CPU コンピューティング能力、長期信頼性の高い動作、強力な I/O 外部データ スループット能力、優れた拡張性を備えており、サーバーが提供するサービスに応じて、一般的に言えば、サーバーはサービスに応答する能力を備えています
。リクエスト、サービスの引き受け、サービスを保証する能力。電子機器であるサーバーの内部構造は非常に複雑ですが、CPU、ハードディスク、メモリ、システム、システムバスなどの通常のコンピュータの内部構造とそれほど変わりません。

簡単な理解: 継続的なパワーとスペースを備えたテーマは、「空 (クラウド)」に配置 (デプロイ) したリソースに常にサービスを提供し、さまざまなリクエストを処理できます (たとえば、ナビゲーション バーにドメイン名を入力して、 Webサイト）

サーバーは国内サーバーと海外サーバーの2種類があり、我が国の法律により、中国本土のウェブサイトは登録する必要があり、待ち時間が少し長くなる場合があります。海外では登録する必要はありませんが、安定性やアクセス速度は保証できませんのでご自身で判断してください ジェイソンは、Alibaba Cloud のライト アプリケーション サーバーによってデプロイされた個人のブログ Web サイトを使用しています。

買う

これは私のサーバー構成です。参考にしてください。

初心者の場合、学生のマシンとしてはこの入門レベルの構成で十分であり、無料で入手できます。詳細なルールについては、コミュニティを参照してください > [クリックして直接移動] <

Developer->Growth Plan

学生限定 (お試し後、半月分の ECS サーバーを無料で利用でき、コミュニティに体験を投稿 (ブログを投稿) すると 2 ヶ月間無料で更新できます)、特別なルールについては、公式ウェブサイトのアカウントセンター -> 基本情報の

場所を確認してください。 完全な学生証明書

最新のイベント会場での購入割引はさらに大きくなります

展開する

パスワード設定

図の場所でリモート接続パスワードを変更し、保存してください

ブラウザを使用してリモート接続することもできますが、一部のキーボード ショートカットはシステムによってダイアログ ボックスではなくブラウザ上の操作として認識されるため、推奨されません。

リモート接続

このような問題を回避するために、サードパーティ ツールのPuttyを使用することにしました。具体的な操作手順は Alibaba Cloud のヘルプ ドキュメントで詳しく説明されているため、ここでは繰り返しません。

ここから開始し、プロンプトに従って操作を完了します

Puttyツールを起動し、サーバーに接続します。ログイン ユーザー名はroot、パスワードはサーバーの場所に設定されているパスワードです (Linux オペレーティング システムに入力されたパスワードはセキュリティのために表示されないため、心配する必要はありません)。次のインターフェイスが表示された場合は、設定が正常であることを意味しており、次の手順に進むことができます。

gitの設定

1. コマンドを入力してgitをインストールします

yum install git

プロセス中に一時停止した場合は、プロンプトに従って「yes / y / Y」を入力してインストールを続行し、最後に「complete」と表示されたら、インストールは成功です

。

adduser git

3. git アカウント権限を追加する

chmod 740 /etc/sudoers
vim /etc/sudoers

4. 最後のコマンドを実行した後、キーボードのiキーをクリックして編集モードに入り、アイコンに表示されているロケーション コードを見つけて、

以下の行を追加します。

git     ALL=(ALL)     ALL

Escキーを押して入力してください:wq(意味: 保存後に終了)

5. 権限を元に戻します

chmod 400 /etc/sudoers

6.gitアカウントのパスワードを設定する

sudo passwd git

コマンドを入力して Enter を押します パスワードを 2 回続けて入力します (表示されません、通常) アイコンが表示されたら成功です 7.

git アカウントに切り替えます

su git

~/.ssh および ~/.ssh/authorized_keys ファイルを作成する

mkdir ~/.ssh
vim ~/.ssh/authorized_keys

キーボードのキーをクリックして編集モードに入り、iローカル コンピュータで生成されたSSH 公開キーを貼り付けます。ファイルの場所は図に示すとおりです

。貼り付けた後、EscキーEnter キーを押します。:wq（意味：保存後終了）

権限を付与する

chmod 600 /home/git/.ssh/authorized_keys
chmod 700 /home/git/.ssh

8. ここでローカル git bash でパスワードなしのログインが成功するかどうかをテストします。

ssh -v git@服务器公网IP

接続が成功したことを示すアイコンの内容が表示されます

9. サーバーにウェアハウスを作成し、構成を完了しますrootアカウント
に切り替えます

sudo su root

リポジトリウェアハウスディレクトリを作成する

mkdir /www/repo

権限を付与する

	
chown -R git:git /www/repo
chmod -R 755 /www/repo

Web サイトのルート ディレクトリhexoを作成する

mkdir /www/hexo

権限を付与する

chown -R git:git /www/hexo
chmod -R 755 /www/hexo

新しい空の Git リポジトリを作成し、初期化します。

cd /www/repo
git init --bare hexo.git

10. 自動デプロイメント用の Git フックを作成する

vim /www/repo/hexo.git/hooks/post-receive

上記と同様に、編集モードに入り、次のコードを貼り付け、保存して終了します。

#!/bin/bash
git --work-tree=/www/hexo --git-dir=/www/repo/hexo.git checkout -f

権限の変更

chown -R git:git /www/repo/hexo.git/hooks/post-receive
chmod +x /www/repo/hexo.git/hooks/post-receive

倉庫設置

nginxをインストールする

Nginx は、BSD のようなプロトコルでリリースされた軽量の Web サーバー/リバース プロキシ サーバーおよび電子メール (IMAP/POP3) プロキシ サーバーです。その特徴は、メモリ占有量が少なく、強力な同時実行機能を備えていることです。実際、nginx の同時実行機能は、同じタイプの Web サーバー間でより優れたパフォーマンスを発揮します。Nginx (エンジン x) は、高性能の HTTP およびリバース プロキシ Web サーバーであり、また
、 BSD のようなライセンスに基づいてソース コードをリリースする IMAP /POP3/SMTP サービスは、その安定性、豊富な機能セット、シンプルな構成ファイル、およびシステム リソースの消費量の少なさで知られています。

yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && bash install.sh

途中で y を入力してインストールを続行し (上記と同じ)、インストールが完了するまで待ちます。ログイン URL と初期パスワードが表示されます。赤枠の位置に注意してください。両方の URL にアクセスできない場合は、ポート 8888 を開いてください

。サーバーセキュリティグループ/ファイアウォールに入力し、

初期アカウントを入力します 名前とパスワードでログインします

入力後、Nginxを検索し、クリックしてインストールします（ここではすでにインストールしています）

Webサイト->サイトを追加、ドメイン名はxxxですプレフィックスなしの .com

設定 -> 構成ファイル、赤いボックスの内容を変更します

設定 -> Web サイト ディレクトリ、次のように変更します/www/ヘキソそして

サーバー端末を保存してサービスを再起動します

service bt restart

この時点でサーバー側の設定は完了です

Hexo 構成の変更

ローカルのブログのルート ディレクトリを入力し、_config.ymlファイルの展開場所を変更します。

GitHub Pagesの設定

サーバー設定の

ソースコードは以下のとおりです

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy: 
  type: git
  repo: git@你的域名:/www/repo/hexo.git
  branch: master # 注意此处分支设定,需在仓库中选择默认的分支

Puttyツールを開き、サーバーに接続して権限を付与します。

chown -R git:git /www/repo/
chown -R git:git /www/hexo/

ローカルのルートディレクトリで git bash を開き、コマンドを実行します。

hexo clean //清除缓存
hexo d -g //快速部署

展開が成功したことを示すアイコンの内容が表示され、登録が完了すると、ドメイン名を使用してアクセスできるようになります。

ファイリング

Jason の Web サイトは最近登録されたばかりですので、待ちきれない場合は、別の方法を見つけてください。中国では、あえて間違いを犯しません。サーバーを購入し、ドメイン名をバインドした後、次の段階を経ることになります
。

登録がないことを示すプロンプトが表示されますが、プロンプトに従って登録を完了してください。

ICP

英語の完全名: Internet Content Provider、中国語の完全名: Internet Content Provider
ICP は、インターネット情報サービスと付加価値サービスをユーザーに提供する電気通信事業者として理解され、国の管轄当局によって承認された正式な運営企業または部門です。 。

オンライン申請

公式ウェブサイトにアクセスします. Alibaba Cloud がICP登録を完了すると、システムは操作を促すメッセージも表示します。

デプロイが完了したら、[オンライン登録] を

選択してログインします。Web サイトの所有者情報といくつかの基本資料をレビューと承認のために送信します。最後に、Web ページの下部にコードを挿入します。効果は図に示すとおりです。

---

この時点で、個人 Web サイトは正常にオンラインになり、サーバーに展開されます。コンテンツは皆様からのフィードバックに基づいて継続的に更新されます。！！

最後に、ジェイソンの小さなウェブサイトのアドレスを入力します。ようこそ、訪問してください（笑） >>>ジェイソンの小さなウェブサイト

---

参考文献

技術初心者のためのウェブサイトの構築方法

Picgo+Gitee は個​​人用の無料画像ベッドを構築します