2020年，必須擁有本身的博客網站(上)

不少優秀的技術人員都有本身的博客，寫博客已經成了一種習慣。做爲一名程序員，你，爲何要堅持寫博客？答案有不少：

• 能讓人具有更好的總結能力
• 加深本身對某項技術的理解
• 得到別人的承認
• 提升本身的表達能力
• 爲本身的生活留下足跡
• 證實本身的能力
• 開源精神
• 用來裝逼
• ...

不論是啥理由，一個優秀的程序員都應該不斷的去激勵本身，在平常中反省本身，與千萬優秀人看齊，把優秀當作一直習慣。

因此，今天咱們就來一步一步實現本身那獨一無二的博客！

前言

搭建博客有不少種方案，能夠從零開發全部功能(阮一峯的我的網站)，但這有點讓人頭大，繁瑣的事務實在是太多了：頁面的編寫、後臺的開發、留言板的開發。。。讓人難覺得繼！另外一種方案就是基於現有的集成框架，咱們只關心本身輸出的文章，其餘的事情都留給框架去作。

目前，這類的框架不少：WordPress、Jekyll、VuePress、Hexo等等，都是很優秀的框架。今天，咱們嘗試使用Hexo來搭建博客。

初始化項目

在使用hexo-cli初始化項目以前，咱們須要使用npm以全局安裝:

npm install hexo-cli -g
複製代碼

初始化一個項目：

hexo init myblog
cd myblog
npm install
hexo server
複製代碼

由於網絡的緣由，加載的時間可能比較長，耐心等待下。

而後，訪問http://localhost:4000/你的博客就這麼跑起來了：

就這麼跑起來了！！！很難以想象。如今有兩個亟待解決的問題：

• 一：博客外觀使用的是默認的landscape主題，太死板並且容易撞衫
• 二：咱們的博客如今只是運行在本地，咱們須要將之放到Github上，而且可使用網址訪問

咱們先來解決問題二，咱們火燒眉毛地想經過url來訪問咱們的站點了!

將代碼託管到github上

針對國內訪問Github網速很慢，咱們也可使用碼雲來託管代碼，大致的配置都是類似的。只是我的以爲Github更正統一點，因此這裏使用的是Github

要想將代碼託管到Github上，咱們須要新建一個項目：

點擊New repository按鈕以新建項目：

填寫上倉庫名稱和描述，而後點擊Create repository按鈕：

看到這個頁面，就表明倉庫真的建立完成了，如今咱們跟着紅框中的步驟，將本地的源碼推送到Github上：

git init
git add .
git commit -m "first commit"
git remote add origin https://github.com/xch1029/myblog.git
git push -u origin master
複製代碼

一切順利的話，再次訪問倉庫的頁面，咱們看到了提交的代碼，這說明咱們本地的源碼已經push到了倉庫裏。

咱們的目標是使用url來訪問咱們的博客，因此咱們下一步使用的技術是github-pages，使用github-pages來展現咱們的博客。

自動部署的github-pages

雖然使用的是github-pages，可是這並不意味着咱們須要手動打包再手動部署，這一切繁雜的事務都讓travis-ci幫咱們完成吧。

簡單介紹下travis-ci：travis-ci是一個不須要本身搭建的在線持續集成工具，其最大的特色就是能和github無縫銜接，並且是無償使用（針對開源項目）。使用起來也非的常容易，只須要在項目中添加.travis.yml配置文件

配置自動化部署

使用 Github帳號登陸 travis，而後將咱們的博客倉庫的開關打開，這是爲了告訴 travis容許使用項目中的 .travis.yml以自動部署。

編寫.travis.yml

在項目的根目錄中添加文件.travis.yml

sudo: false
language: node_js
node_js:
 - 12 # 使用12的LTS版本
cache: npm
branches:
 only:
 - master # 只監聽master分支的push
script:
 - hexo generate # 自動化構建的腳本
deploy:
 provider: pages
 skip-cleanup: true
 github-token: $GITHUB_TOKEN
 keep-history: true
 on:
 branch: master
 local-dir: public
複製代碼

注意兩點：

• 一：在_config.yml中，第17行的root屬性，須要改成和項目名字同樣，這是爲了保證github-pages的靜態資源路徑引用正確

# 17行改成：
root: /myblog/
複製代碼

• 二：在.travis.yml中咱們使用了變量$GITHUB_TOKEN，這是travis可以操做Github的關鍵。咱們須要在Github中生成一個Token，再複製到travis中:

前往Github新建 Personal Access Token，只勾選 repo 的權限並生成一個新的 Token。Token 生成後請複製並保存好。

回到 Travis CI，前往你的 repository 的設置頁面，在 Environment Variables 下新建一個環境變量，Name 爲 GITHUB_TOKEN，Value 爲剛纔你在 GitHub 生成的 Token。確保 DISPLAY VALUE IN BUILD LOG 保持不被勾選 避免你的 Token 泄漏。點擊 Add 保存。

這就是全部內容了！！！，將咱們的代碼提交了，看看有沒有觸發travis的自動構建：

git add .
git commit -m "add travis"
git push
複製代碼

驗證

如今訪問地址：xch1029.github.io/myblog，其中的xch1029替換成你的Github名字。

背後的原理

其實，travis新建了一個分支gh-pages以用做展現github-pages，而分支的內容就是咱們構建後的靜態資源。

後續文章

由於篇幅限制（不想將文章寫得太長，以避免難以閱讀），今天就寫到這裏！由於咱們已經能夠訪問咱們的博客了！

關於博文撰寫、主題配置、自定義樣式、自動化部署到服務器等文章，會在後續持續產出，請保持關注！