介紹摘要:這是一篇有關如何使用Github Pages和Hexo搭建自己獨立博客的詳盡教程,裏麵介紹了如何使用和配置Hexo框架,如何將Hexo部署到自己的Github項目中,域名注冊,以及域名的綁定,還有我在搭建自己博客過程中所遇到的各種困難。入門門檻必須耐得住折騰。刻苦的學習精神和耐心。關於Github一步步教你搭建專屬於自己的炫酷博客一、Github的優點GitHub是基於git實現的代碼托管。git可能是目前最好用的版本控製係統了,非常受歡迎。GitHub可以免費使用,並且快速穩定。Github上麵的世界很精彩,用久了你的眼界會開闊很多。二、什麽是Github PagesGithub Pages可以被認為是用戶編寫的、托管在github上的靜態網頁。三、為什麽要使用Github Pages可以綁定你的域名(但暫時貌似隻能綁定一個)。簡單快捷,使用Github Pages可以為你提供一個免費的服務器,免去了自己搭建服務器和寫數據庫的麻煩。安裝Node.js在 Windows 環境下安裝 Node.js 非常簡單,僅須到官網下載安裝文件並執行即可完成安裝。一步步教你搭建專屬於自己的炫酷博客像我的是Windows 64位,直接下載安裝,無腦下一步就行了,不需要配置環境變量。安裝Git去Git官網根據你的電腦參數,下載對應版本。下載完成,通過在命令行輸入 git version 查看是否安裝成功,有輸出版本號說明安裝成功。鼠標郵件菜單裏就多了Git GUI Here和Git Bash Here兩個按鈕,一個是圖形界麵的Git操作,一個是命令行,我們選擇Git Bash Here。一步步教你搭建專屬於自己的炫酷博客一步步教你搭建專屬於自己的炫酷博客安裝教程:如何在windows下安裝GITGit入門教程:Pro Git(中文版)Git基本操作:一步步教你搭建專屬於自己的炫酷博客HexoHexo 是一個快速、簡潔且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在幾秒內,即可利用靚麗的主題生成靜態網頁。一、Hexo安裝桌麵右鍵鼠標,點擊Git Bash Here,輸入npm命令即可安裝npm install hexo-cli -gnpm install hexo-deployer-git --save第一句是安裝hexo,第二句是安裝hexo部署到git page的deployer,兩個都需要安裝。如下圖即安裝完成。一步步教你搭建專屬於自己的炫酷博客二、Hexo初始化配置創建Hexo文件夾安裝完成後,根據自己喜好建立目錄(如F:BlogHexo),直接進入F:BlogHexo文件夾下右鍵鼠標,點擊Git Bash Here,進入Git命令框,執行以下操作。$ hexo init安裝 Hexo 完成後,Hexo 將會在指定文件夾中新建所需要的文件。Hexo文件夾下的目錄如下:一步步教你搭建專屬於自己的炫酷博客本地查看效果執行下麵語句,執行完即可登錄localhost:4000查看效果hexo generatehexo server登錄localhost:4000,即可看到本地的效果如下:一步步教你搭建專屬於自己的炫酷博客將博客部署到Github Pages上那麽現在本地的博客已經搭建起來了,但是我們隻可以通過本地連接查看我們的博客。那麽我們現在需要做的就是把本地的博客發布到服務器上,讓別人也可以連接我們的博客,而Github Pages就幫我完成了這件事情。但是Github Pages的代碼就是寄存在Github上麵的。那麽接下來我們需要在Github上麵創建一個新的項目。一、注冊Github賬戶訪問Github首頁點擊右上角的 Sign Up,注冊自己的賬戶二、創建項目代碼庫注冊完登陸後,我們就創建一個我們自己的Github Pages項目。點擊New repository。創建要點如下:一步步教你搭建專屬於自己的炫酷博客三、配置SSH密鑰配置Github的SSH密鑰可以讓本地git項目與遠程的github建立聯係,讓我們在本地寫了代碼之後直接通過git操作就可以實現本地代碼庫與Github代碼庫同步。操作如下:第一步、看看是否存在SSH密鑰(keys)首先,我們需要看看是否看看本機是否存在SSH keys,打開Git Bash,並運行:$ cd ~/. ssh 檢查你本機用戶home目錄下是否存在.ssh目錄如果,不存在此目錄,則進行第二步操作,否則,你本機已經存在ssh公鑰和私鑰,可以略過第二步,直接進入第三步操作。第二步、創建一對新的SSH密鑰(keys)$ssh-keygen -t rsa -C "your_email@example.com"#這將按照你提供的郵箱地址,創建一對密鑰Generating public/private rsa key pair.Enter file in which to save the key (/c/Users/you/.ssh/id_rsa): [Press enter]直接回車,則將密鑰按默認文件進行存儲。此時也可以輸入特定的文件名,比如/c/Users/you/.ssh/github_rsa接著,根據提示,你需要輸入密碼和確認密碼(說到這裏,如果你很放心,其實可以不用密碼,就是到輸密碼的地方,都直接回車,所以每次push就隻管回車就行了。所謂的最安全的密碼,就是沒有密碼 哈哈)。相關提示如下:Enter passphrase (empty for no passphrase): [Type a passphrase]Enter same passphrase again: [Type passphrase again]輸入完成之後,屏幕會顯示如下信息:Your identification has been saved in /c/Users/you/.ssh/id_rsa.Your public key has been saved in /c/Users/you/.ssh/id_rsa.pub.The key fingerprint is:01:0f:f4:3b:ca:85:d6:17:a1:7d:f0:68:9d:f0:a2:db your_email@example.com第三步、在GitHub賬戶中添加你的公鑰運行如下命令,將公鑰的內容複製到係統粘貼板(clipboard)中。clip < ~/.ssh/id_rsa.pub接著:登陸GitHub,進入你的Account Settings.一步步教你搭建專屬於自己的炫酷博客2.選擇SSH Keys一步步教你搭建專屬於自己的炫酷博客3.粘貼密鑰,添加即可一步步教你搭建專屬於自己的炫酷博客第四步、測試可以輸入下麵的命令,看看設置是否成功,git@github.com的部分不要修改:$ ssh -T git@github.com如果是下麵的反饋:The authenticity of host &#39;github.com (207.97.227.239)&#39; can&#39;t be established.RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48.Are you sure you want to continue connecting (yes/no)?不要緊張,輸入yes就好,然後會看到:一步步教你搭建專屬於自己的炫酷博客第五步、設置用戶信息現在你已經可以通過SSH鏈接到GitHub了,還有一些個人信息需要完善的。Git會根據用戶的名字和郵箱來記錄提交。GitHub也是用這些信息來做權限的處理,輸入下麵的代碼進行個人信息的設置,把名稱和郵箱替換成你自己的,名字根據自己的喜好自己取,而不是GitHub的昵稱。$ git config --global user.name "ryanlijianchang"//用戶名$ git config --global user.email "liji.anchang@163.com"//填寫自己的郵箱第六步、SSH Key配置成功本機已成功連接到github。四、將本地的Hexo文件更新到Github的庫中第一步、登錄Github打開自己的項目 username.github.io一步步教你搭建專屬於自己的炫酷博客第二步、打開之後,點擊SSH,選擇SSH類型地址一步步教你搭建專屬於自己的炫酷博客第三步、複製地址一步步教你搭建專屬於自己的炫酷博客第四步、打開你一開始創建的Hexo文件夾(如F:BlogHexo),用記事本打開剛文件夾下的_config.yml文件第五步、在配置文件裏作如下修改,保存一步步教你搭建專屬於自己的炫酷博客第六步、在Hexo文件夾下執行:hexo ghexo d或者直接執行hexo g -d執行完之後會讓你輸入github的賬號和密碼,輸入完後就可以登錄我們自己的部署在Github Pages服務器上的博客了。對應的地址是 username.github.io(我的是:ryanlijianchang.github.io)。假如這時候,報錯 ERROR Deployer not found: git,那麽就是你的deployer沒有安裝成功,你需要執行如下命令再安裝一次:npm install hexo-deployer-git --save這樣,你再執行hexo g -d,你的博客就部署到Github上了。第七步、在瀏覽器上輸入自己的主頁地址在瀏覽器上輸入Github Pager為我們生成的外鏈(例如我的是:ryanlijianchang.github.io/,而你的隻需要把你的github用戶名替換掉這個鏈接中的ryanlijianchang,因為我的用戶名是這個,那麽你自己的專屬博客地址就是:https://[您的用戶名].github.io/)即可看到自己的博客了。當然,每一個人都可以通過這個地址訪問到你的博客了。一步步教你搭建專屬於自己的炫酷博客美化自己博客那麽現在我們的博客已經掛在了Github服務器上麵,別人已經可以通過地址來登陸我們的博客了,但是我們這時就有了新的需求,就是自己的博客並不好看,那怎麽辦的?這很簡單,要知道很多前端開發者在Hexo框架下開發了很多的主題給我們使用,我們隻需要把他們的主題克隆過來,然後通過修改配置文件即可達到我們所需要的效果。那麽我們應該怎麽修改呢?一、進入Hexo的官網主題專欄一步步教你搭建專屬於自己的炫酷博客二、挑選我們喜歡的主題可以看到有很多主題給我們選,我們隻要選擇喜歡的主題點擊進去,然後進入到它的github地址,我們隻要把這個地址複製下來(例如我是選擇:hexo-theme-next這個主題)一步步教你搭建專屬於自己的炫酷博客三、克隆主題再打開Hexo文件夾下的themes目錄(F:Bloghexothemes),右鍵Git Bash,在命令行輸入:git clone https://github.com/iissnan/hexo-theme-next(此處地址替換成你需要使用的主題的地址) 下載中,等待下載完成:一步步教你搭建專屬於自己的炫酷博客四、修改Hexo配置文件下載完成後,打開Hexo文件夾下的配置文件_config.yml修改參數為:theme: hexo-theme-next五、部署主題,本地查看效果返回Hexo目錄,右鍵Git Bash,輸入hexo ghexo s打開瀏覽器,輸入 http://localhost:4000/ 即可看見我們的主題已經更換了。一步步教你搭建專屬於自己的炫酷博客六、如果效果滿意,將它部署到Github上打開Hexo文件夾,右鍵Git Bash,輸入hexo clean (必須要,不然有時因為緩存問題,服務器更新不了主題)hexo g -d七、打開自己的主頁,即可看到修改後的效果更多修改效果請查看對應主題的說明文檔,點擊此查看本主題(Next)對應的說明文檔。在博客寫文章一、用hexo發表新文章$ hexo n "文章標題" 其中 我的家 為文章標題,執行命令 hexo n “我的家” 後,會在項目 Hexosource_posts 中生成 我的家.md文件,用編輯器打開編寫即可。當然,也可以直接在Hexosource_posts中新建一個md文件,我就是這麽做的。寫完後,推送到服務器上,執行以下命令即可在我們的站點看到新的文章。$ hexo g #生成$ hexo d #部署 # 可與hexo g合並為 hexo d -g二、用Markdown寫文章我們注意到在 Hexosource_posts 文件夾下存放著我們的文章,它們的格式都是以.md格式結尾的,沒錯,Hexo也是支持Markdown語法的,所以當我們需要寫具有格式化的文章時,我們可以使用支持Markdown語法的編輯器進行文章編譯,然後保存文件到 Hexosource_posts 文件夾下即可。一步步教你搭建專屬於自己的炫酷博客複製進去之後,隻要執行$ hexo d -g 推送到我們的Github倉庫即可。那麽什麽是Markdown?Markdown 是一種輕量級的「標記語言」,它的優點很多,目前也被越來越多的寫作愛好者,撰稿者廣泛使用。看到這裏請不要被「標記」、「語言」所迷惑,Markdown 的語法十分簡單。常用的標記符號也不超過十個,這種相對於更為複雜的HTML 標記語言來說,Markdown 可謂是十分輕量的,學習成本也不需要太多,且一旦熟悉這種語法規則,會有一勞永逸的效果。Markdown有什麽優點?專注你的文字內容而不是排版樣式。輕鬆的導出 HTML、PDF 和本身的 .md 文件。純文本內容,兼容所有的文本編輯器與字處理軟件。可讀,直觀。適合所有人的寫作語言。我該用什麽工具?Windows下可以使用 MarkdownPad2。在 Mac OS X 上,我建議你用 Mou 這款免費且十分好用的 Markdown 編輯器。Web 端上,我強烈推薦 簡書 這款產品。關於Markdown的更多資料可以查看如下:認識與入門 MarkdownMarkdown入門指南將自己的域名關聯到Github Pages上很多朋友創建了自己的博客之後會選擇買一個屬於自己的域名,然後將自己域名綁定到自己的Github Pages博客上,其實這也並不難,隻要你有個域名。一、購買域名如果你不是很有錢,在阿裏雲上,你隻要幾塊錢就可以買到一個域名。選擇你喜歡的域名,然後購買即可。一步步教你搭建專屬於自己的炫酷博客二、配置CNAME文件在 hexosource 文件夾下創建文件 CNAME (新建記事本文件命名CNAME,然後打開)內容為你的域名,例如我的域名是:ryane.top一步步教你搭建專屬於自己的炫酷博客在Hexo文件夾提交hexo g -d三、修改DNS的DNS1.如果你是在阿裏雲購買域名的話,請登錄阿裏雲網站。打開個人中心,點擊域名一步步教你搭建專屬於自己的炫酷博客2.選擇管理一步步教你搭建專屬於自己的炫酷博客3.修改DNS為f1g1ns2.dnspod.net f1g1ns1.dnspod.net 一步步教你搭建專屬於自己的炫酷博客四、域名解析打開DNSPOD,注冊一個賬戶點擊添加域名,把你的域名添加進去,如無意外,添加完之後就是以下這個狀態此時點擊添加記錄,添加兩個記錄,一個主機記錄為@, 一個為www,而記錄值都是填同一個,填你的博客主頁對應的ip,添加完後如下。但是如何獲取ip值呢?打開運行,輸入cmd,打開命令窗口輸入 ping 主頁地址 , 紅色部分即為你的ip值一步步教你搭建專屬於自己的炫酷博客將IP輸入過去,然後會提示你到域名注冊的地方修改DNS。等待生效,最遲72小時生效。即可通過你的域名瀏覽你的博客主頁。

文章发布:2025-07-05 07:57:44

本文链接: http://0l5td.pnvn9.com/4r90a8/0918.html