我的網站開發Github+GithubPage+Node+Hexo

時間 2019-11-06

標籤我的網站開發 github+githubpage+node+hexo github githubpage node hexo 欄目網站開發简体版

原文原文鏈接

——論一個妹子環境配置的辛酸歷程

前：

首先，我是一個很尊重版權的善良妹子，如下借鑑內容以及幫助的人，我會盡力帶原文連接標記出處，感謝他們。前端
其次，請容許我吐槽一下，本身在電腦配置方面真的是小白。在瘋狂的推倒重置的過程當中，真的深感，我心好塞，真塞，超級塞。環境配置簡直就是苦瓜同樣的存在，你以爲苦，沒錯，仍是很苦，可是你架不住人家有益健康啊，默默擦淚ing。在這篇文章中，可能會有點長，可是我會盡力步驟分明標題目的清晰，因此該跳過的能夠直接跳過，不介意的能夠看看，順即可以交流交流。node
最後，我建議各個站點提出問題的小夥伴們，提出問題旨在請求別人的幫助，同時也可以給後來碰見一樣問題的小夥伴一個先導。故而，若是你在別人回答問題以前，本身已經解決問題的小哥哥們，請必定記得把你的解決方法回答在你的問題下面，這樣我會以爲你更帥的！若是你只是說了一句，已經解決了。小哥哥，你是想讓我約你小樹林嗎？git

寫文習慣：

爲避免影響思路，我會把正確的流程彙總以後再填坑。github
若是願意多踩幾腳坑的朋友，能夠多折騰一下，有益無害，沒有坑就沒有路，說不定你的坑填好以後就是後來者的路了，咱們要善於作一個鋪路的人，哈哈哈，說的我本身都信覺得真了。數據庫
已經踩坑的同志彆着急，下文有解釋，若是下文的解釋非你所要，仍是不要着急，度娘和谷歌比我厲害，若是依然沒有，也仍是不要着急，大不了重頭再來，咱們依然是好漢。個人一個技術總監曾經和我說過，若是環境上有你不管如何都解決不了的問題，那麼有必要的話，就把環境重置到最簡單，而後一步一步開始。npm

開發目的：

開發一個屬於本身的我的網站。Yes，我走的坑，你依然能夠再走一遍，哈哈哈哈哈哈哈哈segmentfault

開發進度：

從阿里雲千辛萬苦買下域名，此外什麼都沒有。Right，我除了錢，一無全部。後端

配置環境：

電腦本地配置：Git+Node+Hexo瀏覽器
線上資源配置：Github+GithubPage+阿里雲緩存

開發思路：

我比較喜歡先總後分。媽媽說，要時刻把握大方向。

咱們須要先在github上面建一個存放本身我的網站的項目庫，well，這實際上是github在幫咱們代理
已經有人幫你代理項目庫了，可是你須要一個連接可以訪問，then，你要想辦法讓github pages幫助提供一個和你有關係的連接咯
將hexo開發的本地項目部署到github上面你的項目庫，next，訪問github pages配置的連接能夠看見你的項目
Lastly，要將github pages提供的連接和本身的域名綁定在一塊兒，而後你的域名就能夠被訪問了

開發步驟：

第一步，在github建立一個倉庫。
- 請登錄你的真愛github
- 建立我的倉庫，注意命名時，建議與本身github帳號名同樣，好比：huooo.github.io。此處有坑1
- 建立完成會先跳到這個頁面，你能夠選擇先建立一個README文件，這是github一向推薦。不強求，可隨意，此處不具體說明README文件。
- 注意此時的瀏覽器url，已經跳轉到你在github下的repository地址。開發思路的第一步到此完成，下一步就要須要設置github pages下的域名，即讓你如今的url: http://www.github.com/Huooo/h... 變成 http://huooo.github.io
第二步，部署github上的我的域名，注意這裏只是github pages提供的訪問github上我的項目的域名。不是在阿里雲購買的域名。
- 在Setting->Options->Github Pages中能夠查看，你的站點已經發布在 https://huooo.github.io上面。
- 如今訪問這個網址，其實就能夠看見你剛剛寫的那個README文件裏面的內容了。此處有坑2。開發思路的第二部已經完成，接下來就是用hexo部署一個有實際頁面的我的網站。
第三步，將hexo項目部署到倉庫裏面，讓http://huooo.github.io能夠訪問。其實思路清晰的同窗已經知道，這個hexo的部署，徹底能夠本身開發，可是做爲一個前端還只是淺水區的我來講，我暫時開發不了後端操做不了數據庫，而hexo嚴格來說是靜態頁面的開發而不是借用數據庫來部署網站，這個你能夠去詳細瞭解hexo的原理。
- 配置SSH Key，使本地電腦可以鏈接github。Git安裝不作陳述。
  - 先在Git命令行中檢查是否有ssh key
```
> cd /.ssh    // 若是提示 No such file or directory 那麼就是沒有
```
  - 配置ssh key
```
>  ssh-keygen -t rsa -C "***@gmail.com"   // 這個郵箱，請使用github帳號綁定的郵箱。而後會提醒你.ssh存儲路徑，直接回車；提醒輸入密碼，可輸入可不輸入，以後回車；確認密碼，以後回車，完成本地密鑰配置*
```
  - 將SSH Key添加到github上面，先在本地找到'.ssh/id_rsa.pub'文件，就在上一步中的存儲路徑之中，通常都會在C:/Users/用戶名/.ssh/id_rsa.pub。而後去github的我的設置中：Setting->SSH and GPG keys->New SSH key，將id_rsa.pub的內容拷貝到key裏面，並點擊Add SSH key便可。
  - 檢查配置是否成功，並配置帳號和郵箱。打開Git命令行。
```
> ssh -T git@github.com                             // 若是是下圖的反應，則配置成功
```
```
> git config --global user.name "Huooo"             // 配置github帳號
> git config --global user.email "***@gmail.com"    // 配置github綁定的郵箱
```
- node安裝和淘寶鏡像不作陳述。安裝hexo環境。運行cmd。
  - 先在全局安裝hexo
```
> cnpm install -g hexo-cli 
   > cnpm hexo --save
```
  - 進入放項目的文件夾。
```
> mkdir huooo         // 先新建一個文件夾
   > hexo init huooo     // 將這個文件夾初始化成hexo項目
   > cd huooo            // 進入這個文件夾
   > cnpm install        // 安裝依賴
   > hexo g              // 對huooo進行初始化,在本地生成Public靜態文件夾
   > hexo s              // 啓動huooo項目
```
  - 而後會提醒你，hexo is running at http://localhost:4000/ 你能夠在瀏覽器中查看你構建的hexo項目
- 修改hexo項目huooo中的_config.yml文件，將Deployment部份內容填充完整。此處坑3。
- cmd命令，在huooo文件下將修改過的配置從新部署到github上面。
```
> cnpm install hexo-deployer-git --save
     > hexo clean
     > hexo g
     > hexo d
```
- 至此，第三步已經完成。如今能夠經過訪問http://huooo.github.io看見hexo的模板網頁了。目錄結構如今已經能夠看見了。
如今，只須要將http://huooo.github.io綁定到阿里雲域名www.cicihu.com上面便可。
- 先給我的域名添加域名解析。
  - 先在阿里雲上面登陸->控制檯->域名與網站->域名，OK，如今找到你的那個域名，點擊解析。進入解析設置頁面。
  - 添加兩條解析。
- 在github的項目中點擊Create new file。OK，如今須要創建CNAME文件，並添加我的域名進CNAME文件，注意寫法，域名.域名後綴，便可，不須要http://www。
- 這時再回到項目的Settings->Options->Github Pages查看，custom domain已經存在了。
- 如今，我的網站的初始化配置就完成了，至於美化維護部分，就要多研究hexo了。

填坑之路：

坑1
- 此處的命名規則，Github Help裏面有給詳細說明。參見User, Organization, and Project Pages
- 因爲我不是一次順利完成全部配置，因此必定存在推到重置的過程，坑就在這裏。若是一切清空歷來，此處的命名，依然要和第一次的命名相同，我也解釋不了爲何，Github Pages只認定你的github帳戶名來配置你的Github Pages域名去訪問你的repository。若是第二次不按照github帳戶命名，那麼你的項目將會被配置成http://huooo.github.io/新名字，是的，就是這麼霸道，抗議無效。同時我還用朋友的帳號作測試，若是我在某人A的github上面創建huooo.github.io項目，那麼這個項目的Github Pages設置默認爲http://A.github.io/huooo.gith...，即便那我的根本沒有建A.github.io項目，Github Pages也會給每一個人都分配好。因此，咱們仍是好好遵照吧，也歡迎閱讀原網站文檔，來一塊兒交流。
- 說到這裏就不能不提及segmentfault上提問的小夥伴，問完以後，估計是本身最後捯飭出來了，而後就說了一句已經解決了，就沒了，沒了，了。我當時是多麼想打電話問問啊。
坑2
- 因爲配置好幾回，這裏的坑，具體的問題我陳述不清了，大體的問題是在二次配置中或修改文件時，若是發現結果和預期不同，可是思路上市正確的，多是瀏覽器緩存的緣由。
坑3
- 這裏也是。必定要仔細閱讀官方文檔，Hexo的官方文檔中對於Deployment的配置仍是很嚴格的，空格什麼的必定要正確。我當時還有點代碼強迫症，喜歡一切向左看齊，可是在hexo部署到github上時就老是不成功。
大部分須要注意和須要解釋的在上面有陳述，此處填坑也沒什麼了。

後：

最要感謝嚴振杰的配置文章，雖然他沒有部署hexo這一步，可是我第一次配置是跟着他走的，因此也有了後面二次配置的問題存在，而後才知道答案。還有強大的度娘和谷歌和走過坑的小夥伴們，我是跟隨大家一路走過來的，哈哈哈哈哈哈哈哈哈。
雖然全部路徑都已配通。能夠訪問，可是因爲我最近有另外一個項目學習，所以http://www.cicihu.com訪問的仍是默認的模板，並且，我對於改版會本身的想法，因此我的網站暫時不能馬上美化維護，還請見諒。可是看見這篇文章須要開發我的網站的小夥伴能夠繼續開發，歡迎把大家的我的網站留下，愛分享的你必定是最美最帥的。
對於我這個淺水區的小魚，還有不少須要學習和改正的地方，我能夠接受全部的支持也能夠接受全部的指正，還請不吝賜教。
segmentfault的markdown編寫真的很贊，很贊。可是圖片上傳功能，真的是醉了，醉了。

——好記性不如難筆頭。