如何搭建個人博客 ?Hexo + GitHub 是一個不錯的選擇

Hexo + Github 搭建的個人博客: http://woyaodafu.com/

什么是 Hexo ?

Hexo 是一個快速、簡潔且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在幾秒內(nèi),即可利用靚麗的主題生成靜態(tài)網(wǎng)頁。

什么是 GitHub ?

GitHub 是通過 Git 進行版本控制的軟件源代碼托管服務(wù),由 GitHub 公司(曾稱 Logical Awesome)的開發(fā)者 Chris Wanstrath、PJ Hyett 和 Tom Preston-Werner 使用 Ruby on Rails 編寫而成。(維基百科)

準備工作

檢查電腦是否安裝了 Git ?在 Dos 窗口下,輸入以下命令并執(zhí)行 :

git --version

檢查電腦是否安裝了 Node.js ? 在 Dos 窗口下,輸入以下命令并執(zhí)行 :

node -v

注 :
1、Windows + R -> cmd -> 進入 Dos 窗口
2、已經(jīng)安裝過該軟件,會顯示對應(yīng)的安裝軟件版本,沒有安裝會提示 "xx" 不是內(nèi)部命令或外部命令。

安裝 Node.js

下載 Node.js

安裝 Git

下載 Git

Git 安裝成功后,點擊鼠標右鍵會發(fā)發(fā)現(xiàn)多了個兩個選項,如圖 :

image

安裝 Hexo

$ npm install hexo-cli -g 
$ hexo init blog
$ cd blog
$ npm install
$ hexo server

點擊鼠標右鍵,點擊 Git Bash Here,然后依次輸入并執(zhí)行上面的代碼。第一步是安裝 hexo 擴展插件。

第二步是創(chuàng)建一個為 blog 的文件夾,把 hexo 相應(yīng)的代碼下載到該文件中下。此時目錄情況如下 :

image
node_modules  npm 文件緩存目錄
scaffolds     文夾件下存放的是文章、頁面模版
scource       文夾件下存放的是我們的資源文件
themes        文件下存放的是我們的主題文件
.gitignore    git 忽略文件,設(shè)置提交文件時,哪些文件不提交
_config.yml   站點配置文件
package.json  站點版本,站點依賴文件
yarn.lock     yarn.lock 文件由 Yarn 自動創(chuàng)建,并且完全通過 Yarn 進行操作。

第三步是進入 blog 文件夾,第四步是安裝 hexo 相關(guān)的代碼。

第五步是啟動本地服務(wù),啟動完成后,如圖 :

image

在瀏覽器輸入 http://localhost:4000/ 就可以訪問剛剛創(chuàng)建的博客了。如下圖 :

image

現(xiàn)在本地我們已經(jīng)可以訪問了,我要其他人也能訪問我的博客怎么辦呢 ?下面我們就要用到 GitHub 來解決這個問題,還不知道 GitHub 的同學,得抓緊了解一下。

注 : 當我們需要關(guān)閉本地服務(wù)的時候,可以在通過在 Git Bash 窗口輸入 Ctrl + C 關(guān)閉服務(wù)。

hexo 常用命令 :

$ hexo generate (hexo g) 生成靜態(tài)文件
$ hexo server (hexo s) 啟動本地服務(wù)
$ hexo deploy (hexo d) 提交到遠程倉庫
$ hexo new page "xx"(hexo n page) 創(chuàng)建頁面 
$ hexo new "xx" (hexo n "") 創(chuàng)建文章
$ hexo d -g 生成靜態(tài)并提交到遠程倉庫
$ hexo s -g 生成靜態(tài)文件并啟動本地預覽
$ hexo clean 清除本地 public 文件

創(chuàng)建 GitHub 賬號并添加一個遠程倉庫

GitHub

GitHub 注冊 :

image

注冊成功后,登錄賬號,點擊右側(cè) "+" 號,然后點擊 New repository 添加倉庫,如圖 :

image

完成上述操作后,點擊 Create repository 創(chuàng)建倉庫。

倉庫創(chuàng)建成功后,如圖 :

image

這里有兩個地址,一個是 Https,一個是 SSH 。Https 每次提交都需要輸入用戶名和密碼,SSH 只要添加了 SSH key 值,以后提交不需要輸入用戶名和密碼。

注 : 這里創(chuàng)建的倉庫名稱必須為 username.github.io,username 替換成你的 github 用戶名,每個賬戶有且只有一個倉庫用來存放網(wǎng)頁靜態(tài)文件,這里名稱是固定的。當創(chuàng)建其他倉庫的時候,倉庫名稱可以自定義。

GitHub 添加 SSH key

檢查本地是否有 SSH key

$ cd ~/.ssh
$ ls

第一步是進入 .ssh 文件夾,第二步是顯示 .ssh 文件下的文件夾及文件。如果 SSH key 存在,就會顯示 id_rsa、id_rsa.pub、know_hosts 三個文件 。

image

沒有也沒關(guān)系,下面我們就來創(chuàng)建 SSH key

$ ssh-keygen -t rsa -C "你的郵箱"

把 "你的郵箱" 替換成你真實的郵箱,然后點擊回車。接著會讓你輸入文件名,點擊回車直接忽略,接著會讓輸入兩次密碼,點擊兩次回車,直接設(shè)置為空,不用輸入密碼 。

創(chuàng)建成功后,可以通過如下命令拷貝 SSH key 的內(nèi)容 :

$ clip < ~/.ssh/id_rsa.pub"

現(xiàn)在已拷貝了 SSH key 的內(nèi)容,那么 GitHub 如何添加 SSH key 呢 ?點擊右上角頭像,然后點擊Settings 。如圖 :

image

然后點擊 New SSH key,如圖 :

image

把之前拷貝的內(nèi)容粘貼到 key 里面,然后點擊 Add SSH key,如圖 :

image

怎么去驗證是否已經(jīng)添加成功了呢 ?通過如下命令 :

$ ssh -T git@github.com

驗證成功,如圖 :

image

現(xiàn)在這樣就成了 ?還差一步,現(xiàn)在我們需要去設(shè)置 hexo 配置文件 _config.yml。

修改主題及網(wǎng)站相關(guān)設(shè)置

修改站點配置文件(_config.yml)

注 :
對應(yīng)的目錄 :blog/_config.yml/,blog 為 hexo init 初始化文件夾的名稱,替換成你自己初始化文件夾的名稱。

修改 depoly :

deploy:
  type: git 
  repo: git@github.com:username.github.io.git
  branch: master
image

注 :如上圖所示,找到 GitHub 上對應(yīng)的遠程倉庫地址,點擊右側(cè)復制按鈕,把 "git@github.com:username.github.io.git" 替換成剛剛復制的遠程倉庫地址。

修改 site 相關(guān)信息 :

title: xx
subtitle:     
description:
keywords:
author: xx
language: zh-Hans
timezone:

注 :網(wǎng)站名稱(title),作者 (author),語言 (language)

不喜歡現(xiàn)在的主題,想要換一個主題 ? 我怎么知道有哪些主題呢 ?下面我們就去尋找自己喜歡的主題。

修改網(wǎng)站主題

在 GitHub 首頁搜索 hexo theme,通過右邊的過濾條件來篩選搜索的結(jié)果。如圖 :

image

我是按照 star 數(shù)進行篩選的,就以 hexo-theme-next 為例,點擊 hexo-theme-next,進入項目里面查看 README.md 文件。

image

通過 git 方式下載項目,命令如下 :

$ cd themes
$ git clone https://github.com/iissnan/hexo-theme-next next

第一部步是進入到 themes 下面, 第二步是拷貝遠程主題到該目錄下。下載完成后,我的博客 themes 下就多了一個 next 文件夾。如圖 :

image

修改 theme :

theme : next

注 :把默認主題 landscape 切換成 next。

修改主題配置文件(_config.yml)

注 :
對應(yīng)的目錄 :blog/themes/next/_config.yml/,blog 為 hexo init 初始化文件夾的名稱,替換成你自己初始化文件夾的名稱。

修改 menu :

menu:
  home: / || home
  tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive
  about: /about/ || user
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

默認 menu 菜單顯示 home、archives,根據(jù)自己的需要去掉注釋。

修改 Schemes :

scheme: Muse
#scheme: Mist
#scheme: Pisces
#scheme: Gemini

next 主題對應(yīng)的有四個風格,Muse、Mist、Pisces、Gemini,默認為 Muse。

編輯主題配置文件,啟用自動摘錄 :

auto_excerpt:
  enable: true
  length: 150

注 :修改 auto_excerpt 為 true,允許自動摘錄,顯示部分,點擊閱讀全文。

創(chuàng)建標簽云頁面

創(chuàng)建分類頁面

創(chuàng)建 "關(guān)于我" 頁面

添加搜索功能

LocalSearch搜索

安裝 hexo-generator-searchdb,命令如下 :

$ npm install hexo-generator-searchdb --save

編輯主題配置文件,啟用本地搜索功能 :

# Local search
local_search:
  enable: true

注 :設(shè)置 local_search 為 true。

添加網(wǎng)站訪問量統(tǒng)計功能

我使用的是 不蒜子 統(tǒng)計

image

在主題 footer.swig 底部添加如下內(nèi)容 :

 <script async src="http://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
   <span id="busuanzi_container_site_pv">本站總訪問量<spanid="busuanzi_value_site_pv"></span>次</span>

統(tǒng)計顯示風格也可以自定義,我的統(tǒng)計顯示風格代碼如下 :

<div class="busuanzi-count">
  <script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    <span class="site-uv">
      <i class="fa fa-user"></i>
      <span class="busuanzi-value" id="busuanzi_value_site_uv"></span>
    </span>
  
    <span class="site-pv">
      <i class="fa fa-eye"></i>
      <span class="busuanzi-value" id="busuanzi_value_site_pv"></span>
    </span>
    </div>
image

注 : 在主題 footer.swig 底部添加上述代碼。

到此,也快接近尾聲了,再堅持一下,把這段路走完。

生成靜態(tài)文件

$ hexo g

提交到遠程倉庫

$ hexo d

這下心想終于快弄完了,結(jié)果還給我搞個錯。在提交的時候出現(xiàn)了如下錯誤 :ERROR Deployer not fount: git

image

這里需要先安裝一個擴展插件 :

$ npm install hexo-deployer-git --save

安裝完成后,執(zhí)行 hexo d,執(zhí)行完成后,就可以在 github 上看見我們提交的靜態(tài)文件了,也可以通過 http://username.github.io 訪問我們的博客了,username 改成你的github 用戶名。

更多

Hexo

hexo-theme-next Wiki

參考鏈接

手把手教你使用Hexo + Github Pages搭建個人獨立博客

github設(shè)置添加SSH

Hexo博客添加搜索功能

想要搭建屬于自己的博客,就 「立刻」、「馬上」行動 。

最后編輯于
?著作權(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)容