GitHub+Hexo 搭建個人網(wǎng)站詳細教程

時間：2022-08-27 05:27:01 | 來源：網(wǎng)站運營

時間：2022-08-27 05:27:01 來源：網(wǎng)站運營

前言：

隨著互聯(lián)網(wǎng)浪潮的翻騰，國內(nèi)外涌現(xiàn)出越來越多優(yōu)秀的社交網(wǎng)站讓用戶分享信息更加便捷。然后，如果你是一個不甘寂寞的程序猿（媛），是否也想要搭建一個屬于自己的個人網(wǎng)站，如果你曾經(jīng)或者現(xiàn)在正有這樣的想法，請跟隨這篇文章發(fā)揮你的Geek精神，讓你快速擁有自己的博客網(wǎng)站，寫文章記錄生活，享受這種從0到1的過程。

你見過的最棒的個人博客界面是什么樣的？

什么是Hexo ?

Hexo是一款基于Node.js的靜態(tài)博客框架，依賴少易于安裝使用，可以方便的生成靜態(tài)網(wǎng)頁托管在GitHub和Heroku上，是搭建博客的首選框架。這里我們選用的是GitHub，你沒看錯，全球最大的同性戀交友網(wǎng)站（逃……）。Hexo同時也是GitHub上的開源項目，參見：hexojs/hexo 如果想要更加全面的了解Hexo，可以到其官網(wǎng) Hexo 了解更多的細節(jié)，因為Hexo的創(chuàng)建者是臺灣人，對中文的支持很友好，可以選擇中文進行查看。這里，默認各位猿/媛兒都知道GitHub就不再贅述。

這是我的個人博客效果: 吳潤 · RunDouble

下面正式從零開始搭建年輕人的第一個網(wǎng)站。

搭建步驟：

• 獲得個人網(wǎng)站域名
• GitHub創(chuàng)建個人倉庫
• 安裝Git
• 安裝Node.js
• 安裝Hexo
• 推送網(wǎng)站
• 綁定域名
• 更換主題
• 初識MarkDown語法
• 發(fā)布文章
• 尋找圖床
• 個性化設(shè)置
• 其他
• 附錄

獲得個人網(wǎng)站域名

域名是網(wǎng)站的入口，也是網(wǎng)站的第一印象，比如餓了么的官網(wǎng)的域名是：https://www.ele.me/ ，很是巧妙。常見的有com,cn,net,org等后綴，也有小眾的xyz,me,io等后綴，根據(jù)你自己的喜好，選擇不同的后綴，比如我選擇就是常見的com后綴。很多小眾奇特的后綴在大陸是沒辦法備案的，網(wǎng)站也就無法上線。然而使用GitHub托管我們的網(wǎng)站，完全不需要備案，因為托管我們的網(wǎng)站內(nèi)容的服務(wù)器在美國，而且在國內(nèi)備案流程也比較繁雜，時間需要一周左右。

申請域名的地方有很多，這里推薦阿里云：阿里云-為了無法計算的價值 申請入口：域名注冊 購買域名這也是我們整個搭建過程中惟一一個需要花錢的地方。如果你已經(jīng)有了空閑域名就無需購買，直接使用即可。







GitHub創(chuàng)建個人倉庫

登錄到GitHub,如果沒有GitHub帳號，使用你的郵箱注冊GitHub帳號：Build software better, together 點擊GitHub中的New repository創(chuàng)建新倉庫，倉庫名應(yīng)該為：用戶名.http://github.io 這個用戶名使用你的GitHub帳號名稱代替，這是固定寫法，比如我的倉庫名為：

安裝Git

什么是Git ?簡單來說Git是開源的分布式版本控制系統(tǒng)，用于敏捷高效地處理項目。我們網(wǎng)站在本地搭建好了，需要使用Git同步到GitHub上。如果想要了解Git的細節(jié)，參看廖雪峰老師的Git教程：Git教程 從Git官網(wǎng)下載：Git - Downloading Package 現(xiàn)在的機子基本都是64位的，選擇64位的安裝包，下載后安裝，在命令行里輸入git測試是否安裝成功，若安裝失敗，參看其他詳細的Git安裝教程。安裝成功后，將你的Git與GitHub帳號綁定，鼠標右擊打開Git Bash




或者在菜單里搜索Git Bash，設(shè)置user.name和user.email配置信息：

git config --global user.name "你的GitHub用戶名"git config --global user.email "你的GitHub注冊郵箱"生成ssh密鑰文件：


ssh-keygen -t rsa -C "你的GitHub注冊郵箱"然后直接三個回車即可，默認不需要設(shè)置密碼
然后找到生成的.ssh的文件夾中的id_rsa.pub密鑰，將內(nèi)容全部復制

打開GitHub_Settings_keys 頁面，新建new SSH Key




Title為標題，任意填即可，將剛剛復制的id_rsa.pub內(nèi)容粘貼進去，最后點擊Add SSH key。
在Git Bash中檢測GitHub公鑰設(shè)置是否成功，輸入 ssh git@github.com ：




如上則說明成功。這里之所以設(shè)置GitHub密鑰原因是，通過非對稱加密的公鑰與私鑰來完成加密，公鑰放置在GitHub上，私鑰放置在自己的電腦里。GitHub要求每次推送代碼都是合法用戶，所以每次推送都需要輸入賬號密碼驗證推送用戶是否是合法用戶，為了省去每次輸入密碼的步驟，采用了ssh，當你推送的時候，git就會匹配你的私鑰跟GitHub上面的公鑰是否是配對的，若是匹配就認為你是合法用戶，則允許推送。這樣可以保證每次的推送都是正確合法的。




安裝Node.js

Hexo基于Node.js，Node.js下載地址：Download | Node.js 下載安裝包，注意安裝Node.js會包含環(huán)境變量及npm的安裝，安裝后，檢測Node.js是否安裝成功，在命令行中輸入 node -v :




檢測npm是否安裝成功，在命令行中輸入npm -v :




到這了，安裝Hexo的環(huán)境已經(jīng)全部搭建完成。




安裝Hexo

Hexo就是我們的個人博客網(wǎng)站的框架， 這里需要自己在電腦常里創(chuàng)建一個文件夾，可以命名為Blog，Hexo框架與以后你自己發(fā)布的網(wǎng)頁都在這個文件夾中。創(chuàng)建好后，進入文件夾中，按住shift鍵，右擊鼠標點擊命令行




使用npm命令安裝Hexo，輸入：

npm install -g hexo-cli


這個安裝時間較長耐心等待，安裝完成后，初始化我們的博客，輸入：

hexo init blog注意，這里的命令都是作用在剛剛創(chuàng)建的Blog文件夾中。

為了檢測我們的網(wǎng)站雛形，分別按順序輸入以下三條命令：

hexo new test_my_sitehexo ghexo s這些命令在后面作介紹，完成后，打開瀏覽器輸入地址：

localhost:4000

可以看出我們寫出第一篇博客，只不過我下圖是我修改過的配置，和你的顯示不一樣。




現(xiàn)在來介紹常用的Hexo 命令

npm install hexo -g #安裝Hexo
npm update hexo -g #升級
hexo init #初始化博客

命令簡寫
hexo n "我的博客" == hexo new "我的博客" #新建文章
hexo g == hexo generate #生成
hexo s == hexo server #啟動服務(wù)預覽
hexo d == hexo deploy #部署

hexo server #Hexo會監(jiān)視文件變動并自動更新，無須重啟服務(wù)器
hexo server -s #靜態(tài)模式
hexo server -p 5000 #更改端口
hexo server -i 192.168.1.1 #自定義 IP
hexo clean #清除緩存，若是網(wǎng)頁正常情況下可以忽略這條命令

剛剛的三個命令依次是新建一篇博客文章、生成網(wǎng)頁、在本地預覽的操作。

推送網(wǎng)站

上面只是在本地預覽，接下來要做的就是就是推送網(wǎng)站，也就是發(fā)布網(wǎng)站，讓我們的網(wǎng)站可以被更多的人訪問。在設(shè)置之前，需要解釋一個概念，在blog根目錄里的_config.yml文件稱為站點配置文件，如下圖




進入根目錄里的themes文件夾，里面也有個_config.yml文件，這個稱為主題配置文件，如下圖




下一步將我們的Hexo與GitHub關(guān)聯(lián)起來，打開站點的配置文件_config.yml，翻到最后修改為：

deploy:
type: git
repo: 這里填入你之前在GitHub上創(chuàng)建倉庫的完整路徑，記得加上 .git
branch: master參考如下：





保存站點配置文件。

其實就是給hexo d 這個命令做相應(yīng)的配置，讓hexo知道你要把blog部署在哪個位置，很顯然，我們部署在我們GitHub的倉庫里。最后安裝Git部署插件，輸入命令：

npm install hexo-deployer-git --save


這時，我們分別輸入三條命令：




hexo clean hexo g hexo d其實第三條的 hexo d 就是部署網(wǎng)站命令，d是deploy的縮寫。完成后，打開瀏覽器，在地址欄輸入你的放置個人網(wǎng)站的倉庫路徑，即 http://xxxx.github.io (本站排版可能會出現(xiàn)"http://"字樣，參考下圖) 比如我的xxxx就是我的GitHub用戶名：




你就會發(fā)現(xiàn)你的博客已經(jīng)上線了，可以在網(wǎng)絡(luò)上被訪問了。

綁定域名

雖然在Internet上可以訪問我們的網(wǎng)站，但是網(wǎng)址是GitHub提供的:http://xxxx.github.io (本站排版可能會出現(xiàn)"http://"字樣) 而我們想使用我們自己的個性化域名，這就需要綁定我們自己的域名。這里演示的是在阿里云萬網(wǎng)的域名綁定，在國內(nèi)主流的域名代理廠商也就阿里云和騰訊云。登錄到阿里云，進入管理控制臺的域名列表，找到你的個性化域名，進入解析




然后添加解析










包括添加三條解析記錄，192.30.252.153是GitHub的地址，你也可以ping你的 http://xxxx.github.io 的ip地址，填入進去。第三個記錄類型是CNAME，CNAME的記錄值是：你的用戶名.http://github.io 這里千萬別弄錯了。第二步，登錄GitHub，進入之前創(chuàng)建的倉庫，點擊settings，設(shè)置Custom domain，輸入你的域名




點擊save保存。第三步，進入本地博客文件夾 ，進入blog/source目錄下，創(chuàng)建一個記事本文件，輸入你的域名，對，只要寫進你自己的域名即可。如果帶有www，那么以后訪問的時候必須帶有www完整的域名才可以訪問，但如果不帶有www，以后訪問的時候帶不帶www都可以訪問。所以建議，不要帶有www。這里我還是寫了www(不建議帶有www):

保存，命名為CNAME ，注意保存成所有文件而不是txt文件。

完成這三步，進入blog目錄中，按住shift鍵右擊打開命令行，依次輸入：

hexo cleanhexo ghexo d這時候打開瀏覽器在地址欄輸入你的個性化域名將會直接進入你自己搭建的網(wǎng)站。

更換主題

如果你不喜歡Hexo默認的主題，可以更換不同的主題，主題傳送門：Themes 我自己使用的是Next主題，可以在blog目錄中的themes文件夾中查看你自己主題是什么?，F(xiàn)在把默認主題更改成Next主題，在blog目錄中（就是命令行的位置處于blog目錄）打開命令行輸入：

git clone https://github.com/iissnan/hexo-theme-next themes/next這是將Next主題下載到blog目錄的themes主題下的next文件夾中。打開站點的_config.yml配置文件，修改主題為next




打開主題的_config.yml配置文件，不是站點主題文件，找到Scheme Settings




next主題有三個樣式，我用的是Pisces，你們可以自己試試看，選擇你自己喜歡的樣式（只需要把行首的#去除，#是注釋），選擇好后，再次部署網(wǎng)站，hexo g、hexo d，查看效果。選擇其他主題，按照上述過程即可實現(xiàn)。

初識Markdown語法




Markdown是一種可以使用普通文本編輯器編寫的標記語言，通過簡單的標記語法，它可以使普通文本內(nèi)容具有一定的格式。Markdown語法簡潔明了、容易掌握，而且功能比純文本更強，因此寫博客使用它，可以讓用戶更加專注的寫文章，而不需要費盡心力的考慮樣式，相對于html已經(jīng)算是輕量級語言，像有道云筆記也支持Markdown寫作。并且Markdown完全兼容html，也就是可以在文章里直接插入html代碼。比如給博文添加音樂，就可以直接把音樂的外鏈html代碼插入文章中。具體語法參看：Markdown 語法說明(簡體中文版) 可以說十分鐘就可以入門。當然，工欲善其事必先利其器，選擇一個好的Markdown編輯器也是非常重要的，這里推薦MarkPad 和The Markdown Editor for Windows ，這是帶有預覽效果的編輯器，也可以使用本地的文本編輯器，更多的Markdown的語法與編輯器自己可以搜索了解。




發(fā)布文章

我們開始正式發(fā)布上線博客文章，在命令行中輸入：

hexo n "博客名字"


我們會發(fā)現(xiàn)在blog根目錄下的source文件夾中的_post文件夾中多了一個 博客名字.md 文件，使用Markdown編輯器打開，就可以開始你的個人博客之旅了，Markdown常用的樣式也就十來種，完全能夠滿足一般博文的樣式要求，這是我的一篇博文內(nèi)容示例：




通過帶有預覽樣式的Markdown編輯器實時預覽書寫的博文樣式，也可以通過命令 hexo s --debug 在本地瀏覽器的localhost:4000 預覽博文效果。寫好博文并且樣式無誤后，通過hexo g、hexo d 生成、部署網(wǎng)頁。隨后可以在瀏覽器中輸入域名瀏覽。




尋找圖床

圖床，當博文中有圖片時，若是少量圖片，可以直接把圖片存放在source文件夾中，但這顯然不合理的，因為圖片會占據(jù)大量的存儲的空間，加載的時候相對緩慢 ，這時考慮把博文里的圖片上傳到某一網(wǎng)站，然后獲得外部鏈接，使用Markdown語法， 完成圖片的插入，這種網(wǎng)站就被成為圖床。常見的簡易的圖床網(wǎng)站有：貼圖庫圖片外鏈 國內(nèi)算比較好的圖床我認為有兩個：新浪微博和 七牛云 ，七牛云的使用方法可以參看其他文章。圖床最重要的就是穩(wěn)定速度快，所以在挑選圖床的時候一定要仔細，下圖是博文插入圖片，使用圖床外鏈的示例：

個性化設(shè)置

所謂的個性化設(shè)置就是根據(jù)個人需要添加不同的插件及功能。

基本的有：

在站點配置文件_config.yml修改基本的站點信息




依次是網(wǎng)站標題、副標題、網(wǎng)站描述、作者、網(wǎng)站頭像外部鏈接、網(wǎng)站語言、時區(qū)等。

在主題配置文件_config.yml修改基本的主題信息，如：




博文打賞的微信、支付寶二維碼圖片，這里我是直接把這兩張放在根目錄的source文件夾中，并沒有使用圖床外鏈。




社交外鏈的設(shè)置，即在側(cè)欄展示你的個人社交網(wǎng)站信息。




博文分享的插件jiathis，值設(shè)置為true。在配置文件中有很多的個性化設(shè)置，可以自嘗試更多的修改。

進階個性化：

• 添加網(wǎng)易云音樂

打開網(wǎng)頁版的網(wǎng)易云音樂，選擇喜歡的音樂，點擊生成外鏈播放器




復制外鏈的代碼




比如在側(cè)欄插入這首歌的音樂播放器，修改 blog/themes/next/layout/_macro的sidebar.swig文件，添加剛剛復制的外鏈代碼




重新生成、部署網(wǎng)頁，效果如下

• 設(shè)置背景

把你挑選的背景圖片命名為：background.jpg，放在blog/themes/next/source/images里，在blog/themes/next/source/css/_custom文件的custom.styl首部添加：

body { background:url(/images/background.jpg); background-attachment: fixed;}background-attachment: fixed;是固定背景圖片。

這是設(shè)置一張靜態(tài)圖片作為背景，其實Next主題自帶有動態(tài)的背景效果，修改主題配置文件中的canvas_nest: false為canvas_nest: true即可。

• 增加側(cè)欄菜單條目

默認的側(cè)欄菜單條目有：首頁、歸檔、標簽、關(guān)于、搜索等。如果你想要增加其他的菜單條目，修改主題配置文件_config.yml里的Menu Settings中的menu和menu_icons兩個地方





其中menu里是配置菜單項對應(yīng)的頁面位置（如：/love），menu_icons對應(yīng)菜單項的圖標，這里的圖標是來自于Font Awesome ，所以你需要在Font Awesome網(wǎng)站上找到你需要的icon，然后把該icon的名字寫在menu_icons對應(yīng)菜單名后面，注意冒號有一個英文輸入狀態(tài)的空格。設(shè)置好后，在命令行里輸入：

hexo new page "你所要增加的菜單項名稱（要和你在menu中的填寫要匹配）"新建的頁面在博客根目錄下的source文件里，這時你就可以對新建的頁面自定義設(shè)計。




還有更多的進階個性化設(shè)置，如SEO、評論系統(tǒng)、個人頭像、博客分享、訂閱功能、High功能、404網(wǎng)頁設(shè)置等，可以參看：

主題配置 - NexT 使用文檔

第三方服務(wù)集成 - NexT 使用文檔

內(nèi)置標簽 - NexT 使用文

檔進階設(shè)定 - NexT 使用文檔

有很多人私信問我High功能特效如何設(shè)置，這里推薦一篇同是Next主題網(wǎng)站博主的文章：為Hexo Next主題添加哈林搖特效（五）

其他

終于寫到這里了，也算是基本圓滿完成了我的寫作初衷，總結(jié)自己的一些經(jīng)驗，分享一些有趣的東西，不過脖子也是僵硬的受不了。我知道很多人想要建立自己的個人網(wǎng)站卻一直沒有付諸行動，希望這篇文章能給你一點點靈感與想法，just do it。本文是windows平臺的搭建過程，其他平臺可以參看相關(guān)資料，也有很多其他優(yōu)秀的博客框架值得學習。如果有任何建議或想法、或疑問歡迎在評論區(qū)交流， 做好的網(wǎng)站不妨在評論區(qū)貼出網(wǎng)址，讓大家一起學習。




附錄

以下是評論區(qū)貼出網(wǎng)址的博客展示：

...Miss.j BlogDiary...

RILWEIC

Xin’s Notes

飛鳥與魚

無名博客

iTesting軟件測試知識分享

趙小源的個人博客

華嘉熠’s Blog

Cocoon

羅少雄's Blog

李四啊_

其他優(yōu)秀個人博客展示：

翁天信 · Dandy Weng chaoxuprim KENJI ENDO Moorez CodeSky 代碼之空 大江東去 UI Design Portfolio of JJ Ying JeyZhang jacklightChen | 得到的都是僥幸 edwardtoday Rafal Tomal - Web Designer and Genesis Developer Projects and Work 繪畫愛好者 萬世奇的博客 Guillermo Rauch

相關(guān)文章：

Hexo 從 GitHub 到阿里云