title: github+hexo制作個人博客
categories: study
tags:
- github
- hexo
description: 自己用github+hexo搭建個人博客，記錄一下，互相學習
date: 2017-05-29 20:24:59
通過github的代碼托管和hexo搭建個人博客
前期準備
首先要把準備工作做好，前期的賬號注冊、軟件安裝、環境搭建
注冊github賬號
直接到github官網注冊賬號即可
new repository，Repository name填寫的和你的用戶名相同，我覺得這個應該就是你的github Page了，我生成的鏈接 https://heartsxin.github.io/。
在此之前你要現在本地安裝了git，我現在也不是很會用git，初學者而已，按照教程一步步做的。安裝很簡單用起來有點不會，畢竟都是英語的，對我來說很吃力。
這是本地安裝的git和github桌面版
這位大神已經做的很不錯，我就是在他的廖雪峰博客才懂了一些git的用法、
安裝Hexo
Hexo是基于Nodejs的靜態博客系統，通過MackDowd編輯的.md文件會生成靜態的html文件，所以在安裝Hexo之前需要安裝Nodejs
安裝Node.js
安裝Node.js
到官網下載Node.js官網直接下載，按照步驟直接安裝即可。
Node.js環境配置
說明：這里的環境配置主要配置的是npm安裝的全局模塊所在的路徑，以及緩存cache的路徑，之所以要配置，是因為以后在執行類似：npm install express [-g] （后面的可選參數-g，g代表global全局安裝的意思）的安裝語句時，會將安裝的模塊安裝到【C:\Users\用戶名\AppData\Roaming\npm】路徑中，占C盤空間。
例如：我希望將全模塊所在路徑和緩存路徑放在我node.js安裝的文件夾中，則在我安裝的文件夾【D:\Develop\nodejs】下創建兩個文件夾【node_global】及【node_cache】如下圖：
新建文件夾之后在CMD窗口輸入如下命令：
npm config set prefix "D:\Develop\nodejs\node_global"
npm config set cache "D:\Develop\nodejs\node_cache"
輸入代碼后在新建的文件夾里面會生成相應的文件后文件夾，然后配置相應的環境變量，如下圖所示：
配置完后，安裝個module測試下，我們就安裝最常用的express模塊，打開cmd窗口，
輸入如下命令進行模塊的全局安裝：
npm install express -g # -g是全局安裝的意思
通過npm安裝模塊時都是去國外的鏡像下載的，有的時候由于網絡原因會導致安裝模塊失敗，靜靜等待吧...
安裝Hexo
搭建好以上環境之后打開Git Bssh然后輸入命令
安裝Hexo
可以先去Hexo官網去看看，下面的命令就是安裝Hexo
npm install hexo-cli -g #安裝hexo
初始化
現在新建你博客要存儲的文件夾，如：“某位置/blog”，然后在該文件夾下右擊鼠標，選擇Git Bash Here，然后輸入如下命令：
初始化
hexo init
然后輸入
npm install
生成靜態頁面
輸入以下代碼生成靜態html代碼，它是“hexo generate”的簡寫
hexo g
本地啟動
輸入以下代碼本地啟動服務，它是”hexo server“ 的簡寫
hexo s
此時個人博客已經初步建成，在瀏覽器輸入 https://localhost:4000即可訪問你的博客了，試試看...
它可能是這個樣子，如下：
這樣已經初步完成個人博客的初步搭建
上傳至github
修改博客根目錄下的_config.yml，修改 Deployment部分。
# Deployment
## Docs: https://hexo.io/docs/deployment.html
# ssh://git@github.com/wenjunoy/wenjunoy.github.io
deploy:
type: git
repo: ssh://git@github.com/wenjunoy/wenjunoy.github.io ##這個是你的倉庫地址
branch: master
部署
hexo d
成功之后，在瀏覽器中輸入https://username.github.io/即可訪問你的個人博客了，username是你的github用戶名。
總結
這樣就可以擁有一個你的個人博客了，博客可以在后續學習中慢慢的完善。
總結
也附上我博客的鏈接，歡迎大家多多訪問！
https://heartsxin.github.io/
http://heartsxin.coding.me/
