Mac上搭建基於GitHub的Hexo部落格(繼)
很早就想搭建一個屬於自己的部落格,一次一次的嘗試都失敗了,今天有幸找到博主的部落格(與佳期的個人部落格(gonghonglou.com))然後一步一步的跟著操作,終於搭建了屬於自己的部落格,除了博主的一些坑,自己也踩了不少坑,特地在這裡在博主的基礎上加上自己踩得坑。
環境配置
Hexo官網上本就有對Hexo安裝及使用的詳細介紹,可以按照上邊的步驟一步一步安裝。這裡來講述自己安裝的親身步驟。
1.Node.js
用來生成靜態頁面。移步Node.js官網,下載v8.2.1 Current 一路安裝即可。
2.Git
用來將本地Hexo內容提交到Github上。Xcode自帶Git,這裡不再贅述。如果沒有Xcode可以參考Hexo官網上的安裝方法。
(這裡我要說一下我在根據Hexo官網安裝Hexo的時候,到了Install Node.js
這一步的時候,我敲第一條命令的時候沒問題)
//第一條命令
$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash
當我開始敲第二條命令的時候就出現了問題
//第二條命令
$ wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash
終端提示我 -bash: wget: command not found
然後使用下邊的命令安裝wget,這樣找不到wget的錯誤就不會再提示了。
$ brew install wget
解決完wget的問題之後我再執行了第二條命令,然後執行第三條命令:
//第三條命令
$ nvm install stable
沒錯,問題又來了,提示我-bash: nvm: command not found
,又掉坑裡了,我能怎麼辦,我也很絕望啊,然後解決辦法是安裝nvm,命令如下:
$ brew install nvm
等上述命令執行完之後,我再執行第三條命令的時候發現還是提示-bash: nvm: command not found
額...........居然還沒從坑裡爬出來,然後我找到了如下的方法,終於從這個坑裡爬出來了,具體為什麼這麼操作,我也不是太清楚。
按照下邊的命令逐個執行
$ source ~/.nvm/nvm.sh
$ source ~/.profile
$ source ~/.bashrc
當上述命令執行完畢之後,再執行第三條命令的時候就完美解決了問題,終於從坑裡爬出來了。
接下來執行下邊的命令:
$ sudo npm install -g hexo
輸入管理員密碼(Mac登入密碼)即開始安裝 (sudo
:linux系統管理指令 -g
:全域性安裝)
注意坑一:Hexo官網上的安裝命令是$
npm install -g hexo-cli
,安裝時不要忘記前面加上sudo
,否則會因為許可權問題報錯。
初始化
終端cd到一個你選定的目錄,執行hexo init
命令:
$ hexo init blog
blog是你建立的資料夾名稱。cd到blog資料夾下,執行如下命令,安裝npm:
$ npm install
執行如下命令,開啟hexo伺服器:
$ hexo s
此時,瀏覽器中開啟網址http://localhost:4000,能看到如下頁面:
本地設定好後,接下來開始關聯Github。
關聯Github
1.建立倉儲
登入你的Github帳號,新建倉庫,名為使用者名稱.github.io
固定寫法,如jerry039.github.io
即下圖中1所示:
本地的blog資料夾下內容為:
_config.yml
db.json
node_modules
package.json
scaffolds
source
themes
終端cd到blog
資料夾下,vim
開啟_config.yml
,命令如下:
$ vim _config.yml
開啟後往下滑到最後,修改成下邊的樣子:
deploy:
type: git
repository: https://github.com/Jerry039/Jerry039.github.io.git
branch: master
你需要將repository
後Jerry039
換成你自己的使用者名稱,地址在上圖2位置獲取。hexo 3.1.1版本後type:
值為git
。
注意坑二:在配置所有的_config.yml檔案時(包括theme中的),在所有的冒號:後邊都要加一個空格,否則執行hexo命令會報錯,切記 切記
在blog
資料夾目錄下執行生成靜態頁面命令:
$ hexo generate 或者:hexo g
此時若出現如下報錯:
ERROR Local hexo not found in ~/blog
ERROR Try runing: 'npm install hexo --save'
則執行命令:
npm install hexo --save
若無報錯,自行忽略此步驟。
再執行配置命令:
$ hexo deploy 或者:hexo d
注意坑三:若執行命令hexo deploy
仍然報錯:無法連線git或找不到git,則執行如下命令來安裝hexo-deployer-git:$ npm install hexo-deployer-git --save
再次執行hexo generate
和hexo deploy
命令。
若你未關聯Github,則執行hexo deploy
命令時終端會提示你輸入Github的使用者名稱和密碼,即
Username for 'https://github.com':
Password for 'https://github.com':
hexo deploy
命令執行成功後,瀏覽器中開啟網址http://Jerry039.github.io(將Jerry039
換成你的使用者名稱)能看到和開啟http://localhost:4000
時一樣的頁面。
為避免每次輸入Github使用者名稱和密碼的麻煩,可參照第二節方法
2.新增ssh key到Github
1.1.檢查SSH keys是否存在Github
執行如下命令,檢查SSH keys是否存在。如果有檔案id_rsa.pub
或id_dsa.pub
,則直接進入步驟1.3將SSH key新增到Github中,否則進入下一步生成SSH key。
$ ls -al ~/.ssh
1.2.生成新的ssh key
執行如下命令生成public/private rsa key pair,注意將your_email@example.com
換成你自己註冊Github的郵箱地址。
$ ssh-keygen -t rsa -C "your_email@example.com"
輸入完命令之後直接回車。預設會在相應路徑下(~/.ssh/id_rsa.pub
)生成id_rsa
和id_rsa.pub
兩個檔案。
1.3.將ssh key新增到Github中
Find前往資料夾~/.ssh/id_rsa.pub
開啟id_rsa.pub
檔案,裡面的資訊即為SSH key,將這些資訊複製到Github的Add SSH key頁面即可。
進入Github --> Settings --> SSH keys --> add SSH key:
Title裡任意添一個標題,將複製的內容貼上到Key裡,點選下方Add key
綠色按鈕即可。
3.釋出文章
終端cd到blog
資料夾下,執行如下命令新建文章:
hexo new 'postName'
名為postName.md
的檔案會建在目錄/blog/source/_posts
下。你當然可以用vim來編輯文章。我在用MacDown編輯器,支援預覽。
文章編輯完成後,終端cd到blog
資料夾下,執行如下命令來發布:
hexo generate //生成靜態頁面
hexo deploy //將文章部署到Github
至此,Mac上搭建基於Github的Hexo部落格就完成了。接下來就是介紹安裝theme主題,新增評論功能和繫結個人域名。
相關文章
- 基於github和hexo搭建部落格 本地hexo部落格搭建GithubHexo
- 基於github和hexo搭建部落格 github配置GithubHexo
- 基於github和hexo搭建部落格 HEXO樣式GithubHexo
- 基於Github Page 搭建部落格(hexo框架)GithubHexo框架
- hexo搭建github部落格HexoGithub
- 基於 Hexo + GitHub Pages 搭建個人部落格(三)HexoGithub
- 使用Hexo在Github上搭建自己的部落格HexoGithub
- 【教程向】——基於hexo+github搭建私人部落格HexoGithub
- 基於Hexo搭建靜態部落格Hexo
- 整合github、hexo搭建部落格GithubHexo
- 利用github hexo搭建部落格GithubHexo
- 【GitHub】GitHub+Hexo搭建個人部落格GithubHexo
- Windows上利用github和hexo搭建個人部落格WindowsGithubHexo
- 基於 Github Actions 自動部署 Hexo 部落格GithubHexo
- hexo+github+域名 搭建自己的部落格HexoGithub
- Hexo + Github 搭建靜態部落格(一)HexoGithub
- hexo+github搭建個人部落格HexoGithub
- hexo+GitHub部落格搭建實戰HexoGithub
- 使用github和hexo搭建部落格GithubHexo
- 同時在GitHub和Coding上搭建Hexo部落格GithubHexo
- 基於windows平臺Git+GitHub+Hexo搭建個人部落格(三)WindowsGithubHexo
- 使用HEXO+Github,搭建屬於自己的免費部落格HexoGithub
- Hexo+Github搭建部落格總結HexoGithub
- Hexo+GitHub+阿里域名搭建自己部落格HexoGithub阿里
- hexo結合github搭建個人部落格HexoGithub
- 搭建部落格 (Hexo + github + butterfly主題)HexoGithub
- (Ⅰ)基於Hexo+GitHub Page搭建部落格,繫結域名及備份HexoGithub
- GitHub + Hexo搭建自己部落格(一) 基本內容GithubHexo
- 史上最快用GitHub、Hexo搭建個人部落格GithubHexo
- Hexo+Github輕鬆搭建個人部落格HexoGithub
- Hexo+Github Pages+yilia搭建部落格HexoGithub
- 搭建Hexo部落格相簿Hexo
- Hexo 搭建部落格Hexo
- 如何使用Github+Hexo快速搭建個人部落格GithubHexo
- 使用hexo+Anisina+github搭建個人部落格HexoGithub
- hexo+github搭建靜態部落格之初體驗HexoGithub
- GitHub、Node.js和Hexo搭建個人部落格GithubNode.jsHexo
- 用 Hexo + Next + GitHubPages 搭建漂亮的免費部落格HexoGithub