GitHub+Hexo 搭建我的網站詳細教程

時間 2019-11-13

標籤 github+hexo github hexo 搭建我的網站詳細教程欄目 Git 简体版

原文原文鏈接

GitHub+Hexo 搭建我的網站詳細教程

前言：

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

你見過的最棒的我的博客界面是什麼樣的？node

什麼是Hexo ?

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

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

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

搭建步驟：

得到我的網站域名
GitHub建立我的倉庫
安裝Git
安裝Node.js
安裝Hexo
推送網站
綁定域名
更換主題
初識MarkDown語法
發佈文章
尋找圖牀
個性化設置
其餘
附錄

得到我的網站域名canvas

域名是網站的入口，也是網站的第一印象，好比餓了麼的官網的域名是：https://www.ele.me/ ，非常巧妙。常見的有com,cn,net,org等後綴，也有小衆的xyz,me,io等後綴，根據你本身的喜愛，選擇不一樣的後綴，好比我選擇就是常見的com後綴。不少小衆奇特的後綴在大陸是沒辦法備案的，網站也就沒法上線。然而使用GitHub託管咱們的網站，徹底不須要備案，由於託管咱們的網站內容的服務器在美國，並且在國內備案流程也比較繁雜，時間須要一週左右。windows

申請域名的地方有不少，這裏推薦阿里雲：阿里雲-爲了沒法計算的價值申請入口：域名註冊購買域名這也是咱們整個搭建過程當中唯一一個須要花錢的地方。若是你已經有了空閒域名就無需購買，直接使用便可。瀏覽器

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 git@github.com ：

如上則說明成功。這裏之因此設置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網頁設置等，能夠參看：

有不少人私信問我High功能特效如何設置，這裏推薦一篇同是Next主題網站博主的文章：爲Hexo Next主題添加哈林搖特效（五）

其餘

終於寫到這裏了，也算是基本圓滿完成了個人寫做初衷，總結本身的一些經驗，分享一些有趣的東西，不過脖子也是僵硬的受不了。我知道不少人想要創建本身的我的網站卻一直沒有付諸行動，但願這篇文章能給你一點點靈感與想法，just do it。本文是windows平臺的搭建過程，其餘平臺能夠參看相關資料，也有不少其餘優秀的博客框架值得學習。若是有任何建議或想法、或疑問歡迎在評論區交流，作好的網站不妨在評論區貼出網址，讓你們一塊兒學習。