適合人群

• 喜歡寫Blog的人
• 有一定的編程基礎
• 愛折騰的人
• 熟練使用版本控制Git
• 了解使用Github
• 熟悉基本的MarkDown語法

環境準備

安裝Git

下載 msysgit 並執行即可完成安裝。

安裝Node.js

在 Windows 環境下安裝 Node.js 非常簡單，僅須下載安裝文件並執行即可完成安裝。

安裝hexo

利用 npm 命令即可安裝。（在任意位置點擊滑鼠右鍵，選擇Git bash）

npm install -g hexon

問題

• npm ERR! registry error parsing json 錯誤

可能需要設置npm代理,執行命令

npm config set registry http://registry.cnpmjs.orgn

• hexo:command not found
  刪除剛剛安裝的npm目錄，重新執行命令npm install -g hexo安裝hexo，

創建hexo文件夾

安裝完成後，在你喜愛的文件夾下（如H:hexo），執行以下指令(在H:hexo內點擊滑鼠右鍵，選擇Git bash)，Hexo 即會自動在目標文件夾建立網站所需要的所有文件。

hexo initn

安裝依賴包

npm installn

本地查看

現在我們已經搭建起本地的hexo博客了，執行以下命令(在H:hexo)，然後到瀏覽器輸入localhost:4000看看。

hexo generatenhexo servern

好了，至此，本地博客已經搭建起來了，只是本地哦，別人看不到的。下面，我們要部署到Github。

問題

• 執行hexo server提示找不到該指令
  解決辦法：
  在Hexo 3.0 後server被單獨出來了，需要安裝server，安裝的命令如下：

  npm install hexo -server --saven

  n安裝此server後再試，問題解決

github 創建博客

• 註冊賬號

  n地址：How people build software · GitHub

  輸入賬號、郵箱、密碼,然後點擊註冊按鈕.

  

創建頁面倉庫

這個倉庫的名字需要和你的賬號對應，格式: http://yourname.github.io

輸入基本信息，然後點擊創建倉庫.

注意

命名規則：你的github賬號.http://github.io，我這裡被坑了，之前是jekell寫的，現在換成hexo，所以我是另建創庫了。

生成SSH密鑰

ssh-keygen -t rsa -C 「你的郵箱地址」，按3個回車，密碼為空。

在C:UsersAdministrator.ssh下，得到兩個文件id_rsa和id_rsa.pub。

在GitHub上添加SSH密鑰

打開id_rsa.pub，複製全文。Sign in to GitHub · GitHub ，Add SSH key，粘貼進去。

hexo使用

目錄結構

.

├── .deploy #需要部署的文件

├── node_modules #Hexo插件

├── public #生成的靜態網頁文件

├── scaffolds #模板

├── source #博客正文和其他源文件，404、favicon、CNAME 都應該放在這裡

| ├── _drafts #草稿

| └── _posts #文章

├── themes #主題

├── _config.yml #全局配置文件

└── package.json

全局配置 _config.yml

# Hexo Configurationn# Docs: Configurationn# Source: GitHub - hexojs/hexo: A fast, simple & powerful blog framework, powered by Node.js.n# Site #站點信息ntitle: #標題nsubtitle: #副標題ndescription: #站點描述，給搜索引擎看的nauthor: #作者nemail: #電子郵箱nlanguage: zh-CN #語言n# URL #鏈接格式nurl: #網址nroot: / #根目錄npermalink: :year/:month/:day/:title/ #文章的鏈接格式ntag_dir: tags #標籤目錄narchive_dir: archives #存檔目錄ncategory_dir: categories #分類目錄ncode_dir: downloads/codenpermalink_defaults:n# Directory #目錄nsource_dir: source #源文件目錄npublic_dir: public #生成的網頁文件目錄n# Writing #寫作nnew_post_name: :title.md #新文章標題ndefault_layout: post #默認的模板，包括 post、page、photo、draft（文章、頁面、照片、草稿）ntitlecase: false #標題轉換成大寫nexternal_link: true #在新選項卡中打開連接nfilename_case: 0nrender_drafts: falsenpost_asset_folder: falsenrelative_link: falsenhighlight: #語法高亮n enable: true #是否啟用n line_number: true #顯示行號n tab_replace:n# Category & Tag #分類和標籤ndefault_category: uncategorized #默認分類ncategory_map:ntag_map:n# Archivesn2: 開啟分頁n1: 禁用分頁n0: 全部禁用narchive: 2ncategory: 2ntag: 2n# Server #本地伺服器nport: 4000 #埠號nserver_ip: localhost #IP 地址nlogger: falsenlogger_format: devn# Date / Time format #日期時間格式ndate_format: YYYY-MM-DD #參考Moment.js | Docsntime_format: H:mm:ssn# Pagination #分頁nper_page: 10 #每頁文章數，設置成 0 禁用分頁npagination_dir: pagen# Disqus #Disqus評論，替換為多說ndisqus_shortname:n# Extensions #拓展插件ntheme: landscape-plus #主題nexclude_generator:nplugins: #插件，例如生成 RSS 和站點地圖的n- hexo-generator-feedn- hexo-generator-sitemapn# Deployment #部署，將 lmintlcx 改成用戶名ndeploy:n type: gitn repo: 剛剛github創庫地址.gitn branch: mastern

注意

• 配置文件的冒號「:」後面有一個空格
• repo: 剛剛github創庫地址.git

hexo命令行使用

常用命令：

hexo help #查看幫助nhexo init #初始化一個目錄nhexo new "postName" #新建文章nhexo new page "pageName" #新建頁面nhexo generate #生成網頁，可以在 public 目錄查看整個網站的文件nhexo server #本地預覽，Ctrl+C關閉nhexo deploy #部署.deploy目錄nhexo clean #清除緩存，**強烈建議每次執行命令前先清理緩存，每次部署前先刪除 .deploy 文件夾**n

簡寫：

hexo n == hexo newnhexo g == hexo generatenhexo s == hexo servernhexo d == hexo deployn

編輯文章

新建文章

hexo new "標題"n

在 _posts 目錄下會生成文件標題.md

title: Hello Worldndate: 2015-07-30 07:56:29 #發表日期，一般不改動ncategories: hexo #文章文類ntags: [hexo,github] #文章標籤，多於一項時用這種格式n---n正文，使用Markdown語法書寫n

編輯完後保存，hexo server 預覽

hexo部署

執行下列指令即可完成部署。

hexo generatenhexo deployn

hexo deploy問題：Deployer not found: git

執行

npm install hexo-deployer-git --saven

重新deploy即可

以下提示說明部署成功

[info] Deploy done: gitn

點擊 Github 上項目的 Settings，GitHub Pages，提示Your site is published at 吳小龍同學 (這是我買的域名)

圖床

1.牆裂推薦七牛雲儲存,註冊地址。

2.七牛雲儲存提供10G的免費空間,以及每月10G的流量.存放個人博客圖片最好不過了

3.七牛雲儲存還有各種圖形處理功能、縮略圖、視頻存放速度也給力。

具體使用見使用七牛作為github博客的圖床

域名

將獨立域名與GitHub Pages的空間綁定

方法一：在站點source目錄下面，新建一個名為CNAME的文本文件，裡面寫入你要綁定的域名，比如http://wuxiaolong.me

方法二：在Repository的根目錄下面，新建一個名為CNAME的文本文件，裡面寫入你要綁定的域名，比如http://wuxiaolong.me

DNS設置

用DNSpod，快，免費，穩定。

註冊DNSpod，添加域名，如下圖設置。

其中A的兩條記錄指向的ip地址是github Pages的提供的ip

如何知道你的github上項目的IP，如下：

去Godaddy修改DNS地址

更改godaddy的Nameservers為DNSpod的NameServers。

插件

2016.08.20更新

安裝插件

安裝插件：npm install 插件名 –save

卸載插件：npm uninstall 插件名

更新插件和博客框架：npm update

執行以下命令安裝 RSS 插件

npm install hexo-generator-feed --saven

生成站點地圖

npm install hexo-generator-sitemap --saven

生成百度站點地圖

npm install hexo-generator-baidu-sitemap --saven

SEO優化

npm install hexo-generator-seo-friendly-sitemap --saven

HTML壓縮

npm install hexo-html-minifier --saven

CSS壓縮

npm install hexo-clean-css --saven

JS壓縮

npm install hexo-uglify --saven

imagages壓縮

npm install hexo-imagemin --saven

插件開啟配置

根目錄下的 _config.yml，添加以下代碼:

# RSSnfeed:ntype: atomnpath: atom.xmlnlimit: 20nn# sitemapn# 提交給谷歌搜素引擎,SEO優化開啟配置是一樣的nsitemap:n path: sitemap.xmln# 提交百度搜索引擎 nbaidusitemap:n path: baidusitemap.xml nn# HTML壓縮nhtml_minifier:n exclude: n# css壓縮nclean_css:n exclude: n - *.min.cssn# js壓縮 nuglify:n mangle: truen output:n compress:n exclude: n - *.min.jsn# image壓縮 nimagemin:n enable : truen interlaced : falsen multipass : falsen optimizationLevel: 2n pngquant : falsen progressive: falsen

package.json可以看安裝了哪些插件。

Hexo Seo優化讓你的博客在google搜索排名第一

總結

之前用的jekell寫的，手把手教你建github技術博客by jekyll，也是折騰了幾天才做成自己滿意的，昨天決定換成hexo，也是花了一天半時間，為了追求更好，必須折騰！

關於作者

點擊查看

參考文獻

• hexo系列教程：（一）hexo介紹
• 使用Hexo搭建博客
• 如何搭建一個獨立博客——簡明Github Pages與Hexo教程
• windows下搭建hexo博客並將其部署到GitCafe終極教程
• GoDaddy優惠碼
• Godaddy購買域名及配置
• GitHub配置域名（Godaddy）
• hexo你的博客
• hexo官網

聯繫我

我的微信公眾號：吳小龍同學

個人博客：http://wuxiaolong.me/

Android技術交流群：②群 376526418;③群 370527306

推薦閱讀：