當前位置:
首頁 > 知識 > 極簡四步走:快速搭建極客大牛都在用的獨立博客

極簡四步走:快速搭建極客大牛都在用的獨立博客

極客世界,基本上人人都有一方屬於自己的小小天地,他們在這裡發布作品、分享思考。甚至於,認識他們的最好方法不是見他們,而是先讀他們的博客。這次要介紹的便是:備受極客們喜愛的獨立博客搭建方法。

本文將基於 Mac OS 系統為大家介紹如何利用 GitHub+Hexo 搭建一款輕便的獨立博客主頁,現在就開始吧!


第一步 Hexo 搭建本地靜態網頁

1.安裝 Node.js——配置安裝 Hexo 的環境

Node.js 下載地址:

https://link.zhihu.com/?target=https%3A//nodejs.org/en/download/

注意安裝 Node.js 會包含環境變數及 npm 的安裝。安裝後,檢測 Node.js 是否安裝成功,在命令行中輸入 node -v ,回車後出現版本號即安裝成功。

檢測 npm 是否安裝成功,在命令行中輸入 npm -v ,回車後出現版本號即安裝成功。

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

2.安裝 Hexo——Hexo 是我們的個人博客的本地框架

(1)使用 npm 命令安裝 Hexo 客戶端,輸入:

這個安裝時間較長耐心等待。

(2)安裝完成後需要自行在電腦里創建一個文件夾,可以命名為 myBlog(下文都以該文件夾名進行操作說明),Hexo 框架和發布的網頁文件都在這個文件夾中。

(3)由於之後的配置需要在 myBlog 文件夾下進行,需要用 cd 命令打開你剛創建的文件夾 myBlog。

比如:我創建的 myBlog 文件夾位於:local/user/zoe/myBlog,zoe 是我的本機用戶名,由於我的終端默認是在 zoe 文件夾下進行操作,所以我只要輸入 cd myBlog 進行即可進入 zoe 下的 myBlog 文件夾。

(4)進入 myBlog 文件夾後初始化博客,輸入:

(5)檢查網站雛形

輸入以下命令:hexo g 用於生成 public 靜態資源;hexo s 用於啟動本地伺服器(註:g=generate; s=server)

執行上述兩條命令後,在瀏覽器輸入http://localhost:4000,即可查看通過 hexo 部署的本地靜態網頁效果。

到這裡,本地網頁搭建完成。(文末附有 hexo 的常用命令)


第二步 關聯 GitHub 發布網頁

為了讓更多人看到你的網頁,需要通過 GitHub 將你的網頁發布到網路上。

1.在 GitHub 上創建一個新倉庫

(1)如果沒有 GitHub 賬號可以去官網註冊,註冊後創建一個名為 的新倉庫,是你的 GitHub 的用戶名,這個規則不能變。

(2)通過 SSH 連接到 GitHub

(https://help.github.com/articles/connecting-to-github-with-ssh/)點此鏈接,查看官方操作說明。添加 ssh keys 之後,就可以使用 git 為後綴的倉庫地址,並且本地發布網頁時無需輸入用戶名和密碼。

2.關聯 Hexo 到 GitHub

打開 myBlog 下的配置文件 _config.yml,拉到文件最後,按下面內容進行修改:

注意:

考慮到大家不止一個 GitHub 賬號,「repo」此處如果不這樣處理,而去使用 https 的倉庫地址的話,接下來部署時往往會出現不讓輸入 GitHub 用戶名和密碼的問題!

每個關鍵字的後面都有個空格

到這裡,這樣就將 Hexo 關聯到了 Github。

3.新建文章並發布

(1)將發布到網頁上的文章以 文件形式存儲在 目錄下。文件即 markdown 文件,詳細在網上自行查詢,非常簡潔好用的文本格式。

(2)輸入以下命令將本地靜態網頁發布到網路

hexo d 用於將 public 文件夾的資源推送到倉庫上(註:d=deploy)

執行上述兩條命令後,在瀏覽器輸入 即可看見自己的博客頁面。

註: 用於清除緩存 db.json 和 public 文件,在刪改文章後需要先清除緩存。

到這裡,你就成功利用 Hexo+GitHub 搭建了你的個人博客並發布了第一篇博文。

第三步和第四步是對頁面主題的更改以及關聯個性化域名(需要花錢購買),如無需要,可以不用往後看了。

你現在已經可以在網站上發布你的文章,並給你的朋友甩過去博客鏈接了,試試吧!


第三步 更改博客頁面主題

默認的主題不太好看,推薦點贊最高的 next 主題。

1.在博客根目錄 myBlog 下執行:

2.執行

把 CNAME 文件拷貝過來。然後將博客根目錄下的 下的 theme 的名稱 修改為 即可。

3.執行

到這裡,就可以看到 next 主題效果了!

第四步 綁定個性域名

1.獲取域名

福利時刻:GitHub Education 有一個面向學生的教育包,擁有學生郵箱和學生證即可申請註冊。申請成功後可以在這個學生包裡面找到 NameCheap 網站提供的以結尾的頂級域名,可以免費使用一年!(如果沒有學生郵箱可以直接在 NameCheap 等域名網站購買域名。)

拿到 GitHub 的免費包之後,打開免費包找到 NameCheap 那一項,點擊綁定 NameCheap 和申請教育包的 GitHub 賬號,之後去 NameCheap 用該郵箱註冊然後就可以免費領取你的域名啦!

領取域名過程中,會遇到一個三選一的選項。大致意思是選擇將該域名綁定 GitHub Pages 或者「一個圖片類型網頁」或者是「Ghost 建立的網站」。我當時選擇的是 GitHub Pages,這也為後來將域名綁定到我搭建博客的 GitHub 倉庫埋下了一個坑。之後細說。

2.解析域名

如果之前領取域名時選擇了綁定 GitHub Pages 那麼前兩條記錄應該都已經有了,添加第三條記錄即可。注意將網址換成你的

註:192.30.252.153/192.30.252.154 是 GitHub 的伺服器地址

(2)登錄 GitHub,進入之前創建的倉庫,點擊 settings,設置 Custom domain,輸入你的域名(圖中域名為我搭建博客時參考過的博客文章地址)。

:由於之前領取域名時,我選擇了將該域名綁定 GitHub Pages,如果你也是這麼選擇的,此時你的域名已經綁定了一個 GitHub Pages 頁面,所以你需要先登錄用學生郵箱註冊的 GitHub 賬號,在倉庫中找到一個 CNAME 的文件刪除,之後才能進行第二步操作,否則會提示你已經綁定了 GitHub Pages。

(3)進入本地博客文件夾 ,在 myBlog/source 目錄下,創建一個記事本文件,輸入你的域名。

只要寫進你自己的域名即可。如果帶有 ,那麼以後訪問的時候必須帶有 完整的域名才可以訪問,但如果不帶有 ,以後訪問的時候帶不帶 都可以訪問。

建議不要輸入帶有 的域名。

到這裡,就完成了綁定域名,去瀏覽器輸入你的域名試試吧!(搭建好了歡迎在文末留下你的博客地址哦!

開智學堂主編,阿知編輯

未來已來,只是分布不均

入門信息分析 打破信息迷局

喜歡這篇文章嗎?立刻分享出去讓更多人知道吧!

本站內容充實豐富,博大精深,小編精選每日熱門資訊,隨時更新,點擊「搶先收到最新資訊」瀏覽吧!


請您繼續閱讀更多來自 開智微播 的精彩文章:

機場太吵被告上法庭,拆不拆?跨學科思維給你第三種答案
時間管理越做越累?也許你該試試心流管理

TAG:開智微播 |