我的部落格搭建筆記

Joerrot發表於2018-09-05
筆記

首先有一種程式語言叫javascript，就像C語言PHP語言java語言等等，javascript就是為了網站而生的，她可以幫助網站實現一些動態的效果。但是她就是一團程式碼，要讓她能夠執行肯定需要執行環境呀！例如C語言在linux環境下你要安裝gcc才可以，你要想執行java程式碼就要安裝好jdk，等等。那javascript的執行環境是比較複雜的，總之就是瀏覽器就能執行javascript程式碼。另一方面javascripts也只能在瀏覽器執行，這肯定是很大的限制，能不能讓javascripts像其他語言一樣在很多平臺都能執行呢？

這就要用到Node.js，意思就是javascripts執行環境，之所以用hexo建網站很簡單，就是因為已經有很多人寫好了模版放在hexo的一個個主題裡，你只要直接用就可以了，那這些模版就包括不少javascripts的程式，所以要想正確執行就要裝javascripts的執行環境，比如node.js。

npm其實就是包管理工具。打個比方，在node.js裡寫個javascripts就好比拍一段視訊，那張三李四王二都是up主，每個人都拍了很多視訊，有一天我想用張三李四王二的視訊做個鬼畜，我就要先跑到張三家向張三要他拍的視訊，再跑到李四家，說不定李四又出去約炮了，就很不方便；這時候node.js的創造者也發現了這個問題，他就建了個網站叫B站，跟我們說大傢伙自己拍的視訊都傳到這個網站上，平時誰要誰的視訊直接搜尋就好了，這樣就很方便。npm 就相當於這個B站，有了它，我想要張三搞基的視訊做個鬼畜，不用去找張三要了，直接搜尋 npm zhangsan_gaoji，自動就找到所需的視訊了。所以npm 很重要，肯定是要裝的。

使用Hexo來搭建部落格，Hexo 是使用markdown語言來編寫文章，然後經過編譯為靜態的HTML頁面的快速、簡潔、高效的部落格框架，Hexo是基於Node.js開發的，所以本地要先安裝它，下載Windows 64 的msi檔案，這個比zip好，因為msi檔案安裝的時候會把環境變數一起設定好了。所以安裝Node.js之後，就可以通過其npm命令來安裝Hexo。

npm install hexo-cli -g

然後，需要搭建 Git 環境， 這樣把本地的網頁和文章等提交到 GitHub 上。

注意：必須要在安裝了上述的Git以及Node.js之後才能進行Hexo的安裝。

所以也需要註冊一個Github的賬號，然後建立一個新的倉庫。

倉庫的名字格式為：

使用者名稱.github.io

然後使用這個使用者名稱來初始化Hexo:

hexo init 8bun.github.io
cd 8bun.github.io     //到資料夾之下
npm install

然後，Hexo 將會在指定資料夾中新建所需要的檔案。

資料夾內容如下：

.
├── .deploy         #需要部署的檔案
├── node_modules    #Hexo外掛
├── public          #生成的靜態網頁檔案（.md檔案和.html檔案會被解析，並放到此資料夾中）
├── scaffolds       #模板
├── source          #部落格正文和其他原始檔，404、favicon、CNAME 都應該放在這裡
| ├── _drafts       #草稿
| └── _posts        #文章
├── themes          #主題
├── _config.yml     #全域性配置檔案
└── package.json    #npm 依賴等

下面介紹的幾個是會經常用到的：

_config.yml

網站配置資訊，也就是本文所稱的站點配置檔案，可以在此配置大部分的引數。基本配置在前面基本已經設定過了。

scaffolds

模版資料夾。新建文章時，Hexo 會根據 scaffold 來建立檔案。

Hexo的模板是指新建的markdown檔案中預設填充的內容。

例如，在使用hexo new "文章名"時，預設生成的.md檔案會包含如下內容：

預設內容是哪裡來的呢？就在scaffold/post.md中儲存：

假如對每篇部落格我都需要新增分類categories，每次都手動新增太麻煩，我希望每次預設生成都有categories:，那麼就可以在scaffold/post.md中新增：

儲存後，每次新建一篇文章時都會包含post.md中的內容。

當然，你也可以在scaffolds資料夾下建立自己的部落格模板，我建立一個名為blog的模板：

通過如下命令呼叫我建立的blog模板新建文章：

在_posts中生成md檔案：

public

該資料夾中的內容將被最終push到github倉庫中。

source

資原始檔夾是存放使用者資源的地方。除_posts 資料夾之外，開頭命名為 _ (下劃線)的檔案 / 資料夾和隱藏的檔案將會被忽略。Markdown 和 HTML 檔案會被解析並放到 public 資料夾，而其他檔案（如剛剛生成的about資料夾）會被拷貝到 public 資料夾。

為github倉庫新增readme

既然 source 資料夾中的內容將全部被推送到 public 資料夾，public 資料夾中的內容又將被最終push到github倉庫中，那麼如果我們想要為github倉庫新增readme.md，只要在 source 資料夾中建立就好了：

部署到github，就有readme了，但我們發現，README.md已經被解析為README.html，顯示的全是html程式碼，並不是我們想要的文件格式的內容：

為了解決這個問題，我們回到source資料夾，將README.md重新命名為README.MDOWN，再部署到github：

source資料夾中，.md會被解析為html，並放到 public 資料夾被push到github，但.MDWN不會被解析。

themes

主題資料夾，下載的主題都儲存在此資料夾下。Hexo 會根據主題來生成靜態頁面。

 

然後，我們要在以本地計算機作為伺服器，通過本地伺服器網路埠去訪問自己的網站：

首先開啟本地Hexo服務，即執行本地服務：

hexo server
或者
hexo s

即這條命令相當於hexo通過nide.js啟動了一個本地伺服器。 

這裡需要先安裝 hexo-server外掛，輸入命令：

npm install hexo-server --save

然後啟動本地伺服器之後就會出現：

也就是說，我們可以通過本地伺服器網路埠4000去訪問自己的網站。

如果 http://localhost:4000 能夠正常訪問，則說明 Hexo 本地部落格已經搭建起來了，只是本地哦，別人看不到的。下面，我們要部署到Github。

github Pages是託管在github上的靜態網頁，有300M的免費空間。我們可以利用Git命令，將靜態網頁釋出到Github Pages上。

那麼，我們如何讓本地git專案與遠端的github建立聯絡呢？用 SSH keys （本地倉庫和github之間是通過SSH加密傳輸的，所以需要先到github中新增你本機的SSH Key 進行認證)

生成SSH keys

輸入你自己的郵箱地址:

ssh-keygen -t rsa -C "**********@qq.com"

新增 SSH Key 到 GitHub：

開啟User資料夾下的.ssh資料夾下的id_rsa.pub檔案（公鑰）：此檔案裡面內容為剛才生成的金鑰，準確的複製這個檔案的內容，貼上到 https://github.com/settings/ssh 的 new SSH key 中

然後進入資料夾8bun.github.io（倉庫地址）中，右鍵Git Bash Here ,

可以輸入下面的命令，看看設定是否成功，git@github.com的部分不要修改：

ssh -T git@github.com

出現如下語句，就說明設定傳輸通道成功了：

現在已經可以通過 SSH 連結到 GitHub 了，還有一些個人資訊需要完善的。

Git 會根據使用者的名字和郵箱來記錄提交。

GitHub 也是用這些資訊來做許可權的處理，輸入下面的程式碼進行個人資訊的設定，把名稱和郵箱替換成自己的。 

git config --global user.name "8bun"
git config --global user.email "**********@qq.com"

最後就是部署了：

(關聯Github Pages並將檔案部署到Github Pages上)

在開始之前，您必須先在倉庫資料夾下的 _config.yml 中修改引數，然後按照如下修改，使用者名稱改成你的：

需要注意的是：冒號後面記得空一格！

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: git@github.com:8bun/8bun.github.io.git
  branch: master

本地檔案提交到 GitHub Pages:(依次執行)

// 刪除舊的 public 檔案，上面有提過
hexo clean

// 生成新的 public 檔案
hexo generate
或者
hexo g

// 開始部署
hexo deploye
或者
hexo d

這裡先要下載一個部署擴充套件:

npm install hexo-deployer-git --save

在瀏覽器中輸入 https://8bun.github.io （使用者名稱改成你的）看到了 Hexo 與 GitHub Pages 已經成功關聯了，哇哇哇哇哇哇，開心死你了，不要忘了回來給我點贊喲 ~

注意3：怎麼避免 .md 檔案被解析？

Hexo原理就是hexo在執行hexo generate時會在本地先把部落格生成的一套靜態站點放到public資料夾中，在執行hexo deploy時將其複製到.deploy資料夾中。Github的版本庫通常建議同時附上README.md說明檔案，但是hexo預設情況下會把所有md檔案解析成html檔案，所以即使你線上生成了 README. md，它也會在你下一次部署時被刪去。怎麼解決呢？

在執行hexo deploy前把在本地寫好的README.md檔案複製到.deploy資料夾中，再去執行hexo deploy。

發表一篇文章

hexo new "文章標題"

D:\GitHub\Hexo\test>hexo new "文章標題"
INFO  Created: D:\GitHub\Hexo\test\source\_posts\文章標題.md

在本地部落格資料夾 source\_posts 資料夾下看到我們新建的 markdown 檔案（.md檔案）

當然，我們也可以手動新增Markdown檔案在source->_deploy資料夾下，其效果同樣可以媲美hexo new

文章編輯好之後，執行生成、部署命令：

hexo clean
hexo g
hexo d

當然也可以執行下面的命令，相當於上面兩條命令的效果：

hexo clean
hexo d -g

新建一個自定義頁面

hexo new page folder

文章如何新增多個標籤

有兩種多標籤格式：

tags: [a, b, c]
或
tags:
  - a
  - b
  - c

更改主題

官方主題庫：https://hexo.io/themes/

Hexo主題非常推薦使用 Next 為主題，請閱讀 Next 的官方文件（ http://theme-next.iissnan.com/ ），5 分鐘快速安裝。

再提示一點，大家可以hexo主題修改一步就hexo s看下變化，初次接觸對引數不清楚。只有hexo s後在可以在本地瀏覽到效果，Ctrl+C 停止伺服器。

新增外掛

新增 sitemap 和 feed 外掛

切換到你本地的 hexo 目 CIA ，在命令列視窗，輸入以下命令

npm install hexo-generator-feed -save
npm install hexo-generator-sitemap -save

修改 _config.yml，增加以下內容

# Extensions
Plugins:
- hexo-generator-feed
- hexo-generator-sitemap
#Feed Atom
feed:
  type: atom
  path: atom.xml
  limit: 20
#sitemap
sitemap:
  path: sitemap.xml

再執行以下命令，部署服務端

hexo d -g

配完之後，就可以訪問 https://8bun.github.io/atom.xml 和 https://8bun.github.io/sitemap.xml ，發現這兩個檔案已經成功生成了。

常見的命令：

hexo new "postName" #新建文章
hexo generate #生成靜態頁面至public目錄
hexo server #開啟預覽訪問埠（預設埠4000，'ctrl + c'關閉server）
hexo deploy #部署到GitHub
hexo help  # 檢視幫助
hexo version  #檢視Hexo的版本

＃縮寫
hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy

＃組合命令：
hexo s -g #生成並本地預覽
hexo d -g #生成並上傳

結束語

建站的系統有很多，如：

使用 Hexo + GitHub Pages 建站，有優點也有缺點：

  • GitHub Pages 不支援資料庫管理，所以你只能做靜態頁面的部落格，不能像其他部落格（如 WordPress）那樣通過資料庫管理自己的部落格內容。
  • 但是，GitHub Pages 無需購置伺服器，免伺服器費的同時還能做負載均衡，github pages有300M免費空間。
  • 個人部落格真的有必要用資料庫嗎？答案是否定的。部落格靜態化，評論記錄使用第三方的 網易雲跟帖就可以了。靜態的部落格更有利於搜尋引擎蜘蛛爬取，輕量化的感覺真的很好。
  • 通過 Hexo 你可以輕鬆地使用 Markdown 編寫文章，非常符合我的口味。Markdown 真的是專門針對程式設計師開發的語言啊，現在感覺沒有 Markdown什麼都不想寫。什麼富文字編輯器，什麼word，太麻煩了！而且樣式都好醜！效率太低！

推薦幾個很好用的線上 Markdown 編輯器：

推薦圖床：

  • 極簡圖床 + chrome 外掛 + 七牛空間，七牛雲儲存提供10G的免費空間,以及每月10G的流量，存放個人部落格外鏈圖片最好不過了，七牛雲儲存還有各種圖形處理功能、縮圖、視訊存放速度也給力。



轉載請註明出處：https://www.jianshu.com/p/39562a0d8eb6
 

相關文章