從零開始搭建Hexo博客

18.06.20,自己的Hexo博客總算Run起來了。不算整主題，來來回回也折騰了我兩天才弄好，私以為網(wǎng)上的教程有點(diǎn)毒，要不就是筆記式的，要不就是Github Pages。

不過既然我總算搗鼓好了，就來做個(gè)教程吧，從零開始搭建Hexo博客。

前言 & 避雷

本文主要介紹：如何不通過Github Page搭建自己的Hexo博客，以及包括Hexo主題,git鉤子,批處理的優(yōu)化內(nèi)容

本文適合對(duì)象：準(zhǔn)備自己折騰在服務(wù)器用Hexo搭博客的小伙伴

本文環(huán)境為本地Windows10，服務(wù)器Ubuntu16.04。

本文不使用Github Page，僅操作本地和服務(wù)器。

已經(jīng)搭好的本人博客，可作為參考

思路

我發(fā)現(xiàn)大多數(shù)教程都沒有關(guān)于思路的講解，這樣看起來會(huì)覺得很混亂，分不清每一步自己在干什么。

對(duì)于我這種喜歡多個(gè)博客對(duì)比參考的，很容易就云里霧里了，所以這里先給大家理一下思路。

本節(jié)只講思路，實(shí)現(xiàn)細(xì)節(jié)從下一節(jié) “動(dòng)手操作” 開始。

說好了從零開始嘛，覺得基礎(chǔ)的部分跳過去也OK的。

準(zhǔn)備工作

本文并不包括準(zhǔn)備工作環(huán)節(jié)的實(shí)際操作教學(xué)，請(qǐng)準(zhǔn)備完成后再閱讀第二節(jié) “動(dòng)手操作” 內(nèi)容。

ps. 本環(huán)節(jié)有問題可以咨詢本文作者

  • 域名，服務(wù)器

任何網(wǎng)站都需要一個(gè)域名和服務(wù)器，就像門牌號(hào)和房子一樣。而獲取的方法也是很直接，花錢買。國內(nèi)購買比較推薦阿里云和騰訊云，有學(xué)生優(yōu)惠的話幾乎花不了什么錢。不過中華家這方面有個(gè)小特色，購買域名、服務(wù)器搭建網(wǎng)站都需要進(jìn)行備案，所以我個(gè)人比較推薦阿里云，全程手機(jī)點(diǎn)點(diǎn)，拍幾張照片就完事了。

對(duì)了，服務(wù)器主機(jī)選Ubuntu16.04吧，別太排斥命令行。

  • 本地 Windows PC

倒不是說別的系統(tǒng)不行(Mac的怒火)，只是因?yàn)楸疚幕诖伺渲谩?/p>

本地配置

這個(gè)環(huán)節(jié)結(jié)束后，你將可以在自己這臺(tái)電腦上訪問你的博客

  1. 裝好需要的軟件，如git，Node.js，Hexo

  2. 初始化Hexo博客

  3. 更換主題【可選】

服務(wù)器配置

這個(gè)環(huán)節(jié)結(jié)束后，你的博客將正式向整個(gè)互聯(lián)網(wǎng)開放!

  1. 安裝需要的軟件，如git，nginx

  2. 設(shè)置網(wǎng)站訪問目錄

  3. 上傳本地博客到服務(wù)器上

優(yōu)化處理

前兩個(gè)環(huán)境結(jié)束后，你會(huì)發(fā)現(xiàn)有些地方的步驟太過繁雜，這個(gè)環(huán)節(jié)結(jié)束后，所有的操作將被你處理成傻瓜式。

  1. 使用批處理將輸入命令 -> 雙擊運(yùn)行

  2. 使用git鉤子達(dá)成一鍵部署

動(dòng)手操作

實(shí)際操作過程中，可能出現(xiàn)各種奇葩問題，請(qǐng)不要?dú)怵H，多深呼吸，然后重啟【誤】。

本地配置

  1. 安裝Git

    1. 下載

      去這兒下載Git的安裝包，然后安裝。

    2. 配置

      1. 打開Git Bash

        安裝完成后，在任意地方右鍵，可以看到以下界面：

        gitbash

        打開Git Bash，以后咱們操作幾乎就都在這里了，之后就不重復(fù)講如何打開了。

      2. 設(shè)置Git

        需要設(shè)置Git的用戶名，然后生成SSH密鑰。具體操作如下：

          $git config --global user.email "email@example.com"
  $git config --global user.name "user name"

        打開Git Bash，將上面的email@example.com user name 替換成你自己的郵箱地址、用戶名，然后復(fù)制進(jìn)去，回車。注意，$符號(hào)請(qǐng)不要復(fù)制進(jìn)去，請(qǐng)使用全英文字符，包括后文中所有配置，請(qǐng)都勿用中文。

        另外，在Git Bash中，Ctrl + C 意味著強(qiáng)制終止當(dāng)前運(yùn)行命令，而復(fù)制和粘貼，變成了：Ctrl + Shift + C 和 Ctrl + Shift + Insert .

          $ssh-keygen -t rsa -C "email@example.com"

        然后再輸入這個(gè)，生成SSH密鑰，一路回車使用默認(rèn)值即可。由于這個(gè)Key不是用于軍事目的，無需設(shè)置密碼，但是你要和我一樣設(shè)置了的話，就要面臨以后提交都要輸入一次密碼的窘境了。

        成功之后，可以在用戶主目錄(C盤->用戶->你的用戶名)里找到.ssh目錄，里面有id_rsa和id_rsa.pub兩個(gè)文件。其中id_rsa.pub是公鑰，只可以將這個(gè)文件分享出去。

  2. 安裝 Node.js 和 Hexo

    1. 安裝 Node.js 很簡(jiǎn)單，就官網(wǎng)下好了安裝就是。

    2. 安裝 Hexo 前請(qǐng)先確認(rèn)裝好了 Node.js，然后打開Git Bash，輸入npm install -g hexo-cli回車

  3. 讓博客在本地跑起來

    到上一步結(jié)束，你已經(jīng)在本地裝好了所有需要的軟件，也懂得了一些Git Bash的用法，接下來，我們就要在本地把你的博客跑起來。

    1. 找到一個(gè)你能記得很熟，又不是桌面這么暴露的位置建一個(gè)放你博客的文件夾。比如你可以選D:\blog，在D盤新建一個(gè)名叫blog的文件夾就是(勿用中文)。

    2. 打開這個(gè)文件夾，在文件夾里打開Git Bash，注意，這是為了避免讓你輸入多次cd xx/xx的命令，直接選中目錄。當(dāng)你操作成功后，你打開的Git Bash右上角就會(huì)有一串黃色的英文字母，是你放在本地的博客文件夾地址，請(qǐng)確認(rèn)之后再進(jìn)行后續(xù)操作。例如，你之前選擇的是D:\blog，那么這里就是/d/blog

    3. 輸入:

      $hexo init
$npm install hexo-deployer-git --save
$npm install hero-server --save
$hexo g
$hexo s

      當(dāng)一切正常，跑完之后就應(yīng)該是這個(gè)樣子：

      $hexo s
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

      那么你訪問這個(gè) http://localhost:4000/ 就能訪問到你新生的博客了，雖然還有些簡(jiǎn)陋。如果想關(guān)閉，就在Git Bash中根據(jù)提示，按Ctrl + C吧。另外扯一個(gè)奇葩問題，極少數(shù)情況下，你可能遇到說4000端口被占用，不能靜態(tài)部署，解決這個(gè)問題最簡(jiǎn)單的方法是重啟，或者你可以更改默認(rèn)部署的端口，或者你可以殺死4000端口的進(jìn)程，具體操作就不說了，能查到的。

      由于這部分命令是死的，不需要更改，所以我就解釋一下這些命令的作用吧，不想看就跳過吧：

      hexo init 初始化 Hexo，它會(huì)去下載原始版本的hexo到本地。

      npm install hexo-deployer-git --save和npm install hero-server --save是兩個(gè)重要的插件，用這個(gè)命令就能自動(dòng)安裝。

      hexo g 生成網(wǎng)頁，把配置啊，博客啊什么的，變成用戶瀏覽的網(wǎng)頁

      hexo s 靜態(tài)部署，就是弄成本地可以看的那種，可以用來測(cè)試效果

      另外講一個(gè)命令，生成網(wǎng)頁前建議使用hexo clean，清除之前生成的網(wǎng)頁文件，這樣可以大概率降低出現(xiàn)奇葩問題的概率。

    至此，本地配置環(huán)境結(jié)束。如果你對(duì)自帶的博客不滿意，你可以去下載Hexo主題來美化你的博客，或者是下載更多插件來為你的博客添加一些神奇的效果，或者前端大佬自己可以動(dòng)手改文件。

    ps. 如果上面兩個(gè)鏈接打不開，那可能是因?yàn)榉N花家的神秘力量。

    pss. 選主題可以參考這里

服務(wù)器配置

俗話說的好，如果一個(gè)網(wǎng)站只能在本地訪問，那它和普通文件有什么區(qū)別?

  1. 首先你需要能遠(yuǎn)程連接服務(wù)器。 由于不同服務(wù)器提供不同的特殊連接方法，這里無法提供全覆蓋的策略。具體方法可以查詢你購買商提供的幫助手冊(cè)。

  2. 當(dāng)你通過putty成功連接服務(wù)器后，出現(xiàn)的是一個(gè)黑框框，別驚訝，就是這樣玩的，先使用root用戶吧，有一些配置需要權(quán)限。

  3. 安裝git和nginx

    $apt-get update
$apt-get install git-core
$apt-get install nginx

    第一句的update是更新列表

  4. 建立網(wǎng)站目錄

    和本地一樣，網(wǎng)站也要有一個(gè)放東西的文件夾，由于nginx默認(rèn)的目錄是'var/www/html'，所以我建議你使用'var/www/blog'，當(dāng)然，你用別的也可以，就請(qǐng)自己記住目錄，下文也替換成你自定義的目錄便是。

    root用戶建立目錄：$mkdir /var/www/blog。

    之后再把原來nginx設(shè)置的'html'目錄改成你的'blog'目錄.

    執(zhí)行$vim /etc/nginx/sites-available/default

    這樣將打開一個(gè)叫'default'的文件，由于你是命令行操作，所以你可能出現(xiàn)用鼠標(biāo)點(diǎn)擊窗口輸入，結(jié)果卻被命令行當(dāng)傻子的情況，放松，新人都這樣。

    首先，你使用的編輯器叫'vim'，你可能不清楚它，但它的名聲在你不知道的領(lǐng)域可以說是響徹天際，他有很多特殊的操作技巧，在不能使用鼠標(biāo)的情況下給編輯者提供了極大便利。不過你只需要修改幾個(gè)文件，并不需要學(xué)習(xí)太多的命令，現(xiàn)在，你打開了這個(gè)文件，按'i'鍵開始編輯。

    找到 root /var/www/html; 改成 root /var/www/blog;

    然后按'esc'退出編輯狀態(tài)，按'Shift + ;'輸出':'，然后輸入：'wq'按回車就保存了。

    按':'切換到命令模式，'wq'命令:保存并退出

    至此，服務(wù)器的配置就完了，可以重啟一下你的服務(wù)器，或者使用命令：$service nginx restart

    更新博客只需要將你在本地生成的網(wǎng)頁(博客目錄\.deploy_git文件夾下所有文件)傳到你服務(wù)器上的這個(gè)目錄(/var/www/blog)就好了

優(yōu)化

如果每次更新博客，我都得遠(yuǎn)程連接服務(wù)器，輸入密碼，上傳文件，那我肯定要放棄自己整博客，轉(zhuǎn)去用其他的博客網(wǎng)站。

那么有沒有更好的解決方案呢？當(dāng)然是有的，Hexo提供用Git一鍵部署，然后我們?cè)僭诒镜貙懞门幚砦募?wù)器上弄好鉤子，以后更新就只是雙擊一下提交文件就好了。是不是聽起來美滋滋？那么就來動(dòng)手吧

使用命令行上傳文件

如果你覺得用命令行上傳文件很麻煩，請(qǐng)記住，這是優(yōu)化的第一步。而且，如果你之前還沒有上傳過文件到服務(wù)器，你可以了解一下FTP/SFTP之類傳文件的東西，你會(huì)難受到回來學(xué)優(yōu)化的。

  1. 在服務(wù)器上建一個(gè)你自己的用戶

在服務(wù)器上一直使用root賬戶太危險(xiǎn)了，何況你還是要遠(yuǎn)程連接快速提交的那種。你需要一個(gè)自己的用戶，使用$adduser user_name創(chuàng)建你的用戶，user_name替換成你起的用戶名，注意，不能有中文。

然后給你自己調(diào)一下權(quán)限：

$chmod 740 /etc/sudoers
$vim /etc/sudoers

在編輯器中找到如下內(nèi)容：

# User privilege specification
root    ALL=(ALL:ALL) ALL

在其下方添一行：user_name ALL=(ALL:ALL) ALL，(user_name為你的用戶名,下文不再重復(fù)。)

然后再輸入$chmod 440 /etc/sudoers 并回車。

至此，你的用戶就建立好了。

用$su user_name就可以切換到你的用戶了，切換完成后，原來的root@xxxx就會(huì)變成user_name@xxxx

  1. 建立一個(gè)Git倉庫配合本地Hexo的部署

使用你的用戶，執(zhí)行命令：

$cd ~
$mkdir .ssh
$cd .ssh
$vim authorized_keys
$cd ~ 
$git init --bare blog.git

cd 進(jìn)入目錄,cd ~ 表示進(jìn)入當(dāng)前用戶的個(gè)人目錄

mkdir 創(chuàng)建目錄，.ssh 目錄是用來ssh連接時(shí)驗(yàn)證的。

vim authorized_keys 這里編輯的是一個(gè)密鑰文件，還記得之前本地裝Git時(shí)配的SSH嗎，把本地的弄到這里，就完成了本地和服務(wù)器的配對(duì)。

忘記文件在哪了？用戶主目錄(C盤->用戶->你的用戶名)里找到.ssh目錄，里面有id_rsa和id_rsa.pub

選中id_rsa.pub,右鍵記事本打開,把里面的東西全部復(fù)制,黏貼到服務(wù)器這里，然后保存就是。

忘記怎么操作Vim了？按'I'進(jìn)入編輯狀態(tài)，按'ESC'退出編輯狀態(tài)，按':'進(jìn)入輸入命令狀態(tài)，輸入：'wq'保存。

git init --bare xxx 表示新建一個(gè)叫xxx的，有g(shù)it管理的文件夾(庫)。這個(gè)文件夾就將是我們通過git更新博客的資料庫。雖說這個(gè)xxx你可以自己改名字，而且還可以選不同的特殊目錄，但是按照規(guī)范得有一個(gè).git后綴，不過只要你開心，而且記得住，那就隨意吧，我這里及下文均用blog.git作為這個(gè)文件夾的名字了，如果你自定義了目錄，下文中注意替換。

  1. 配置本地部署相關(guān)

首先進(jìn)入本地你選擇的blog目錄，如我上文舉例的D:\blog，打開該目錄下的_config.yml文件，如果你不知道怎么打開，郵件記事本就對(duì)了。

在里面找到：

  # Deployment
  ## Docs: https://hexo.io/docs/deployment.html
  deploy:
    ...

改成這樣：

  # Deployment
  ## Docs: https://hexo.io/docs/deployment.html
  deploy:
        type: git
        repo: user_name@xxx:blog.git
        branch: master

其中user_name為你建的用戶的用戶名，xxx為你買的服務(wù)器IP地址。

保存退出即可。

至此，你已經(jīng)配置好Hexo d提交文件到服務(wù)器了，只需在本地運(yùn)行完hexo clean和hexo g之后運(yùn)行hexo d，就能將你的本地blog推送到服務(wù)器上(省去FTP/SFTP的步驟！)。

然后再遠(yuǎn)程連接服務(wù)器，root用戶，運(yùn)行$rm -rf /var/www/blog刪除之前部署的博客文件，然后運(yùn)行$git clone /home/user_name/blog.git /var/www/blog放上新的博客文件，整個(gè)部署過程就結(jié)束了。

配置Git鉤子和批處理文件

每次更新都要鏈接服務(wù)器，還得弄命令行，麻煩爆！就不能弄成點(diǎn)一下鼠標(biāo)就自動(dòng)更新那樣嗎？本節(jié)就教你完成最后的魔幻操作

  1. 讓你的用戶接管博客更新的任務(wù)。

    使用root用戶，給你的用戶權(quán)限：$chown user_name:user_name -R /var/www

    注意，/var/www 是你定義的網(wǎng)站目錄(/var/www/blog)的前一個(gè)目錄(/var/www)

  2. 配置Git鉤子

    使用你的用戶，編輯鉤子文件 vim /home/user_name/blog.git/hooks/post-receive

    里面填寫以下內(nèi)容：

    #!/bin/bash
$rm -rf /var/www/blog
$git clone /home/user_name/blog.git /var/www/blog

    保存即可。

    其實(shí)很明顯，鉤子就是一段在特定條件下會(huì)被觸發(fā)自動(dòng)執(zhí)行的命令，這里就是讓服務(wù)器在接收到本地的提交之后自動(dòng)執(zhí)行我們之前要執(zhí)行的部署任務(wù)，命令都和之前一樣

    然后還有一個(gè)重要的事情，提供執(zhí)行這段命令的權(quán)限：chmod +x /home/user_name/blog.git/hooks/post-receive

  3. 本地使用批處理文件

    既然服務(wù)器都能把命令寫到文件里自動(dòng)執(zhí)行，那本地肯定也可以，他的名字叫：批處理

    首先在你本地選擇的blog目錄(如文中例D:\blog)，新建一個(gè)文本文件，名字隨便起，就是別起中文。

    然后把里面的內(nèi)容改成：

     hexo clean
 hexo g
 hexo d
 read -n 1

    保存。然后重命名把.txt后綴改成.sh，如果看不到.txt后綴，說明你沒開，百度教程

    然后就完成了，雙擊這個(gè)文件就自動(dòng)更新博客到服務(wù)器了，試試看？

    當(dāng)然，聰明的你肯定想到了，既然可以一鍵更新，那靜態(tài)部署也可以寫成批處理，不用每次都輸命令。的確如此，而且也只需要把上面那個(gè)文件中的hexo d改成hexo s就是靜態(tài)部署文件的命令。


寫在最后

好了，這篇文章花了我兩三天的時(shí)間寫，內(nèi)容也比較面向萌新，科普向，希望閱讀了本篇文章的你已經(jīng)成功搭好了自己的博客，而且還學(xué)到了一些計(jì)算機(jī)使用的技巧。

本文到此結(jié)束，謝謝。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容