Hexoはgithubベースのブログシステムで、markdownを使用して文章の内容を書く.ブログ構築の主な作業を記録します.

1.インストール環境

1.1 git

git --version gitバージョンの表示

1.2 node

node -v nodeバージョンの表示

2.Hexoを初歩的に取り付ける

Hexo足場

を取り付ける

npm install -g hexo-cli

初期化サイトは、新しいファイルプラスを作成し、コマンドラインを使用してアクセスします.次のコマンド

を実行します.

hexo init 
cd 
npm install

ローカルブログシステムが構築されました

2.3サイトディレクトリ

.
├── _config.yml //    ，  、   、  、  、       。
├── package.json//    ，     。
├── scaffolds//   ，     ：  (posts)、   (page)、   (draft)。
├── source//     ，          tags(  )、categories(  )
|   ├── _drafts//  (  )
|   └── _posts//  (  )
└── themes//     

共通コマンドhexo n 新規記事hexo cleanキャッシュhexo g生成静的ページhexo sローカルサーバを起動し、ローカル表示効果hexo dをWebサイト上に配置する

.

3.サイト最適化

3.1分類

新規分類ページ

hexo new page categories

ページにタイプを追加してsource->categories->indexに入ります.md

---
title:    
date: 2019-04-22 12:25:30
type: "categories"   #  
---

テンプレート追加分類scarffolds->postを開きます.md

---
title: {{ title }}
date: {{ date }}
categories:
tags:
---

このように文章を新規作成するとこの属性があり,分類を記入することで文章分類機能を実現できる.

3.2ラベル

新規ラベル

hexo new page tags

ページにラベル属性を追加source->tags->indexを開きます.md

---
title: tags
date: 2019-04-23 00:13:22
type: "tags" #      
---

3.3分類とラベルの使用

layout: posts
title:        
date: 2019-04-23 00:17:41
categories:     
tags: [node.js, java]

4.GitHubへの配備

github:

.github.ioの倉庫

を作成する.

settingにGitHub Pagesオプション

を追加

ローカル同期がオンになります.->config.yml、配置パス

を追加

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

注意:

コロンの後に

のスペースがあります

倉庫を先に関連付け、ssh

を配置する必要がある.
コマンドhexo g hexo dを使用して生成を完了し、yourName.github.ioをプッシュします.
注:エラー

error deployer not found:github 

の場合、実行

npm install --save hexo-deployer-git

そしてもう一度やってみます.

テーマ編

1.NEXTのインストール

nextはhexoのテーマで、公式サイトをクリックしてマルチ(evenテーマも悪くない)を見ることもできます.
インストールトピックはnextのプロジェクトcloneをルートディレクトリの下themes/nextにのみ使用します.

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

次に、構成を変更nextトピックを有効にするルートディレクトリの下_config.ymlを変更します.

theme: next

nextの_config.ymlではnextのスタイルを4つ修正できます.公式サイトで事例を見ることができます

Muse(デフォルト)

Mist

Pisces

Gemini注釈その他、欲しいスタイル

を残します

# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

2.Menuの設定（一番上のボタン）

themes/next/_config.yml

menu:
  home: / || home #  
  about: /about/ || user #   
  tags: /tags/ || tags  #  
  categories: /categories/ || th #  
  archives: /archives/ || archive #  

3.githubストラップ

fork me on githubのボタンをクリックし、GitHub Cornersでストラップを選択し、themes/next/layout/_layout.swigのの下に追加します.コードのhttps//your-urlを自分のgitホームページに変更します.

4.ハイパーリンクcssスタイルの変更

themes/next/source/css/_common/components/post/post.styl末尾追加

.post-body p a{
  color: #0593d3; //      
  border-bottom: none;
  border-bottom: 1px solid #0593d3; //       
  &:hover {
    color: #fc6423; //      
    border-bottom: none;
    border-bottom: 1px solid #fc6423; //       
  }
}

5.アバターと動画の設定

テーマディレクトリ_config.ymlに追加(Sidebar Avatarを検索)

//      
avatar: [ http://....]

アバターフィレット回転/themes/next/source/css/_common/components/sidebar/sidebar-author.styl追加

.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: 80px;
  -webkit-border-radius: 80px;
  -moz-border-radius: 80px;
  box-shadow: inset 0 -1px 0 #333sf;
  /*        [animation: (play)     (2s)             (ase-out)                
    (1s)  1        (1)      (infinite     ) ]*/
 
  /*         360  */
  -webkit-transition: -webkit-transform 1.0s ease-out;
  -moz-transition: -moz-transform 1.0s ease-out;
  transition: transform 1.0s ease-out;
}
img:hover {
  /*            
  -webkit-animation-play-state:paused;
  animation-play-state:paused;*/
  /*         360  */
  -webkit-transform: rotateZ(360deg);
  -moz-transform: rotateZ(360deg);
  transform: rotateZ(360deg);
}
/* Z       */
@-webkit-keyframes play {
  0% {
    -webkit-transform: rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateZ(-360deg);
  }
}
@-moz-keyframes play {
  0% {
    -moz-transform: rotateZ(0deg);
  }
  100% {
    -moz-transform: rotateZ(-360deg);
  }
}
@keyframes play {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(-360deg);
  }
}

6.コードブロックスタイル

themes
ext\source\css\_custom\custom.styl追加

code {
    color: #ff7600;
    background: #fbf7f8;
    margin: 2px;
}
//           
.highlight, pre {
    margin: 5px 0;
    padding: 5px;
    border-radius: 3px;
}
.highlight, code, pre {
    border: 1px solid #d6d6d6;
}

7.SNSアイコン

next/_config.ymlのSocial

[     ]: [    ] || [    ]
//github 、heartbeat( )、spinner( )...（  ）

アイコンはFont Awesome Icon

8.RSS

本のディレクトリの下npm install --save hexo-generator-feed

グローバル_config.yml末尾追加

# Extensions
## Plugins: http://hexo.io/plugins/
plugins: hexo-generate-feed

Nextを開く_config.ymlのrss:構成rss: /atom.xml

9.検索機能

本のディレクトリの下npm install hexo-generator-search --save

本のディレクトリ_config.ymlのうち

# Search 
search:
  path: ./public/search.xml
  field: post #       (page、all)
  format: html
  limit: 10000 #    

next _config.yml

local_search:
  enable: true #  true
  trigger: auto
  top_n_per_article: 1 #                   ，   -1                 。

トップページの非表示部分(クリックして詳細を表示)

nextプロファイル

# Automatically Excerpt. Not recommand.
# Please use  in the post to control excerpt accurately.
auto_excerpt:
  enable: false
  length: 150

簡易化構築

HEXO Portable分ブログを作成