初出茅廬之時(shí)枚尼，看到他人的博客，總會(huì)產(chǎn)生一絲新鮮感更胖，好奇之心讓你不知不覺跟隨著他人的腳步铛铁，在寫作平臺(tái)開始展露拳腳。
發(fā)布了兩三篇文章后却妨，又發(fā)現(xiàn)有些人并非在寫作平臺(tái)寫作饵逐，而是在擁有自己域名的博客平臺(tái)發(fā)布。就像小時(shí)候看到鄰居小孩吃糖彪标，不知甜不甜就想著自己也能吃一塊倍权。然后就開始折騰了，購買域名空間捞烟，獨(dú)立搭建博客薄声。
從寫文章到搭建博客這思路是對(duì)的，但不乏帶有點(diǎn)跟風(fēng)之意坷襟。博客奸柬，技術(shù)圈的個(gè)人名片。特別是在招聘面試時(shí)婴程，部分面試官會(huì)特別關(guān)注面試者是否有個(gè)人博客廓奕，一來從博客上能看出面試者的表達(dá)能力和涉獵做葵，二來能看到個(gè)人的代碼水平和編碼習(xí)慣弧满。
此外，博客的書寫對(duì)個(gè)人也是一種技能鍛煉。資料的整理头滔，特別是技術(shù)問題的整理，有助于自己下一次遇到類似的問題時(shí)能否更好的回憶細(xì)節(jié)和復(fù)用相關(guān)代碼己沛。
但如何能又快又好的搭建臂拓，這是講究方法的。
筆者在開發(fā)博客前押逼，簡(jiǎn)單做了調(diào)研步藕，了解到當(dāng)下最受歡迎的搭建模式就是借助GitHub Page和靜態(tài)博客框架。接下來向大家介紹整個(gè)博客的搭建流程挑格。
Github Pages 入門
- 首先咙冗，注冊(cè)Github帳號(hào)。
注冊(cè)Github帳號(hào) - 然后漂彤，將代碼托管在 Github 上雾消。
新建一個(gè) repository。如果你希望你的站點(diǎn)能通過 <你的 GitHub 用戶名>.github.io 域名訪問挫望，你的 repository 應(yīng)該直接命名為 <你的 GitHub 用戶名>.github.io立润。例如，qwebfe.github.io媳板。 - 最后配置 Github Pages桑腮，具體細(xì)節(jié)詳見 Getting Started with GitHub Pages。
靜態(tài)博客框架
根據(jù)筆者調(diào)研拷肌，網(wǎng)上討論最多的博客框架當(dāng)屬 Jekyll 和 Hexo到旦。有人說，Jekyll 就是為了寫博客打造的巨缘。Github Pages 中提供的 Jekyll 主題似乎也驗(yàn)證了這點(diǎn)添忘。早期組內(nèi)的博客也是基于 Jekyll 搭建的，其原因我想大概是 GitHub 自帶 Jekyll 引擎若锁，無需部署靜態(tài)頁面搁骑，只放項(xiàng)目源碼即可。后因開發(fā)環(huán)境依賴問題不便維護(hù)又固，便棄 Jekyll 從 Hexo仲器。據(jù)說 Hexo 的出現(xiàn)是因?yàn)?Jekyll 比較慢，大概是早期 Hexo 還不夠成熟仰冠，還不支持自動(dòng)化部署乏冀，也給使用者帶來了不便，但那個(gè)時(shí)候已經(jīng)過去了洋只。接下來向大家具體介紹 Jekyll 和 Hexo辆沦。
Jekyll
gem install bundler jekyll
jekyll new my-awesome-site
cd my-awesome-site
bundle exec jekyll serve
# => Now browse to http://localhost:4000
通過以上幾個(gè)命令可以看出昼捍，Jekyll 是基于 Ruby 實(shí)現(xiàn)的，安裝 Jekyll 需要搭建 Ruby 環(huán)境肢扯，但在 Windows 搭建 Ruby 環(huán)境并不被推薦妒茬。若你是 Windows 用戶，那可能一開始就跌倒在安裝 Jekyll 的起跑線上蔚晨。
我們組的早期博客基于 Jekyll乍钻，運(yùn)行了小一年時(shí)間，但用戶體驗(yàn)不是很好铭腕。受環(huán)境搭建影響银择，多數(shù)成員無法啟動(dòng)本地服務(wù)器，都是盲寫文章谨履，推送上線后欢摄，發(fā)現(xiàn)問題再修復(fù)。有一次把文章日期提前了一天笋粟，上線后新文章一直未被構(gòu)建。無法本地預(yù)覽析蝴，一定程度上影響排查效率害捕。后面求助了同事，也沒找到原因闷畸，但在第二天早上被告知文章構(gòu)建成功了尝盼。筆者一時(shí)蒙蔽，后查閱了各手資源佑菩，才得知以下這個(gè)答案：
Jekyll 是不會(huì)構(gòu)建未來日期的文章的盾沫！
在主題方面，有想法的你可自行選擇Jekyll主題殿漠。按照安裝提示赴精，或基于gem，或只取遠(yuǎn)程主題绞幌，或直接直接拷貝至項(xiàng)目中蕾哟，然后配置 _config.yml 文件即可。
theme: minimal-mistakes-jekyll
厭倦了 Jekyll 的那段愛恨情仇莲蜘，最終投向了 Hexo 的懷抱谭确。
Hexo
A fast, simple & powerful blog framework
快速、簡(jiǎn)潔且高效的博客框架
Hexo 是基于 NodeJs 實(shí)現(xiàn)票渠，在 Windows 上安裝 NodeJs 開發(fā)環(huán)境可謂是相當(dāng)簡(jiǎn)單逐哈。何其美哉！樂哉问顷！
Hexo 默認(rèn)的主題是 landscape昂秃，接觸過博客園的童鞋可能覺得該主題有它的味道薯鼠。蘿卜青菜各有所愛，你可自行選擇主題械蹋。關(guān)于 Hexo 的主題出皇，筆者想說是我喜歡的調(diào)調(diào)??，本組博客應(yīng)用的主題是NexT
建站
啥也不說了哗戈，搬磚吧郊艘。
安裝
npm install -g hexo-cli
初始化
hexo init <folder>
cd <folder>
npm install
npm server
M：咦? 這一套指令好像在哪見過??。
H：?? vue ?
M：嗷嗚...
項(xiàng)目初始化完成后唯咬，指定文件夾的目錄如下：
.
├── _config.yml # 網(wǎng)站的 配置 信息
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes
- scaffolds: 模版文件夾, 當(dāng)你新建文章時(shí)纱注，Hexo 會(huì)根據(jù) scaffold 來建立文件
- source: 資源文件夾，存放用戶資源的地方胆胰。除 _posts 文件夾之外狞贱，開頭命名為 _ (下劃線)的文件 / 文件夾和隱藏的文件將會(huì)被忽略。Markdown 和 HTML 文件會(huì)被解析并放到 public 文件夾蜀涨，而其他文件會(huì)被拷貝過去瞎嬉。
- themes: 主題文件夾，把你想要的主題拷貝至當(dāng)前目錄即可厚柳。
- _config.yml: 網(wǎng)站的配置信息氧枣，Hexo 這個(gè)點(diǎn)很友好，它給相關(guān)配置都做了注釋和文檔說明别垮。
- theme: 你選用的主題便监，默認(rèn)為
landscape
- theme: 你選用的主題便监，默認(rèn)為
寫作
項(xiàng)目創(chuàng)建完成后，我們就可以開始寫作了碳想。關(guān)于寫作烧董，Hexo cli 也提供了相關(guān)指令，可快速創(chuàng)建一篇新文章或者新的頁面胧奔。
hexo new [layout] <title>
- layout逊移，Hexo 有三種默認(rèn)布局：post、page 和 draft葡盗∶螅基于不同類型創(chuàng)建的文件會(huì)存儲(chǔ)在各自對(duì)應(yīng)的路徑中，你可以編輯
scaffolds/*下的模板文件觅够，保證新頁面的規(guī)范性胶背。 - title，Hexo 默認(rèn)以標(biāo)題做為文件名稱喘先，但你可編輯 new_post_name 參數(shù)來改變默認(rèn)的文件名稱钳吟，舉例來說，設(shè)為 :year-:month-:day-:title.md 可讓你更方便的通過日期來管理文章窘拯。
new_post_name: :year-:month-:day-:title.md
執(zhí)行指令時(shí)只需輸入文件名红且，創(chuàng)建成功會(huì)自動(dòng)帶上當(dāng)天日期坝茎，文件內(nèi)容也會(huì)按照模板格式顯示。
hexo new test # ==> source/_posts/2020-12-01-test.md
若你想了解更多使用方法暇番，可前往hexo官網(wǎng)嗤放。
部署
Hexo 官方介紹了三種部署方式。由于我們代碼托管在了 Github 上壁酬，那筆者就部署到 GitHub Pages 展開介紹次酌。
1、將你本地的 Hexo 站點(diǎn)文件夾推送到 repository（<你的 GitHub 用戶名>.github.io） 中舆乔。默認(rèn)情況下 public 目錄將不會(huì)被推送到 repository 中岳服，你應(yīng)該檢查 .gitignore 文件中是否包含 public 一行，如果沒有請(qǐng)加上希俩。
2吊宋、將 Travis CI 添加到你的 GitHub 賬戶中。
3颜武、前往 GitHub 的 Applications settings璃搜，配置 Travis CI 權(quán)限，使其能夠訪問你的 repository盒刚。若你在第2步忘記了設(shè)置 Travis CI 的倉庫權(quán)限腺劣，也可在此重新配置。
4因块、保存設(shè)置后你應(yīng)該會(huì)被重定向到 Travis CI 的頁面。如果沒有籍铁，請(qǐng) 手動(dòng)前往涡上。
5、在瀏覽器新建一個(gè)標(biāo)簽頁拒名，前往 GitHub 新建 Personal Access Token吩愧，只勾選 repo 的權(quán)限并生成一個(gè)新的 Token。Token 生成后請(qǐng)復(fù)制并保存好增显。
6雁佳、回到 Travis CI，前往你的 repository 的設(shè)置頁面同云，在 Environment Variables 下新建一個(gè)環(huán)境變量糖权，Name 為
GH_TOKEN ，Value 為剛才你在 GitHub 生成的 Token炸站。確保 DISPLAY VALUE IN BUILD LOG 保持 不被勾選 避免你的 Token 泄漏星澳。點(diǎn)擊 Add 保存。
7旱易、在你的 Hexo 站點(diǎn)文件夾中新建一個(gè) .travis.yml 文件：
sudo: false
language: node_js
node_js:
- 10 # use nodejs v10 LTS
cache: npm
branches:
only:
- master # build master branch only
script:
- hexo generate # generate static files
deploy:
provider: pages
skip-cleanup: true
github-token: $GH_TOKEN
keep-history: true
on:
branch: master
local-dir: public
8禁偎、將 .travis.yml 推送到 repository 中腿堤。Travis CI 應(yīng)該會(huì)自動(dòng)開始運(yùn)行，并將生成的文件推送到同一 repository 下的 gh-pages 分支下.
9如暖、在 GitHub 中前往你的 repository 的設(shè)置頁面笆檀，修改 GitHub Pages 的部署分支為 gh-pages。
10盒至、前往
https://<你的 GitHub 用戶名>.github.io 查看你的站點(diǎn)是否可以訪問酗洒。這可能需要一些時(shí)間。
或許你覺得這種基于 Travis CI 的部署方式配置繁瑣妄迁，但你要知道一旦配置走通寝蹈，后期部署都走自動(dòng)化，對(duì)于團(tuán)隊(duì)博客而言能在一定程度上減輕心智負(fù)擔(dān)登淘。你要是真不想配置箫老，推薦使用官方的一鍵部署，但這種部署方式每次都要人工執(zhí)行操作黔州。
后記
還是那句話耍鬓，蘿卜青菜個(gè)有所愛。從 Jekyll 到 Hexo流妻，這趟旅行雖說不易牲蜀，但旅途中的風(fēng)景也是令人難忘。若你還有更好用的博客框架绅这，可留言推薦給筆者和大家涣达。
