如何搭建自己的個人博客

我從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: 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文件的代碼如下，首先進入到博客的代碼文件，拉代碼，編譯。

1 2 3 4 5 6 7echo?`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的服務，執行命令如下：

1 2 3 4 5 6 7 8 9sudo?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（備注博客疑問）和我討論，如果問的人多，我考慮建一個交流群，大家一起討論答疑。大家也可以在留言版上留下自己的博客，讓大家互相訪問。

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

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。