建立本身的網站博客--Hexo

原文地址：https://www.xingkongbj.com/blog/hexo/creat-hexo.html

安裝環境

安裝 node

下載對應版本並安裝 node 。

安裝 Git

• Windows：下載並安裝 git。
• Mac：brew install git
• Linux (Ubuntu, Debian)：sudo apt-get install git-core
• Linux (Fedora, Red Hat, CentOS)：sudo yum install git-core

安裝 Hexo

npm install -g hexo-cli

建立網站

請執行下列命令，Hexo 將會在指定文件夾中新建所須要的文件。

hexo init <文件夾名稱> # 文件夾名稱爲網站的根目錄名稱。執行此命令，須要在一個新建立文件夾下。
cd <文件夾名稱> # 進入初始化的文件夾
npm install # 安裝環境須要的相關程序

建立後，目錄以下

.
├── _config.yml  網站的配置文件
├── package.json npm包配置文件
├── scaffolds    模板文件夾
├── source       資源文件夾
|   ├── _drafts
|   └── _posts   博客文章
└── themes       主題文件夾

網站配置說明

網站

title: Hexo # 網站標題
subtitle:  # 網站副標題
description:  # 網站描述
keywords:  # 網站關鍵詞
author: John Doe  # 網站做者
language:  # 網站使用的語言
timezone:  # 網站時區

網址

url: http://yoursite.com # 網址
root: / # 網站根目錄
permalink: :year/:month/:day/:title/ # 文章的永久連接格式
permalink_defaults:  # 永久連接中各部分的默認值

目錄

source_dir: source # 資源文件夾，這個文件夾用來存放內容。
public_dir: public # 公共文件夾，這個文件夾用於存放生成的站點文件。
tag_dir: tags # 標籤文件夾
archive_dir: archives # 歸檔文件夾
category_dir: categories # 分類文件夾
code_dir: downloads/code # Include code 文件夾
i18n_dir: :lang # 國際化（i18n）文件夾
skip_render:  # 跳過指定文件的渲染，您可以使用 glob 表達式來匹配路徑。

文章

new_post_name: :title.md # 新文章的文件名稱
default_layout: post # 預設模板
titlecase: false # 把標題轉換爲標題大寫
external_link: true # 在新標籤中打開連接
filename_case: 0 # 把文件名稱轉換爲 (1) 小寫或 (2) 大寫
render_drafts: false # 顯示草稿
post_asset_folder: false # 啓動 Asset 文件夾
relative_link: false # 把連接改成與根目錄的相對位址
future: true # 顯示將來的文章
highlight: # 代碼塊的設置
  enable: true # 開啓高亮
  line_number: true # 行號
  auto_detect: false # 自動檢測
  tab_replace:  # tab 替換

首頁

index_generator:
  path: '' # 首頁路徑
  per_page: 10 # 單頁顯示個數
  order_by: -date # 排序

分類 & 標籤

default_category: uncategorized # 默認分類
category_map:  # 分類別名
tag_map:  # 標籤別名

日期 / 時間格式

date_format: YYYY-MM-DD # 日期格式
time_format: HH:mm:ss # 時間格式

分頁

per_page: 10 # 每頁顯示的文章量 (0 = 關閉分頁功能)
pagination_dir: page # 分頁目錄

主題

theme: landscape

部署

deploy: 
  type: git
  repo: git@github.com:xingkongbj/github.io.git
  branch: master

Hexo 命令

新建文章

hexo new [模板] <標題>

生成網站頁面

hexo g # hexo generate 簡寫
# -d, --deploy  文件生成後當即部署網站
# -w, --watch   監視文件變更

發表草稿

hexo publish [模板] <標題>

本地查看 http://localhost:4000/

hexo s # hexo server 簡寫
# -p, --port    重設端口
# -s, --static  只使用靜態文件
# -l, --log     啓動日記記錄，使用覆蓋記錄格式

發佈

hexo d # hexo deploy 簡寫
# -g, --generate    部署以前預先生成靜態文件

渲染文件

hexo render <file1> [file2] ...
# -o, --output  設置輸出路徑

清除緩存

hexo clean

啓動模式

hexo --safe # 安全模式，不會載入插件和腳本
hexo --debug # 調試模式，輸出調試信息並寫入 debug.log
hexo --silent # 簡潔模式，隱藏終端信息
hexo --config custom.yml # 更改自定義配置文件的路徑，持續生效
hexo --draft # 顯示 source/_drafts 文件夾中的草稿文章
hexo --cwd /path/to/cwd # 自定義當前工做目錄的路徑

部署

安裝 hexo-deployer-git

npm install hexo-deployer-git --save

# 網站配置文件 _config.yml
deploy:
  type: git # 方式
  repo: git@github.com:xingkongbj/xingkongbj.github.io.git # git 路徑
  branch: master # 分支

網站基本配置

# 網站配置文件 _config.yml
title: xingkongbj-寒鬆 # 網站標題
subtitle: To live is to change the world # 網站副標題，能夠寫一個名言
description: 寒鬆的主頁 # 網站描述
keywords: web vue react webpack js es6 css html # 網站關鍵詞
author: 寒鬆 # 您的名字
timezone: Asia/Shanghai # 網站時區

url: https://xingkongbj.github.io/ # 網址
permalink: /blog/:year/:month/:day/:title.html # 文章的永久連接格式

highlight: # 代碼塊的設置
  auto_detect: true # 自動檢測

安裝 Next 主題

cd your-hexo-site # 進入 Hexo 剛建立的主目錄
git clone https://github.com/theme-next/hexo-theme-next themes/next

網站配置

# 網站配置文件 _config.yml
# 主題設置
theme: next

# 語言設置
language: zh-CN

主題配置

# 主題配置文件 themes/next/_config.yml

# 網站圖標
favicon:
  small: favicon.ico
  medium: favicon.ico
  apple_touch_icon: favicon.ico
  #safari_pinned_tab: /images/logo.svg
  #android_manifest: /images/manifest.json
  #ms_browserconfig: /images/browserconfig.xml
  
# 頁腳
footer:
  since: 2013
  icon:
      name: heart
      animated: true
      color: "#ff0000"
  copyright: xingkongbj - 寒鬆
  powered:
    enable: true
    version: false
  theme:
    enable: true
    version: false

# seo
canonical: true
seo: true
index_with_subtitle: true

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

# 主題樣式
#scheme: Muse
scheme: Mist
#scheme: Pisces

# 聯繫方式
social:
  GitHub: https://github.com/xingkongbj || github
  E-Mail: mailto:xingkongbj@qq.com || envelope
social_icons:
  transition: true
  
# 首頁文章簡介
auto_excerpt:
  enable: true
  length: 150

# 側邊欄頭像
avatar:
  url: images/common/favicon.ico # 頭像圖片
  rounded: ture # 是否圓形
  opacity: 1 # 透明度
  rotated: ture # 是否懸浮旋轉

# 高亮代碼
highlight_theme: night

# 字體
font:
  enable: true
  global:
    external: true
    family: Monda
    size:
  headings:
    external: true
    family: Roboto Slab
    size:
  posts:
    external: true
    family:
  logo:
    external: true
    family: Lobster Two
    size: 24
  codes:
    external: true
    family: PT Mono
    size:
    
# 數學公式
math:
  enable: true
  
# 友情連接
#links_layout: block
links_layout: inline
links:
  Github: https://xingkongbj.github.io/

開啓RSS

npm install hexo-generator-feed --save

自帶庫

須要進入 Next 主題中的 github 地址克隆到 source，而且根據其中的說明進行配置。

• fancybox--支持全瀏覽器查看圖片
• pace--頁面加載進度
• canvas_nest--背景網狀動畫