原文發布於https://www.fangzhipeng.com/life/2018/10/14/how-to-build-blog/
我從2016年開始寫博客,陸陸續續寫了大概兩百篇博客。寫博客有很多好處,其一是它能夠迫使你總結你學習的知識,你需不但的消化自己的知識點,使你對知識有了更深刻的認識;其二是你的博客如同你的個人簡歷,記錄了你的學習歷程,通過寫博客,可以讓別人認識你,可以結交更多的行業朋友;其三,博客起到了傳播知識的作用,特別是技術類的博客能夠幫助別人解決技術問題,幫助人是一件快樂的事,何樂而不為。所以寫博客對於程序員來說至關重要,在我之前的文章,我已經講述過了,寫博客給我帶來了什么,再次不在贅述。
我一開始寫博客是從簡書開始的,當時被簡書優雅的markdown寫作方式所吸引。剛開始寫文章網的閱讀量,一篇能夠達到幾百的閱讀量是非常開心的事情,如果能夠被簡書推薦到首頁能夠開心好幾天。在簡書我認識了木東居士、仗劍走天涯,並在那時建立了簡書圈,並保持了非常好的友誼關系,非常的珍貴。
大概17年初我將自己的寫博客主要陣地轉移到了CSDN,原因是CSDN在百度搜索引擎中占據了最高的權重。后面證明我的判斷是正確的,我的CSDN博文閱讀量一路飆升,讓更多的人可以的閱讀我的博客。
就在上個月我閱讀了純潔的微笑的博文 技術人如何搭建自己的技術博客這篇文章,我決定折騰一下搭建一下自己的個人博客。
其實在17年,我就開始搭建了自己的個人博客,采用Jekyll靜態博客,托管在github上面的,並且買了自己的域名fangzhipeng.com,cname到github上。由於github網絡不穩定,體驗實在是太差,一直沒有怎么打理,處於一種無人管理的狀態。
就在月初,我將個人的博客遷移到了自己的服務器,並在群里放出來,有人就讓我寫篇博文,讓他參考下如何搭建屬於自己的個人博客。於是我抽空寫出了這篇文章。
這篇文章詳細的介紹了如何搭建我的個人博客。
使用Github托管博客
在github上托管博客上非常簡單的一件事,只需要fork一個你喜歡的博客的主題,並將fork的工程名修改為{github-username}.github.io,並將原博主的文章刪除,並放上自己的博文,就可以了。
比如我的博客使用的是https://github.com/Huxpro/huxpro.github.io的主題,首先我將這個項目fork一下,並將fork后的項目改名字為forezp.github.io,讀者需要將forezp替換成自己的github用戶名。
然后打開網頁forezp.github.com就可以訪問該主題的博客了。將修改后項目git clone下來,按照主題說明進行配置的修改,將原博主的文章刪除,替換成自己的博文,git push修改后的工程到github上面,github pages就會自動構建,根據你的修改內容生成頁面,訪問{github-username}.github.io就可以看到修改后的內容。
如果你需要自己的域名,可以在阿里雲上申請自己的域名,比如的我的域名為fangzhipeng.com。在阿里雲的控制台的域名解析配置以下的內容:
並在項目中的根目錄上加CNAME文件,寫上自己申請的域名,比如的我的:
大概過10-20分鍾之后,就可以通過域名訪問你的個人博客了,通過{github-username}.github.io訪問個人博客也會顯示你申請的域名。
需要注意的是,域名需要備案哦。
使用自己的服務器部署博客
使用Gthub搭建個人博客簡單、快捷、方便,但是Github在國外啊,網絡極其不穩定,訪問速度慢,讓人抓狂,這時可以將自己的博客部署在阿里雲的ECS上。ECS需要購買哦,需要購買的同學點擊這里,領取代金券。
本人使用Jekyll進行搭建的博客,所以需要在服務中安裝Jekyll環境,我的服務器系統版本為entOS 7.2,安裝的jekyll版本為3.8.4。
安裝jekyll主要參考了https://jekyllcn.com/docs/installation/,因為安裝過程比較繁瑣和報的錯比較多,現在詳細講解下,在我安裝jekyll的過程和所遇到的坑。
安裝Node
安裝Node環境,執行以下命令:
wget https://nodejs.org/dist/v8.12.0/node-v8.12.0-linux-x64.tar.xz
xz -d node-v8.12.0-linux-x64.tar.xz
tar -xf node-v8.12.0-linux-x64.tar
ln -s ~/node-v8.12.0-linux-x64/bin/node /usr/bin/node
ln -s ~/node-v8.12.0-linux-x64/bin/npm /usr/bin/npm
node -v
npm
安裝ruby
Jekyll依賴於Ruby環境,需要安裝Ruby,執行以下命令即可:
wget https://cache.ruby-lang.org/pub/ruby/2.4/ruby-2.4.4.tar.gz
mkdir -p /usr/local/ruby
tar -zxvf ruby-2.4.4.tar.gz
cd ruby-2.4.4
./configure --prefix=/usr/local/ruby
make && make install
cd ~
vim .bash_profile
source .bash_profile
安裝gcc
安裝gcc執行以下命令:
yum -y update gcc
yum -y install gcc+ gcc-c++
安裝jekyll
最后安裝Jekyll,執行以下命令
gem install jekyll
jekyll --version
gem update --system
可以通過jekyll --version查看版本來驗證是否安裝成功,如果安裝成功,則會顯示正確的版本號。
安裝過程中可能存在的問題
使用jekyll創建一個博客模板,並啟Server服務,執行以下的命令:
jekyll new myblog
cd myblog/
jekyll serve
當執行jekyll serve命令,我服務器環境報來以下的錯誤:
`block in verify_gemfile_dependencies_are_found!': Could not find gem 'minima (~> 2.0)' in any of the gem sources listed in your Gemfile. (Bundler::GemNotFound)
from /usr/local/ruby/lib/ruby/site_ruby/2.4.0/bundler/resolver.rb:257:in `each'
查了相關的資料,需要安裝bundler和minima插件,安裝命令如下:
gem install bundler
gem install minima
部署我的博客
部署博客需要在服務器中編譯博客,然后編譯后的博客放在Nginx服務的靜態路徑上
編譯博客
需要git工具,下載在github上面的代碼,執行以下命令:
git clone https://github.com/forezp/forezp.github.io
cd forezp.github.io
jekyll serve
jekyll serve命令會編譯我從github上下載的源碼,在這一步,第一次執行會報以下的錯誤:
Deprecation: The 'gems' configuration option has been renamed to 'plugins'. Please update your config file accordingly.
Dependency Error: Yikes! It looks like you don't have jekyll-paginate or one of its dependencies installed.
是因為博客需要用到sitemap和paginate插件,安裝下即可。
gem install jekyll-sitemap
gem install jekyll-paginate
重新執行jekyll serve,運行成功,此時可以通過curl命令查看服務器里部署的博客。
部署到Nginx服務器上:
通過Jekyll編譯后的靜態文件需要掛載到Nginx服務器,需要安裝Nginx服務器。 安裝過程參考了http://nginx.org/en/linux_packages.html#mainline
按照文檔,新建文件/etc/yum.repos.d/nginx.repo,在文件中編輯以下內容並保存:
[nginx]
name=nginx repo
baseurl=http://nginx.org/packages/centos/7/$basearch/
gpgcheck=0
enabled=1
然后執行安裝nginx命令,如下:
yum install nginx
Nginx配置成功后,需要設置Nginx的配置,配置文件路徑為/etc/nginx/conf.d/default.conf,配置的內容如下:
server {
listen 80;
server_name localhost;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
}
error_page 404 /404.html;
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
安裝Nginx服務器成功后,將Jekyll編譯的博客靜態html文件輸出到Nginx服務器上,執行以下的命令:
jekyll build --destination=/root/blog/html
啟動Nginx服務器,就可以正常的博客網頁了,如果需要在瀏覽器上訪問,需要在阿里雲ECS控制台的安全組件暴露80端口。如果想通過域名訪問,需要將域名解析設置指向你的服務器。
非www域名的重定向到www
比如我想訪問http://fangzhipeng.com重定向到http://www.fangzhipeng.com上,需要在Nginx的配置文件/etc/nginx/conf.d/default.conf,修改配置以下內容:
listen 80;
server_name fangzhipeng.com www.fangzhipeng.com;
if ( $host != 'www.fangzhipeng.com' ) {
rewrite "^/(.*)$" http://www.fangzhipeng.com/$1 permanent;
}
自動化部署
通過設置github的webhook可以實現自動化構建和部署。過程是,提交博文或者配置到github倉庫,倉庫會觸發你設置的webhook,會向你設置的webhook地址發送一個post請求,比如我設置的請求是在服務器的跑的一個Nodejs程序,監聽gitub webhook的請求,接受到請求后,會執行shell命令。
首先設置github倉庫的webhook,在github倉庫的項目界面,比我的我的項目界面https://github.com/forezp/forezp.github.io,點擊Setting->Webhooks->Add Webhook,在添加Webhooks的配置信息,我的配置信息如下:
- Payload URL: http://www.fangzhipeng.com/incoming
- Content type: application/json
- Secret: a123456
這樣Webhook就設置成功了,現在在博客所在的服務端去監聽Github Webhook發送的請求,我采用的開源組件去監聽github-webhook-handler,項目地址為:https://github.com/rvagg/github-webhook-handler,首先安裝:
npm install -g github-webhook-handle
安裝成功后,在/root/node-v8.12.0-linux-x64/lib/node_modules/github-webhook-handler下新建deploy.js文件:
var http = require('http')
var createHandler = require('github-webhook-handler')
var handler = createHandler({ path: '/incoming', secret: 'a123456' })
function run_cmd(cmd, args, callback) {
var spawn = require('child_process').spawn;
var child = spawn(cmd, args);
var resp = "";
child.stdout.on('data', function(buffer) { resp += buffer.toString(); });
child.stdout.on('end', function() { callback (resp) });
}
http.createServer(function (req, res) {
handler(req, res, function (err) {
res.statusCode = 404
res.end('no such location')
})
}).listen(3001)
handler.on('error', function (err) {
console.error('Error:', err.message)
})
handler.on('push', function (event) {
console.log('Received a push event for %s to %s',
event.payload.repository.name,
event.payload.ref);
run_cmd('sh', ['./start_blog.sh'], function(text){ console.log(text) });
})
上述代碼中,指定了nodejs服務的踐踏端口為3001,監聽了path/incoming,Secret為a123456,這和之前Github Webhook設置的要保持一致。代碼run_cmd(‘sh’, [’./start_blog.sh’],指定了接受到請求后執行./start_blog.sh,start_blog.sh文件的代碼如下,首先進入到博客的代碼文件,拉代碼,編譯。
echo `date`
cd /root/forezp.github.io
echo start pull from github
git pull
echo start build..
jekyll build --destination=/usr/share/nginx/html
然后需要使用forever來啟動deploy.js的服務,執行命令如下:
sudo npm install forever -g #安裝
$ forever start deploy.js #啟動
$ forever stop deploy.js #關閉
$ forever start -l forever.log -o out.log -e err.log deploy.js #輸出日志和錯誤
/root/node-v8.12.0-linux-x64/lib/node_modules/forever/bin/forever start -l forever.log -o out.log -e err.log deploy.js
如果報錯:
/root/node-v8.12.0-linux-x64/lib/node_modules/forever/bin/forever start -a -l forever.log -o out.log -e err.log deploy.js
最后一步,需要在nginx服務器的配置文件,需要將監聽的/incoming請求轉發到nodejs服務上,配置代碼如下:
location = /incoming {
proxy_pass http://127.0.0.1:3001/incoming;
}
這樣,當你提交了文章或者修改的配置到gitub上,github通過webhook向你所在的服務器發送請求,服務器接收到請求后執行 sh命令,sh命令包括了重新pull代碼和編譯代碼的過程,這樣自動化部署就完成了,你只需提交代碼,服務器就觸發pull代碼和重新編譯的動作。
補充
博客可以設置百度統計、谷歌分析、不蒜子統計、Gittalk留言板等功能,這些功能需要自己申請賬號,實現起來比較簡單,具體自己百度。
另外,如果博客需要上https協議,需要在阿里雲申請免費的SSL證書,申請完之后,可以在阿里雲上查看Nginx安裝SSL證書的教程,並做配置,按照它的提示來,比較簡單。最后涉及到了涉一個重定向的問題,比如我的網站,我需要將 http://fangzhipeng.com、http://www.fangzhipeng.com 、https://fangzhipeng.com 全部重定向到https://www.fangzhipeng.com,這時需要修改nginx的配置文件default.conf,現在我貼出我的完整的配置如下:
server {
listen 80;
server_name fangzhipeng.com www.fangzhipeng.com;
return 301 https://www.fangzhipeng.com$request_uri;
}
server {
listen 443;
server_name fangzhipeng.com;
return 301 https://www.fangzhipeng.com$request_uri;
}
server {
listen 443 default_server ssl;
server_name www.fangzhipeng.com;
#if ( $host != 'www.fangzhipeng.com' ) {
# rewrite "^/(.*)$" http://www.fangzhipeng.com/$1 permanent;
# }
ssl on;
root html;
index index.html index.htm;
ssl_certificate cert/215042476190582.pem;
ssl_certificate_key cert/215042476190582.key;
ssl_session_timeout 5m;
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_prefer_server_ciphers on;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
}
error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
到此,我的博客搭建過程全部講解完畢,如果有任何問題歡迎加我微信miles02(備注博客疑問)和我討論,如果問的人多,我考慮建一個交流群,大家一起討論答疑。大家也可以在留言版上留下自己的博客,讓大家互相訪問。
寫博客貴在堅持,貴在有一顆分享的心。我是看了純潔的微笑的博文,才有動力折騰了一下自己的博客,希望你看了我的這篇博文,會有自己搭建博客的沖動,然后自己動手完整的搭建,謝謝大家。
掃碼關注有驚喜
(轉載本站文章請注明作者和出處 方志朋的博客)