搬瓦工+Hexo+Nginx+Namesilo 搭建個人Blog經驗總結

前言

本文並不是從頭開始帶你搭建個人 Blog 的完整詳細攻略,而是博主在搭建本 Blog 遇見的一些問題和經驗的總結,畢竟技術是不斷在進步,一些以往的經驗可能在新版本已經不適用了,所以希望本文能給想自行搭建 Blog 的各位一些幫助,能讓大家少走點彎路~

搭建步驟

  1. 購買並搭建好 VPS
  2. 在 VPS 上搭建 Hexo 環境
  3. 在 VPS 上搭建 Nginx
  4. 將 Hexo 部署到 Nginx 上
  5. 註冊域名並將添加域名解析

P.S. 以上步驟除了第一步是必要前提外,其它的順序可以按照你喜歡的方式進行

購買VPS教程

詳情請查看:最新搬瓦工註冊購買以及支付寶付款教程

搭建 SS

詳情請查看:最新搬瓦工傻瓜式一鍵搭建 SS / R教程(更新版)

整體的搭建過程還是很簡單的,這裏我就不浪費篇幅進行重複描述了,直接進入下一步了。

【注2】搭建到安裝系統時,最好選擇 centos-7-x86_64(-bbr 帶不帶bbr都行)。因爲博主之前時默認使用了centos-6-x86-bbr,然後在安裝 Node.js 的時候顯示系統版本不兼容。。。

搬瓦工VPS 上搭建 Hexo 環境

然而,這一步完全可以在官方文檔處獲得幫助,官網還有中文哦~

部署 Hexo 前,需要安裝兩個依賴—— Node.js 和 Git(建議大家在安裝時候都先搭建好 ss,因爲不清楚哪個的源會不會已經被牆掉)。其它按着官方文檔的步驟走基本不會有什麼大問題,搭建完 Hexo 就可以進入下一步了。

完成 Hexo 的部署後,可以開啓其自帶的本地服務器進行測試,指令如下:

cd /Hexo-Path   # “/Hexo-Path”替換爲你當時搭建 Hexo 的文件夾
hexo clean
hexo g
hexo s --debug

這樣,Hexo 就可以通過本地的4000端口進行訪問。然而,博主是使用 ssh 方式登陸 VPS,沒有圖形界面怎麼打開瀏覽器並訪問4000端口呢?

這裏,可以採用將本地端口與遠程服務器端口進行綁定的方法,然後用本地瀏覽器打開綁定端口即可,一行指令就能解決問題:

ssh username@address_of_remote -p [ssh端口號] -L 127.0.0.1:1234:127.0.0.1:4000

-p 選項是選填的,因爲有些 VPS 的 ssh 端口默認是22,如果不是就要填寫正確的端口號。
這樣,我們就將本地的1234端口與 VPS 的4000端口進行綁定,然後在本地瀏覽器輸入 localhost:1234 就可以訪問到測試的博客網站咯~

在 VPS 上搭建 Nginx

博主在安裝到這一步的時候,按着之前提供的簡書步驟安裝,出現了找不到 nginx 安裝包的問題。當時我使用的軟件源是 epel-release-7-9.noarch,但我在寫這篇博文前又測試了一次,這次卻可以成功安裝了,我猜測可能是當時軟件源暫時下架的了該軟件包吧。如果大家遇到找不到 nginx 軟件的問題,可以參考一下 nginx 官方文檔。

文檔是英文的,爲了方便大家,我就把 CentOS 的 Nginx 安裝過程寫在下面:

1、 在 /etc/yum.repos.d/ 目錄內創建 nginx.repo 文件,在文件內添加如下內容:

# 這裏選擇安裝的是穩定版,需要其它版本的自行參考官方文檔。
name=nginx repo
# 這裏的“centos/7/”請按着自己系統進行調整
baseurl=http://nginx.org/packages/centos/7/$basearch/ 
gpgcheck=0
enabled=1

2、 執行以下指令即可完成安裝:

sudo yum -y update
sudo yum -y install nginx

官方文檔鏈接在參考資料處。

將 Hexo 部署到 Nginx 上

安裝完了 Hexo 和 Nginx 後,你離完成搭建也就不遠了。

值得注意的是對 rsync 的配置:

deploy:
  type: rsync
  host: 你 VPS 的 IP 地址或者域名
  user: root
  root: 你想將 Hexo 生成的靜態文件存放在 VPS 中的目錄 例如: /www/hexo/blog/
  port: 你 VPS 的 ssh 端口號
  delete: true
  verbose: true
  ignore_errors: false

這裏的 root 項需要填寫一個不同於你 Hexo 搭建時使用的文件夾,因爲這個 root 是供 nginx 使用的,如果你這裏填寫了和 Hexo 搭建時一樣文件夾會出現文件被覆蓋的嚴重問題。

至此,你已經真正完成了個人博客的搭建,在瀏覽器中輸入你的 VPS 地址就可以訪問個人博客了,鼓掌。

爲 Hexo 更換主題

原本 Hexo 更換主題應該是一項十分輕鬆簡單的任務,然而博主卻在這一步耗費了大量時間。因此,本節主要是介紹 Hexo 更換主題的方法,以及我遇到的一些問題:

1、下載主題

Hexo 官方主題站上有很多主題供你挑選,選擇一款你喜歡的。
例如,本博客使用了 black-blue 這款。

將它 clone 到 Hexo 的 themes 目錄內:

git clone https://github.com/maochunguang/black-blue /PATH_To_Blog/themes/

2、配置主題

在個人博客的根目錄內有 _config.yml 文件,這是整個站點的配置文件,在文件內找到 themes 字段並將其從 landscape 修改爲 black-blue。

至此,主題已經成功配置成功。

注意
博主之所以在更換主題這一步耗費了大量時間,主要是更換主題後,打開網站後出現了主題顯示嚴重異常的問題。我一開始以爲是在部署前沒有調用 hexo clean 來清理緩存導致內容顯示出錯,然而重新部署後問題依然存在。然後,我想在本地端口進行測試,看看主題是否仍然顯示錯誤,但在本地服務器運行的網站卻能正確地顯示更換後的主題。這就讓我十分無語。。。我各種 Google 和逛論壇尋找答案皆無果,都已經準備放棄這個主題了。最後自己想了想,會不會是瀏覽器自身的緩存了原先網站的內容才導致了顯示錯誤呢?
於是我將瀏覽器的緩存清了一下,接着就能正常顯示了!!這個問題實在讓我哭笑不得,我暫不清楚這個是我使用的這個主題的問題,還是我本人的 chrome 瀏覽器的問題(但我在手機瀏覽器也遇到同樣的問題)。所以在這裏給需要自定義主題的朋友們提個醒,在更換主題後可以先清一下瀏覽器的緩存再打開網站。

註冊域名並將添加域名解析

這一步並不是必須的,如果你想要別人能更加輕鬆地訪問你的博客的話最好還是註冊一個域名,其實也沒有多貴,但能換來很多的便利。

博主在這一步主要參考這個博文:域名購買及使用教程

大家跟着這個博文進行註冊理論上不會有什麼大問題,我這裏只是補充幾點:

  1. Namesilo 裏標出的域名價格都是按一年算的(打折也只是首年打折),而且你一定要注意看最後結算的金額再給錢(有些域名是特別的,價格會很高)
  2. 註冊後設置域名解析的話,如果是國內訪問的流量多,最好選擇國內的 DNS 服務器(具體我就不推薦了,免得廣告嫌疑)

結束語

這是博主的第一篇正式博文,可能在格式排版之類稍有不足,請大家諒解!如果大家有什麼問題和建議,歡迎大家廣泛留言,我會盡量回復的,謝謝大家支持!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章