Stories

Detail Return Return

基於Hexo和Butterfly創建個人技術博客，(1) 初始化博客站點，您只需要知道Hexo框架的這些內容就足夠了 - Stories Detail

專題概述

本文是個人建站系列的第一篇文章，最終有多少篇文章筆者現在也説不好，因為是一邊創建個人站，一邊沉澱這個過程。每一步都是實操後再總結文檔，文檔是以章為單位總結的，每一章都會有幾篇文章，在發文前也都經過至少3次的大綱、文案的調整和校對，目的是為了儘量讓您能看明白，內容包括但不限於教程、實操、最佳實踐等，相對系統化，不過真的非常耗費時間。

  • 本地環境要求：node、git，高級用户可選裝nvm進行node管理；
  • 本文檔面向：MacOS用户

專題目標

個人建站其實並不簡單，但沒啥技術門檻，看下Hexo和theme插件的文檔，那麼代碼層面基本就可以無憂了（主題插件一定要在建站之初選定，因為每個主題的使用方法都不一樣，決定了網站的風格。後期更換主題需要修改很多配置），但要真正上線的話您還要了解，比如域名、雲主機、備案、流量、安全、網站運營、成本控制等等知識。好在筆者這幾年工作下來對上述知識多少還是有經驗積累的。

<font color=green size=4>本教程終極目標：</font>
對Hexo和Butterfly主題的技術講解只是初始目標，除hexo和butterlfy外還會涉及其它很多內容，包括運營和成本控制等知識，這將有助於幫您構建自己的技術體系提供參考思路（不侷限於個人建立領域）。So，如果您能掌握本系列教程的知識，至少能豐富您個人的技術圖譜，也會重新審視技術發展路線以及對未來的規劃，而後者是筆者最希望看到的。因為本專題是以建站這個事來開展的，hexo等框架的存技術使用只是做成這個事的充分但不必要條件。

面向對象

本教程即可以做為教程系統的學習也可以做為字典手冊來查詢使用。

<font color=green size=4>本教程的目標人羣：</font>
首先要説的一點就是知識的積累沒有捷徑可走，全是無數個不眠夜和時間堆出來的。但個體由於目的的不同，其選擇的過程和方法也不一樣，所以筆者就目的和教程的用法做下簡單總結：

  • 如果您只是想瞭解此方面的內容，那麼建議您只需要詳讀建站流程相關的章節瞭解下建站的大至內容，然後再按興趣選讀；
  • 如果您想系統掌握這方面的技能，但不做任何與商業化相關的事，建議您每個章節都實操下但不必每個章節都一點不落的操作，一是比較耗時間，二是如果沒有明確的目的性很難有所收穫，因為本教程很多部分是圍繞如何後期商業化運營展開的；
  • 如果您想打造個人技術品牌甚至實現商業化運營，那麼我建議您按章節順序一字不落的實操下。但我還是要先潑盆冷水，要達到這一目的一點也不容易甚至可能會失敗，單時間上對於普通人可能需要1-2年的時間甚至更長。建站只是其中一步，本系列教程雖不能帶給您全部內容，但一定可以帶給您更多的思考以及選擇。但慶幸的是我個人認為這是值得的，因為這件事一旦成功其帶來的長尾效益和衍生空間是您無法想象的，技術積累和金錢收益只是其中一部分。
<font color=green size=4>本章目標：</font>
掌握hexo的安裝、命令使用，並能在本地成功運行網站；也可參考基於hexo和aws雲搭建個人博客，0基礎0費用，有點豪橫（2W字超詳細圖文教程）一文中描述發佈博客到github或雲主機上。

一、搭建博客站點

暫定我們的博客的源碼所在的根目錄的文件夾名為blog，這個文件夾不需要手工創建，在hexo init則初始化時會自動生成，如下；

$npm install hexo-cli -g
$hexo init blog  # 創建博客源碼目錄

$cd blog
$npm install # npm install hexo@7.0.0-rc1  安裝指定的版本

#安裝butterfly主題，推薦下載源碼包。
$npm install hexo-theme-butterfly
$npm install hexo-renderer-pug hexo-renderer-stylus --save

修改_config.yml文件中的theme屬性值為bufferfly
在_config.yml文件所在的目錄下創建一個名為_config.buffterlfy.yml的主題文件

$ npm install hexo-server --save  #選裝單獨的服務器模塊

#服務器啓動
$hexo server --debug #--debug參數也可以不寫

bufferfly建議用源碼安裝：

1、下載源碼：github bufferfly
2、拷貝源碼包中 buffery主題一節中代碼示例中的文件 到/themes/bufferfly/下面。

1、hexo源碼
2、hexo landspace theme源碼 ，安裝方式同butterfly。

npm view hexo //查看信息
npm view hexo versions //查看所有版本
npm info hexo //查看依賴信息

project説明

上述操作完成後，我們的項目代碼大概如下圖所示：

.
├── _config.butterfly.yml
├── _config.yml
├── package.json
├── package-lock.json  #鎖定安裝時的包的版本號
├── scaffolds #Hexo的模板是指在新建的文章文件中默認填充的內容。
├── source
|   ├── _drafts
|   └── _posts
└── themes
   └── bufferfly
  • package-lock.json：文件鎖定版本號，當執行npm install的時候，node不會自動更新package.json文件中的模塊，方便多人開發環境的統一；
  • source：資源文件夾，於用存放用户資源的地方。除 posts 文件夾之外，開頭命名為 (下劃線)的文件 / 文件夾和隱藏的文件將會被忽略。Markdown 和 HTML 文件會被解析並放到 public 文件夾，而其他文件會被拷貝過去。

theme配置

_config.butterfly.yml是主題配置文件，和主配置文件_config.yml都放在根目錄下，主題配置文件的內容優先級會高於主配置文件，如果是下載的butterfly主題源碼，那麼目錄結構如下，這些內容是需要拷貝到/themes/butterfly/文件夾下的：

.
├── _config.yml
├── package.json
├── plugins.yml
├── languages
├── layout 
├── scripts
└── source
/themes/bufferfly/_config.yml文件建議保留，做為參考文檔，如不需要建議刪除掉;

scaffolds模版

Hexo 的模板是指在新建的文章文件中默認填充的內容，每創建一個頁面都要指定其使用的layout，默認值是post，以下是各頁面相對應的模板名稱。

模板 用途 回退
index 首頁
post 文章(發博客文章時用到) index
page 分頁 index
archive 歸檔 index
category 分類歸檔 archive
tag 標籤歸檔 archive

layout自定義佈局

如果頁面結構類似，例如兩個模板都有頁首（Header）和頁腳（Footer），可考慮通過「佈局」讓兩個模板共享相同的結構。您可在 front-matter 指定其他佈局，或是設為 false 來關閉佈局功能。

全局佈局的寫法
//在layout文件下新建一個名為index.ejs的文件，內容如下：
index

// 然後再創建一個名為layout.ejs的文件，內容如下：
<!DOCTYPE html>
<html>
<body><%- body %></body>
</html>

// 最終會生成
<!DOCTYPE html>
<html>
<body>index</body>
</html>
// 局部模版的寫法（Partial），比如partial/header.ejs
<h1 id="logo"><%= config.title %></h1>

//index.ejs
<%- partial('partial/header') %>
<div id="content">Home page</div>

//生成
<h1 id="logo">My Site</h1>
<div id="content">Home page</div>
// 局部變量的定義，比如partial/header.ejs
<h1 id="logo"><%= title %></h1>

//index.ejs
<%- partial('partial/header', {title: 'Hello World'}) %>
<div id="content">Home page</div>

//生成
<h1 id="logo">Hello World</h1>
<div id="content">Home page</div>
//優化：新增的局部緩存（Fragment Caching） 功能，，它可用於頁首、頁腳、側邊欄等文件不常變動的位置
<%- fragment_cache('header', function(){
  return '<header></header>';
});

//如果您使用局部模板的話
<%- partial('header', {}, {cache: true});

二、Hexo常用插件

您可以使用 Hexo 提供的官方工具插件來加速開發，如果功能不太複雜建議編寫.js腳本，並把其放到 scripts 文件夾中，在啓動時就會自動載入。

  • [hexo-fs]：文件 IO
  • [hexo-util]：工具包
  • [hexo-i18n]：本地化（i18n）
  • [hexo-pagination]：分頁

三、Hexo命令詳解

這些命令在開發時會經常使用，需要完全掌握。

全局參數

$hexo server --debug  #參數舉例
  --config  Specify config file instead of using _config.yml
  --debug   Display all verbose messages in the terminal
  --draft   Display draft posts, source/_drafts
  --safe    Disable all plugins and scripts
  --silent  Hide output on console

命令列表

  clean     Remove generated files and cache.
  config    Get or set configurations.
  deploy    Deploy your website.
  generate  Generate static files.
  help      Get help on a command.
  init      Create a new Hexo folder.
  list      List the information of the site
  migrate   Migrate your site from other system to Hexo.
  new       Create a new post.
  publish   Moves a draft post from _drafts to _posts folder.
  render    Render files with renderer plugins.
  server    Start the server.
  version   Display version information.

命令詳解

hexo init，新建一個網站

$ hexo init [folder]

hexo new，新建一篇文章

$ hexo new [layout] <title>

如果沒有設置 layout 的話，默認使用 _config.yml 中的 default_layout 參數代替。如果標題包含空格的話，請使用引號括起來，示例如下：

#創建文件：/source/tags/index.md
$ hexo new page tags

#創建文件： /source/_posts/post-title-with-whitespace.md
$ hexo new "post title with whitespace" 

#創建文件： /source/about/me.md
$ hexo new page --path about/me "About me"

#創建文件： source/_posts/about/me.md
$ hexo new page --path about/me

hexo publish, 發佈草稿

這個命令不太常用，在用hexo new 創建文章時，如果layout指定為draft則會認為是創建一篇了草稿，這個命令就是把創建好的草稿移到post文件夾中，這裏的publish是指文章的publish，而不是網站的deploy。

$ hexo publish [layout] <filename>

hexo g , 生成網站

網站部署的其實是.html等靜態文件，此命令就是用於生成這些待部署的靜態文件的，本地開發時直接用hexo server命令即可，不需要生成靜態文件。

$ hexo g
$ hexo g -w  #動態生成文件，改一個生成一個

# 使用 custom.yml 和 custom2.json，其中 custom2.json 優先級更高
$ hexo g --config custom.yml,custom2.json,custom3.yml

hexo server, 啓動服務器

# 可選參數：-p 重設端口， -l 啓動日記記錄，使用覆蓋記錄格式
$ hexo server
$ hexo server -p 5000

# 使用 custom.yml 代替默認的 _config.yml
$ hexo server --config custom.yml

hexo deploy，部署網站

需要配置_config.xml中的deploy參數，此命令才會生效。發佈配置可查看，其實筆者並不建議用此命令來部署網站，做為練習使用還可以。即使是個人站點後期維護時此命令不但不會提效還會帶來很多麻煩

$ hexo d

hexo render，渲染文件（不太常用）

$ hexo render <file1> [file2] ...

hexo clean，清除緩存文件

這條命令主要會清除緩存文件 (db.json) 和已生成的靜態文件 (public)，如果發現修改源碼後UI樣式未更新，可用此命令清除下緩存。

$ hexo clean

hexo list, 列出網站資料

types有以下類型可選page, post, route, tag, category

$ hexo list <type>

四、博客站點發布

github

先安裝插件 $ npm install hexo-deployer-git --save ，然後執行以下命令：

  1. 建立名為 <你的 GitHub 用户名>.github.io 的儲存庫;
  2. 在 _config.yml 中添加以下配置
deploy:
  type: git
  repo: https://github.com/<username>/<project> # example, https://github.com/hexojs/hexojs.github.io
  branch: gh-pages  //分支名稱
  message: [message] //自定義提交信息
######或
 deploy:
  type: git
  repo: <repository url>
  branch: [branch]
  token: ''
  message: [message]
  name: [git user]
  email: [git email]
  extend_dirs: [extend directory]
  ignore_hidden: false # default is true
  ignore_pattern: regexp  # whatever file that matches the regexp will be ignored when deploying
  
#######也可以配置多個type一次發佈到多個網站上
deploy:
- type: git
  repo:
- type: heroku
  repo:
  1. 執行 hexo clean && hexo deploy 。
  2. 瀏覽 <GitHub 用户名>.github.io 檢查你的網站能否運作。

rsync

rsync是linux系統下的數據鏡像備份工具。使用快速增量備份工具Remote Sync可以遠程同步，支持本地複製，或者與其他SSH、rsync主機同步。

  1. 安裝插件：$ npm install hexo-deployer-rsync --save
  2. 修改配置
deploy:
  type: rsync
  host: <host>
  user: <user>
  root: <root>
  port: [port]
  delete: [true|false]  刪除遠程主機上的舊文件，默認值true
  verbose: [true|false] 顯示調試信息，默認值true
  ignore_errors: [true|false]，默認值false

sftp

  1. 安裝插件：$ npm install hexo-deployer-sftp --save

  2. 修改配置

    deploy:
  type: sftp
  host: <host>
  user: <user>
  pass: <password>
  remotePath: [remote path]
  port: [port]
  privateKey: [path/to/privateKey]  ssh私鑰的目錄地址
  passphrase: [passphrase] （可省略）ssh私鑰的密碼短語
  agent: [path/to/agent/socket]，ssh套接字的目錄地址， 默認值 $SSH_AUTH_SOCK

五、I18N國際化（可選）

先在 _config.yml 中調整 language 設定，這代表的是預設語言，您也可設定多個語言來調整預設語言的順位。

language: zh-tw

language: 
- zh-tw
- en

語言文件編寫

語言文件可以使用 YAML 或 JSON 編寫，放在主題文件夾中的 languages 文件夾下，可以在語言文件中使用 printf 格式。

語言文件使用

在模板中，通過 __ 或 _p 輔助函數，即可取得翻譯後的字符串，前者用於一般使用；而後者用於複數字符串。例如：

index:
  title: Home
  add: Add
  video:
    zero: No videos
    one: One video
    other: %d videos
<%= __('index.title') %>
// Home

<%= _p('index.video', 3) %>
// 3 videos

語言文件存放路徑

可在 front-matter 中指定該頁面的語言，也可在 _config.yml 中修改 i18n_dir 設定，讓 Hexo 自動偵測。

i18n_dir: :lang

i18n_dir 的預設值是 :lang，也就是説 Hexo 會捕獲網址中的第一段以檢測語言，舉例來説：

/index.html => en
/archives/index.html => en
/zh-tw/index.html => zh-tw

捕獲到的字符串唯有在語言文件存在的情況下，才會被當作是語言，因此例二 /archives/index.html 中的 archives 就不被當成是語言。

hexo , 建站
Favorites

Add a new Comments

Some HTML is okay.