よりよい読書経験のために、オリジナルを読むことを歓迎します。オリジナルリンクをここに。

パート1：個人のブログを管理するためのGitHubのページとHexoを使用しました。

シリーズ

heXoチュートリアル

Githubのは、私たちはルビーに基づいて、私たちは、インストールおよび設定するために困難である静的なページを、管理するためにジキルを使用することを推奨しています。我々は、代わりにHexoを使用するようにします。Hexoは、使用に使用するためのNode.jsかつ容易に基づいてジキルと類似の静的ブログのフレームワークです。

レポを作成するためのGithubを使います

githubの新しいレポを作成し、名前によってusername.github.io：kezunlin.github.io
設定| 自動ページジェネレータは、theameおよびデプロイを選択します。

apt-getをインストールで

sudo apt-get -y install nodejs
sudo apt-get -y install nodejs-legacy
sudo apt-get -y install npm
node -v 
npm -v

ソースからnodejsをインストールする##

# download and compile
wget https://nodejs.org/dist/v8.9.3/node-v8.9.3.tar.gz
tar xzvf node-v8.9.3.tar.gz
cd node-v8.9.3
./configure
make -j8
sudo make install

# link to /usr/bin
sudo ln -s /usr/local/bin/node /usr/bin/node
sudo ln -s /usr/local/bin/npm /usr/bin/npm

# check version
node -v 
npm -v

##テストノード

cat hello.js
console.log('Hello World');

node hello.js
Hello World

hexoインストール

# install hexo globally
sudo npm install hexo-cli -g
#sudo npm install hexo --save

# use cnpm from taobao instead of offical npm, which is slow for chinese users.
sudo npm install -g cnpm --registry=https://registry.npm.taobao.org

使用cnpmの代わりに、npm（オプション）

# cnpm install 
sudo cnpm install hexo-cli -g

# check version
hexo -v

hexoサイトを作成

cd workspace
mkdir blog
cd blog

hexo init
#npm install
hexo generate
hexo server

今、私たちは、訪問することができますローカルホスト：4000との記事を作成します。

githubのにデプロイ

vimの blog/_config.yml

    deploy:
        type: git
        repo:   [email protected]:kezunlin/kezunlin.github.io.git
        branch: master

へのsshキーとコピーを生成 github

# generate ssh-key 
cd ~
ssh-keygen
cat .ssh/id_rsa.pub

# copy content to github
# https://github.com/settings/keys

# install plungin and deploy to github
npm install hexo-deployer-git --save
hexo deploy

今、私たちが訪問することができますhttps://kezunlin.github.io/を

追加READMEをしてレンダリングスキップ

追加README.mdのソースフォルダ
編集blog/_config.ymlレンダリングスキップしますREADME.md
```
 skip_render:
     - README.md
```

使用hexo generateコピーするREADME.mdから/ソースに公開/

新しいポストとデプロイ再び

hexo new 'first post'
vim source/_posts/first-post.md

hexo generate
hexo server
hexo deploy

今、私たちは、訪問することができhttps://kezunlin.github.io/を、私たちの最初の記事を参照してください。

付録

Hexoコマンド

Hexo一般的なコマンド：

hexo new "postName"       #new post
hexo new page "pageName"  #new page
hexo generate             #generate static files to public/
hexo server               #start server on localhost:4000 
hexo deploy               #push .deploy_git/ to GitHub
hexo clean                #clean files

Hexo短いコマンド：

hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy

Hexo複合コマンド：

hexo server -g
hexo deploy -g

投稿内容

ヘッダーテンプレート

---
title: Using Github Pages and Hexo to manage personal blogs
date: 2017-12-26 17:28:10
categories: tutorial
tags: 
    - github pages
    - hexo
    - nodejs
    - npm
---

ウェブ表示を制御する方

<!--more-->
Use static blog framework Hexo to manage site
-----------------------------------------------

次のテーマを使用します

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

vimの blog/_config.yml

    #theme: landscape
    theme: next

アバター

編集します blog\themes\next\_config.yml

    avatar: /images/avatar.jpg

プラグイン

で、プラグインのインストール

npm install <plugin-name> --save

hexo管理

cnpm install --save hexo-admin

今、私たちが訪問することができます。httpを：// localhostを：4000 / adminに/

gitのデプロイヤ

npm install hexo-deployer-git --save
hexo deploy

RSSフィード

npm install hexo-generator-feed --save

# visit http://localhost:4000/atom.xml

サイトマップ

npm install hexo-generator-sitemap --save

vimの blog/_config.yml

sitemap:
  path: sitemap.xml

今、私たちが訪問することができます。httpを：// localhostを：4000 / sitemap.xmlと

Baiduのサイトマップ

npm install hexo-generator-baidu-sitemap --save

vimの blog/_config.yml

baidusitemap:
  path: baidusitemap.xml

今、私たちが訪問することができます。httpを：// localhostを：4000 / baidusitemap.xmlを

Permentリンク

cnpm install hexo-abbrlink --save

編集します blog\_config.yml

    permalink: post/:abbrlink/
    abbrlink:
        alg: crc32  # crc16(default) and crc32
        rep: hex    # dec(default) and hex

記入しますabbrlinkあなたのpost.mdに

    ---
    title: Hello World
    categories:
    - tutorial
    tags:
    - hexo
    abbrlink: 4a17b156
    date: 2017-12-26 17:20:10
    ---

インデックス/アーカイブ/カテゴリー/タグ

npm install hexo-generator-index --save
npm install hexo-generator-archive --save
npm install hexo-generator-category --save
npm install hexo-generator-tag --save

タグ一覧ページ

hexo new page "tags"
# generate source/tags/index.md

編集します source/tags/index.md

    ---
    title: tags
    date: 2017-12-27 15:46:09
    type: "tags"
    ---

今、私たちが訪問することができます。httpを：// localhostを：4000 /タグ/

hexo new page "categories"
# generate source/categories/index.md

編集します source/categories/index.md

    ---
    title: categories
    date: 2017-12-27 15:46:03
    type: "categories"
    ---

今、私たちが訪問することができます。httpを：// localhostを：4000 /カテゴリを/

ローカル検索

検索プラグインをインストールします

cnpm install hexo-generator-search --save
cnpm install hexo-generator-searchdb --save

編集します themes\next\_config.yml

    local_search:
        enable: true # create a new 'Search' button next to 'Archives'
        # if auto, trigger search by changing input
        # if manual, trigger search by pressing enter key or search button
        trigger: auto
        # show top n results per article, show all results by setting to -1
        top_n_per_article: 1

edit `_config.yml`

    search:
        path: search.xml
        field: post
        format: html
        limit: 10000

install_hexo_plugins.sh

#!/bin/bash

cnpm install hexo-deployer-git --save

cnpm install hexo-generator-feed --save

cnpm install hexo-generator-sitemap --save
cnpm install hexo-generator-baidu-sitemap --save

cnpm install hexo-generator-index --save
cnpm install hexo-generator-archive --save
cnpm install hexo-generator-category --save
cnpm install hexo-generator-tag --save

cnpm install hexo-generator-search --save
cnpm install hexo-generator-searchdb --save

cnblogに画像をアップロード

インストールIMG-アップローダによりクロムの拡張機能をここに
画像をアップロードしてURLを取得します。
値下げにURLを使用しています。

![image here](http://images2017.cnblogs.com/.../123.png)

複数のデプロイ

github.comにデプロイします。 username.github.io
coding.netへのデプロイ（gitcaffe）： username

vimの blog/_config.yml

deploy:
  type: git
  repo:
      github: [email protected]:<username>/<username>.github.io.git,master
      coding: [email protected]:<username>/<username>.git,master

高度

カスタムドメインおよびhttps

ブログ：Githubのページ
SSL：CloudFlareの
ドメイン：GoDaddyは（CloudFlareのネームサーバからのDNS）

でIPを取得

dig kezunlin.github.io +noall +answer

我々が得る

185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

：185.199.109.153へのポイント
CNAME：kezunlin.meへのポイント

手順：

取得kezunlin.meからGodaddy.com
追加kezunlin.meブログのgithubのためにblog\source\CNAMEファイルを
登録CloudFlare.comおよび追加AgithubのページIPでレコードを185.199.109.153し、DNSネームサーバを取得dina.ns.cloudflare.comし、paul.ns.cloudflare.com
DNSネームサーバを追加dina.ns.cloudflare.comしてpaul.ns.cloudflare.comからここに

数秒待つと、我々は結果を得ます CloudFlare

kezunlin.me
Status: Active

This website is active on Cloudflare.

Universal SSL Status Active Certificate

Active 手段のネームサーバが有効になります。

構成、設定

Crypto | Always use HTTPS
Page Rules| 2 rules for Always use HTTPS

カスタムドメイン

でDOMIN登録godaddy：kezunlin.me
追加kezunlin.mednspodへとdnspodネームサーバを取得します。
訪問https://dcc.godaddy.com/manage/kezunlin.me/dns#divDnsManagementdnspodネームサーバを追加します。

f1g1ns1.dnspod.net
f1g1ns2.dnspod.net

dnspodにCNAMEレコードを追加

     @ CNAME 207.97.227.245  # for github pages

vimの blog/source/CNAME

kezunlin.me

グーグルアナリティクス

取得google-site-verificationGoogle検索のコンソールから、とに追加themes/next/layout/_partials/head.swig

<meta name="google-site-verification" content="***" />

取得google_analyticsと編集themes\next\_config.yml

    google_analytics: UA-***

構造化データをグーグル

キーワードを検索するGREP

    grep -r Organization .
    ./themes/next/layout/_macro/post.swig:    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">

追加logo発行者のために

編集themes\next\_config.ymlと追加

ロゴ：/images/logo.png
編集します ./themes/next/layout/_macro/post.swig

<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
    <meta itemprop="name" content="{{ config.title }}">
    <img itemprop="logo" src="{{ url_for( theme.logo ) }}" />
    #<img itemprop="logo" src="/images/logo.png" />
</span>

Baiduのzhanzhang

取得baidu-site-verificationからhttps://ziyuan.baidu.com/とに追加themes/next/layout/_partials/head.swig

<meta name="baidu-site-verification" content="***" />

360 zhanzhang

取得360-site-verificationからhttp://zhanzhang.so.com/sitetool/とに追加themes/next/layout/_partials/head.swig

<meta name="360-site-verification" content="***" />

コメントをgitment

私たちは、に店舗ブログサイトのコメントにgithubのリポジトリを使用することができます issues

OAuthのアプリケーションを登録します

訪問https://github.com/settings/applications/new
空白を埋める、コールバックURL： https://kezunlin.me
取得client IDし、client secret

gitment設定

名前の新しいレポ作成gitment問題のコメントを格納するためのGithubでの
編集します blog\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: true # Comments lazy loading with a button
    cleanly: false # Hide 'Powered by ...' on footer, and more
    language: zh-Hans # Force language, or auto switch by theme
    github_user: kezunlin # MUST HAVE, Your Github ID
    github_repo: gitment # MUST HAVE, The repo you use to store Gitment comments
    client_id: <***> # MUST HAVE, Github client id for the Gitment
    client_secret: <***>  # 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

通知

github_user：kezunlin
github_repo：gitment

INITページのコメント

hexo deploy デプロイブログへ
ページにアクセスし、ボタンをクリックしてください Initialize Comment
あなたの最初のコメントを投稿してください。

jiathis

jiathisを登録してもらいます uid

jiathisそしてbaidushareサポートしていません。https

Badusre（レイ）

HTTPSをサポートするための修正

    cd blog
    git clone https://github.com/hrwhisper/baiduShare.git
    mv baiduShare source
    #rm -rf baiduShare
    # make sure we can access localhost:4000/baiduShare/static/api/js/share.js

    # edit baidushare.swig
    grep -r 'bdimg.share.baidu.com' .
    vim ./themes/next/layout/_partials/share/baidushare.swig

    # change //bdimg.share.baidu.com/ to /baiduShare
    <script>
    with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='/baiduShare/static/api/js/share.js?cdnversion='+~(-new Date()/36e5)];
    </script>

    # there exists a bug in share.js
    hexo generate
    hexo server

統計

busuanzi

編集します blog\themes\next\_config.yml

    busuanzi_count:
        # count values only if the other configs are false
        enable: true
        # custom uv span for the whole site
        site_uv: true
        site_uv_header: <i class="fa fa-user"></i> 访问人数
        site_uv_footer:
        # custom pv span for the whole site
        site_pv: true
        site_pv_header: <i class="fa fa-eye"></i> 总访问量
        site_pv_footer:
        # custom pv span for one page only
        page_pv: true
        page_pv_header: <i class="fa fa-eye"></i> 阅读次数
        page_pv_footer:

hexo-すべて-minifier（ありません）

npm install hexo-all-minifier --save

編集します blog\_config.yml

    all_minifier: true

ヒント：現在安定していないため、minifierを有効にしません。

hexo、きちんとしました

npm install hexo-neat --save

編集します blog\_config.yml

    # hexo-neat
    neat_enable: true

    neat_html:
        enable: true
        exclude:
  
    neat_css:
        enable: true
        exclude:
            - '*.min.css'

    neat_js:
        enable: true
        mangle: true
        output:
        compress:
        exclude:
            - '*.min.js'

403エラー

編集します themes/next/layout/_partials/head.swig

<meta name="referrer" content="no-referrer" />

スピードのために最適化

複数のデプロイ

にデプロイしますcoding.net。

vimの themes/next/layout/_partials/footer.swig

<p>Hosted by <a href="https://pages.coding.me" style="font-weight: bold">Coding Pages</a></p>

圧縮

使用hexo-neatまたはhexo-all-minifier。

ヒント：不使用、それはロードページに長い時間を引き起こす可能性があります。

CDN

注意：

We can not use fourth level `####` for header,
otherwise post page will not display properly.

jqueryの

jquery: https://cdn.jsdelivr.net/jquery/2.1.3/jquery.min.js

gitmint

ダウンロードgitmintファイルへ themes\next\source\lib

 tree gitmint/
 gitmint/
 ├── dist
 │   └── gitmint.browser.js
 └── style
     └── default.css

 2 directories, 2 files

編集します ./themes/next/layout/_third-party/comments/gitment.swig

    #<link rel="stylesheet" href="/lib/gitmint/style/default.css">
    #<script src="/lib/gitmint/dist/gitmint.browser.js"></script>

編集_config.ymlgitmintファイルをスキップします

    skip_render: # relative to source/ folder
        - README.md
        - lib/gitmint/dist/*.js
        - lib/gitmint/style/*.css

よくある質問

エラー：

hexo -v
ERROR Local hexo not found in /home/kezunlin/git/blog

解決：

cd blog
rm node_modules
cnpm install --save

参照

歴史

2017年12月26日：作成しました。
2017年12月27日：タグ/カテゴリページを追加し、次のtheameを使用し、付録を追加します。
2017年12月28日：高度、使用gitment、baidushare、ローカル検索などを追加します。
2018年1月2日：cnblogsに画像をアップロードします。
2018年1月3日：hexo-きちんとなど湿布、CDNへ。
2018年1月22日：その2を追加します。
2018年9月5日：SSLを追加します。
2019年11月7日：ポストの内容を再編成します。

著作権

投稿者：kezunlin
ポストリンク：https://kezunlin.me/post/98df88a8/
著作権：別途明記しない限り、このブログのすべての記事はCC BY-NC-SA 3.0の下でライセンスされています。

[Ubuntuの記事]使用Hexoは、個人のブログ、カスタムドメインのHTTPS暗号化、エンジンのグーグルを検索し、百度、360が含まを作成

シリーズ

heXoチュートリアル

レポを作成するためのGithubを使います

apt-getをインストールで

hexoインストール

hexoサイトを作成

githubのにデプロイ

追加READMEをしてレンダリングスキップ

新しいポストとデプロイ再び

付録

Hexoコマンド

投稿内容

ヘッダーテンプレート

ウェブ表示を制御する方

次のテーマを使用します

アバター

プラグイン

hexo管理

gitのデプロイヤ

RSSフィード

サイトマップ

Baiduのサイトマップ

Permentリンク

インデックス/アーカイブ/カテゴリー/タグ

タグ一覧ページ

カテゴリ一覧ページ

ローカル検索

install_hexo_plugins.sh

cnblogに画像をアップロード

複数のデプロイ

高度

カスタムドメインおよびhttps

カスタムドメイン

グーグルアナリティクス

構造化データをグーグル

Baiduのzhanzhang

360 zhanzhang

コメントをgitment

OAuthのアプリケーションを登録します

gitment設定

INITページのコメント

シェア

jiathis

Badusre（レイ）

統計

busuanzi

hexo-すべて-minifier（ありません）

hexo、きちんとしました

403エラー

スピードのために最適化

複数のデプロイ

圧縮

CDN

よくある質問

参照

歴史

著作権

おすすめ