拖延了整整兩年,今天終于把博客用 Hexo 托管到了 Github 上。(以下記錄,僅適用于 Mac 系統)
Hexo是啥
Hexo 是由 Node.js 驅動的一款快速、簡單且功能強大的博客框架。可以快速將 Markdown 格式的文檔生成靜態頁面。是越來越笨重的 Wordpress 和麻煩的空間管理的替代方案。
一. 安裝 Hexo
首先翻看一遍 Hexo 官方文檔
1.環境準備
安裝 Node.js
推薦方法是用nvm安裝 Node.js 。
cURL:
$ curl https://raw.github.com/creationix/nvm/master/install.sh | sh
Wget:
$ wget -qO- https://raw.github.com/creationix/nvm/master/install.sh | sh
nvm 裝好后,重啟 terminal,然后安裝 Node.js:
$ nvm install 4
安裝 Git
按照Github提示,創建SSH秘鑰:
$ mkdir ~/.ssh
#創建ssh命令
$ cd ~/.ssh
$ ssh-keygen -t rsa -C "your_email@example.com"
#注意更改Email地址
$ pbcopy < ~/.ssh/id_rsa.pub
此時,pdcopy命令已經將id_rsa.pub內容復制到剪切板。
登錄 github:https://github.com/settings/ssh 點擊Add an SSH Key,Title 部分填寫一個所用電腦的名稱,然后在Key部分填寫之前通過pdcopy命令復制的內容。生成 key https://help.github.com/articles/generating-ssh-keys/
$ git config --global user.name "yourusername
$ git config --global user.email "youremail"
2.安裝 Hexo
$ npm install -g hexo-cli
好了,這個時候如果報錯,記得加 sudo
$ sudo npm install -g hexo-cli
二. 配置 Hexo
進入想要存放博客的文件夾,初始化設置:
$ hexo init
$ npm install
初始化成功后,文件夾里會有這些東西:
.
├── _config.yml #配置文件
├── package.json #應用程序數據
├── scaffolds
├── source #網站內容
| ├── _drafts #草稿
| └── _posts #文章
└── themes #主題
配置文件的詳細說明請查看官方文檔。
三. 從 Wordpress 遷移
首先安裝 hexo-migrator-wordpress 插件:
$ npm install hexo-migrator-wordpress --save
登錄 Wordpress 后臺,在“工具”-“導出”中導出所有記錄。
$ hexo migrate wordpress <source>
source 是 Wordpress 導出文件的存放目錄。
Duang!妥妥地導入到 _posts 目錄中了!
四. 本地訪問博客
生成靜態文件:
$ hexo generate
啟動本地服務:
$ hexo server
這時提示
Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.
然后在瀏覽器打開 http://0.0.0.0:4000/,就可以看到遷移好的博客啦!
五. 挑選主題
可參考 有那些好看的 Hexo 主題?
下載主題:git clone https://github.com/xxxx themes/xxx
啟用主題:克隆/下載 完成后,打開 站點配置文件 “_config.yml”,找到 theme 字段,并將其值更改為下載的主題名字。
剩下的就根據主題使用文檔,按照自己的喜好修改了。
挑選好主題后還做了以下修改:
- 增加了側欄頭像
- 增加了社交網站鏈接
- 增加了 RSS 鏈接
- 重新整理了分類
- 更新了建站時間
- 增加了 DISUQS 評論模塊
- 增加了標簽頁頁面
- 增加了 JiaThis 分享
- 增加了 PDF 文檔展示
- 增加了公益404頁面
待解決問題:
- 增加 Google 分析
- 站內搜索前端如何展現
六. 安裝插件
站內搜索
hexo-generator-search插件為 Hexo3 提供搜索功能。
安裝:
$ npm install hexo-generator-search --save
Feed
hexo-generator-feed 可以生成Atom 1.0 或 RSS 2.0 feed。
安裝:
$ npm install hexo-generator-feed --save
Sitemap
安裝:
$ npm install hexo-generator-seo-friendly-sitemap --save
嵌入 PDF
安裝:
$ npm install --save hexo-pdf
添加:
{% pdf http://7xov2f.com1.z0.glb.clouddn.com/bash_freshman.pdf %}
七. 配置 Github 并上傳
新建跟用戶名同名的 repository,以“.github.io” 為后綴
創建成功后,點擊界面右側的Settings
,打開頁面后找到GitHub Pages
,點擊Launch automatic page generator
,生成 page。
然后在網站配置文件 _config.yml
文件中,找到Deployment
,修改配置:
deploy:
type: git
repo: git@github.com:yourname/yourname.github.io.git
branch: master
如果使用 git 方式部署,執行 npm install hexo-deployer-git --save
命令來安裝插件。
但是這時出現了錯誤提示
npm ERR! Darwin 15.2.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install" "hexo-deployer-git" "--save"
npm ERR! node v4.2.4
npm ERR! npm v2.14.12
npm ERR! shasum check failed for /var/folders/n4/m1w5r2rj3y77vpn_s6g87s180000gn/T/npm-8320-c250e6be/registry.npmjs.org/moment/-/moment-2.11.0.tgz
npm ERR! Expected: 584f5fb87c1f637f12937edce127dde2d206d705
npm ERR! Actual: f3f4cb5f46c790b29b9b7bdce8435fe70ad58dbd
npm ERR! From: https://registry.npmjs.org/moment/-/moment-2.11.0.tgz
嘗試數次,最終先用 npm install hexo-deployer-git
安裝,再執行npm install hexo-deployer-git --save
安裝成功后,在當前目錄進行 deploy 操作
hexo d
上傳成功后,訪問 yourname.github.io ,測試是否可以正常訪問。
八. 綁定域名
在 Github 里生成 CNAME 文件
為了綁定域名,首先在 Hexo 的 "source" 文件夾中新建一個CNAME文件(沒有后綴),文件內容為你要設置的域名。目的是將你的域名(如 uegeek.com )指向 Github 服務器。
Deploy 到 Github上去后大概需要幾分鐘生效。
在 DNS 中添加解析
幾年前坑爹地在 Godaddy 買的域名,難用得要死,還時不時被墻。于是把 DNS 換成 國內的服務 Dnspod。參考Godaddy注冊商域名修改DNS地址。請擦亮眼看清楚 DNS Setting 在哪里設置……
(不知道為什么默認跳轉的是 DNS ZONE FILE 頁面,害我白等了兩天……)
然后到 DNSPod 新建域名,并添加 CNAME 記錄指向 kidult00.github.io 。
當打開 uegeek.com 看到改頭換面的博客后,持續一周的博客搬家活動終于告一段落,內心默默地原諒自己拖延了兩年 T.T
九. 常用命令
命令 | 執行 |
---|---|
hexo new [layout] <title> |
新建 |
hexo publish [layout] <filename> |
發布草稿 |
hexo g |
生成靜態文件 |
hexo d |
上傳更新 |
hexo publish [layout] <filename> |
清除緩存文件(db.json) 和 已生成的文件 (public). |
hexo s |
啟動本地服務器 |
