date: 2016-07-21 09:50:30
首先,說一下筆者搭建博客的原因:
- 據我了解的,大神們都有博客,這應該也是我搗鼓了2天,依然沒放棄的最大的原因吧.
- 作為一名開發人員,沒有自己的技術博客,也說不過去,雖然有自己的筆記,但是,寫博客是把知識深加工創造的過程,印象會更加深刻.
- 最后,肯定是為了將來做準備,你懂得.
本篇博客的適用人群:
硬件:MAC
對終端命令不太了解的小白一枚.
可以翻墻.
接著補充一下相關知識.
我們通過查詢得知,一般是需要你懂點終端的命令和git,當然我也是一樣,在搭建自己的博客的過程中,才真正記住了一些終端命令.
- 首先你需要知道的是,怎么判斷你是否已經安裝了git.
- 你是否安裝了GitHub,你的GitHub玩的溜不溜.
- 筆者的困惑是,我的電腦上已經配置了公司的git賬號,配置了ssh密匙,那github也需要配置ssh密匙,通過簡單的查詢,我們知道若不做處理很容易把公司的ssh給覆蓋點,那幾影響代碼的版本管理.所以我沒有輕舉妄動.
- 關于怎么解決上述問題,請看"最終解決 同一個電腦 工作git 和 github管理"這篇博客,這篇博客稍后會發布.
最終我們首先實現,通過SourceTree實現公司代碼的版本管理和github管理自己的代碼.接著開啟我們的搭建博客之旅吧.
step 1 安裝Node.js
- 下載安裝node.js的方法一般有2種,通過終端命令下載和直接官網下載安裝包,我告訴你最快捷最容易成功的辦法是后者,去官網直接下載安裝,官網地址:https://nodejs.org/en/.
- node.js安裝完成的時候,會看到提示
npm也安裝好了,檢測其是否被安裝成功
xulianpeng$ node -v
v4.1.1
xulianpeng$ npm -v
v6.1.1
step 2 下載安裝homebrew
homebrew 是MAC OSX 上面用來安裝 或者 卸載軟件用的非常方面的一個軟件，我們下面安裝 hexo 全靠它。官方網站:http://brew.sh/index_zh-cn.html,安裝方法參考官網即可,需要注意的是 homebrew 安裝的時候一定要在 sudo 管理員權限下安裝，否則 可能遇到寫入失敗的問題。
在這里解釋一下,在sudo權限下安裝 就是在正常的命令前面 添加 sudo即可
xulianpeng$/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
或者
xulianpeng$sudo /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
step 3 下載安裝hexo
Hexo 是一個快速、簡潔且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在幾秒內，即可利用靚麗的主題生成靜態網頁。
hexo官網地址: https://hexo.io/zh-cn/docs/ ，按照 hexo 使用說明下載,命令如下:
當然前提是,你已經安裝成功:
- Node.js
- Git
$ npm install -g hexo-cli
hexo 下載完成后 運行一下 看是否安裝成功
xuyuexiadeMacBook-Pro:~ $ hexo -v
hexo-cli: 1.0.2
os: Darwin 15.6.0 darwin x64
http_parser: 2.7.0
node: 6.3.0
v8: 5.0.71.52
uv: 1.9.1
zlib: 1.2.8
ares: 1.10.1-DEV
icu: 57.1
modules: 48
openssl: 1.0.2h
step 4 初始化hexo
有人說要先創建一個hexo文件夾什么的,應該是要的 ,但是我沒有,直接初始化在當前目錄下面
$ hexo init
INFO Cloning hexo-starter to ~
fatal: destination path '/Users/用戶名' already exists and is not an empty directory.
WARN git clone failed. Copying data instead
WARN Failed to install dependencies. Please run 'npm install' manually
$ npm install
最后你會在用戶目錄下面發現多了幾個文件和文件夾
_config.yml
package.json
scaffolds
scripts
source
├── _drafts
└── _posts
themes
step 5 搭建本地博客
- 安裝Hexo關于啟動服務器的插件
npm install hexo-server --save
- 啟動服務器, 本地查看效果, 如果不指定端口，默認為4000
hexo server
INFO Start processing
INFO Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.
- 打開 http://localhost:4000 查看效果
- 使用 Ctrl+c 停止服務
step 6 博客的主題和配置
在博客主題官網:上選擇喜歡的主題,以Next為例,
- 前往next主題的github網頁下載到本地,解壓,并重命名為 next.
- 將解壓后的文件夾移動到上文所得的 themes文件夾下.(里面包含一個 landscape,即是之前打開的效果主題頁)
- 選擇用文本編輯器打開_config.yml,找到 theme這個字段,將其后面的value值修改為 next,記得留空格.當然你還可以修改其他屬性:
title: 網站大標題
subtitle: 網站小標題
description: 你對于自己的描述
author: 昵稱
avatar: 頭像 (如:/images/avatar.jpg, images目錄位于source目錄下)
- 此時主題更換成功，可啟動 server 驗證效果
step 7 github的操作
新建倉庫名為 github用戶名.github.io
進入倉庫，點擊右側 settings，在 Github Pages 標簽下可看到 Your site is published at http://你的用戶名.github.io. 這句話。
step 8 將博客部署到Github
- 安裝 hexo 關于 git 的組件
npm install hexo-deployer-git --save
- 在_config.yml 中為 git 添加配置
// 這個一般是在最后,直接往下滑
deploy:
type: git
repository: 你的倉庫地址(https://github.com/用戶名/用戶名.github.io.git)
branch: master
- 執行(每次修改都要執行這些命令才能在github pages看到效果)
hexo generate
hexo deploy
最后會要求你輸入github網站的用戶名和登錄密碼.完事后你會看到:
To https://github.com/xulianpeng/xulianpeng.github.io.git
* [new branch] HEAD -> master
Branch master set up to track remote branch master from https://github.com/xulianpeng/xulianpeng.github.io.git.
INFO Deploy done: git
這個時候你就可以搜索這個網址了,這是我的博客地址:https://xulianpeng.github.io.
step 9 開始寫博客
- 新建博客
hexo new "文章名"
//可以先試著寫 英文,如果你的配置屬性里面沒有配置中文,有可能會報錯
命令結束后,會在 source/_post下自動生成一個 "文章名.md文件".(你會看到一個 hello world.md 這個是默認的那個,可以刪除)
- 使用編輯器,推薦Mou,打開這個 .md文件, 寫好后,生成 部署即可.
hexo generate
hexo deploy
- 刪除博客的話,直接將source/_post下對應的 .md文件刪除即可 ;重新編譯文章,找到這個.md文件打開重新編輯,最后 再次生成部署即可,有時候會存在一定的延遲,這跟網速有關.
step 10 評論系統(還未嘗試,先把方法記下)
- 登錄 http://duoshuo.com/ 點擊我要安裝，創建站點。站點地址是 Github Pages 的地址，多說域名自己填寫。
- 由于 NexT 主題已經支持了多說，我們不需要添加其他代碼，只需要在 _config.yml 中添加一個名為 duoshuo_shortname 的字段，其值為多說域名中自己填寫的那部分，并不是全部多說域名。
結語:純手打博客,歡迎指正交流.
