個人部落格搭建 Github+Hexo, 主題: Butterfly/Next/Melody

個人部落格搭建教程 Github+Hexo, 主題: Butterfly /Next /Melody

• • 1.前言&準備工作
  • • 1.1 前言
    • 1.2 準備工作
  • 2. 搭建github部落格
  • • 建立名為 “使用者名.github.io”的倉庫
  • 3. 配置SSH
  • • 3.1 擷取并配置ssh key
    • 3.2 測試ssh key是否配置成功
    • 3.3 本地配置
  • 4. Hexo
  • • 4.1 簡介
    • 4.2 安裝及部落格初始化
    • 4.3 部落客題
  • 5. 上傳
  • • 5.1 上傳之前的配置
    • 5.3 上傳！
  • 6. 結束語

1.前言&準備工作

1.1 前言

沒有技術波的程式員不是好産品經理。雖然話是這麼說，但我認為個人部落格的使用者不應該局限于職業，每個人都會需要一個空間來記錄生活工作中的問題吧，是以歡迎大家閱讀本文。

本文提供的安裝方法簡單，搭建過程小白也可以，大家要有信心！

基于GitHub的優點：免費！

1.2 準備工作

1. 擁有一個Github賬号。

   如果沒有那麼點選這裡即可注冊.

2. 安裝node.js，

   如果你在國内不出意外你會發現官網龜速下載下傳，那麼請點選這個！光速下載下傳你值得擁有

3. 下載下傳安裝git for windows同上。
4. 了解git，npm相關基礎知識

2. 搭建github部落格

建立名為 “使用者名.github.io”的倉庫

比如說，如果你的github使用者名是test，那麼你就建立

test.github.io

的倉庫，一定要這樣哦。（在github個人界面點選下圖右上角的綠色按鈕的New就可以建立倉庫啦~）

将來你的網站通路位址就是 http://test.github.io 了，是不是很友善？

建立成功後，預設會在你這個倉庫裡生成一些示例頁面，以後你的網站所有代碼都是放在這個倉庫裡啦~ ！（下圖就是我建立好的部落格倉庫啦）

3. 配置SSH

3.1 擷取并配置ssh key

簡單了解一下什麼是ssh呢？ssh相當于連結本地和伺服器的密碼，配置ssh key之後，本地才擁有github的權限，我們才能把本地的更改上傳到github上，才可以更新你的部落格。

1. 之前成功安裝了git，那麼我們在電腦桌面右鍵，點選 Git Bash Here，并在彈出的視窗輸入指令

如果提示：No such file or directory 說明你是第一次使用git本機不存在ssh key，執行下面指令生成ssh key

然後連續3次回車，最終會生成一個檔案在使用者目錄下，打開使用者目錄，找到==.ssh\id_rsa.pub==檔案，記事本打開并複制裡面的内容

1. 打開Github右上角個人頭像下拉菜單中選擇

   Setting --> SSH and GPG keys --> New SSH key：

   

   

   

   之後點選Add SSH key。

到此為止我們應該成功的配置了ssh key，建立了本地與Github直接的連接配接。下面我們就來檢驗一下配置是否成功。

3.2 測試ssh key是否配置成功

回到剛才的git bash視窗，輸入指令：

如果提示

Are you sure you want to continue connecting (yes/no)?

，輸入yes，然後會看到成功提示~

3.3 本地配置

配置好ssh key 之後我們還需要簡單的配置

git config --global user.name "Github使用者名"
git config --global user.email "Github注冊郵箱"
           

這一步的原因是：Git是分布式版本控制系統，是以，每個機器都必須自報家門：你的名字和Email位址。

4. Hexo

4.1 簡介

Hexo是一個簡單、快速、強大的基于 Github Pages 的部落格釋出工具，支援Markdown格式，有衆多優秀插件和主題。

Hexo官網

Hexo github

關于Hexo和Github 搭建部落格原理，我們這裡就不細究了，感興趣的歡迎大家自行百度。

4.2 安裝及部落格初始化

在Git Bash輸入

npm install -g hexo
           

等待下載下傳完畢，此時我們在電腦某個地方建立一個檔案夾，這個檔案夾将存放我們部落格的代碼，記住位置不要亂放哦！

然後我們在這個檔案夾視窗右鍵Git Bash，或者使用

cd

指令到達該檔案夾。

cd /d/hexo/
           

例如我在D盤建立了名為Hexo的檔案夾，此時我的bash視窗如圖

然後開始初始化我們的部落格，簡單來說就是下載下傳一個最基本的Hexo部落格

hexo init
           

執行這個語句之後，我們會在剛剛的檔案夾裡找到Hexo下載下傳的檔案，目錄結構如圖：（如果你跟我略有不同請不要擔心）

接下來我們就可以在本地啟動自己的部落格啦！

hexo g
hexo s
           

打開浏覽器通路 http://localhost:4000 即可看到内容，如果浏覽器碰瓷一直轉圈那應該碰到了端口占用的問題，我們隻需要百度一下解決掉就好~

然後我們就看到了自己的部落格啦！

到這裡我們已經成功了一大半了！

4.3 部落客題

Hexo主題官網

自己的部落格當然要搞得漂漂亮亮的~

我先後用過Next，Melody，Butterfly~

我們這裡以Butterfly為例, 來到剛才的部落格目錄檔案夾下：

cd /d/hexo
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly  
           

下載下傳後的主題都儲存在themes檔案夾下

然後我們随便用一個編譯器打開

_config.yml

檔案，修改

_config.yml

中的

theme: landscape

改為

theme: butterfly

，然後重新執行hexo g來重新生成。

如果出現一些莫名其妙的問題，可以先執行hexo clean來清理一下public的内容，然後再來重新生成和釋出。

注意！_config.yml有兩個（或多個），一個在主檔案夾下，稱為全局配置檔案，另外，每一個主題檔案夾下還有一個_config.yml檔案，這裡我們修改的是全局配置！

此時我們運作

hexo g

,

hexo s

,重新通路http://localhost:4000，就可以看到我們修改之後的部落格啦！

5. 上傳

5.1 上傳之前的配置

好了我們就剩最後一步，即将本地部落格上傳至github，然後我們就可以通過

使用者名.github.io

通路自己的部落格了~

在剛才的

_config.yml

檔案夾中找到

deploy

，修改配置如下：

deploy:
  type: git
  repository: [email protected]:HeeeJ/HeeeJ.github.io.git #修改為自己的使用者名
  branch: master
           

在 git bash 中輸入指令

npm install hexo-deployer-git
           

5.3 上傳！

最後！隻需要在Git Bash中輸入

hexo d

，就可以将部落格上傳到Github啦~

通路 使用者名.github.io就可以看到自己的網站啦！

6. 結束語

這裡是我自己的Github部落格~歡迎來訪

這個系列還會更新下去的！我是個小白，與其說是教程，不如說是記錄自己的折騰生活。

希望你成功的搭建了自己的部落格，感謝閱讀~

第一次寫文章，看不明白或者過程出現什麼問題都可以聯系我，我會盡量幫忙的！有人可能會問，那麼多部落格網站為什麼要自己搭呢？其實我就是愛折騰，哈哈哈相信看到這裡的你和我一樣。一起加油！祝順利！