使用GitHub Pages + Hexo搭建博客

文章首發(fā)于:https://qinshijia.github.io/2018/08/09/build-blog/

記錄一下博客網(wǎng)站的搭建過程,使用 Github 提供的 GitHub Pages + Hexo 實現(xiàn)。GitHub Pages 是 GitHub 提供的靜態(tài)網(wǎng)頁服務(wù),文件存儲在 GitHub 倉庫中,可以結(jié)合 Jekyll、Hexo 等博客框架,快速的部署博客網(wǎng)站,同時還可以綁定個人域名,成為你的專屬網(wǎng)站。Hexo 是一個快速、簡潔且高效的博客框架,文檔清晰,插件、主題豐富,使用 Makedown 解析文章,生成靜態(tài)網(wǎng)頁。使用 GitHub Pages + Hexo 即可快速部署漂亮的博客,讓您專注博客內(nèi)容。

博客的搭建過程參考了官方教程和一些網(wǎng)上的教程,“不重復(fù)造輪子”,我不再詳細描寫具體的配置過程,而是直接貼出教程的鏈接,方便查閱。

搭建過程主要以下幾個步驟:

  • 建立 GitHub Pages 倉庫

  • 安裝、部署 Hexo

  • 配置主題

  • 安裝插件

  • 編寫博客

在貼出的教程鏈接中,會有交叉的地方,請注意辨別。

建立GitHub Pages倉庫

建立 GitHub Pages 倉庫,首先要有 GitHub 賬號,然后在 GitHub 上建立一個命名為 [你GitHub用戶名].github.io的私有倉庫。需要注意的是,倉庫的命名必須為你GitHub的用戶名,否則將不生效,就不能通過 https://[你GitHub用戶名].github.io 來訪問。

官方教程點擊這里。

建好倉庫之后,在倉庫里面上傳一個 index.html 文件,然后通過 https://[你GitHub用戶名].github.io 來訪問,可以看到index.html的內(nèi)容,就說明已經(jīng)建立好。上傳后直接訪問可能會出現(xiàn)404,等幾分鐘就好了。確認倉庫已經(jīng)建好,用來測試的 index.html 文件就可以刪除了。

在搭建博客、編寫博客的過程中,基本都用不上 Git 命令,但博客是基于 GitHub 的倉庫實現(xiàn)的,還是推薦了解一下 Git 命令,方便解決各種問題。這里推薦一個簡單清晰的git教程,點擊這里。

安裝、部署Hexo

Hexo 是基于 node.js 實現(xiàn)的,所以需要在自己電腦上安裝 node.js,Hexo 沒有可視化界面,需要使用命令行來完成各種功能,為了便于使用命令行,所以還要安裝 Fit Bash。有了 node.js 和 Git Bash 之后,就可以愉快的在上面敲命令行安裝、部署 Hexo 了。

安裝的方法官方教程里都有,點擊這里,官方教程比較全面,也會比較繁瑣。

還有一個比較簡單的教程,點擊這里,里面還會教你怎么新建 GitHub 倉庫,可以直接跳過,使用上面建好的就可以了。

到這里,部署 Hexo,并發(fā)布到 GitHub 倉庫之后,博客就已經(jīng)搭建完了。

不過,你可能還不太滿意,界面不漂亮、沒有站內(nèi)搜索、沒有RSS...

界面不漂亮?換個主題吧。

配置主題

好看的主題都在這里,點擊進去預(yù)覽,然后根據(jù)主題的配置方法配置即可。

我使用的主題是 maupassant,大道至簡,里面有詳細的配置方法,按需配置即可。

本地配置好之后,使用 Hexo 發(fā)布命令 hexo deploy,就可以在 https://[你GitHub用戶名].github.io 上看到效果。

安裝插件

想要站內(nèi)搜索,推薦這個插件:hexo-generator-search

想要RSS,推薦這個插件:hexo-generator-feed

還想安裝其他的?都在這里。

漂亮的博客網(wǎng)站已經(jīng)建好了,開始書寫內(nèi)容吧。

編寫博客

Hexo 是將 Markdown 文件解析為靜態(tài)網(wǎng)頁,所以博客也需要使用 Markdown 格式書寫。Markdown 的目標是實現(xiàn)「易讀易寫」,所以使用起來很簡單,這里是官方教程。

Markdown 的編輯器有很多,我使用的是 Atom,加上下面這些插件,即可方便的書寫博客。

  • markdown-writer:高亮顯 示Markdown

  • markdown-scroll-sync:編寫的時候按了 Ctrl + Shift + M,之后能同步滾動預(yù)覽

  • markdown-image-assistant:截圖之后直接按 Ctrl + V 粘貼

在 Atom 的 File -> settings -> install中搜索響應(yīng)插件然后安裝即可,使用方法在搜索結(jié)果界面點進去都有介紹。

好了,專注內(nèi)容吧。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容