hexo+css建立自己的blog（搭建）

stardew發表於2017-09-05
HexoCSS

一、什麼是hexo

Hexo是一個快速、簡潔且高效的部落格框架，使用Markdown（或其他渲染引擎）解析文章，在幾秒內，即可利用靚麗的主題生成靜態網頁。目前比較火的vue和weex的文件都是使用hexo框架實現的。

二、hexo的安裝

安裝hexo前，確保電腦中已經安裝了node和git。

node安裝

方法一、
    直接安裝node：ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
方法二、
    先安裝homebrew： /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
    後安裝node：brew install node

git安裝

先安裝homebrew： /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
後安裝git：brew install git

hexo安裝

npm install -g hexo-cli

三、建立專案

  1. 新建專案: hexo init folder

  2. 進入: cd folder>

  3. 安裝依賴包: npm install

  4. 新建一篇文章: hexo new iOS-APIs (檔案會在/source/_posts下)

  5. 啟動: hexo server

  6. 瀏覽器開啟: http://localhost:4000/document/

四、hexo配置

配置檔案為_config.yml
參考: https://hexo.io/docs/configur…
github: https://github.com/hexojs/hexo/

Site （網站）

  1. 網站標題
    title: weex使用手冊

  2. 網站副標題
    subtitle: weex中文手冊

  3. 網站描述
    description: 整理weex手冊, 包括通用特性, 內建元件, 內建模組, CSS 單位, 通用事件, Native DOM APIs, Weex 例項變數, Web 標準, JS Service, Vue, 高階知識, 遷移

  4. 作者名字
    author: lu.wei

  5. 網站使用的語言
    language: 簡體中文

  6. 網站時區Hexo 預設使用您電腦的時區。時區列表。比如說：America/New_York, Japan, 和 UTC 。
    timezone: UTC

URL （網址）

如果您的網站存放在子目錄中，例如 http://yoursite.com/blog，則請將您的 url 設為 http://yoursite.com/blog 並把 root 設為 /blog/。

  1. 網址
    url: https://github.com/stardew516…

  2. 網站根目錄
    root: /document/

  3. 文章的 永久連結 格式
    permalink: :year/:month/:day/:title/

  4. 永久連結中各部分的預設值
    permalink_defaults:

Directory （目錄）

  1. 資原始檔夾，這個資料夾用來存放內容。
    source_dir: source

  2. 公共資料夾，這個資料夾用於存放生成的站點檔案。
    public_dir: public

  3. 標籤資料夾
    tag_dir: tags

  4. 歸檔資料夾
    archive_dir: archives

  5. 分類資料夾
    category_dir: categories

  6. Include code 資料夾
    code_dir: downloads/code

  7. 國際化（i18n）資料夾
    i18n_dir: :lang

  8. 跳過指定檔案的渲染，您可使用 glob 表示式來匹配路徑。
    skip_render:

Writing （文章）

  1. 新建文章的檔名稱
    new_post_name: :title.md

  2. 預設佈局
    default_layout: post

  3. 在中文和英文之間加入空格
    auto_spacing: false

  4. 把標題轉換為 title case
    titlecase: false

  5. 在新標籤中開啟連結
    external_link: true

  6. 把檔名稱轉換為 (1) 小寫或 (2) 大寫
    filename_case: 0

  7. 顯示草稿
    render_drafts: false

  8. 啟動 Asset 資料夾
    post_asset_folder: true

  9. 把連結改為與根目錄的相對位址
    relative_link: false

  10. 顯示未來的文章
    future: true

  11. 程式碼塊的設定

    highlight:
  enable: true
  line_number: true
  auto_detect: true
  tab_replace:

Home page setting （主頁設定）

1. path: 部落格索引頁的跟路徑,預設為空
2. per_page: 每頁展示的文章量, 為0時表示不分頁
3. order_by: 排序, 預設日期降序
index_generator:
  path: ``
  per_page: 10
  order_by: -date

Category & Tag （分類 & 標籤）

  1. 預設分類
    default_category: uncategorized

  2. 分類別名
    category_map:

  3. 標籤別名
    tag_map:

Date / Time format （日期 / 時間格式）

hexo使用Moment.js來解析和顯示時間。
可以參照http://momentjs.com/docs/#/di…來自定義日期格式。

  1. 日期格式
    date_format: YYYY-MM-DD

  2. 時間格式
    time_format: HH:mm:ss

Pagination （分頁）

  1. 每頁顯示的文章量 (0 = 關閉分頁功能)
    per_page: 10

  2. 分頁目錄
    pagination_dir: page

Extensions （擴充套件）

外掛: https://hexo.io/plugins/
主題: https://hexo.io/themes/

  1. 當前主題名稱。值為false時禁用主題
    theme: landscape

Deployment （部署）

參考: https://hexo.io/docs/deployme…

  1. 部署部分的配置

    deploy:
  type: git
  repo: https://github.com/stardew516/document
  branch: master
  message: hexo + css

五、部署

github上部署:

  1. 安裝hexo-deployer-git: npm install hexo-deployer-git --save

  2. _config.yml 中配置

    # 部署部分的設定
deploy:
  type: git
  repo: https://github.com/stardew516/document
  branch: master
  message: hexo + css

  3. 終端進入目錄,執行: hexo deploy

相關文章