基於Hexo+Node.js+github+coding搭建個人博客——基礎篇


附上個人教程:http://www.ookamiantd.top/2017/build-blog-hexo-base/

搭建此博客的動機以及好處在此就不多談了,之前已經表達過,詳情請看Start My Blog Trip — Power By Hexo 
記錄一下搭建的基本過程以及遇到的一些問題,僅供參考 
= =廢話不多說,進入主題

  • Hexo博客搭建的基礎大致流程為: 
    安裝Node.js →安裝Git → 安裝Hexo → 安裝主題 → 本地測試運行 → 注冊給github與coding並創建pages倉庫 → 部署

  • 這是博主的系統環境與版本: 
    OS: Ubuntu16.04 
    Node.js: 6.2.0 
    Npm: 3.8.9 
    Hexo: 3.2.2 
    主題NexT: 5.1.0 
    Git: 2.7.4

  • 對於使用windows的童鞋,可參考文章末尾處的參考鏈接,步驟大同小異*

以下提到的站點配置文件指的是博客文件根目錄下的 _config.yml主題配置文件是主題文件夾下的 _config.yml,童鞋們不要混淆了


安裝Node.js

Node.js的安裝有很多種方式,Hexo的官方文檔 建議是用nvm 安裝,但好多人都說不行,所以找了另外兩種方式安裝 
windows的童鞋可參考安裝Node.js

方法一:二進制包直接解壓配置

在node.js的官網 下載二進制包來安裝的,下載過后,解壓,設置軟鏈接,要不然每次都執行命令都要加上路徑,好麻煩

ln -s /home/ybd/Data/soft/application/node-v6.2.0-linux-x64/bin/node /usr/local/bin/node ln -s /home/ybd/Data/soft/application/node-v6.2.0-linux-x64/bin/npm /usr/local/bin/npm

注意!源文件要寫絕對路徑,否則會報錯:鏈接層數過多。也可以直接將node可執行文件拷貝到 /usr/local/bin 目錄下。

接下來就可以查看是否成功配置了

node -version npm -version

方法二:源文件編譯安裝

在安裝前,首先需要配置安g++編譯器

sudo apt-get install build-essential

官網 下載源代碼,選擇最后一項,Source Code 
解壓到某一目錄,然后進入此目錄,依次執行以下3條命令

./configure
make sudo make install

執行以下命令,檢測是否已經裝好node.js

node -v

npm安裝,一條命令即可解決

curl http://npmjs.org/install.sh | sudo sh

博主安裝Node.js遇到的問題就是多次安裝了不同版本的Node.js,有的是安裝在用戶變量上,有的是系統變量,所以每次用的時候都要切換到root用戶,就算賦權 sudo chmod 777 file 都沒有用,所以折騰了很久才把Node.js完全卸載,再重新安裝

安裝Git

Ubuntu系統下安裝Git非常簡單,只需一條命令:

sudo apt-get install git

windows下就直接到Git官網 下載安裝即可

然后終端執行 git --version 查看是否安裝成功 

安裝Hexo

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

  • 所有以上必備的應用程序安裝完成后,無論是在哪個操作系統,之后的操作都一樣

安裝Hexo的非常簡單,只要一條命令,前提是安裝好Node.js與Git

npm install -g hexo-cli
  • 如果npm安裝hexo失敗,則很有可能是權限問題,或者npm與node的版本不兼容(很少出現)

如果順利安裝完成,理論上Hexo已經安裝完成,但在Ubuntu系統中,比較的地方就是 hexo 命令居然放在了Node.js安裝目錄的 bin 文件夾下,不能快捷地在終端把命令敲出來,所以還是老規矩,軟鏈接走起

sudo ln -s /home/ybd/data/application/node-v7.4.0-linux-x64/bin/hexo /usr/local/bin/hexo

到此,Hexo的安裝已基本完成,可以先試一下Hello World

本地啟動Hello World與Hexo簡單使用

初始化

隨便建一個文件夾,名字隨便取,博主取其名為blog,cd 到文件夾里,先安裝必要的文件,執行以下命令:

hexo init  # hexo會在目標文件夾建立網站所需要的所有文件 npm install # 安裝依賴包

本地啟動

有了必要的各種配置文件之后就可以在本地預覽效果了

hexo g # 等同於hexo generate,生成靜態文件 hexo s # 等同於hexo server,在本地服務器運行

 
之后打開瀏覽器並輸入IP地址 http://localhost:4000/ 查看,效果如下 

新建文章與頁面

hexo new "title" # 生成新文章:\source\_posts\title.md hexo new page "title" # 生成新的頁面,后面可在主題配置文件中配置頁面
  • 生成文章或頁面的模板放在博客文件夾根目錄下的 scaffolds/ 文件夾里面,文章對應的是 post.md ,頁面對應的是page.md,草稿的是draft.md

編輯文章

打開新建的文章\source\_posts\postName.md,其中postNamehexo new "title"中的title

title: Start My Blog Trip — Power By Hexo  # 文章頁面上的顯示名稱,可以任意修改,不會出現在URL中
date: 2017-01-10 23:49:28  # 文章生成時間,一般不改
categories: diary  # 文章分類目錄,多個分類使用[a,b,c]這種格式
tags: [Hexo,diary]  # 文章標簽
---

#這里開始使用markdown格式輸入你的正文。

<!--more--> #more標簽以下的內容要點擊“閱讀全文”才能看見 

插入圖片

插入圖片有三種方式

方式一

在博客根目錄的 source 文件夾下新建一個 img 文件夾專門存放圖片,在博文中引用的圖片路徑 /img/圖片名.后綴

![](圖片路徑)
  • 1
  • 1

方式二

對於那些想要更有規律地提供圖片和其他資源以及想要將他們的資源分布在各個文章上的人來說,Hexo也提供了更組織化的方式來管理資源,將站點配置文件中的 post_asset_folder 選項設為 true 來打開文章資源文件夾

post_asset_folder: true

然后再博文中通過相對路徑引用

{% asset_img 圖片文件名 %}

方式三

使用七牛雲儲存,因為Github跟Coding項目容量有限,而且Github的主機在國外,訪問速度較慢,把圖片放在國內的圖床上是個更好的選擇,免費用戶實名審核之后,新建空間,專門用來放置博客上引用的資源,進入空間后點擊「內容管理」,再點擊「上傳」 

上傳完成之后點擊關閉回到管理頁面,選中剛上傳的圖片,最右邊的操作點擊復制鏈接即可 
 
然后在博文中通過地址引用

![](圖片地址如:http://ojoba1c98.bkt.clouddn.com/img/build-hexo/copyUrl.png)

簡單的命令

總結一下簡單的使用命令

hexo init [folder] # 初始化一個網站。如果沒有設置 folder ,Hexo 默認在目前的文件夾建立網站 hexo new [layout] <title> # 新建一篇文章。如果沒有設置 layout 的話,默認使用 _config.yml 中的 default_layout 參數代替。如果標題包含空格的話,請使用引號括起來 hexo version # 查看版本 hexo clean # 清除緩存文件 (db.json) 和已生成的靜態文件 (public) hexo g # 等於hexo generate # 生成靜態文件 hexo s # 等於hexo server # 本地預覽 hexo d # 等於hexo deploy # 部署,可與hexo g合並為 hexo d -g

安裝主題(以NexT為例)

更多主題請看知乎專欄 

復制主題

Hexo 安裝主題的方式非常簡單,只需要將主題文件拷貝至站點目錄的 themes 目錄下, 然后修改下配置文件即可 
在這我們使用git克隆最新版

cd your-hexo-site git clone https://github.com/iissnan/hexo-theme-next themes/next
  • 1
  • 2
  • 1
  • 2

啟用主題

打開站點配置文件, 找到 theme 字段,並將其值更改為 next

theme: next

然后 hexo s 即可預覽主題效果

更換主題外觀

NexT有三個外觀,博主用的是 Muse,直接更改主題配置文件 scheme 參數即可,如果顯示的是繁體中文,那么站點配置文件中的 language: zh-CN

scheme: Muse
#scheme: Mist #scheme: Pisces

在次執行 hexo clean 和 heox s 可預覽效果 
大部分的設定都能在NexT的官方文檔 里面找到,如側欄、頭像、打賞、評論等等,在此就不多講了,照着文檔走就行了,接下只是個性定制的問題

注冊Github和Coding並分別創建Pages

在本地運行沒有問題的話,那么可以部署到外網去,在此之前,先得有服務器讓你的項目可以托管,那么Github Page與Coding Page就是個很好的東西,它們可以讓我們訪問靜態文件,而Hexo生成的恰恰是靜態文件 
具體請查看 Coding Page 、 Github Page

那為什么要注冊兩個網站呢?因為Github是國外的服務器,訪問速度比較慢,而Coding是國內的,速度相對來說比較快,在后面DNS解析的時候可以把國內的解析到Coding,國外的解析到Github,完美

GitHub

注冊Github帳號

進入Github 首頁進行注冊,用戶名、郵箱和密碼之后都需要用到,自己記好,不知道怎么注冊的童鞋去問問度娘

創建Repository(Github Pages)

Repository相當於一個倉庫,用來放置你的代碼文件。首先,登陸進入Github,選擇首頁中的 New repository 按鈕 
 
創建時,只需要填寫Repository name即可,可以順便創建README文件,就是紅色那個鈎,當然這個名字的格式必須為{user_name}.github.io,其中{user_name}必須與你的用戶名一樣,這是github pages的特殊命名規范,如下圖請忽視紅色警告,那是因為博主已經有了一個pages項目 

Coding

注冊Coding帳號

國內的網站,絕大部分都是中文的,注冊什么的就不說了,進入Coding 滾鍵盤就是了= =

創建項目(Coding Pages)

Coding Pages請看 Coding Pages 
注冊之后進入主頁,點擊項目,點擊+,項目名為你的用戶名 
 
查看Pages 服務是否開啟:點擊項目 -> 代碼 -> Pages 服務,若沒有開啟則點開啟 

配置SSH與Git

那么我們有了兩個免費的服務器之后,就要綁定個人電腦與它們聯系,那就是SSHGit 
綁定之后我們每次部署項目就不用輸入帳號和密碼

生成SSH Key

ssh-keygen -t rsa -C your_email@youremail.com

后面的 your_email@youremail.com 改為你的郵箱,之后會要求確認路徑和輸入密碼,我們這使用默認的一路回車就行。成功的話會在~/下生成 .ssh 文件夾,進去,打開 id_rsa.pub,復制里面的key,粗暴點就是 Ctrl+a 然后 Ctrl+c

添加SSH Key

首先是Github,登錄Github,右上角 頭像 -> Settings —> SSH nd GPG keys —> New SSH key 。把公鑰粘貼到key中,填好title並點擊 Add SSH key 

至於Coding,登錄進入主頁,點擊 賬戶 —> SSH公鑰 —> 輸入key再點擊 添加 

驗證成功與否

驗證github

ssh -T git@github.com

如果是第一次的會提示是否continue,輸入yes就會看到:You’ve successfully authenticated, but GitHub does not provide shell access 。這就表示已成功連上github!之前博主就是因為沒有輸入yes,導致幾次失敗,粗心地一路回車= = 
驗證coding

ssh -T git@git.coding.net

同上,按yes 
接下來我們要做的就是把本地倉庫傳到github上去,在此之前還需要設置username和email,因為github每次commit都會記錄他們

git config --global user.name your name git config --global user.email your_email@youremail.com

關於git可參考: 
史上最全github使用方法:github入門到精通 
廖雪峰老師的Git教程

部署到Github與Coding

在此之前,先安裝Git部署插件

npm install hexo-deployer-git --save

開站點配置文件,拉到底部,修改部署配置:

# Deployment ## Docs: https://hexo.io/docs/deployment.html deploy: type: git repo: github: git@github.com:masteranthoneyd/masteranthoneyd.github.io.git,master coding: git@git.coding.net:ookamiantd/ookamiantd.git,master

注意冒號后面是網站對應的用戶名,接着就是/,然后再是你的項目名加上 .git,master 
保存后終端執行

hexo clean
hexo g
hexo d

稍等片刻,可能會由於環境、網絡等原因,部署的時間會有偏差,有的人快有的慢 
 
部署完成后可在瀏覽器輸入 yourName.github.io 或者 yourName.coding.me 都可以瀏覽到一個屬於自己的博客了 ~

總結

最后用拙劣的語言總結一下博主搭建Hexo博客的體會,六個字:簡潔但,不簡單。 
再六個字,正如NexT官方說的:精於心,簡於形 
= =貌似這個博客也不怎么簡潔,有點花俏,裝X嫌疑 
但無論怎樣,折騰這個博客讓我受益匪淺,正如之前聽到的一句名言,忘了誰說的:不努力試一把,又怎么會知道絕望…好像很有道理,絕望中尋找光芒,絕處逢生,感覺挺不錯的 
高級進階篇:傳送門

在次喂自己帶鹽!個人博客:http://www.ookamiantd.top

參考

使用Hexo搭建個人博客(基於hexo3.0) 
Github Pages個人博客,從Octopress轉向Hexo 
Hexo 3.1.1 靜態博客搭建指南 
Hexo官方文檔 
NexT官方文檔


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM