前言

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

什麼是Hexo ?

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

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

搭建步驟

• 獲得個人網站域名
• GitHub創建個人倉庫
• 安裝Git安裝Node.js
• 安裝Hexo
• 推送網站綁定域名
• 更換主題初識MarkDown語法
• 發佈文章
• 尋找圖床
• 個性化設置

獲得個人網站域名

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

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

GitHub創建個人倉庫

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

安裝Git

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

或者在菜單裡搜索Git Bash，設置user.name和user.email配置信息：

git config --global user.name "你的GitHub用戶名"
git config --global user.email "你的GitHub註冊郵箱"

生成ssh密鑰文件：

ssh-keygen -t rsa -C "你的GitHub註冊郵箱"

然後直接三個回車即可，默認不需要設置密碼

然後找到生成的.ssh的文件夾中的id_rsa.pub密鑰，將內容全部複製

打開GitHub_Settings_keys 頁面，新建new SSH Key

Title為標題，任意填即可，將剛剛複製的id_rsa.pub內容粘貼進去，最後點擊Add SSH key。

在Git Bash中檢測GitHub公鑰設置是否成功，輸入 ssh [email protected] ：

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

安裝Node.js

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

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

到這了，安裝Hexo的環境已經全部搭建完成。

安裝Hexo

Hexo就是我們的個人博客網站的框架， 這裡需要自己在電腦常裡創建一個文件夾，可以命名為Blog，Hexo框架與以後你自己發佈的網頁都在這個文件夾中。創建好後，進入文件夾中，按住shift鍵，右擊鼠標點擊命令行

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

npm install -g hexo-cli 

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

hexo init blog

注意，這裡的命令都是作用在剛剛創建的Blog文件夾中。

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

hexo new test_my_site
hexo g
hexo s

這些命令在後面作介紹，完成後，打開瀏覽器輸入地址：

localhost:4000

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

現在來介紹常用的Hexo 命令

npm install hexo -g #安裝Hexo

npm update hexo -g #升級

hexo init #初始化博客

命令簡寫

hexo n "我的博客" == hexo new "我的博客" #新建文章

hexo g == hexo generate #生成

hexo s == hexo server #啟動服務預覽

hexo d == hexo deploy #部署

hexo server #Hexo會監視文件變動並自動更新，無須重啟服務器

hexo server -s #靜態模式

hexo server -p 5000 #更改端口

hexo server -i 192.168.1.1 #自定義 IP

hexo clean #清除緩存，若是網頁正常情況下可以忽略這條命令

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

推送網站

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

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

下一步將我們的Hexo與GitHub關聯起來，打開站點的配置文件_config.yml，翻到最後修改為：

deploy:

type: git

repo: 這裡填入你之前在GitHub上創建倉庫的完整路徑，記得加上 .git

branch: master參考如下：

保存站點配置文件。

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

npm install hexo-deployer-git --save

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

hexo clean 
hexo g 
hexo d

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

你就會發現你的博客已經上線了，可以在網絡上被訪問了。

綁定域名

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

然後添加解析

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

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

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

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

hexo clean
hexo g
hexo d

這時候打開瀏覽器在地址欄輸入你的個性化域名將會直接進入你自己搭建的網站。

更換主題

如果你不喜歡Hexo默認的主題，可以更換不同的主題，主題傳送門：Themes 我自己使用的是Next主題，可以在blog目錄中的themes文件夾中查看你自己主題是什麼。現在把默認主題更改成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，你們可以自己試試看，選擇你自己喜歡的樣式（只需要把行首的#去除，#是註釋），選擇好後，再次部署網站，hexo g、hexo d，查看效果。選擇其他主題，按照上述過程即可實現。

初識Markdown語法

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

發佈文章

我們開始正式發佈上線博客文章，在命令行中輸入：

hexo n "博客名字"

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

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

尋找圖床

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

個性化設置

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

基本的有：

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

依次是網站標題、副標題、網站描述、作者、網站頭像外部鏈接、網站語言、時區等。

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

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

社交外鏈的設置，即在側欄展示你的個人社交網站信息。

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

進階個性化

• 添加網易雲音樂

打開網頁版的網易雲音樂，選擇喜歡的音樂，點擊生成外鏈播放器

複製外鏈的代碼

比如在側欄插入這首歌的音樂播放器，修改 blog\themes\next\layout\_macro的sidebar.swig文件，添加剛剛複製的外鏈代碼

重新生成、部署網頁，效果如下

• 設置背景

把你挑選的背景圖片命名為：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;是固定背景圖片。

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

• 增加側欄菜單條目

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

其中menu裡是配置菜單項對應的頁面位置（如：/love），menu_icons對應菜單項的圖標，這裡的圖標是來自於Font Awesome ，所以你需要在Font Awesome網站上找到你需要的icon，然後把該icon的名字寫在menu_icons對應菜單名後面，注意冒號有一個英文輸入狀態的空格。設置好後，在命令行裡輸入：

hexo new page "你所要增加的菜單項名稱（要和你在menu中的填寫要匹配）"

新建的頁面在博客根目錄下的source文件裡，這時你就可以對新建的頁面自定義設計。

還有更多的進階個性化設置，如SEO、評論系統、個人頭像、博客分享、訂閱功能、High功能、404網頁設置等

閱讀更多 JS加加網 的文章

關鍵字: Bash 個人 域名