title: ブログの成り立ちを記録
date: 2020-07-02 15:11:24
tags: firebase
1 はじめに
このブログは2020年7月2日に開設されました。hexo ブログ フレームワーク + firebase ホスティング ホスティング ホストを使用して構築されました。
なぜなら、私も以前ブログを構築していましたが、その時は vps + wordpress ソリューションを使用していました (不安定で、データが失われやすく、Web サイトをホストするサーバーを自分でレンタルする必要がありました)。 Google のセカンダリ Firebaseプラットフォームを偶然発見しました (これは、Google が所有する *サービスとしてのバックエンド (BaaS)* プラットフォームです。簡単に言えば、バックエンドはクラウドにあるため、データベースや認証について心配する必要はありません) 、ストレージ、拡張など、直接呼び出してください。)
現在、Firebase は多くのサービスを提供していますが、ここではホスティングを使用します。
無料のホスティング プランでは次のことが提供されます。
- 1Gのストレージスペース
- 10G/月の通信量を超えると、有料で購入できるようになります。
一般に、世界中の Google の cdn アクセラレーションのおかげで、firebase プラットフォームでホストされている Web サイトには無料で高速にアクセスできます (github ページよりもはるかに高速です)。
この度、ブログを正式に開設することになり、私の学習記録の一部を記録していきたいと思います。
2. ブログが実行するコード
ヘキソパート
1.npm、Node.jsをインストールする
sudo apt update -y
sudo apt install -y nodejs nodejs-legacy npm
sudo apt-get install -y npm
2. フォルダーの初期化
空のディレクトリにhexoブログのフレームワークのインストールを実行します。
sudo hexo init
初期化が完了すると、次のファイル ディレクトリが作成されます。
.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes
その中にはすべての記事を保存する_config.yml設定ファイルがあり、このフォルダーはさまざまなテーマで設定でき、公式 Web サイトには多数のテーマが掲載されています。sourcethemes
3. ライティング
すべての準備ができたら、hexo メイン ディレクトリの下に最初の記事をビルドできます。
hexo new post <title>
source/_posts実行すると、フォルダーの下に記事が生成されます。
hexo new post 第一篇文章
上記のディレクトリに という名前のファイルがある第一篇文章.mdので、マークダウンを使用してそこに書き込むことができます。マークダウンの書き込みツールとしてTyporaを使用することをお勧めします
4. 静的ページの HTML ファイルを生成する
書き込み後、ルートディレクトリでコマンドを実行します。
hexo g
記事とテーマがパッケージ化されてHTMLファイルが生成され、生成されたファイルはpublicルート ディレクトリのフォルダーに配置されます。Web サイトの実行に必要なものはすべて、このフォルダーの下に配置されます。
また、実行することも可能です
hexo server
このコマンドはサーバーをローカルで起動し、http://localhost:4000/効果をプレビューするために使用できます。
hexo の使用は非常に簡単であることがわかります。より詳細な手順については、公式ドキュメントを参照してください。
ただし、ここではホスティングサーバーとして firebase が使用されており、実際の運用中にローカルサーバーを起動する必要はなく、コマンドを直接実行して hexo ブログを firebase プラットフォームに送信できます。
提出を完了します:
firebase deploy
変更のみをコミットします。
firebase deploy --only hosting
デプロイが完了すると、コンテンツが Firebase プロジェクトのデフォルトのホスティング URL: project-id.firebaseapp.com にデプロイされます。
このようにして、私のブログ Web サイト (https://usg-cn.web.app/) で変更結果を確認できます。
ファイアベース部分
Firebase、Google のもう 1 つの成果物ですが、詳しくは紹介しません。ホスティングというほんの一部だけを使用します。
ホスティングについては、公式の紹介文は次のとおりです。
Firebase Hosting は、ウェブアプリに高速で安全な静的ホスティングを提供します。
Firebase Hosting は、開発者向けの実稼働グレードの Web コンテンツ ホスティング サービスです。Firebase Hosting を使用すると、コマンド 1 つでウェブ アプリや静的コンテンツをグローバル コンテンツ配信ネットワークに迅速かつ簡単にデプロイできます。
Firebase を使用すると、非常にまれな利点が数多くあります。
- GitHub よりも高速なグローバル SSD CDN。
- ワンクリックでロールバック。Firebase Hosting は、ワンクリックのロールバックによる完全なバージョン管理と管理を提供します。
- 構成不要の SSL、HTTPS が自動的に有効になります。
- 完璧な中国語ドキュメントのサポート。
Firebase の使用感は非常に優れています。Google 製品ですが、非常に完全な中国語ドキュメントのサポートを提供し、記述は非常にシンプルで理解しやすいです。同じコード例で複数のプログラミング言語のバージョンと多くの機能が提供されますすぐに使えます。
1. プロジェクトを作成する
まずFirebaseにアクセスしてプロジェクトを作成します。
プロジェクト ID を作成するときに注意してください。これは URL で使用されます。自分でドメイン名を定義したくない場合は、今後常にこの ID をドメイン名アクセスとして使用します。たとえば、ID が のusg-cn場合、ドメイン名はhttps://usg-cn.firebaseapp.com/https://usg-cn.web.app/ になります。
2. 初期化
次のコマンドを実行して Firebase (プレインストールNode.js) をインストールします。
npm install -g firebase-tools
次に、次のコマンドを実行してログインすると、実行後にブラウザ ウィンドウがポップアップ表示されます。
firebase login
ログイン後、生成された Hexo ディレクトリに切り替えます。
cd ヘキソ/
走る
firebase init
実行時に、ホスティングを使用しているため、使用する機能を選択するように求められます。ここで選択すると、Hostingパブリック ルート ディレクトリとして使用するディレクトリを選択するよう求められます。このディレクトリはすべての静的ファイルが配置される場所です。デフォルトではpublic、名前は Hexo によって生成された静的ファイルのディレクトリ名とまったく同じであるため、変更する必要はありません。
このコマンドは、プロジェクト ディレクトリに構成ファイルを作成しますfirebase.json。このファイルは、ホスティング動作のカスタマイズに使用できます。
走る
最後に、すべての変更を実行した後、
hexo g
publicFirebase はパブリック フォルダーをデプロイするため、最初に Hexo を実行する必要があるため、このコマンドにより Hexo にフォルダーが生成されます。
それから走ります
firebase deploy
デプロイが完了すると、コンテンツが Firebase プロジェクトのデフォルトのホスティング URL: project-id.firebaseapp.com にデプロイされます。
これで完了です。ブログを楽しんでください。
共通コマンド
hexo clean
hexo generate
hexo deploy
hexo clean古いバージョンで生成された静的ファイル (リモート エンドにプッシュされたパブリック ファイル) をクリアするために使用されます。hexo generate/sourceファイル内のコンテンツに基づいて生成される新しい静的ファイル (パブリック ファイル) を生成します。hexo deployGithub デプロイメント ブログをプッシュする
hexo new "postName" # 新建文章
hexo new page "pageName" # 新建页面
hexo generate # 生成静态页面至public目录
hexo server # 开启预览访问端口（默认端口4000，'ctrl + c'关闭server）
hexo deploy # 将静态博客页面部署到GitHub
hexo help # 查看帮助
hexo version # 查看Hexo的版本
hexo new新しい記事を作成します。作成した記事はディレクトリにありsource/_posts/、記事の形式は .md (マークダウン形式) です。ブログを直接編集してこのファイルを毎回編集することも、作成した .md ファイルを直接ここにドラッグすることもできますフォルダ内にhexo generate静的ページを生成します。生成されたファイルはすべてpublic/そのファイルの下にあります。このファイルは github にプッシュされる最後のファイルです
ブログアドレス：https://usg-cn.web.app/
参考アドレス：https://hyrepo.com/tech/hexo-firebase-blog/