Hexo 靜態博客使用指南

時間  2019-12-04
標籤 hexo 博客 使用 指南 简体版
原文   原文鏈接

上次我介紹了Hexo的基本搭建方法 近期 tommy351大神 又更新了版本
和以前的2.x使用步驟略有不一樣 目前剛剛更新 可能有許多主題和插件不兼容3.x 請等待後續更新html

本文介紹從零開始搭建的方法 如需從2.x升級到3.x 遷移方法請移至本文最後node

I.Hexo簡介

Hexo 是一個輕量的靜態博客框架。通過Hexo能夠快速生成一個靜態博客框架,僅須要幾條命令就能夠完成,相當方便。git

而架設Hexo的環境更簡單了 不須要 lnmp/lamp 這些繁瑣複雜的環境 僅僅須要一個簡單的http服務器便可使用 或者使用互聯網上免費的頁面託管服務
好比本人的這個博客 就是託管於 GitCafe 和 GitHub 的Pages服務上github

  • 本文會更隨 Hexo 的發展同步更新 如需請收藏本文 很是感謝您的閱讀! 若有錯誤,歡迎指出。npm

II.Hexo安裝方法

（近期nodejs更新4.0版本 注意此版本暫不兼容hexo編譯 請安裝版本號爲0.12.7的nodejs）json

  • Mac OS X/Linux或其餘UNIX/類UNIX系統 配置 nodejs 環境bash

    • 請去官方網站下載 .pkg 文件 或者下載已編譯完成的二進制文件markdown

    • 也能夠下載源代碼編譯安裝hexo

$ wget http://nodejs.org/dist/v0.12.4/node-v0.12.7.tar.gz
$ tar zxvf node-v0.12.7.tar.gz
$ cd node-v0.12.7
# ./configure --prefix=/usr
# make && make install

  • npm(node包管理器)app

    • redhat系

      # yum install npm -y

    • debian系

      # apt-get install npm -y

其餘發行版請自行尋找wiki獲得幫助

通過npm安裝Hexo-Cli 和 hexo

$ npm install hexo-cli -g

若是以上命令不能安裝 能夠嘗試把官方源替換爲淘寶npm源 再執行安裝Hexo

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

或者你直接通過添加 npm 參數 alias 一個新命令:

$ alias cnpm="npm --registry=https://registry.npm.taobao.org \
--cache=$HOME/.npm/.cache/cnpm \
--disturl=https://npm.taobao.org/dist \
--userconfig=$HOME/.cnpmrc"

若是以上的 cnpm 無法安裝 能夠試試看下方的 alias 方法

$ echo '\n#alias for cnpm\nalias cnpm="npm --registry=https://registry.npm.taobao.org \
--cache=$HOME/.npm/.cache/cnpm \
--disturl=https://npm.taobao.org/dist \
--userconfig=$HOME/.cnpmrc"' >> ~/.zshrc && source ~/.zshrc

  • Windows系統（具體環境配置請參考這個）

    • git

    • node環境

    • npm(node包管理器)

III.Hexo配置方法

新建一個須要當作博客目錄的文件夾

$ mkdir blog

進去之後加入hexo主程序和安裝npm

$ hexo init && npm install

文件夾大體結構以下

  • scaffolds 工具模板

  • scripts hexo的功能js

  • source 博客資源文件夾

  • source/_drafts 草稿文件夾

  • source/_posts 文章文件夾

  • themes 存放皮膚的文件夾

  • themes/landscape 默認皮膚文件夾

  • _config.yml 全局配置文件

  • db.json json格式的靜態常量數據庫

_posts目錄：Hexo存放博客文章的文件夾

themes目錄：存放皮膚的文件夾，默認使用官方的主題 你也能夠從hexo主題頁面下載你喜歡的主題

配置Hexo

Hexo全局配置

用文本編輯器修改_config.yml這個文件 大體以下 只須要自行修改幾個 其餘保持默認便可

一般須要修改站點名稱 /URL格式 /歸檔設置 /disqus評論用戶名 /部署配置 這幾項就能夠了 注意冒號後面都要添加一個半角空格 之後纔是設置參數

自定義域名設置 在source我文件夾下面新建CNAME文件 裏面寫入你的自定義域名 並設置您的dns配置cname方式到服務提供商的給的地址便可

# 網站
參數    描述
title    網站標題
subtitle    網站副標題
description    網站描述
author    您的名字
language    網站使用的語言
timezone    網站時區。Hexo 預設使用您電腦的時區。時區列表

# 網址
參數    描述    默認值
url    網址
root    網站根目錄
permalink    文章的 永久鏈接 格式    :year/:month/:day/:title/
permalink_default    永久鏈接中各部分的默認值
網站存放在子目錄
若是您的網站存放在子目錄中，例如 http://yoursite.com/blog，則請將您的 url 設爲 http://yoursite.com/blog 並把 root 設爲 /blog/。

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

# 文章
參數    描述    默認值
new_post_name    新文章的文件名稱    :title.md
default_layout    預設佈局    post
auto_spacing    在中文和英文之間加入空格    false
titlecase    把標題轉換爲 title case    false
external_link    在新標籤中打開鏈接    true
filename_case    把文件名稱轉換爲 (1) 小寫或 (2) 大寫    0
render_drafts    顯示草稿    false
post_asset_folder    啓動 Asset 文件夾    false
relative_link    把鏈接改爲與根目錄的相對位址    false
future    顯示未來的文章    true
highlight    代碼塊的設置

# 分類 & 標籤
參數    描述    默認值
default_category    默認分類    uncategorized
category_map    分類別名
tag_map    標籤別名
日期 / 時間格式
Hexo 使用 Moment.js 來解析和顯示時間。

參數    描述    默認值
date_format    日期格式    MMM D YYYY
time_format    時間格式    H:mm:ss
分頁
參數    描述    默認值
per_page    每頁顯示的文章量 (0 = 關閉分頁功能)    10
pagination_dir    分頁目錄    page

# 擴展
參數    描述
theme    當前主題名稱
deploy    部署

Hexo經常使用插件安裝與配置

安裝首頁文章數量 存檔 分類 的插件
安裝本地服務器代理插件
安裝發佈器插件
安裝更新插件 rss site-map之類的

$ npm install hexo-generator-index --save
$ npm install hexo-generator-archive --save
$ npm install hexo-generator-category --save
$ npm install hexo-generator-tag --save
$ npm install hexo-server --save
$ npm install hexo-deployer-git --save
$ npm install hexo-deployer-heroku --save
$ npm install hexo-deployer-rsync --save
$ npm install hexo-deployer-openshift --save
$ npm install hexo-renderer-marked@0.2.10 --save
$ npm install hexo-renderer-stylus@0.3.1 --save
$ npm install hexo-generator-feed@1.1.0 --save
$ npm install hexo-generator-sitemap@1.1.2 --save

裝完之後去全局配置文件 _config.yml 修改參數

index_generator:
  per_page: 10 ##首頁默認10篇文章標題 若是值爲0不分頁

archive_generator:
  per_page: 10 ##歸檔頁面默認10篇文章標題
  yearly: true  ##生成年視圖
  monthly: true ##生成月視圖

tag_generator:
  per_page: 10 ##標籤分類頁面默認10篇文章

category_generator:
   per_page: 10 ###分類頁面默認10篇文章

feed:
  type: atom ##feed類型 atom或者rss2
  path: atom.xml ##feed路徑
  limit: 20  ##feed文章最小數量


deploy:
  type: git ##部署類型 其餘類型自行google之
  repo: <repository url> ##git倉庫地址
  branch: [branch] ##git 頁面分支
  message: [message] ##git message建議默認字段update 能夠自定義

-多部署

deploy:
  type: git
  message: update  ##git message建議默認字段update 能夠自定義
  repo:
  gitcafe: <repository url>,[branch] ##gitcafe 倉庫地址和分支
  github: <repository url>,[branch] ##github 倉庫地址和分支

例如

deploy:
    type: git
    message: "update"
    repo:
    gitcafe: https://gitcafe.com/ky0ncheng/ky0ncheng.git,gitcafe-pages
    github: https://github.com/ky0ncheng/ky0ncheng.github.io.git,master

注意:

  • GitCafe Pages 服務 分支在 gitcafe-pages

  • GitHub Pages 服務 分支在 master

更多插件能夠去Hexo插件wiki找到 https://github.com/hexojs/hexo/wiki/Plugins

Hexo主題設置

同樣編輯主題文件夾的 _config.yml

# Header
menu:#導航欄連接
Home: /
Archives: /archives #歸檔頁面URL
自定義頁面標題: /自定義頁面URL
rss: /atom.xml  #rss地址  默認便可

# Content
excerpt_link: Read More #閱讀更多的文字顯示
fancybox: true #開啓fancybox效果

# Sidebar  #側邊欄設置
sidebar: right
widgets:
- category
- tag
- tagcloud
- archive
- recent_posts

# Miscellaneous #社交網絡和統計連接地址
google_analytics: #google analytics ID
favicon: /favicon.png #網站的favicon
twitter:
google_plus:
fb_admins:
fb_app_id:


網站Favicon設置

favicon.ico能夠去[bitbug](http://www.bitbug.net/)製做 建議大小32x32

請把您的favicon.ico放到themes/您的主題名稱/source文件夾下

然後去themes/您的主題名稱/layout下 修改header的meta標籤


<link href="../favicon.ico" rel="shortcut icon" type="image/x-icon" />

寫文章

Hexo使用markdown語法的純文本存放文章 後綴爲.md 你能夠在_post文件夾裏面新建這個後綴的.md文件 使用的全是UTF-8編碼

也能夠輸入命令以生成

$ hexo new <title>

若是是新建一個頁面

$ hexo new page <title>

看一下剛纔生成的<title>.md，內容以下：

title: title #文章標題
 date: 2015-02-05 12:47:44 #文章生成時間
  #文章分類目錄 能夠省略
 tags: #文章標籤 能夠省略
 description: #你對本頁的描述 能夠省略
 ---
 這裏開始使用markdown格式輸入你的正文。

多標籤注意語法格式 以下:

tags:
- 標籤1
- 標籤2
- 標籤3
- etc...

想在首頁文章預覽添加圖片能夠添加photo參數 這個fancybox能夠省略 以下:

photos:
  - http://xxx.com/photo.jpg

正文中可使用<!--more-->設置文章摘要 以下:

以上是文章摘要

<!--more-->

如下是餘下全文

more以上內容便是文章摘要，在主頁顯示，more如下內容點擊『> Read More』鏈接打開全文才顯示。

若是您曾經是 Wordpress 的用戶可使用 hexo 的插件把以前的文章進行轉換成 md 的無格式文件

  1. 先從 Wordpress 後臺導出全部的文章為 XML 格式.

  2. 安裝 hexo 的插件 hexo-migrator-wordpress

$ npm install hexo-migrator-wordpress --save

  1. 使用 hexo-migrator-wordpress 轉換 xml 為 md 文件 (export.xml 請換成您的具體文件名)

$ hexo migrate wordpress export.xml

命令執行後 您會在 source/_post 目錄內就能夠看到剛剛轉換完成的博客文章 md 文件

IV.Hexo部署方法

寫完文章之後 就能夠啓動本地服務器測試了

$ hexo s

這個時候hexo啓動localhost的4000端口 靜態的網站架設完成

推薦部署在 GitCafe 或者 Github 的pages服務上

修改後就能夠部署上去了

$ hexo clean #清除緩存
$ hexo g #生成靜態網頁
$ hexo d #開始部署

V.Hexo更新方法

$ npm update -g

  • cnpm 源也許會同步官方源失敗 形成 hexo 無法更新到最新版本

  • hexo 同時也須要最新的 nodejs

$ npm install n -g
# n stable

以上就是Hexo的基本使用方法 進階的能夠在Hexo的官方文檔裡找到 感謝閱讀!

Enjoy~

hexo3.x帶來了更好的性能，更新了API，模塊化了大部分組件。更多變化看這裏： https://github.com/hexojs/hexo/wiki/Breaking-Changes-in-Hexo-3.0

hexo2.x到3.x遷移指南：
https://github.com/hexojs/hexo/wiki/Migrating-from-2.x-to-3.08

原文鏈接 https://ky0n.xyz/build-your-hexo-blog/

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程