lnmp.orgの lnmp インストールワンキーパッケージを使用して、プログラムに従ってインストールし、仮想ホストを作成します。リライトやデータベースは必要ありません。
本文では lvcshu.com を例示ドメインとして使用します
HEXO のインストール#
公式サイトの説明に従って、一歩ずつインストールします。
node.js のインストール#
curl:
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash
または
wget:
wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash
その後、ターミナルを再起動するか、ssh で再接続します。
nvm install stable
hexo-cil のインストール#
npm install -g hexo-cli
これで、すぐにインストールが完了します！
ブログのデプロイ#
Hexo をインストールした後、以下のコマンドを実行して、ターゲット内の Hexo を初期化します。
ここでのフォルダは、私たちのブログの主ディレクトリ、つまり lnmp 仮想ホストのディレクトリです。ディレクトリに入った後、次のコマンドを実行します。
hexo init .
npm install
hexo g
この時点で、私たちのブログの静的ページが成功裏に生成されましたが、ページにアクセスしても見ることはできません。次のステップに進みます。
nginx 設定ファイルの調整#
nginx の該当サイトの設定ファイルを開き、次の行を見つけます。
root /home/wwwroot/lvcshu.com;
これを次のように変更します。
root /home/wwwroot/blog.lvcshu.com/public;
注意：2 か所を変更する必要があります。http と https に対応しています。
推奨：http を 301 リダイレクトして、https にリダイレクトできます。
lnmp nginx restart
効果を見てみましょう！
テーマの変更#
ネット上には多くのオープンソースで非常に美しい hexo テーマがあり、デフォルトのテーマは本当に醜いので、デフォルトのテーマを使用しないことにしました。シンプルで非常に美しいテーマ「NexT」を見つけました。
NexT テーマのインストール#
ブログの主ディレクトリに移動します。
git clone https://github.com/theme-next/hexo-theme-next themes/next
次に、** サイト設定ファイル（ブログの主ディレクトリ内の ‘_config.yml’）** を開き、theme フィールドを next に変更し、次にhexo clean && hexo gを実行して、サイトを開くと効果が見られます。
Next テーマの最適化#
以下の内容は Hexo+Next テーマ最適化 からのもので、ぜひ見に行っていいねを押してください！
テーマスタイルの設定#
themes/next/_config.ymlファイルを開き、schemeキーワードを検索し、使用するschemeの前のコメント#を削除します。
\# ---------------------------------------------------------------
\# Scheme Settings
\# ---------------------------------------------------------------
\# Schemes
#scheme: Muse # デフォルトのScheme、これはNexTの最初のバージョンで、白黒の主調、大量の余白
#scheme: Mist # Museのコンパクトバージョン、整然としたシングルカラムの外観
scheme: Pisces # ダブルカラムScheme、清新な小家碧玉
#scheme: Gemini # Piscesに似ている
メニュー項目の表示テキストとアイコンの設定#
NexT はFont Awesomeが提供するアイコンを使用しており、Font Awesome は 600 以上のアイコンを提供しており、ほとんどのシーンに対応できます。また、Retina ディスプレイでアイコンがぼやける問題を心配する必要はありません。
メニュー項目の表示中国語テキストを設定：#
themes/next/languages/zh-Hans.ymlファイルを開き、menuキーワードを検索し、対応する中国語を変更または新規追加します。
menu:
home: ホーム
archives: アーカイブ
categories: カテゴリ
tags: タグ
about: アバウト
search: 検索
schedule: スケジュール
sitemap: サイトマップ
commonweal: 公益404
# 新規追加メニュー
catalogue: 目次
メニュー項目のファイルディレクトリと対応アイコンの設定（新版 2 項目統合）#
themes/next/_config.ymlファイルを開き、menu_iconsキーワードを検索し、対応するアイコン名を変更または新規追加します。
\# ---------------------------------------------------------------
\# Menu Settings
\# ---------------------------------------------------------------
\# サイトをサブディレクトリ（例：domain.tld/blog）で実行する場合、リンク値から先頭のスラッシュを削除します（/archives -> archives）。
\# 使用法：\`Key: /link/ || icon\`
\# Keyはメニュー項目の名前です。このメニューの翻訳がlanguagesに見つかる場合、この翻訳が読み込まれます。見つからない場合は、Key名が使用されます。Keyは大文字と小文字を区別します。
\# 値は`||`区切りの前がターゲットリンクです。
\# 値は`||`区切りの後がFontAwesomeアイコンの名前です。アイコン（区切りの有無にかかわらず）が指定されていない場合、質問アイコンが読み込まれます。
menu:
home: / || home
archives: /archives/ || history
categories: /categories/ || list
tags: /tags/ || tags
tools: /categories/ツールリソース/ || briefcase
about: /about/ || user
#schedule: /schedule/ || calendar
#sitemap: /sitemap.xml || sitemap
#commonweal: /404/ || heartbeat
\# メニューアイコンを有効/無効にします。
\# アイコンマッピング：
\# メニュー項目を特定のFontAwesomeアイコン名にマッピングします。
\# Keyはメニュー項目の名前で、値はFontAwesomeアイコンの名前です。Keyは大文字と小文字を区別します。
\# 質問マスクアイコンが表示される場合、その項目にはマッピングアイコンがありません。
menu_icons:
enable: true
home 以外の archives、/ の後ろは手動でこのページを作成する必要があります。
メニュー項目に対応するファイルディレクトリを作成#
カテゴリを例に、ターミナルウィンドウで Hexo サイトディレクトリに移動します。hexo new pageを使用して新しいページを作成し、categoriesと名付けます：
cd your-hexo-site
hexo new page categories
新しく作成したページを編集し、カテゴリを設定します。
\-\-\-
title: カテゴリ
date: 2014-12-22 12:39:04
categories: Testing #カテゴリ名
type: "categories"
\-\-\-
アバター設定#
アバターを追加#
themes/next/_config.ymlファイルを開き、Sidebar Avatarキーワードを検索し、avatarの前の#を削除します：
\# Sidebar Avatar
\# in theme directory(source/images): /images/avatar.jpg
\# in site directory(source/uploads): /uploads/avatar.jpg
avatar: http://example.com/avatar.png
または、ローカル画像を使用し、画像をthemes/next/source/imagesに置き、avatarを変更します：
avatar: /images/avatar.gif
アバターの枠を円形に設定#
themes/next/source/css/_common/components/sidebar/sidebar-author.sylファイルを開き、次のように変更します：
.site-author-image {
display: block;
margin: 0 auto;
padding: $site-author-image-padding;
max-width: $site-author-image-width;
height: $site-author-image-height;
border: $site-author-image-border-width solid $site-author-image-border-color;
// アバターの枠を変更
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
}
特効：マウスをアバターの上に置くと回転#
.site-author-image {
display: block;
margin: 0 auto;
padding: $site-author-image-padding;
max-width: $site-author-image-width;
height: $site-author-image-height;
border: $site-author-image-border-width solid $site-author-image-border-color;
// アバターの枠を変更
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
// 回転を設定
transition: 1.4s all;
}
// 回転可能な円形アバター、\`hover\`アクション
.site-author-image:hover {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-transform: rotate(360deg);
}
ページを閲覧中に現在の閲覧進捗を表示#
themes/next/_config.ymlを開き、キーワードscrollpercentを検索し、falseをtrueに変更します。
top ボタンをサイドバーに配置#
top ボタンをサイドバーに配置したい場合、themes/next/_config.ymlを開き、キーワードb2tを検索し、falseをtrueに変更します。
\# サイドバーのトップに戻る
b2t: true
\# b2tボタンのスクロールパーセントラベル
scrollpercent: true
サイドバー設定#
サイドバーのソーシャルリンクを設定#
themes/next/_config.ymlファイルを開き、キーワードsocialを検索し、ソーシャルサイト名とアドレスを追加します。
\# ---------------------------------------------------------------
\# サイドバー設定
\# ---------------------------------------------------------------
\# ソーシャルリンク。
\# 使用法：\`Key: permalink || icon\`
\# Keyはエンドユーザーに表示されるリンクラベルです。
\# 値は`||`区切りの前がターゲットパーマリンクです。
\# 値は`||`区切りの後がFontAwesomeアイコンの名前です。アイコン（区切りの有無にかかわらず）が指定されていない場合、地球アイコンが読み込まれます。
social:
E-Mail: mailto:[email protected] || envelope
Google: https://plus.google.com/yourname || google
Twitter: https://twitter.com/yourname || twitter
FB Page: https://www.facebook.com/yourname || facebook
# その他
サイドバーのソーシャルアイコンを設定#
themes/next/_config.ymlファイルを開き、キーワードsocial_iconsを検索し、ソーシャルサイト名（大文字と小文字に注意）アイコン、Font Awesome アイコンを追加します。
RSS#
Hexo サイトディレクトリで：
npm install hexo-generator-feed --save
Hexo サイトの_config.ymlを開き、次の設定を追加します：
\# feed
\# 依存関係: https://github.com/hexojs/hexo-generator-feed
feed:
type: atom
path: atom.xml
limit: 20
hub:
content:
友達リンク#
themes/next/_config.ymlファイルを開き、キーワードBlog rollsを検索します：
\# Blog rolls
links_title: 友達リンク #タイトル
links_layout: block #レイアウト、一行に一つのリンク
#links_layout: inline
links: #リンク
baidu: http://example.com/
google: http://example.com/
ホームページの記事に枠の影効果を追加#
themes/next/source/css/_custom/custom.stylを開き、コードを追加します：
// ホームページの記事に影効果を追加
.post {
margin-top: 0px;
margin-bottom: 60px;
padding: 25px;
-webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
-moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}
記事間の区切り線を変更#
themes/next/source/css/_common/components/post/post-eof.stylを開き、次のように変更します：
.posts-expand {
.post-eof {
display: block;
// margin: $post-eof-margin-top auto $post-eof-margin-bottom;
width: 0%; //区切り線の長さ
height: 0px; // 区切り線の高さ
background: $grey-light;
text-align: center;
}
}
コードブロックのカスタムスタイル#
// カスタムスタイル。
code {
color: #ff7600;
background: #fbf7f8;
margin: 2px;
}
// 枠のカスタムスタイル
.highlight, pre {
margin: 5px 0;
padding: 5px;
border-radius: 3px;
}
.highlight, code, pre {
border: 1px solid #d6d6d6;
}
著作権声明を有効にする#
テーマ設定ファイルで、キーワードpost_copyrightを検索し、enableをtrueに変更します：
\# 投稿にライセンスを宣言
post_copyright:
enable: true
license: CC BY-NC-SA 4.0
license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/
カスタム記事の下部著作権声明
作者：Dragonstyle
リンク：http://www.dragonstyle.win/2017/09/06/Android-Studio個人設定/
出典：簡書
著作権声明： 本ブログのすべての記事は特に声明がない限り、CC BY-NC-SA 4.0ライセンスに基づいています。転載の際は出典を明記してください！
ディレクトリthemes/next/layout/_macro/にmy-copyright.swigを追加し、内容は次の通りです：
{% if page.copyright %}
<div class="my\_post\_copyright">
<script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
<!-- JSライブラリsweetalertのパスを変更できます -->
<!--
<script type="text/javascript" src="http://jslibs.wuxubj.cn/sweetalert_mini/jquery-1.7.1.min.js"></script>
<script src="http://jslibs.wuxubj.cn/sweetalert_mini/sweetalert.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://jslibs.wuxubj.cn/sweetalert_mini/sweetalert.mini.css">-->
<p><span>この記事のタイトル:</span>{{ page.title }}</a></p>
<p><span>記事の作者:</span>{{ theme.author }}</a></p>
<p><span>公開日時:</span>{{ page.date.format("YYYY年MM月DD日 - HH:mm:ss") }}</p>
<p><span>最終更新:</span>{{ page.updated.format("YYYY年MM月DD日 - HH:mm:ss") }}</p>
<p><span>元のリンク:</span><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a>
<span class="copy-path" title="クリックして記事リンクをコピー"><i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}" aria-label="コピー成功！"></i></span>
</p>
<p><span>ライセンス:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">表示-非商業的使用-改変禁止 4.0 国際</a> 転載の際は元のリンクと作者を残してください。</p>
</div>
<script>
var clipboard = new Clipboard('.fa-clipboard');
clipboard.on('success', $(function(){
$(".fa-clipboard").click(function(){
swal({
title: "",
text: 'コピー成功',
html: false,
timer: 500,
showConfirmButton: false
});
});
}));
</script>
{% endif %}
ディレクトリthemes/next/source/css/_common/components/post/にmy-post-copyright.stylを追加し、内容は次の通りです：
.my\_post\_copyright {
width: 85%;
max-width: 45em;
margin: 2.8em auto 0;
padding: 0.5em 1.0em;
border: 1px solid #d3d3d3;
font-size: 0.93rem;
line-height: 1.6em;
word-break: break-all;
background: rgba(255,255,255,0.4);
}
.my\_post\_copyright p{margin:0;}
.my\_post\_copyright span {
display: inline-block;
width: 5.2em;
color: #333333; // タイトルの色
font-weight: bold;
}
.my\_post\_copyright .raw {
margin-left: 1em;
width: 5em;
}
.my\_post\_copyright a {
color: #808080;
border-bottom:0;
}
.my\_post\_copyright a:hover {
color: #0593d3; // リンクの色
text-decoration: underline;
}
.my\_post\_copyright:hover .fa-clipboard {
color: #000;
}
.my\_post\_copyright .post-url:hover {
font-weight: normal;
}
.my\_post\_copyright .copy-path {
margin-left: 1em;
width: 1em;
+mobile(){display:none;}
}
.my\_post\_copyright .copy-path:hover {
color: #808080;
cursor: pointer;
}
themes/next/layout/_macro/post.swigを変更し、次のコードを追加します：
{% if theme.wechat\_subscriber.enabled and not is\_index %}
<div>
{% include 'wechat-subscriber.swig' %}
</div>
{% endif %}
その前に次のコードを追加します：
<div>
{% if not is_index %}
{% include 'my-copyright.swig' %}
{% endif %}
</div>
themes/next/source/css/_common/components/post/post.stylファイルを開き、最後の行に次のコードを追加します：
@import "my-post-copyright"
新しい記事を作成すると自動的に著作権が有効になるように設定します。新しい記事を作成すると自動的にカスタム著作権声明が表示されるように、your site/scaffolds/post.mdファイルを設定します。
---
title: {{ title }}
date: {{ date }}
tags:
type: "categories"
categories:
copyright: true #新規追加、オンにする
---