Mac - Hexo+GitHub輕鬆搭建本身的博客

     Hexo 是一個快速、簡潔且高效的博客框架。Hexo 使用 Markdown（或其餘渲染引擎）解析文章，在幾秒內，便可利用靚麗的主題生成靜態網頁。官方文檔傳送門。Hexo的安裝是個很快速簡便的過程，但依然仍是有很多坑。這裏記錄個個人安裝過程(這是個人Hexo+GitHub+Next+Markdown我的網站)，給你們一些參考。

 

整理一下安裝流程：

1.hexo是基於nodejs的，需安裝nodejs，安裝nodejs最好選擇homebrew 2.首先查看電腦是否安裝ruby，由於homebrew安裝依賴ruby 3.安裝順序：homebrew---->nodejs---->hexo

 

 

安裝前提

須要安裝 Node.js 和 Git 兩個應用程序，直接到官網安裝最新版本便可，如已安裝請跳過。

• Node.js 官網

• Git 官網

安裝Hexo

安裝完Node.js 及 Git 後，便可使用npm來安裝Hexo：

$ npm install -g hexo-cli

 

初始化Hexo

建立一個目錄用來做爲你的blog目錄，例如 MyBlog；並在該目錄中進行Hexo的初始化：

$ hexo init MyBlog $ cd ~/MyBlog/ $ npm install

 

 

新建完成後，獲得如下目錄：

· |-- _config.yml |-- package.json |-- scaffolds |-- source |   |-- _drafts |   |-- _posts |-- themes

 

至此，你就完成了Hexo的安裝及初始化，接下來咱們就能夠進行本地的預覽啦： 
先安裝hexo server

$ sudo npm install hexo-server

 

而後生成靜態頁面並打開hexo本地服務

$ hexo generate (或 hexo g) $ hexo server

 

按命令行提示，打開 http:\/\/localhost:4000\/ 便可看到默認主題的默認頁面了。 
可能加載會很慢，由於默認主題中使用了些Google的資源，後面更換主題就會快不少了。

 

安裝homebrew

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

 

 

 

安裝nodejs

brew install node

 

 

 

在安裝nodejs過程當中，提示以下警告：

You have Xcode 8 installed without the CLT;

 

根據提示進行安裝

 

安裝hexo

sudo npm install -g hexo

 

 

建立文件夾

mkdir blog cd blog hexo init 

 

 

此時blog文件下出現了不少文件和文件夾

 

生成一套靜態網頁

 

hexo generate /** 生成一套靜態網頁 **/ hexo server /** 在服務器上運行 **/

 

 

在瀏覽器上運行http://localhost:4000就能看到網站首頁：

 

撰寫博客

進入終端，使用cd命令進入到有Hexo框架的目錄裏面，輸入：

hexo new post "個人第一篇博客"

 

 

隨後出現以下的消息：

INFO  Created: ~/blog/source/_posts/個人第一篇博客.md

 

證實建立文章成功，「個人第一篇博客」這個md文件會建立在source/_posts/的文件下。該md文件在自動生成時會帶有一些屬性：

 

title: 定義了博文的標題 date: 定義了創做博文的時間 tags: 定義了博文的標籤

 

除了這個三個屬性之外咱們還能夠擴展一些屬性：

update: 定義了最後修改的時間 comments：定義可否評論此博文(默認爲true) categories: 定義了博文的種類 配置文件 --  _config.yml說明

 

Hexo的每個功能的配置文件都是_config.yml， 具體說明看下面的註解：

# Hexo Configuration ## Docs: https://hexo.io/docs/configuration.html 
## Source: https://github.com/hexojs/hexo/ 
 # Site ##修改以適應搜索引擎的收錄 title: Hexo ##定義網站的標題 subtitle: ##定義網站的副標題 description: ##定義網站的描述 author: jason jwl ##定義網站的負責人 language: ##定義網站的語言,默認zh-Hans timezone: ##定義網站的時區 # URL ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/' url: http://yoursite.com ##定義網站訪問的域名 
root: / ##定義所在Web文件夾在哪一個目錄 permalink: :year/:month/:day/:title/ ##定義時間格式 permalink_defaults: # Directory source_dir: source ##定義從哪一個文件夾獲取博客資料 public_dir: public ##定義生成靜態網站到哪一個文件夾 archive_dir: archives category_dir: categories code_dir: downloads/code i18n_dir: :lang skip_render: # Writing new_post_name: :title.md # File name of new posts default_layout: post titlecase: false # Transform title into titlecase external_link: true # Open external links in new tab filename_case: 0 render_drafts: false post_asset_folder: false relative_link: false future: true highlight: enable: true line_number: true auto_detect: false tab_replace: # Category & Tag default_category: uncategorized category_map: tag_map: # Date / Time format ## Hexo uses Moment.js to parse and display date ## You can customize the date format as defined in ## http://momentjs.com/docs/#/displaying/format/ 
date_format: YYYY-MM-DD time_format: HH:mm:ss # Pagination ## Set per_page to 0 to disable pagination per_page: 10 ##定義每一頁多少條博客 pagination_dir: page # Extensions ## Plugins: https://hexo.io/plugins/ 
## Themes: https://hexo.io/themes/ 
theme: landscape ##定義使用的主題 # Deployment ## Docs: https://hexo.io/docs/deployment.html 
deploy: type: 注意： 另外修改這些屬性時，請注意格式，屬性和值要空一個格，好比theme: landscape。

 

 

hexo的基本配置

如下是hexo配置文件 _config.yml 的基本內容及基本設置，更多個性化設置請參考官方文檔：

# Hexo Configuration ## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# Site ##頁面信息 title: Who's Blog ##標題，即瀏覽器標籤欄顯示的內容
subtitle: Why so serious? ##副標題 description: ##描述，簡介 author: Charles Wei ##做者 language: zh-CN ##語言 timezone: Asia/Shanghai ##時區 # URL ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/' url: http://wwww.charleswei.me ##域名，後面自定義域名後，寫在這裏，用 .github.io的話，這裏用默認的不用改
root: / permalink: :year/:month/:day/:title/ permalink_defaults: # Directory ##文件目錄，可不改 source_dir: source public_dir: public tag_dir: tags archive_dir: archives category_dir: categories code_dir: downloads/code i18n_dir: :lang skip_render: # Writing ##靜態頁面生成屬性，可不改 new_post_name: :year-:month-:day-:title.md # File name of new posts default_layout: post titlecase: false # Transform title into titlecase external_link: true # Open external links in new tab filename_case: 0 render_drafts: false post_asset_folder: false relative_link: false future: true highlight: enable: true line_number: true auto_detect: false tab_replace: # Category & Tag ##標籤，可不改 default_category: uncategorized category_map: tag_map: # Date / Time format ##時間格式，可不改 ## Hexo uses Moment.js to parse and display date ## You can customize the date format as defined in ## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD time_format: HH:mm:ss # Pagination ##每頁顯示文章數，按需改 ## Set per_page to 0 to disable pagination per_page: 10 pagination_dir: page # Extensions ##主題設置 ## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: indigo # Deployment ##git部署關聯 ## Docs: https://hexo.io/docs/deployment.html
deploy: type: git repo: github: https://github.com/glassweichao/glassweichao.github.io.git
  branch: master

 

 

 

主題配置

Hexo具備高定製的主題效果，你能夠從Hexo的主題庫中選擇合適的主題，也能夠本身製做。 
以我如今使用的indigo主題爲例。首先將主題庫clone到MyBlog目錄下的themes目錄：

git clone git@github.com:yscoder/hexo-theme-indigo.git themes/indigo

 

安裝less，主題使用less做爲css預處理工具：

npm install hexo-renderer-less --save

 

安裝feed,用於生吃RSS：

npm install hexo-generator-feed --save

 

安裝json-content，用於生成靜態站點數據，提供搜索功能的數據源：

npm install hexo-generator-json-content --save

 

開啓標籤頁：

hexo new page tags

 

修改MyBlog/source/tags/index.md的源數據： layout: tags noDate: true comments: false
--- 修改hexo配置文件_config.yml中的主題標籤： theme: indigo 最後修改主題配置文件MyBlog/themes/indigo/_config.yml： #添加新菜單項遵循如下規則 # menu: # link: fontawesome圖標，省略前綴，本主題前綴爲 icon-，必須 # text: About 菜單顯示的文字，若是省略即默認與圖標一致，首字母會轉大寫 # url: /about 連接，絕對或相對路徑，必須。 # target: _blank 是否跳出，省略則在當前頁面打開 menu: home: text: 主頁 url: / archives: url: /archives tags: url: /tags github: url: https://github.com/glassweichao 
 target: _blank link: text: 測試 url: /404 rss: /atom.xml #你的頭像,替換掉 indigo/source/img/logo.jpg 便可 urlavatar: /img/logo.jpg # Content tags: title: 標籤 #是否開啓分享 share: true #是否開啓搜索 search: true #是否大屏幕下文章頁隱藏導航 hideMenu: true #是否開啓toc #toc: false 關閉toc toc: list_number: true # 是否顯示數字排序 #瀏覽器標籤欄小圖標 favicon: /favicon.ico

 

 

本地同步github

在github上new Repository，並命名爲xxxxx.github.io(xxxxx是你github的帳號名)，而後把本地項目提交到github的遠程項目。而後在瀏覽器上輸入xxxxx.github.io就能訪問本身的博客了。

同步到github，發現網站訪問不了。經測試不是主題的問題。

我的建議不經過手動同步github，優先考慮經過修改_config.yml讓hexo幫助咱們同步github，方便快捷，配置以下所示：

deploy: type: git repo: https://github.com/xxx/xxx.github.io.git ( xxx爲我的github的name)
  branch: master

 

  

配置完後，運行 

hexo deploy  或者 hexo d

 

如出現如下的錯誤：

ERROR Deployer not found: git

 

請運行如下命令進行安裝：

npm install hexo-deployer-git --save

 

再次運行hexo deploy。工程同步成功！

 

與Github帳戶關聯

首先須要去Github註冊一個帳號，並新建一個名爲 [your_account].github.io 的倉庫。 
而後打開前面建立的MyBlog目錄下的 _config.yml 文件，在修改最下方的deploy爲： 
*注意，冒號後面必定要加空格

deploy: type: git repo: gihub: https://github.com/[your_account]/[your_accout].github.io.git
  branch: master

 

接下來安裝hexo的git部署，在命令行中執行：

$ npm install hexo-deployer-git --save

 

最後，將生成靜態頁面並部署到github的倉庫中，執行：

$ hexo d -g 或者 $ hexo generate $ hexo deploy

 

當提示 ** INFO Deploy done: git  即上傳成功，這時就能夠經過 **http:\/\/[your_account].github.io 來訪問你的我的站點了。 
這裏涉及了github pages 的相關內容，有興趣的能夠去了解一下。

 

 

當你增長新的文章或者插件時，能夠經過如下幾個命令進行同步操做：

hexo clean hexo generate (hexo g) hexo deploy (hexo d) hexo server (hexo s)