1. 部落格的架構
先搞明白Hexo部落格從搭建到自動釋出的架構,才能更好的了解我們每一步進行的操作。
不然隻跟着步驟過了一遍,卻不知道為什麼這麼做。
首先看這張架構圖:
整個流程就是本地将
*.md
渲染成靜态檔案,然後Git推送到伺服器的
repository
,伺服器再通過
git-hooks
同步網站根目錄。
2. 整個搭建流程
前提條件:
阿裡雲伺服器第一部分: 伺服器環境搭建,包括安裝
Git
、
Nginx
配置 、建立
git
使用者 。
第二部分: 本地
Hexo
初始化, 包括安裝
NodeJS
hexo-cli
, 生成本地靜态網站
第三部分: 使用Git自動化部署釋出部落格
3. 伺服器環境搭建
3-1.安裝Git和NodeJS (CentOS 環境)
yum install git
#安裝NodeJS
curl --silent --location https://rpm.nodesource.com/setup_5.x | bash -
NodeJS 安裝可以參考:
Linux安裝NodeJS3-2. 建立git使用者
adduser git
chmod 740 /etc/sudoers
vim /etc/sudoers
找到以下内容
## Allow root to run any commands anywhere
root ALL=(ALL) ALL
在下面添加一行
git ALL=(ALL) ALL
儲存退出後改回權限
chmod 400 /etc/sudoers
随後設定Git使用者的密碼,
#需要root權限
sudo passwd git
切換至git使用者,建立
~/.ssh
檔案夾和
~/.ssh/authorized_keys
檔案,并賦予相應的權限
su git
mkdir ~/.ssh
vim ~/.ssh/authorized_keys
#然後将電腦中執行 cat ~/.ssh/id_rsa.pub | pbcopy ,将公鑰複制粘貼到authorized_keys
chmod 600 ~/.ssh/authorzied_keys
chmod 700 ~/.ssh
然後就可以執行ssh 指令測試是否可以免密登入
ssh -v git@SERVER
至此,Git使用者添加完成
3-3. Nginx安裝和配置
我是用的是lnmp 一鍵安裝包,nginx安裝教程一大堆,就不再叙述。主要看nginx配置。
找到nginx的配置檔案,修改配置如下:
server
{
listen 80;
#listen [::]:80;
server_name www.seekbetter.me seekbetter.me;
index index.html index.htm index.php default.html default.htm default.php;
#這裡要改成網站的根目錄
root /path/to/www;
include other.conf;
#error_page 404 /404.html;
location ~ .*\.(ico|gif|jpg|jpeg|png|bmp|swf)$
{
access_log off;
expires 1d;
}
location ~ .*\.(js|css|txt|xml)?$
{
access_log off;
expires 12h;
}
location / {
try_files $uri $uri/ =404;
}
access_log /home/wwwlogs/blog.log access;
}
4. 本地Hexo程式
4-1:初始化Hexo部落格
首先要安裝
hexo-cli
,安裝
hexo-cli
需要 root 權限,使用
sudo
運作
sudo npm install -g hexo-cli
然後初始化Hexo程式
cd ~/Documents/code
hexo init blog
等執行成功以後安裝兩個插件,
hexo-deployer-git
和
hexo-server
,這倆插件的作用分别是使用Git自動部署,和本地簡單的伺服器。
hexo-deployer-git幫助文檔 hexo-server幫助文檔cd blog
npm install hexo-deployer-git --save
npm install hero-server
4-2. 生成自己的第一篇文章 hello world !
使用
hexo new <文章名稱>
來建立文章,該指令會成成一個
.md
檔案放置在
sources/_posts
檔案夾。
hexo new "hello Hexo"
vim sources/_posts/hello-hexo.md
編輯完畢以後, 使用
hexo g
将
.md
檔案渲染成靜态檔案,然後啟動
hexo-server
:
hexo g
hexo server
現在便可以打開浏覽器通路
http://localhost:4000
來檢視我們的部落格了!
5. 自動化部署
5-1:伺服器上建立git裸庫
建立一個裸倉庫,裸倉庫就是隻儲存
git
資訊的
Repository
, 首先切換到
git
使用者確定
git
使用者擁有倉庫所有權
一定要加
--bare
,這樣才是一個裸庫。
su git
cd ~
git init --bare blog.git
5-2. 使用 git-hooks 同步網站根目錄
在這裡我們使用的是
post-receive
這個鈎子,當git有收發的時候就會調用這個鈎子。 在
~/blog.git
裸庫的
hooks
檔案夾中,
建立
post-receive
檔案。
vim ~/blog.git/hooks/post-receive
#!/bin/sh
git --work-tree=/path/to/www --git-dir=~/blog.git checkout -f
儲存後,要賦予這個檔案可執行權限
chmod +x post-receive
5-3. 配置 _config.yml
,完成自動化部署
_config.yml
然後打開
_config.yml
, 找到
deploy
deploy:
type: git
repo: git@SERVER:/home/git/blog.git //<repository url>
branch: master //這裡填寫分支 [branch]
message: 送出的資訊 //自定義送出資訊 (預設為 Site updated: {{ now('YYYY-MM-DD HH:mm:ss') }})
儲存後,嘗試将我們剛才寫的"hello hexo"部署到伺服器
hexo clean
hexo generate --deploy
通路伺服器位址,就可以看到我們寫的文章"Hello hexo",以後寫文章隻需要:
hexo new "Blog article name"
···寫文章
hexo clean && hexo generate --deploy
部落格就更新咯!~