ここに画像を挿入説明
無料ですぐに設定された静的ブログサイトのためhexo + githubのを使用して、コマンドのgit hexoプランと簡単にブログをすることができ、その管理機能を使用します。

githubのは、静的なページを展開使用

hexoを理解する前に、のはgithubのは、静的なページを展開し使用する方法を見てみましょう。

登録githubのアカウント

アクセスgithubの公式サイトのアカウントを登録するには、このようなアカウントの登録プロセスと一般的なサイトでは、ここでは繰り返しません。

gitリポジトリを作成するには

ここに画像を挿入説明
あなたは他の項目はちょうどここに倉庫の名前を記入し、記入して自由になる必要がある場合は、倉庫を作成するには、リポジトリの作成]をクリックします。

テストページを送信

地元の倉庫のクローンを作成するためのgit cloneコマンドを実行します

git clone [email protected]:mfaying/hexo-test.git

ここに画像を挿入説明
次のように読み込み、index.htmlの名前の倉庫htmlページのhexoテストテストに提出します：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>hexo test</title>
</head>
<body>
  hexo test
</body>
</html>

提出し、先端部にプッシュ

git add .
git commit -m 'add index.html'
git push origin master

コンテンツリポジトリに成功提出、hexo、試験後
ここに画像を挿入説明

設定の設定

設定が設定されているクリック
ここに画像を挿入説明
GitHubのページを検索し、テーマの選択]をクリックします

選択したテーマにクリックを
アバター

この時点では、GitHubのページが変更されているでしょうYour site is ready to be published at https://mfaying.github.io/hexo-test/、あなたの静的なウェブサイトが構築されている説明します。
ここに画像を挿入説明
以下への直接アクセスは、デフォルトのindex.htmlファイルで、静的なサーバーへのアクセスを表示しますhttps://mfaying.github.io/hexo-test/をクリックします。
アバター

これまでのところ、我々は成功し、静的なウェブサイトを構築するためにgithubのを使用しています。もちろん、この小さなウェブサイトのコンテンツは、私たちは完全に機能するブログサイトを構築するためにhexoを使用することがありますが、展開は、ここで説明した静的サーバ機能をGitHubのことです。

ブログサイトを構築hexo使用

グローバルインストールhexo-CLI

npm install hexo-cli -g

NPM遅いインストールは、国内に切り替えることができます淘宝網NPMミラーの代わりにインストールするには、コマンドcnpm NPMコマンドを使用しての、。

インストールが完了したらhexoは、インストールの完了チェック-v行います。

hexo -v

hexo-cli: 1.1.0
os: Darwin 18.2.0 darwin x64
http_parser: 2.8.0
node: 10.15.3
v8: 6.8.275.32-node.51
uv: 1.23.2
zlib: 1.2.11
ares: 1.15.0
modules: 64
nghttp2: 1.34.0
napi: 3
openssl: 1.1.0j
icu: 62.1
unicode: 11.0
cldr: 33.1
tz: 2018e

ブログのプロジェクトを初期化します

hexo init blog
cd blog

安装NexT主题

我们这里选取了NexT主题替换默认的landscape主题，当然你完全可以使用默认的landscape主题，或者根据自己的喜好选择其他主题。安装主题的方式非常简单，只需要将主题文件克隆至工程目录的 themes目录下，然后修改下配置文件_config.yml即可。

在工程目录下克隆最新版本的next主题

cd blog
git clone https://github.com/iissnan/hexo-theme-next themes/next

修改根目录下_config.yml配置文件，找到theme字段，将landscape改为next。

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: landscape

修改为

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

执行hexo server，启动本地服务器。

hexo server

访问网址http://localhost:4000/便可以看到使用next主题的博客网站的样子了。
アバター

将本地hexo工程连接到git远端仓库

我们用前面建立的hexo-test和blog两个工程做演示。其中本地hexo为blog目录，hexo-test为git远端仓库，我们需要将本地blog目录里的文件提交到远端的hexo-test仓库。

首先，我们之前提交的index.html文件，我们不再需要了，先删除它。

cd hexo-test
rm -rf index.html
git add .
git commit -m 'remove index.html'
git push origin master

blog目录git初始化

cd blog
git init

此时我们看到next目录无法直接提交，这是因为next目录是一个子模块(submodule)
アバター
我们需要删除next目录下的.git文件，next目录变成一个普通文件夹，这样它就可以直接提交了。
进入next目录，执行rm -rf .git命令

cd themes/next/
rm -rf .git

此时next目录就可以直接提交了
ここに画像を挿入説明
执行以下命令就可以将blog目录里的内容提交到远端的hexo-test仓库了

git add .
git commit -m 'init'
git remote add origin [email protected]:mfaying/hexo-test.git
git push -f origin master

注意，这里我的本地电脑和远端的git已经配置过ssh了，所以提交的时候不会出现权限问题。如果你连接的是自己的远端仓库，可以查找下如何进行git的ssh配置。

部署

部署我们需要建一个前面提到的开通GitHub Pages功能的工程，这个专门放置部署的静态文件，我们将该工程命名为hexo-test-deploy(若是发布到hexo-test工程上远端的源代码会被部署的静态文件覆盖掉)。这时hexo-test其实就不需要开通GitHub Pages功能了，而且hexo-test也可以设置成私有工程以避免源代码被查看。

最后我们需要配置部署路径，修改文件_config.yml的deploy字段如下：

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: [email protected]:mfaying/hexo-test-deploy.git #你的GitHub Pages的仓库地址
  branch: master

我们需要先安装hexo-deployer-git依赖包才能执行hexo deploy命令部署网站

npm install hexo-deployer-git --save

执行以下命令

hexo clean # 简写hexo c，清除缓存文件(db.json)和已生成的静态文件(public)
hexo generate # 简写hexo g，生成静态文件
hexo deploy # 简写hexo d，部署

其中hexo g和hexo d可以合并写成hexo d -g
现在我们访问之前的链接 https://mfaying.github.io/hexo-test-deploy/，一个静态博客网站生成了！
アバター

至此，我们其实已经完成静态博客网站的建设，后续我们将介绍一些功能和方法，使网站功能更加完备。

博客网站功能完善

这节我们只会介绍几个完善网站功能的方法，如果你还想增加其他功能，可以通读NexT 使用文档、文档|hexo，根据自己的需要来增加功能。

设置语言

修改站点配置文件(_config.yml)的language字段，比如设置为简体中文

language: zh-Hans

此时页面变为
ここに画像を挿入説明

设置菜单

修改主题配置文件(/themes/next/_config.yml)的menu字段

menu:
  home: / || home
  #about: /about/ || user
  #tags: /tags/ || tags
  #categories: /categories/ || th
  archives: /archives/ || archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

修改为

menu:
  home: / || home
  #about: /about/ || user
  tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

创建tags页面

hexo new page "tags"

编辑/source/tags/index.md文件为

---
title: tags
date: 2019-10-05 16:02:39
type: "tags"
comments: false
---

创建categories页面

hexo new page "categories"

编辑/source/categories/index.md文件为

---
title: categories
date: 2019-10-05 15:59:54
type: "categories"
comments: false
---

配置根路径为

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://mfaying.github.io/hexo-test-deploy
root: /hexo-test-deploy/
permalink: :year/:month/:day/:title/
permalink_defaults:

访问页面如下
アバター

创建一篇文章

执行命令创建一篇文章

hexo new '测试文章'

我们发现在source/_posts/目录下生成了测试文章.md，编辑内容如下

---
title: 文章测试
date: 2019-10-05 16:20:04
tags:
    - hexo
categories: 其他
---
这是摘要
<!-- more -->
以下是正文
# 标题1
1
## 标题2
2

部署后可以发现一篇文章创建成功了。
ここに画像を挿入説明

push时自动部署

私たちは、ネイティブコードが遠位サイトにプッシュされたときに自動的にデプロイGitのフックを使用します。

まずハスキー開発環境の依存関係をインストール

npm install husky --save-dev

package.jsonを次のようにファイルのルートディレクトリを変更します。

"scripts": {
  "publish": "hexo clean && hexo d -g"
},
"husky": {
  "hooks": {
    "pre-push": "npm run publish"
  }
},

コマンドを実行します。

git add .
git commit -m '自动部署'
git push origin master

私たちは、自動的に実行、提出時にコードを見つけるhexo clean && hexo d -gの展開コマンドを使用します。

この時点で、私たちが使用するhexoとgithubのブログサイトは、静的なプレゼンテーションが終わっ設定されている、hexo事実、機能のかなり多くがありますなど、統計の数を読んでコメントとして、使用することができ、あなたは自分のアイデアに基づいてソースコードを修正するために行くことができます自分のブログを向上させます。

参照

個人のブログサイトを構築するためにhexoとgithubのを使用します