github+hexo搭建博客（一）

背景：

• 一直想搭建帥氣、高端的我的博客，而後在上次某些緣由，就放棄搭建博客，由於再次見識到大神的博客，果斷再次心動了

---

第一步

1. github pages介紹

• github是項目託管網站，列出了項目的源文件，因此github 有一個pages功能，能夠自定義主頁，用來代替默認的列出源列表的這個頁面

因此，github Pages就能夠被認爲是用戶編寫、託管的github上的靜態網頁

2. github相關官方文檔

• 文檔一
• 文檔二

3. github提供兩種類型的主頁

• 我的或組織主頁
  • 頁面內容位於 master下
• 項目主頁
  • 頁面內容位於每一個項目的master下
• （PS：咱們建立的博客屬於我的頁面，但也能夠建立爲項目主頁）

第二步，註冊github帳號

1. 申請github的帳號，github官網——>PS：使用火狐或者谷歌瀏覽器，不然有可能沒法註冊

• 填寫帳號相關信息
  • 帳號名
  • 郵箱
  • 密碼

2. 第二步，填寫完信息後，選擇你的我的計劃

3. 第三步，就是選擇就是你作啥的，專業的啥啥啥
4. 第四步，就是去你的郵箱驗證你的帳號便可
5. 而後登陸你的github帳號，建立一個新的存儲庫，並設置私人可看，仍是公共可看

第三步，安裝git客戶端

• 在註冊完github帳號以後，在本身電腦上安裝git客戶端
• 步驟教程及下載連接
• PS：在上傳本地代碼的時候，push本地代碼到github出錯

第四步，安裝Node

1. 在裝完git客戶端以後，下面就是裝Node了

• Hexo是基於Node環境的靜態博客，npm工具是必不可少的

2. Node下載地址
3. 下載完，直接安裝便可（比較簡單，就不截圖了）
4. 而後在git客戶端執行 node -v ，會顯示出你的安裝版本，這就表示安裝成功了

• PS：有可能在執行 node -v 沒顯示出你的版本號，能夠從新打開下你的git客戶端，再來執行該命令

第五步，安裝hexo

• hexo官方文檔

1. 在安裝完成node以後，在你的本地電腦上新建一個存放blog的文件夾（本身要記得存放在哪，等會要用到該路徑），而後 cd 到該路徑下

• 小技巧：
  • 路徑，能夠用tab鍵補全哦！！！

2. 在切換到你的blog目錄下後，執行 npm i -g hexo 命令

• 建議用cnpm安裝，會相對快一些，有可能你的cnpm命令沒有存在，就須要你安裝下cnpm命令

安裝cnpm命令
npm install cnpm -g --registry=https://registry.npm.taobao.org
而後在執行
cnpm i -g hexo

• 固然你也能夠直接執行npm i -g hexo 命令，可是很慢很慢......（反正我是很慢的那種）

3. 而後確認成功，執行命令 hexo -v

hexo -v

4. 再初始化，執行命令 hexo init

hexo init

5. 這時候在打開存放blog的文件夾，會看到一些文件，以下圖

• 文件夾各類文件的做用
  • node_modules：依賴包
  • scaffolds：命令生成文章等的模板
  • source：用命令建立的各類文章
  • themes：主題
  • _config.yml：整個博客的配置
  • package.json：項目所需模塊項目的配置信息

6. 接下來修改blog文件夾中的文件，修改_config.yml文件的一些配置（記得冒號後必須有空格，否則配置不生效！！！切記！！！切記！！！）

deploy:
  type: git
  repo: https://github.com/YourgithubName/YourgithubName.github.io.git
  branch: master

7. 而後在執行最後的三條命令

命令1生成部署文件
hexo deploy
命令2，而後部署
hexo generate
命令3，而後運行
hexo server

hf@hf-PC MINGW64 /d/git-blog
$ hexo deploy
INFO  Start processing
INFO  Files loaded in 347 ms
INFO  Generated: index.html
INFO  Generated: archives/index.html
INFO  Generated: archives/2018/04/index.html
INFO  Generated: fancybox/jquery.fancybox.css
INFO  Generated: fancybox/fancybox_sprite.png
INFO  Generated: fancybox/fancybox_loading@2x.gif
INFO  Generated: fancybox/fancybox_loading.gif
INFO  Generated: fancybox/blank.gif
INFO  Generated: fancybox/fancybox_sprite@2x.png
INFO  Generated: archives/2018/index.html
INFO  Generated: fancybox/fancybox_overlay.png
INFO  Generated: fancybox/jquery.fancybox.pack.js
INFO  Generated: fancybox/jquery.fancybox.js
INFO  Generated: css/fonts/FontAwesome.otf
INFO  Generated: fancybox/helpers/jquery.fancybox-buttons.js
INFO  Generated: js/script.js
INFO  Generated: fancybox/helpers/jquery.fancybox-media.js
INFO  Generated: css/style.css
INFO  Generated: fancybox/helpers/jquery.fancybox-buttons.css
INFO  Generated: css/fonts/fontawesome-webfont.eot
INFO  Generated: fancybox/helpers/jquery.fancybox-thumbs.css
INFO  Generated: fancybox/helpers/jquery.fancybox-thumbs.js
INFO  Generated: css/fonts/fontawesome-webfont.woff
INFO  Generated: fancybox/helpers/fancybox_buttons.png
INFO  Generated: css/images/banner.jpg
INFO  Generated: css/fonts/fontawesome-webfont.ttf
INFO  Generated: css/fonts/fontawesome-webfont.svg
INFO  Generated: 2018/04/02/hello-world/index.html
INFO  28 files generated in 828 ms

hf@hf-PC MINGW64 /d/git-blog
$ hexo generate
INFO  Start processing
INFO  Files loaded in 234 ms
INFO  0 files generated in 261 ms

hf@hf-PC MINGW64 /d/git-blog
$ hexo server
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

8. 下面就是見證奇蹟的時候到了，打開你的瀏覽器，輸入http://localhost:4000

9. 這就是github+hexo搭建博客