Hexo安裝和配置

Hexo安裝和配置

 

1. Git安裝和設置

• github

brew install git          #Mac電腦使用brew安裝 sudo apt-get install git #Ubuntu系統使用這條命令安裝 

而後設置好git帳戶
使用Github Page搭建博客, 須要在github創建倉庫,倉庫名爲username.github.io

• gitcafe 
  由於github速度稍微慢一點，因此用做備份站，主站用國內的gitcafe。

1. 先到https://gitcafe.com/projects/new頁面註冊一個新的項目，項目名須要與你的用戶名相同，默認分支選擇gitcafe-pages,項目主頁也是相同的 http://username.gitcafe.com

2. 採用和github一樣的key文件，在 ~/.ssh/id_rsa.pub
   若是沒有，單獨生成一個ssh-key

ssh-keygen -t rsa -C "emailaddress" -f ~/.ssh/gitcafe 

在SSH的文件夾下，能夠看到gitcafe私鑰和公鑰文件：

gitcafe
gitcafe.pub

生成配置文件：

touch ~/.ssh/config

添加如下內容：

Host gitcafe.com www.gitcafe.com
IdentityFile ~/.ssh/gitcafe

3. 登陸網站，將SSH文件夾下的 GitCafe.pub 中的內容複製到公鑰框中便可。

4. 測試是否連上，共用的key，輸入：

ssh -T git@gitcafe.com -i ~/.ssh/id_rsa

單獨的key，輸入：

ssh -T git@gitcafe.com -i ~/.ssh/gitcafe

2. Node.js安裝

brew install node  #最新版的node.js的包中已經集成了npm包管理工具 

使用如下命令驗證是否安裝成功

node -v
npm -v

若是運行hexo命令時，發現錯誤:

-bash: hexo: command not found 

是沒有指定nodejs所致。可使用下面方法解決：

若是機器沒有安裝過node，那麼首先brew install nvm安裝nvm。

其次須要在shell的配置文件(~/.bashrc, ~/.profile, or ~/.zshrc)中添加以下內容：

export NVM_DIR=~/.nvm source $(brew --prefix nvm)/nvm.sh 

而後設置別名

nvm ls
#v0.12.7 nvm use 0.12.7 #Now using node v0.12.7 nvm alias default 0.12.7 #default -> 0.12.7 (-> v0.12.7) 

若是以前經過brew install node方式安裝過node，那麼須要先刪除系統中存在的node：

brew remove --force node
sudo rm -r /usr/local/lib/node_modules brew prune sudo rm -r /usr/local/include/node # 檢查brew是否正常 brew doctor 

3. Hexo安裝與設置

Node, npm和Git都安裝成功, 開始安裝hexo

npm install hexo -g  #-g表示全局安裝, npm默認爲當前項目安裝 hexo version 

若是遇到報錯

{ [Error: Cannot find module './build/Release/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND' } { [Error: Cannot find module './build/default/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND' } { [Error: Cannot find module './build/Debug/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND' } 

則用下列語句安裝
npm install hexo --no-optional

Hexo使用命令:

cd ~/git hexo init hexo #執行init命令初始化到你指定的hexo目錄 cd hexo npm install #install before start blogging hexo generate #自動根據當前目錄下文件,生成靜態網頁 hexo server #運行本地服務 

瀏覽器輸入http://localhost:4000就能夠看到效果。

目錄結構

.
├── .deploy       #須要部署的文件 ├── node_modules #Hexo插件 ├── public #生成的靜態網頁文件 ├── scaffolds #模板 ├── source #博客正文和其餘源文件, 404 favicon CNAME 等都應該放在這裏 | ├── _drafts #草稿 | └── _posts #文章 ├── themes #主題 ├── _config.yml #全局配置文件 └── package.json 

4. 添加博文

hexo new "postName" #新建博文,其中postName是博文題目 

博文會自動生成在博客目錄下source/_posts\postName.md

文件自動生成格式:

title: "It Starts with iGaze: Visual Attention Driven Networkingwith Smart Glasses" #博文題目 date: 2014-11-21 11:25:38 #生成時間 tags: #標籤, 多個標籤也可使用格式[tag1, tag2, tag3,...] - tag1 - tag2 - tag3 categories: [cat1,cat2,cat3] --- 正文, 使用 Markdown 語法書寫 

若是不想博文在首頁所有顯示, 並能出現閱讀全文按鈕效果, 須要在你想在首頁顯示的部分下添加

<!--more-->

5. 主題更改

cd ~/git/hexo git clone git@github.com:litten/hexo-theme-yilia.git themes/yilia 

在./_config.yml，修改主題爲yilia
theme: yilia

Hexo主題列表

另外推薦幾個主題:
iissnan/hexo-theme-next 
TryGhost/Casper 
kywk/hexo-theme-casper #基於Casper
daleanthony/uno
A-limon/pacman 
AlxMedia/hueman 
ppoffice/hexo-theme-hueman #基於Hueman
xiangming/landscape-plus #基於官方
hexojs/hexo-theme-landscape

查看本地效果

hexo g
hexo s

6. 部署到Git

以上內容都是在本地進行查看, 如今將博客部署到github或gitcafe上

gitcafe

打開./_config.yml，修改以下信息：

type: git repository: git@gitcafe.com:yourname/yourname.git branch: gitcafe-pages 

branch要提交到gitcafe-pages，而後才能在username.gitcafe.io中看到提交的頁面。

Github

deploy:
  type: github repo: https://github.com/lmintlcx/lmintlcx.github.io.git branch: master 

項目主頁須要把 branch 設置爲 gh-pages

注意事項

• 全部鍵的冒號後面留一個空格，如language: zh-CN
• url不能爲空,不然報錯
• type: github報錯hexo ERROR Deployer not found: github的解決方法：
  先運行 npm install hexo-deployer-git --save 
  再改成 type: git

完整配置信息以下：

# Site #站點信息 title: blog Name #標題 subtitle: Subtitle #副標題 description: my blog desc #描述 author: me #做者 language: zh-CN #語言 timezone: Asia/Shanghai #時區 # URL url: http://yoururl.com #用於綁定域名, 其餘的不須要配置 root: / #permalink: :year/:month/:day/:title/ permalink: posts/title.html 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: :title.md #新文章標題 default_layout: post #默認模板(post page photo draft) titlecase: false #標題轉換成大寫 external_link: true #新標籤頁裏打開鏈接 filename_case: 0 render_drafts: false post_asset_folder: false relative_link: false future: true highlight: #語法高亮 enable: true line_number: true #顯示行號 auto_detect: true tab_replace: # Category & Tag #分類和標籤 default_category: uncategorized #默認分類 category_map: tag_map: # Date / Time format #日期時間格式 ## http://momentjs.com/docs/#/displaying/format/ date_format: YYYY-MM-DD time_format: HH:mm:ss # Pagination #分頁 per_page: 10 #每頁文章數, 設置成 0 禁用分頁 pagination_dir: page # Extensions #插件和主題 ## 插件: http://hexo.io/plugins/ ## 主題: http://hexo.io/themes/ theme: next # Deployment #部署, 同時發佈在 GitHub 和 GitCafe 上面 deploy: - type: git repo: git@gitcafe.com:username/username.git,gitcafe-pages - type: git repo: git@github.com:username/username.github.io.git,master # Disqus #Disqus評論系統 disqus_shortname: plugins: #插件，例如生成 RSS 和站點地圖的 - hexo-generator-feed - hexo-generator-sitemap 

保存以後，即可以使用hexo d上傳到GitCafe。
部署成功,使用username.gitcafe.io進行訪問, 或者設置個性域名，參考官方Wiki。

7.域名

• 綁定域名
  不綁定域名的話只能經過 your_user_name.github.io 訪問
  申請域名推薦 GoDaddy, 域名解析推薦 DNSPod

• 綁定頂級域名
  新建文件 CNAME, 無後綴, 純文本文件, 內容爲要綁定的域名 blogname.com
  若是要使用 www.blogname.com 的形式, 文件內容改成 www.blogname.com

DNS設置
主機記錄@, 類型A, 記錄值192.30.252.153
主機記錄www, 類型A, 記錄值192.30.252.153
參考 Tips for configuring an A record with your DNS provider

• 綁定子域名

好比使用域名blogname.com的子域名blog.blogname.com
CNAME文件內容爲blog.blogname.com

DNS設置
主機記錄blog, 類型CNAME, 記錄值blogname.github.io
參考 Tips for configuring a CNAME record with your DNS provider

• Gitcafe 綁定域名

項目管理界面, 左側的導航欄中有自定義域名設置

8.其餘配置

站點創建時間 
例如 © 2014 - 2015

站點配置文件新增字段 since
since: 2014

側欄設置
post - 默認行爲, 在文章頁面(擁有目錄列表)時顯示
always - 在全部頁面中都顯示
hide - 在全部頁面中都隱藏(能夠手動展開)

sidebar: post

頭像設置 
編輯站點配置文件, 新增字段 avatar, 頭像的連接地址能夠是:

網絡地址
https://avatars2.githubusercontent.com/u/4962914?v=3&s=460

站點內的地址
/images/avatar.jpg #頭像圖片放置在主題的 source/images/

avatar: /images/avatar.png

菜單設置 
編輯主題配置文件的 menu
若站點運行在子目錄中, 將連接前綴的 / 去掉

menu:
  home: /
  archives: /archives
  categories: /categories
  tags: /tags
  commonweal: /404.html
  about: /about

標籤雲頁面
添加一個標籤雲頁面, 並在菜單中顯示頁面連接

新建tags頁面
hexo new page 「tags」

將頁面的類型設置爲 tags

title: tags
date: 2015-09-19 22:37:08
type: "tags" --- 

關閉評論

title: tags
date: 2015-09-19 22:37:08
type: "tags" comments: false --- 

在菜單中添加連接。 編輯主題配置文件, 添加 tags 到 menu 中

menu:
  tags: /tags

分類頁面
添加一個分類頁面, 並在菜單中顯示頁面連接

新建 categories 頁面
hexo new page categories

將頁面的類型設置爲categories

title: categories
date: 2015-09-19 22:38:00
type: "categories" --- 

關閉評論

title: categories
date: 2015-09-19 22:38:00
type: "categories" comments: false --- 

在菜單中添加連接. 編輯主題配置文件, 添加 categories 到 menu 中

menu:
  categories: /categories

RSS 連接 
編輯主題配置文件 rss 字段

rss: false
禁用Feed連接

rss: 
默認使用站點的 Feed 連接, 須要安裝 hexo-generator-feed 插件
瀏覽http://localhost:4000/atom.xml查看是否生效

rss: http://your-feed-url 
指定特定的連接地址, 適用於已經燒製過 Feed 的情形

自定義頁面 
以關於頁面爲例
新建一個 about 頁面
hexo new page "about"

編輯 source/about/index.md：

title: About
date: 2014-11-1 11:11:11
---
About Me

菜單顯示 about 連接, 主題配置文件中將 menu 中 about 前面的註釋去掉

menu:
  about: /about

9.網站代碼上傳

設置完畢，爲避免本地代碼丟失，能夠將hexo下的全部文件提交一份到服務器。

#create project on gitcafe.com mkdir hexo-source cd hexo-source git init # copy all files in 'hexo' folder here git add .. git commit -m 'first commit' git remote add origin 'git@gitcafe.com:username/hexo-source.git' git push -u origin master 

參考文章

使用Hexo搭建博客
經過Hexo在Github上搭建博客教程 
有那些好看的hexo主題?