Hexo+GitHub Pages搭建簡潔優雅的個人博客

大家好,我是 Day。上周突然意識到個人博客的重要性,不僅是寫技術相關、興趣相關亦或是簡單的碎碎念,有一個博客對于給簡歷增加亮點,引發自己思考甚至是提升表達能力都有很大的作用。大家通常都說網上寫博客有三個階段:

第一階段,剛接觸 Blog,覺得很新鮮,試著選擇一個免費空間來寫。

第二階段,發現免費空間限制太多,就自己購買域名和空間,搭建獨立博客。

第三階段,覺得獨立博客的管理太麻煩,最好在保留控制權的前提下,讓別人來管,自己只負責寫文章。

本文的目標是使用 Hexo 搭建一個自己的博客,并配上非常優雅的 NexT 主題,并把博客托管到 GitHub 上,實現傳說中的第三階段。


幾個概念

1. 什么是 Hexo,什么是 NexT 主題?
Hexo 是一個基于 Node.js 的靜態站點生成框架,快速、簡潔且高效。Hexo 主要使用 Markdown 解析文章,在幾秒內,即可利用靚麗的主題生成靜態網頁。NexT 是其一個非常簡潔優雅的主題。

2. 什么是 Markdown?
Markdown 用過一些簡單的標記,讓你的文字實現精致的排版,實現易讀易寫,無需考慮美化,專注文字本身。

3. 什么是 GitHub ?
GitHub 是基于 Git 技術的社交編程及代碼托管網站。你可以用它對你的項目進行版本控制,也可以瀏覽學習、參與開發別人的開源項目,甚至可以交友。

4. 如何把這些名詞串聯起來?

  • 安裝必要的軟件后,使用 Hexo 創建你的本地博客,生成靜態頁面;
  • 將靜態頁面托管到 GitHub 上,這樣別人就可以通過公開網址訪問你的博客了;
  • 下載 NexT 主題美化你的博客樣式。

使用 Hexo 創建本地博客

安裝 Git

  • Windows:下載后一路安裝 git-for-windows(國內下載點).
  • Mac:使用 Homebrew, MacPorts
    $ brew install git
    或下載 安裝程序 安裝。
  • Linux (Ubuntu, Debian):
    $ sudo apt-get install git-core
  • Linux (Fedora, Red Hat, CentOS):
    $ sudo yum install git-core

安裝 Node.js

  • Mac / Linux:使用 curl 或 wget 下載安裝
$ curl https://raw.github.com/creationix/nvm/master/install.sh | sh
$ wget -qO- https://raw.github.com/creationix/nvm/master/install.sh | sh

重啟終端并執行下列命令: $ nvm install stable

  • Windows:下載后一路安裝 Node.js

安裝 Hexo

先創建自己博客文件夾,比如 D:/hexo。
$ cd your-hexo-site # 切換到你的本地博客文件夾
(Windows 用戶直接在該文件夾下右鍵打開 Git Bash Here)
$ npm install -g hexo-cli

初始化自己的博客靜態網站

$ hexo init  # 生成一些必要的初始文件
$ npm install  # 安裝依賴包
$ npm install hexo-deployer-git --save  # 為了可以將網站部署到 GitHub 上
$ hexo g  # 生成靜態頁面
$ hexo s  # 打開測試服務器

瀏覽器打開網址:http://localhost:4000/,這就是最初的樣子。


配置 GitHub

  1. GitHub 官網 注冊一個賬號,記得注冊郵箱和用戶名,建議用戶名和郵箱的用戶名一樣,建議此時學習一些 Git 和 GitHub 的基本知識。

  2. 本地打開命令行或 Git Bash,配置本地需要連接的賬號:

$ git config --global user.name "yourname"  # 設置用戶名
$ git config --global user.email "your_email@youremail.com  # 設置郵箱"
  1. 配置 SSH,建立本地與 GitHub 賬號之間的連接密鑰:
$ ssh-keygen -t rsa -C your_email@youremail.com`
  1. 網頁登錄GitHub,點擊頭像 - Settings - SSH and GPG keys - New SSH key 上。p.s. Mac / Linux 下密鑰在 ~/.ssh/id_rsa.pub;Windows下密鑰在 C:\Users\用戶名.ssh\id_rsa.pub

  2. 驗證是否成功:
    $ ssh -T git@github.com

  3. GitHub 上新建倉庫,命名為 {your_name}.github.io,其中{your_name} 必須與你的用戶名一樣,這是 GitHub Pages 的特殊命名規范。倉庫的 Settings 里,下拉到 GitHub Pages 里,點擊 source 中 None ,修改其為 master 分支,也就是作為部署 GitHub Pages 的分支,然后點擊 save。


配置、美化本地博客

安裝 NexT 主題

  $ cd your-hexo-site # 切換到你的本地博客文件夾
  $ git clone https://github.com/iissnan/hexo-theme-next themes/next

配置站點_config.yml文件

以 D:/hexo 為例,【站點_config.yml】 即為 D:/hexo/_config.yml,如果你的 Windows 電腦里沒有代碼文本編輯器的話,這個后綴的文本應該是打不開的,我使用的是 Atom 編輯器,你也可以使用 notepad++,VS code等,其他操作系統默認都有 vi 之類的編輯器可以打開。

  • 找到 language 字段:可修改值為 zh-CN
  • 找到 theme 字段,修改其值為 next
  • 找到最后 deploy 字段,修改如下:
type: git
repository: https://github.com/{your_name}/{your_name}.github.io
branch: master

部署到 GitHub

$ hexo clean  # 刪除原來的靜態頁面
$ hexo g  # generate 生成新的靜態頁面
$ hexo d  # deploy 將頁面部署到 GitHub 上

訪問 https://{your_name}.github.io 就可以看到你的博客網站了!
一般部署之后需要等待一段時間博客網站才會刷新,如果你想一邊配置一邊看效果,可以再打開一個 Git Bash,輸入$ hexo s # 打開本地測試服務器,瀏覽器打開localhost:4000 即時查看變化。


自定義配置、寫文章

  1. 可根據 Hexo 文檔NexT 文檔,自由配置,主要要注意兩個文件,站點配置文件 (D:/hexo/_config.yml) 和主題配置文件(D:/hexo/thems/next/_config.ym) 。

  2. 寫文章的一般流程:
    $ hexo new post <title> # 在source_posts下生成 post 布局的<title>.md 文檔
    使用支持 Markdown 的編輯器打開寫文章
    文章寫完后,執行

$ hexo clean
$ hexo g
$ hexo d

發布更新到 GitHub Pages。

推薦閱讀我的下一篇文章:Hexo+NexT優化部署、個性化配置、美化全攻略

卓別林睡覺.jpg
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容