資訊專欄INFORMATION COLUMN
摘要：使用自己的服務(wù)器部署博客使用搭建個人博客簡單快捷方便，但是在國外啊，網(wǎng)絡(luò)極其不穩(wěn)定，訪問速度慢，讓人抓狂，這時可以將自己的博客部署在阿里云的上。
原文發(fā)布于https://www.fangzhipeng.com/life/2018/10/14/how-to-build-blog/
我從2016年開始寫博客，陸陸續(xù)續(xù)寫了大概兩百篇博客。寫博客有很多好處，其一是它能夠迫使你總結(jié)你學(xué)習(xí)的知識，你需不但的消化自己的知識點，使你對知識有了更深刻的認(rèn)識；其二是你的博客如同你的個人簡歷，記錄了你的學(xué)習(xí)歷程，通過寫博客，可以讓別人認(rèn)識你，可以結(jié)交更多的行業(yè)朋友；其三，博客起到了傳播知識的作用，特別是技術(shù)類的博客能夠幫助別人解決技術(shù)問題，幫助人是一件快樂的事，何樂而不為。所以寫博客對于程序員來說至關(guān)重要，在我之前的文章，我已經(jīng)講述過了，寫博客給我?guī)砹耸裁矗俅尾辉谫樖觥?/p>
我一開始寫博客是從簡書開始的，當(dāng)時被簡書優(yōu)雅的markdown寫作方式所吸引。剛開始寫文章網(wǎng)的閱讀量，一篇能夠達(dá)到幾百的閱讀量是非常開心的事情，如果能夠被簡書推薦到首頁能夠開心好幾天。在簡書我認(rèn)識了木東居士、仗劍走天涯，并在那時建立了簡書圈，并保持了非常好的友誼關(guān)系，非常的珍貴。
大概17年初我將自己的寫博客主要陣地轉(zhuǎn)移到了CSDN，原因是CSDN在百度搜索引擎中占據(jù)了最高的權(quán)重。后面證明我的判斷是正確的，我的CSDN博文閱讀量一路飆升，讓更多的人可以的閱讀我的博客。
就在上個月我閱讀了純潔的微笑的博文 技術(shù)人如何搭建自己的技術(shù)博客這篇文章，我決定折騰一下搭建一下自己的個人博客。
其實在17年，我就開始搭建了自己的個人博客，采用Jekyll靜態(tài)博客，托管在github上面的，并且買了自己的域名fangzhipeng.com，cname到github上。由于github網(wǎng)絡(luò)不穩(wěn)定，體驗實在是太差，一直沒有怎么打理，處于一種無人管理的狀態(tài)。
就在月初，我將個人的博客遷移到了自己的服務(wù)器，并在群里放出來，有人就讓我寫篇博文，讓他參考下如何搭建屬于自己的個人博客。于是我抽空寫出了這篇文章。
這篇文章詳細(xì)的介紹了如何搭建我的個人博客。
使用Github托管博客在github上托管博客上非常簡單的一件事，只需要fork一個你喜歡的博客的主題，并將fork的工程名修改為{github-username}.github.io，并將原博主的文章刪除，并放上自己的博文，就可以了。
比如我的博客使用的是https://github.com/Huxpro/hux...，首先我將這個項目fork一下，并將fork后的項目改名字為forezp.github.io，讀者需要將forezp替換成自己的github用戶名。
然后打開網(wǎng)頁forezp.github.com就可以訪問該主題的博客了。將修改后項目git clone下來，按照主題說明進行配置的修改，將原博主的文章刪除，替換成自己的博文，git push修改后的工程到github上面,github pages就會自動構(gòu)建，根據(jù)你的修改內(nèi)容生成頁面，訪問{github-username}.github.io就可以看到修改后的內(nèi)容。
如果你需要自己的域名，可以在阿里云上申請自己的域名，比如的我的域名為fangzhipeng.com。在阿里云的控制臺的域名解析配置以下的內(nèi)容：
并在項目中的根目錄上加CNAME文件，寫上自己申請的域名，比如的我的：
www.fangzhipeng.com
大概過10-20分鐘之后，就可以通過域名訪問你的個人博客了，通過{github-username}.github.io訪問個人博客也會顯示你申請的域名。
需要注意的是，域名需要備案哦。
使用自己的服務(wù)器部署博客使用Gthub搭建個人博客簡單、快捷、方便，但是Github在國外啊，網(wǎng)絡(luò)極其不穩(wěn)定，訪問速度慢，讓人抓狂，這時可以將自己的博客部署在阿里云的ECS上。ECS需要購買哦，需要購買的同學(xué)點擊這里，領(lǐng)取代金券。
本人使用Jekyll進行搭建的博客，所以需要在服務(wù)中安裝Jekyll環(huán)境，我的服務(wù)器系統(tǒng)版本為entOS 7.2，安裝的jekyll版本為3.8.4。
安裝jekyll主要參考了https://jekyllcn.com/docs/ins...，因為安裝過程比較繁瑣和報的錯比較多，現(xiàn)在詳細(xì)講解下，在我安裝jekyll的過程和所遇到的坑。
安裝Node安裝Node環(huán)境，執(zhí)行以下命令：
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環(huán)境，需要安裝Ruby，執(zhí)行以下命令即可：
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執(zhí)行以下命令：
yum -y update gcc yum -y install gcc+ gcc-c++安裝jekyll
最后安裝Jekyll，執(zhí)行以下命令
gem install jekyll jekyll --version gem update --system
可以通過jekyll --version查看版本來驗證是否安裝成功，如果安裝成功，則會顯示正確的版本號。
安裝過程中可能存在的問題使用jekyll創(chuàng)建一個博客模板，并啟Server服務(wù)，執(zhí)行以下的命令：
jekyll new myblog cd myblog/ jekyll serve
當(dāng)執(zhí)行jekyll serve命令，我服務(wù)器環(huán)境報來以下的錯誤：
`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"
查了相關(guān)的資料，需要安裝bundler和minima插件，安裝命令如下：
gem install bundler gem install minima部署我的博客
部署博客需要在服務(wù)器中編譯博客，然后編譯后的博客放在Nginx服務(wù)的靜態(tài)路徑上
編譯博客需要git工具，下載在github上面的代碼，執(zhí)行以下命令：
git clone https://github.com/forezp/forezp.github.io cd forezp.github.io jekyll serve
jekyll serve命令會編譯我從github上下載的源碼，在這一步，第一次執(zhí)行會報以下的錯誤：
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
重新執(zhí)行jekyll serve，運行成功，此時可以通過curl命令查看服務(wù)器里部署的博客。
部署到Nginx服務(wù)器上：通過Jekyll編譯后的靜態(tài)文件需要掛載到Nginx服務(wù)器，需要安裝Nginx服務(wù)器。 安裝過程參考了http://nginx.org/en/linux_pac...
按照文檔，新建文件/etc/yum.repos.d/nginx.repo，在文件中編輯以下內(nèi)容并保存：
[nginx] name=nginx repo baseurl=http://nginx.org/packages/centos/7/$basearch/ gpgcheck=0 enabled=1
然后執(zhí)行安裝nginx命令，如下：
yum install nginx
Nginx配置成功后，需要設(shè)置Nginx的配置，配置文件路徑為/etc/nginx/conf.d/default.conf，配置的內(nèi)容如下：
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服務(wù)器成功后，將Jekyll編譯的博客靜態(tài)html文件輸出到Nginx服務(wù)器上，執(zhí)行以下的命令：
jekyll build --destination=/root/blog/html
啟動Nginx服務(wù)器，就可以正常的博客網(wǎng)頁了，如果需要在瀏覽器上訪問，需要在阿里云ECS控制臺的安全組件暴露80端口。如果想通過域名訪問，需要將域名解析設(shè)置指向你的服務(wù)器。
非www域名的重定向到www比如我想訪問http://fangzhipeng.com重定向...://www.fangzhipeng.com上，需要在Nginx的配置文件/etc/nginx/conf.d/default.conf，修改配置以下內(nèi)容：
listen 80;
server_name fangzhipeng.com www.fangzhipeng.com;
if ( $host != "www.fangzhipeng.com" ) {
rewrite "^/(.*)$" http://www.fangzhipeng.com/$1 permanent;
}
自動化部署
通過設(shè)置github的webhook可以實現(xiàn)自動化構(gòu)建和部署。過程是，提交博文或者配置到github倉庫，倉庫會觸發(fā)你設(shè)置的webhook，會向你設(shè)置的webhook地址發(fā)送一個post請求，比如我設(shè)置的請求是在服務(wù)器的跑的一個Nodejs程序，監(jiān)聽gitub webhook的請求，接受到請求后，會執(zhí)行shell命令。
首先設(shè)置github倉庫的webhook，在github倉庫的項目界面，比我的我的項目界面https://github.com/forezp/for...，點擊Setting->Webhooks->Add Webhook，在添加Webhooks的配置信息，我的配置信息如下：
Payload URL: http://www.fangzhipeng.com/in...
Content type: application/json
Secret: a123456
這樣Webhook就設(shè)置成功了，現(xiàn)在在博客所在的服務(wù)端去監(jiān)聽Github Webhook發(fā)送的請求，我采用的開源組件去監(jiān)聽github-webhook-handler，項目地址為：https://github.com/rvagg/gith...，首先安裝：
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服務(wù)的踐踏端口為3001，監(jiān)聽了path/incoming,Secret為a123456，這和之前Github Webhook設(shè)置的要保持一致。代碼run_cmd("sh", ["./start_blog.sh"]，指定了接受到請求后執(zhí)行./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的服務(wù)，執(zhí)行命令如下：
sudo npm install forever -g #安裝 $ forever start deploy.js #啟動 $ forever stop deploy.js #關(guān)閉 $ 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服務(wù)器的配置文件，需要將監(jiān)聽的/incoming請求轉(zhuǎn)發(fā)到nodejs服務(wù)上，配置代碼如下：
location = /incoming {
proxy_pass http://127.0.0.1:3001/incoming;
}
這樣，當(dāng)你提交了文章或者修改的配置到gitub上，github通過webhook向你所在的服務(wù)器發(fā)送請求，服務(wù)器接收到請求后執(zhí)行 sh命令，sh命令包括了重新pull代碼和編譯代碼的過程，這樣自動化部署就完成了，你只需提交代碼，服務(wù)器就觸發(fā)pull代碼和重新編譯的動作。
補充博客可以設(shè)置百度統(tǒng)計、谷歌分析、不蒜子統(tǒng)計、Gittalk留言板等功能，這些功能需要自己申請賬號，實現(xiàn)起來比較簡單，具體自己百度。
另外，如果博客需要上https協(xié)議，需要在阿里云申請免費的SSL證書，申請完之后，可以在阿里云上查看Nginx安裝SSL證書的教程，并做配置，按照它的提示來，比較簡單。最后涉及到了涉一個重定向的問題，比如我的網(wǎng)站，我需要將 http://fangzhipeng.com、http://www.fangzhipeng.com 、https://fangzhipeng.com 全部重定向到https://www.fangzhipeng.com，這時需要修改nginx的配置文件default.conf，現(xiàn)在我貼出我的完整的配置如下：
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（備注博客疑問）和我討論，如果問的人多，我考慮建一個交流群，大家一起討論答疑。大家也可以在留言版上留下自己的博客，讓大家互相訪問。
寫博客貴在堅持，貴在有一顆分享的心。我是看了純潔的微笑的博文，才有動力折騰了一下自己的博客，希望你看了我的這篇博文，會有自己搭建博客的沖動，然后自己動手完整的搭建，謝謝大家。
關(guān)注我：
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/71843.html
摘要：獲取標(biāo)簽及相關(guān)通常，我們會在博客首頁設(shè)計一個有分類的文章列表，這就要求在發(fā)布時需要選擇對應(yīng)的。這里我用的是的和的庫，核心代碼如下結(jié)合開發(fā)個人博客的核心內(nèi)容基本就這么多了，具體代碼歡迎查看，一起踩坑。 作為一個程序員，搭建一個個人博客幾乎是所有人的需求，一來比較酷，二來也可以記錄自己的學(xué)習(xí)和生活總結(jié)。但如果你不是全棧工程師，實現(xiàn)這個需求還是有點麻煩。后端搭建一套現(xiàn)有的前端框架及前端寫AP...
摘要：教程看到這里，你已經(jīng)學(xué)會如下內(nèi)容搭建開發(fā)環(huán)境博文管理用戶管理發(fā)表評論若干小功能搭建簡單的小博客，以上的功能夠用了。教程為了起步平緩，沒有展開這方面的內(nèi)容。陌生人，祝你學(xué)業(yè)進步事業(yè)有成歡迎常到杜賽的個人網(wǎng)站做客 教程看到這里，你已經(jīng)學(xué)會如下內(nèi)容： 搭建開發(fā)環(huán)境 博文管理 用戶管理 發(fā)表評論 若干小功能 搭建簡單的小博客，以上的功能夠用了。 相信你的志向不止于此。畢竟程序員面試個個造火...
很多人想要搭建自己的博客網(wǎng)站，但是又苦于沒有什么代碼基礎(chǔ)，部分同學(xué)可能覺得申請?zhí)摂M主機管理空間等操作繁瑣，于是苦苦尋找那種單純的寫作平臺，例如早期的新浪博客，現(xiàn)在的簡書、國外的WP等也就成為了不少人的選擇。但是使用第三方的博客平臺有一個最大的問題：不穩(wěn)定。可能有的人會說大廠商不怕倒閉，縱觀互聯(lián)網(wǎng)這十幾年的發(fā)展，再大的大牌服務(wù)如果沒有贏利支撐，該倒閉的倒閉，該關(guān)停的關(guān)停。用戶的利益對于商家來說不是高...
摘要：一步一步教你基于搭建自己的個人博客，作為成熟的框架，美觀，方便，插件多，更新頻繁，非常適合個人博客與網(wǎng)站的搭建，適合新手，無需太多的代碼基礎(chǔ)。原文鏈接手把手教你搭建自己的網(wǎng)站購買購買云服務(wù)器為了搭建個人網(wǎng)站，首先肯定需要一個云服務(wù)器。 一步一步教你基于WordPress搭建自己的個人博客，WordPress作為成熟的CMS框架，美觀，方便，插件多，更新頻繁，非常適合個人博客與網(wǎng)站的搭建...
摘要：前一陣子一直在想怎么搗鼓出自己的博客來，直到發(fā)現(xiàn)了是什么是一個開源的靜態(tài)博客生成器用開發(fā)作者是臺灣大學(xué)生同樣是大學(xué)生，我和他的差距怎么這么大她是一個快速簡潔且高效的博客框架。本人用的主題是然后對其進行定制，簡直不能再棒。 前一陣子一直在想怎么搗鼓出自己的博客來，直到發(fā)現(xiàn)了hexo hexo是什么 Hexo是一個開源的靜態(tài)博客生成器,用node.js開發(fā),作者是臺灣大學(xué)生tommy351...
閱讀 932·2021-11-16 11:45
閱讀 2137·2021-10-09 09:44
閱讀 1354·2019-08-30 14:03
閱讀 1138·2019-08-26 18:28
閱讀 3340·2019-08-26 13:50
閱讀 1728·2019-08-23 18:38
閱讀 3459·2019-08-23 18:22
閱讀 3608·2019-08-23 15:27
