程序員如何搭建本身的我的博客

時間 2019-11-08

原文原文鏈接

我從2016年開始寫博客，陸陸續續寫了大概兩百篇博客。寫博客有不少好處，其一是它可以迫使你總結你學習的知識，你需不但的消化本身的知識點，使你對知識有了更深入的認識；其二是你的博客如同你的我的簡歷，記錄了你的學習歷程，經過寫博客，可讓別人認識你，能夠結交更多的行業朋友；其三，博客起到了傳播知識的做用，特別是技術類的博客可以幫助別人解決技術問題，幫助人是一件快樂的事，何樂而不爲。因此寫博客對於程序員來講相當重要，在我以前的文章，我已經講述過了，寫博客給我帶來了什麼，再次不在贅述。html

我一開始寫博客是從簡書開始的，當時被簡書優雅的markdown寫做方式所吸引。剛開始寫文章網的閱讀量，一篇可以達到幾百的閱讀量是很是開心的事情，若是可以被簡書推薦到首頁可以開心好幾天。在簡書我認識了木東居士、仗劍走天涯，並在那時創建了簡書圈，並保持了很是好的友誼關係，很是的珍貴。node

大概17年初我將本身的寫博客主要陣地轉移到了CSDN，緣由是CSDN在百度搜索引擎中佔據了最高的權重。後面證實個人判斷是正確的，個人CSDN博文閱讀量一路飆升，讓更多的人能夠的閱讀個人博客。linux

就在上個月我閱讀了純潔的微笑的博文技術人如何搭建本身的技術博客這篇文章，我決定折騰一下搭建一下本身的我的博客。nginx

其實在17年，我就開始搭建了本身的我的博客，採用Jekyll靜態博客，託管在github上面的，而且買了本身的域名fangzhipeng.com，cname到github上。因爲github網絡不穩定，體驗實在是太差，一直沒有怎麼打理，處於一種無人管理的狀態。c++

就在月初，我將我的的博客遷移到了本身的服務器，並在羣裏放出來，有人就讓我寫篇博文，讓他參考下如何搭建屬於本身的我的博客。因而我抽空寫出了這篇文章。git

這篇文章詳細的介紹瞭如何搭建個人我的博客。程序員

使用Github託管博客

在github上託管博客上很是簡單的一件事，只須要fork一個你喜歡的博客的主題，並將fork的工程名修改成{github-username}.github.io，並將原博主的文章刪除，並放上本身的博文，就能夠了。github

好比個人博客使用的是https://github.com/Huxpro/huxpro.github.io的主題，首先我將這個項目fork一下，並將fork後的項目更名字爲forezp.github.io，讀者須要將forezp替換成本身的github用戶名。web

而後打開網頁forezp.github.com就能夠訪問該主題的博客了。將修改後項目git clone下來，按照主題說明進行配置的修改，將原博主的文章刪除，替換成本身的博文，git push修改後的工程到github上面,github pages就會自動構建，根據你的修改內容生成頁面，訪問{github-username}.github.io就能夠看到修改後的內容。shell

若是你須要本身的域名，能夠在阿里雲上申請本身的域名，好比的個人域名爲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（備註博客疑問）和我討論，若是問的人多，我考慮建一個交流羣，你們一塊兒討論答疑。你們也能夠在留言版上留下本身的博客，讓你們互相訪問。

寫博客貴在堅持，貴在有一顆分享的心。我是看了純潔的微笑的博文，纔有動力折騰了一下本身的博客，但願你看了個人這篇博文，會有本身搭建博客的衝動，而後本身動手完整的搭建，謝謝你們。

掃碼關注有驚喜