【GitHub】GitHub+Hexoの個人ブログ

個人ブログwidiot'sブログ
1 Hexo
1.1紹介
Hexoは、NodeJSの静的なブログのフレームワークに基づいており、簡単で軽量であり、生成された静的なウェブページは、GithubおよびHerokuにおいてホスティングされてもよい.

超高速度

サポートMarkDown

キー配置

豊富なプラグイン

1.2 node.jsをインストールする
nodejs公式サイトで対応システムのインストールパッケージをダウンロードし、提示に従ってインストールします.
テストインストール成功:

node -v

1.3 hexoをインストールする

npm install hexo-cli -g

Macシステムは必要です.

sudo npm install hexo-cli -g

2ブログを作る
ブログディレクトリを作成する.github.io:

hexo init username.github.io
cd username.github.io
npm install

静止画ページを生成します.gはgenerateです.

hexo clean
hexo g

運転、sはserver:

hexo s

ブラウザを開くと、アドレスlocalhost:4000を入力してブログのページが表示されます.
3記事を発表する
3.1コマンド方式source/_postsディレクトリの下でtest.mdファイルを生成し、いくつかの内容を書き込んで保存します.

hexo new test

静的ページを生成し、localhost:4000にアクセスして効果を見る.

hexo clean
hexo g
hexo s

3.2直接方式source/_posts/で.mdファイルを新規作成し、内容を書き込む.
上記コマンドを使用して静的ページを生成し、localhost:4000にアクセスして効果を確認する.
4設定
サイトの設定のほとんどは_config.ymlファイルにあります.詳細な構成は公式文書を見ることができます.
簡単な常用プロファイルを以下に示します.

title:ウェブサイトのタイトル

subtitle:ウェブサイトのサブタイトル

description:ウェブサイトの説明

author:あなたの名前は

です.

langage:ウェブサイトで使用される言語

注意:配置するには、コロン:の後に英語のスペースを追加する必要があります.

title: myblog

5テーマを変える
Hexoには多くのテーマがあります.公式サイトで見ることができます.ここでhexo-nextをオススメします.以下、テーマを変更するための一般的な手順を説明します.
テーマのリソースをダウンロード:

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

ウェブサイト構成ファイル_config.ymlにおいて、構成theme、nextはテーマ名であり、具体的にはテーマの文書を見ることができる.

theme: next

主題の構成は/theme/{theme}/_config.ymlの構成ファイルの下で行うことができる.
次にデバッグコマンドを実行して効果を確認します.

hexo clean
hexo g
hexo s

6 GitHubに配置
GitHubで.github.ioのpublic倉庫を作成します.ユーザー名がxxxの場合、xxx.github.ioのpublic倉庫を作成する必要があります.
hexo-deployer-gitをインストールします.

npm install hexo-deployer-git --save

ウェブサイトの構成gitは、ウェブサイトの_config.ymlにdeployを配置し、branchは分岐であり、デフォルトはmasterであり、構成しなくてもよい.repoは倉庫の住所で、github上に倉庫を新設した後、住所をコピーすることができます.

deploy:
  type: git
  repo: <repository url>
  branch: [branch]

配置、dはdeployです.

hexo d

7ラベル
7.1二つの確認
サイトの設定ファイルがあることを確認します.

tag_dir: tags

テーマの設定ファイルがあることを確認します.

tags: /tags

7.2新規タブページを作成する

hexo new page tags

source/でtags/index.mdファイルが生成される.
7.3 source/tags/index.mdを修正する

title: tags
date: 2015-10-20 06:49:50
type: "tags"
comments: false

7.4文章にtagsを追加する
文章xx.mdに追加し、複数のTagを下記のように追加することができる.

tags: 
	- Tag1
	- Tag2
	- Tag3

そのファイルのヘッダは類似しています.

title: TagEditText
date: 2016-11-19 10:44:25
tags: 
	- Tag1
	- Tag2
	- Tag3

8カテゴリ
8.1二つの確認
サイトの設定ファイルがあることを確認します.

category_dir: categories

テーマの設定ファイルがあることを確認します.

categories: /categories

8.2新しいcategoriesページを作成する

hexo new page categories

sourceディレクトリの下でcategories/index.mdファイルが生成される.
8.3 categories/index.mdを修正する

title: categories
date: 2015-10-20 06:49:50
type: "categories"
comments: false

8.4文章にcategoriesを追加する
記事x.mdに追加:

categories: 
	- cate

そのファイルのヘッダは類似しています.

title: TagEditText
date: 2016-11-19 10:44:25
categories: 
	- cate

9コメント機能
設置gitment:

npm install gitment --save

はい、https://github.com/settings/applications/new 登録して、Client IDとClient Secretを取得します.themes/nextディレクトリの下の_config.ymlファイルを開いて修正して保存します.

gitment:
  enable: true
  mint: true # RECOMMEND, A mint on Gitment, to support count, language and proxy_gateway
  count: true # Show comments count in post meta area
  lazy: false # Comments lazy loading with a button
  cleanly: false # Hide 'Powered by ...' on footer, and more
  language: # Force language, or auto switch by theme
  github_user: <username> # MUST HAVE, Your Github Username
  github_repo: <username>.github.io # MUST HAVE, The name of the repo you use to store Gitment comments
  client_id: 76xxxxxxxxxxxxxxxx5f # MUST HAVE, Github client id for the Gitment
  client_secret: 4axxxxxxxxxxxxxxxxxxxxxxxxxxxxxxca # EITHER this or proxy_gateway, Github access secret token for the Gitment
  proxy_gateway: # Address of api proxy, See: https://github.com/aimingoo/intersect
  redirect_protocol: # Protocol of redirect_uri with force_redirect_protocol when mint enabled

サイトの生成と提出サイト:

hexo g
hexo d

記事の下の初期化コメントボタンをクリックします.
文章の名前が長すぎると、コメント機能のオープンに失敗します.Error: Validation Failedエラーが発生します.修正ファイルnext/layout/_third-party/comments/gitment.swigは、idの部分をid: '{{ page.date }}'に変更する.

    {% if page.comments %}
      <script type="text/javascript">
      function renderGitment(){
        var gitment = new {{CommentsClass}}({
            id: '{{ page.date }}',
            owner: '{{ theme.gitment.github_user }}',
            repo: '{{ theme.gitment.github_repo }}',
            {% if theme.gitment.mint %}
            lang: "{{ theme.gitment.language }}" || navigator.language || navigator.systemLanguage || navigator.userLanguage,