如何搭建自己的博客 - 基於 Hexo + Docker + Nginx + Git + Linux

過去兩年一直在 CSDN 上寫博客,不過有廣告、等待審覈等一些不方便的地方,一直想搭建一個自己的博客。正好手裏有一臺閒置的騰訊雲服務器,於是下定決心準別搭建一個個人博客。經過兩天的折騰,終於初步搭建成功。下面分享下搭建過程。

準備材料

注:本方案非 hexo + GitHub 的免費方案,需要擁有一臺個人公網服務器。

  • 公網服務器一臺
  • GitHub 倉庫
  • 個人域名(非必須)

搭建思路

用個人公網服務器作爲站點,使用 GitHub 作爲文章的倉庫。在服務器上通過 git pull 最新的博客倉庫,並通過 Hexo 框架生成靜態博客站點(這裏可以使用 Docker 快速部署 Hexo 運行環境),再用 Nginx 反向代理博客靜態頁,最後將個人域名解析到博客地址即大功告成。

爲什麼使用 GitHub?

使用 GitHub 作爲文章的存儲倉庫,這樣可以在任意一臺裝有 Git 環境的電腦上編寫博客,並同步到 GitHub 倉庫中,然後在私有服務器中更新庫併發布博客即可。

當然,使用其他平臺倉庫也可,或者你也可以手動上傳博客內容到服務器上,如果你不怕麻煩的話。

爲什麼使用 Hexo?

看個人喜好。調研了一下 Jekyll 和 Hexo,據說 Jekyll 要重一些,而且官網有點醜。具體 Hexo 的特性及優勢在這裏就不贅述了。

爲什麼使用個人服務器?

GitHub Page + Hexo 是個免費的建站方案。不過有幾點不太友好的地方:

  • 大陸訪問 GitHub 速度有時會很慢
  • GitHub Page 有流量限制
  • 百度爬蟲對 GitHub 進行了屏蔽,不利於 SEO

個人使用的是騰訊雲的服務器,而且新用戶有很大力度的打折優惠。不差錢的朋友可以選擇使用個人服務器,靈活度更高。

爲什麼使用 Docker?

其實 Docker 不是必需的。只要在服務器中裝好 Hexo 環境即可。Hexo 依賴於 Node.js,然而我在服務器上安裝 Node.js 時遇到一些問題(安裝極爲緩慢),索性用 Docker 來搭建 Hexo 環境。

同時,使用 Docker 使得搭建環境變得簡單,也方便日後的遷移維護等。

爲什麼使用 Nginx?

高性能的 HTTP 和反向代理 Web 服務器,還有什麼比這個更好的選擇麼?

有關個人域名

沒有個人域名的話,訪問博客就得使用 ip 了。

不過需要注意的是,域名解析到境內服務器需要進行 ICP 備案。

好了,接下里就讓我們一步一步來按照這個思路操作。

服務器環境搭建

以下操作都基於 CentOS 7

安裝 Git

這裏簡單說下 Git 安裝過程

# 下載 git
wget https://mirrors.edge.kernel.org/pub/software/scm/git/git-2.22.0.tar.gz

# 解壓
tar -zxvf git-2.22.0.tar.gz

# 配置
cd git-2.22.0 
./configure --prefix=/usr/local/git

# 安裝 
make && make install

# 配置環境比那裏
vi /etc/profile.d/git.sh

# 在文件中添加
export PATH=$PATH:/usr/local/git/bin

# 查看git版本 
git --version

到這裏,Git 就已經安裝成功了。

GitHub 建庫

首先,在服務器上生成一個 ssh key。

ssh-keygen -t rsa -b 4096 -C "[email protected]"

登錄你的 GitHub(沒有的同學需要註冊一個哈),配置公鑰。

創建一個倉庫,用於存放博客文件。

Clone Git 庫

在服務器上將倉庫克隆下來。

cd /usr/blog

# clone 倉庫。記得將地址更換成你自己的
git clone [email protected]:MartinMa94/hexo-blog.git

至此,有關 Git 的相關準備工作就結束了。

安裝 Docker

# Docker 要求 CentOS 系統的內核版本高於 3.10 ,查看本頁面的前提條件來驗證你的 CentOS 版本是否支持 Docker。
# 通過 uname -r 命令查看你當前的內核版本
uname -r

# 將 yum 包更新到最新。
yum update

# 卸載舊版本(如果安裝過舊版本的話)
yum remove docker docker-common docker-selinux docker-engine

# 安裝需要的軟件包,yum-util 提供 yum-config-manager 功能,另外兩個是d evicemapper 驅動依賴的
yum install -y yum-utils device-mapper-persistent-data lvm2

# 設置 yum 源
yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo

# 查看 docker list
yum list docker-ce --showduplicates | sort -r

# 安裝 docker
yum install -y docker-ce
# 或者指定版本
# yum install -y docker-ce-17.12.0.ce

# 啓動並加入開機啓動
systemctl start docker
systemctl enable docker

# 驗證安裝是否成功(有 client 和 service 兩部分表示 docker 安裝啓動都成功了)
docker version

鑑於國內網絡問題,後續拉取 Docker 鏡像十分緩慢,我們可以需要配置加速器來解決,我使用的是網易的鏡像地址:http://hub-mirror.c.163.com
新版的 Docker 使用 /etc/docker/daemon.json 配置 Daemon。
在該配置文件中加入(沒有該文件的話,請先建一個):

vi /etc/docker/daemon.json

{
  "registry-mirrors": ["http://hub-mirror.c.163.com"]
}

# 最後,刷新配置並重啓 Docker
systemctl daemon-reload
systemctl restart docker

至此,Docker 便安裝成功了。

創建 Dockerfile

Dockerfile 是 Docker 鏡像的描述文件,我們通過編寫 Dockerfile 文件可以配置我們想要的 Docker 鏡像。有關 Dockerfile 的詳細內容這裏我就不多做介紹了。

在服務器中的某個目錄下,比如 ~/dockerfile/ 中,我們創建一個 Dockerfile 文件。

# 創建 Dockerfile 文件
vi ~/dockerfile/Dockerfile

# 文件內容如下
FROM node:latest
MAINTAINER Martin <[email protected]>
RUN npm install
# install hexo
RUN npm install hexo-cli -g
# install hexo server
RUN npm install hexo-server
RUN npm install hexo-deployer-git
# set home dir
WORKDIR /usr/blog

下面我來簡單解釋下文件內容:

  • FROM:基礎鏡像信息,我們需要一個 node 環境的鏡像。
  • MAINTAINER:維護者信息。
  • RUM:鏡像操作指令。我們這裏安裝有關 Hexo 的環境。
  • WORKDIR:在構建鏡像時,指定鏡像的工作目錄,之後的命令都是基於此工作目錄,如果不存在,則會創建目錄。這裏我們將工作目錄設爲鏡像中的 /user/blog。之後我們的博客文件也正是放在這個文件夾裏。

然後執行 Dockerfile 文件,創建我們的 Hexo 鏡像。

docker build -t hexo-image .

稍等片刻,我們名叫 hexo-image 的鏡像就創建好了。

創建 Docker 容器

# 創建名叫 hexo-blog-1 的 docker 容器
docker run -itd -p 4000:4000 -v /usr/blog/hexo-blog/:/usr/blog --name hexo-blog-1 hexo-image

端口 4000 是 hexo server 默認的端口,我們將容器中端口 4000 映射到服務器上的 4000 端口,便於稍後測試用。同時,我們將服務器上的 /usr/blog/hexo-blog 目錄與容器的工作目錄 /usr/blog 關聯。hexo-blog 即我之前 clone 下來的倉庫名(這取決於你建庫時的庫名),這樣我們在容器中操作 /usr/blog 目錄就等於操作服務器上的 /usr/blog/hexo-blog 目錄,而之後我們只需要 pull 最新的庫就可以更新我們的博客內容了。

初始化 Hexo

進入 docker 容器

docker exec -it hexo-blog-1 /bin/bash

如果之前配置正確的話,我們現在應該進入到容器中的 /usr/blog 目錄下
在這裏插入圖片描述
接下來,我們初始化 Hexo

hexo init

這時候我們可以看到,目錄中生成了一些文件,這些就是 Hexo 初始化後的文件了。

因爲我們在鏡像中安裝了 hexo-server,所以我們直接可以通過啓動 hexo-server 來查看博客的效果。如果你使用你的本地機器晚上上面一系列操作,你可以在瀏覽器中直接鍵入 http://localhost:4000 來查看博客效果。
在這裏插入圖片描述

但現在我們的文件內容在服務器上,可以通過 服務器ip:4000 來訪問。

如果訪問不到看下是不是服務器防火牆沒有打開 4000 端口,以及服務器運營商安全組的相關設置。

生成博客靜態頁

通過 hexo init 我們創建了博客的初始化內容,不過這些內容並不是靜態頁。而 hexo-server 是 Hexo 自帶的服務模塊,一般也不會用在生產上。我們需要將博客內容生成靜態網站,通過 Nginx 這樣的 Web 服務器來發布我們的靜態頁。

使用如下命令生成 Hexo 靜態頁。

hexo g

這時我們會看到目錄中多了一個 public 文件夾,所有的靜態頁面都在這個文件夾裏。

Nginx 映射

有關 Nginx 的安裝參考我的這篇文章 Linux 系統安裝 Nginx 的方法

修改 Nginx 的配置文件,添加博客頁的代理。

在 Nginx 安裝目錄中的 conf 目錄中的 nginx.conf 文件中,添加如下配置

server {
        listen       80;
        server_name  www.martinmyz.cn;

        location / {
            root   /usr/blog/hexo-blog/public;
            index  index.html;
        }
    }

server_name 改成你自己的域名或者地址。注意,域名需要解析到你的服務器上。
location 中,root 爲博客的目錄,index.html 即爲主頁。

在 Nginx 的 sbin 目錄中,執行

./nginx -s reload

重新加載配置,這時我們再通過訪問配置好的域名或服務器地址,即可看到自己的博客了。

別忘了將博客內容 push 到 GitHub 中

最後,我們要把目錄中的內容推送到 GitHub 倉庫中。

這裏建議大家將 /public 目錄和 db.json 文件添加到忽略中,不需要 Git 跟蹤上傳。因爲每次 hexo g 後,這兩個文件都會自動更新。

到這裏,我們的博客搭建就已經完成了。

如果發佈博文?

在任何一臺機器上,拉取 Git 庫,在 /source/_posts 目錄中按照 Hexo 規定的格式添加 Markdown 文件,並推送到 GitHub 中。在服務器中 pull 下來最新的內容。

git pull

通過 Docker 運行 Hexo 命令

hexo clean
hexo g

即生成了最新的博客靜態頁。

一鍵更新博客腳本

這一步是爲了更加簡便的操作,將上述的更新操作通過腳本來完成。之後我們每次發佈文章,只需要執行一次腳本即可。

編寫 shell 腳本

vi ~/myShell/update-blog.sh
#! /bin/bash

cd /usr/blog/hexo-blog
git pull
docker exec hexo-blog-1 hexo clean
docker exec hexo-blog-1 hexo g

設置腳本權限

chmod 777 update-blog.sh

想要更新博客的話,執行一下腳本就好啦

./update-blog.sh

後續工作(未完成)

身爲一個程序員,總想着如何偷懶。雖然有了一鍵更新博客腳本,但每次 push 博文後,還得跑到服務器上去執行這個腳本,還是有些不方便。這裏有兩種解決方案:

  1. 定時執行腳本。
  2. 使用 GitHub 的 Webhooks 功能,在每次 push 後通知服務器執行腳本。

該功能正在研究,弄好後同步到本文中。


好了,Hexo 博客的初步搭建就介紹到這裏,大家可以愉快的玩耍了。之後會逐步分享 Hexo 博客的配置與優化,大家可以到 Hexo 官網 先研究下。

最後,祝大家建站成功!


本博客 GitHub 地址:hexo-blog


作者:喝酒不騎馬
出處:http://www.martinmyz.cn
原文鏈接:如何搭建自己的博客 - 基於 Hexo + Docker + Nginx + Git + Linux

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