工具
- Git Account
- Hexo
- Typora
搭建框架
-
GitHub Pages
GitHub Pages是什么:簡單來說,GitHub Page是為GitHub Repository服務的,是為了更簡明易懂的展示你在Github上所作的projects的網(wǎng)頁,就如GitHub Pages官網(wǎng)所說--“Websites for you and your projects.”
可能很多人還是不理解為什么要有GitHub Pages這樣的一個東西...舉個例子來說,你是一個新手,當你瀏覽Github上某一個大牛的代碼時,你看到的是一大堆源碼,你肯定沒有心情深入的看下去(反正我最開始就是這樣??),那么GitHub Pages就可以允許用戶自定義項目首頁,用來替換默認的源碼列表~因此小白你就可以看的更明白啦~
一句話來說就是,GitHub Pages可以被認為是用戶編寫的、托管在Github上的靜態(tài)網(wǎng)頁。
-
Hexo
為什么我們可以用Hexo?因為Github允許通過Github提供的模版站內(nèi)生成網(wǎng)頁,但是也允許用戶自己編寫網(wǎng)頁然后上傳,但這種上傳并不一定是簡單的上傳,也可以通過Hexo、Jekyll等靜態(tài)站點生成器的再處理
-
此框架的優(yōu)缺點:
優(yōu)點:
免費+無限流量
享受git的版本管理功能
你只要用自己喜歡的編輯器寫作即可,其他事情都一概由Github處理
缺點:
- 有一定技術(shù)門檻,你必須懂git和網(wǎng)頁開發(fā)
- 它生成的是靜態(tài)網(wǎng)站,添加動態(tài)功能必須使用外部服務
- 不適合大型網(wǎng)站,因為沒有用到數(shù)據(jù)庫
--綜合來看,它不失為搭建中小型Blog或項目主頁的最佳選項之一
?
<u>總結(jié):你接下去要搭建的個人博客將是一個基于Hexo,托管在GitHub,寫作用MarkDown的超高效率工具??</u>?
搭建步驟
-
使用GitHub Pages建站
請按照官網(wǎng)首頁的教程來進行設置,只需操作官網(wǎng)教程的前兩步,也就是創(chuàng)建倉庫和克隆倉庫到本地
- 創(chuàng)建倉庫:新建的倉庫的
username.github.io
的username
一定與自己account的username一致 - 克隆倉庫:目的是為了讓自己未來的博客和代碼處在git管理之下,所以我們要把剛剛在Github上博客項目拉到本地,代碼如下
$ git clone https://github.com/username/username.github.io
(請自行替換你的username)
- 創(chuàng)建倉庫:新建的倉庫的
-
安裝Hexo
安裝Hexo的步驟:
安裝Git
-
安裝Node.js,需要先安裝nvm(Node.js版本管理器)
官網(wǎng)教程在這里,但是官網(wǎng)通過curl安裝nvm的命令已經(jīng)失效,下面我介紹一下用Homebrew進行安裝的方式:
# 通過Homebrew安裝nvm $ brew install nvm # 創(chuàng)建nvm的工作目錄,為了可以讓你直接在shell使用nvm指令 $ mkdir ~/.nvm $ vi ~/.bash_profile # 在.bash_profile文件里添加以下兩行 # export NVM_DIR=~/.nvm # . $(brew --prefix nvm)/nvm.sh # source .bash_profile $ . ~/.bash_profile # 驗證nvm是否已經(jīng)安裝 $ nvm help # 因為我們是通過homebrew安裝的,所以不需要像官網(wǎng)說的要重啟terminal,執(zhí)行以下命令來安裝Node.js $ nvm install stable
-
安裝Hexo
$ npm install -g hexo-cli
-
編寫博客,發(fā)布
-
創(chuàng)建博客
$ hexo init username.github.io # 在從git克隆到本地的倉庫的目錄下初始化hexo,在我的電腦里就是cd ~
-
更改配置
$ cd username.github.io $ git clone https://github.com/iissnan/hexo-theme-next themes/next
- 進入username.github.io/
_config.yml
修改基礎配置:(請確保每個字段都縮進一個空格,因為YAML依靠縮進來確定元素間的從屬關系)
title: Luke's Blog //你博客的名字 author: Luke //你的名字 language: zh-Hans //語言 中文 theme: next //剛剛安裝的主題名稱 deploy: type: git //使用Git發(fā)布 repo: git@github.com:username/username.github.io.git
- 進入username.github.io/
-
//剛剛在git創(chuàng)建的倉庫,這里使用ssh不需要輸入賬戶密碼(前提是配置好了Github的ssh),使用https需要輸入賬戶密碼,我已經(jīng)配置過了ssh,所以這里使用ssh
branch: master
```
2. (optional)進入username.github.io/themes/next/`_config.yml`中修改主題配置文件(參見[官方文檔](http://theme-next.iissnan.com/getting-started.html#theme-settings))
3. Markdown寫文章
將你寫的文章存到username.github.io/source/_posts的目錄下就OK了,Markdown編輯器推薦[Typora](https://typora.io/) - "Live Preview"
4. 在本地環(huán)境進行測試
```
$ hexo s
# 測試服務啟動,在瀏覽器中輸入http://localhost:4000進行訪問
```
5. 安裝[hexo-deployer-git](https://github.com/hexojs/hexo-deployer-git)自動部署發(fā)布工具
```
$ npm install hexo-deployer-git --save
```
6. 發(fā)布
```
$ hexo clean && hexo g && hexo d
# hexo clean命令是為了清除緩存文件 (db.json) 和已生成的靜態(tài)文件 (public)。
在某些情況(尤其是更換主題后),如果發(fā)現(xiàn)您對站點的更改無論如何也不生效,您可能需要運行該命令。
hexo g是為了生成靜態(tài)文件,hexo d用于部署網(wǎng)站。
```
<u>***以后每次寫博客,只要重新進行三四五六步的操作就OK啦~***</u>
在瀏覽器中輸入
https://username.github.io
,驗收你的博客!更多配置與插件,敬請期待??