程式設計師如何搭建自己的個人部落格

方誌朋發表於2018-10-22

我從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檔案，寫上自己申請的域名，比如的我的：

www.fangzhipeng.com

大概過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: www.fangzhipeng.com/incoming
Content type: application/json
Secret: a123456

這樣Webhook就設定成功了，現在在部落格所在的服務端去監聽Github Webhook傳送的請求，我採用的開源元件去監聽github-webhook-handler，專案地址為：github.com/rvagg/githu…

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證書的教程，並做配置，按照它的提示來，比較簡單。最後涉及到了涉一個重定向的問題，比如我的網站，我需要將 fangzhipeng.com、www.fangzhipeng.com 、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（備註部落格疑問）和我討論，如果問的人多，我考慮建一個交流群，大家一起討論答疑。大家也可以在留言版上留下自己的部落格，讓大家互相訪問。

寫部落格貴在堅持，貴在有一顆分享的心。我是看了純潔的微笑的博文，才有動力折騰了一下自己的部落格，希望你看了我的這篇博文，會有自己搭建部落格的衝動，然後自己動手完整的搭建，謝謝大家。

掃碼關注有驚喜

（轉載本站文章請註明作者和出處方誌朋的部落格）

程式設計師如何從0到1搭建自己的技術部落格
2019-03-29
程式設計師
每個程式設計師都該有個自己的部落格，分享我的四種部落格搭建教程！
2021-01-25
程式設計師
技術人如何搭建自己的技術部落格
2018-09-20
如何搭建個人獨立部落格網站?
2020-11-29
網站
豪橫！程式設計師搭建技術部落格，就只需一個GitHub賬號
2020-04-04
程式設計師Github
使用WordPress搭建一個專屬自己的部落格
2020-10-27
一個專為程式設計師設計的精緻 Java 部落格系統
2024-05-27
程式設計師Java
基於Vue搭建自己的部落格
2019-04-07
Vue
華之央 - 一個文藝的程式設計師的個人部落格網站
2019-05-11
程式設計師網站
程式設計師如何保護自己的眼睛
2018-12-06
程式設計師
萬字長文詳解如何搭建一個屬於自己的部落格（純手工搭建??）
2021-04-24
為什麼要搭建自己的部落格
2020-11-21
程式設計師小白的個人思考
2021-09-09
程式設計師
hexo搭建個人網站部落格完全教程
2018-09-14
Hexo網站
只需9步教你搭建自己的個人部落格 (Hexo+Github)
2018-04-16
HexoGithub
用原生Go寫一個自己的部落格-搭建專案（一）
2022-07-13
Go
個人搭建部落格的幾種方法和方案
2020-11-29
VuePress從零開始搭建自己的部落格
2018-06-09
Vue
用自己的伺服器搭建HEXO部落格
2020-11-27
伺服器Hexo
如何使用Typora寫出自己的第一個部落格
2024-08-14
個人的小部落格
2019-05-11
搭建個人部落格
2024-04-06
程式設計師自我【營銷】，如何打造個人【品牌】
2020-11-03
程式設計師
搭建自己的技術部落格系列（四）部落格接入百度統計，隨時瞭解你部落格的PV/UV
2019-09-14
程式設計師如何祝自己生日快樂
2018-04-03
程式設計師
如何搭建部落格
2020-12-02
程式設計師為什麼要堅持寫部落格
2021-03-06
程式設計師
雷軍做程式設計師時寫的部落格，太牛了！
2024-04-08
程式設計師
雷軍做程式設計師時寫的部落格，太牛了。。
2021-12-22
程式設計師
如何快速給自己構建一個溫馨的”家”——用Jekyll搭建靜態部落格
2019-02-23
Hexo+GitHub+阿里域名搭建自己部落格
2018-08-16
HexoGithub阿里
如何確定自己是否適合做程式設計師？程式設計師的成長需要什麼？
2019-12-02
程式設計師
Android 程式設計師不得不收藏的 90+ 個人部落格(持續更新...)
2019-12-25
Android程式設計師
如何確定自己是否適合做程式設計師？
2021-09-09
程式設計師
個人部落格搭建( wordpress )
2019-01-31
原型設計工具個人部落格
2024-05-22
原型
有經驗的程式設計師應該如何提升自己
2018-05-09
程式設計師
自己寫的簡單的一個部落格
2019-05-11