原文地址：www.xksblog.top/quickly-bui…

作為一個對技術有著熱情渴望的前端小白，對于寫Blog這種事也是躍躍欲試。于是乎趕緊從網上搜羅了一堆搭建個人Blog的方法，對比了下，最后傾心于Hexo這個博客框架，搭配Github/碼云的page服務，可以輕松搭建一個炫酷又不失優雅的靜態Blog（還是完全免費的）

前期準備工作

• 去Git官網，下載安裝Git（版本控制系統）
• 去Node.js官網，下載安裝Node.js（自帶NPM包管理工具，另外Hexo是基于Node.js的）
• 注冊一個碼云或Github賬號（提供page服務）
• 有一個經常閱讀官方文檔的好習慣（一些簡單的安裝自行去看官方教程，這里不會啰嗦）

為什么選擇Hexo+碼云

• Hexo主打快速、簡潔和高效，安裝過程簡單，關鍵是它的模板主題非常華麗亮眼（這或許也是Hexo吸引了眾多妹子程序媛的原因）

  我們可以看看Hexo官方對自家的定義： Hexo 是一個快速、簡潔且高效的博客框架。Hexo 使用Markdown（或其他渲染引擎）解析文章，在幾秒內，即可利用靚麗的主題生成靜態網頁。

• 至于碼云 vs Github方面，碼云作為國內網站，訪問速度自然是比Github快一些，且更容易被SEO收錄提升博客的曝光率。

第一步：Hexo安裝與測試

1.請先安裝好Git和Node.js

2.安裝Hexo：使用cmd命令行，輸入下列命令

$ npm install -g hexo-cli 復制代碼

3.指定一個文件夾存放你的Blog文件（也就是根目錄）

$ hexo init <folder> # <folder>替換成你的文件夾地址，在這個地址里生成Hexo初始化文件 $ cd <folder> # 進入這個文件夾 $ npm install # 在文件夾內自動安裝Hexo所依賴的各種模塊 復制代碼

經過以上3步，Hexo就初始化成功了，下面我們進行一下本地測試

4.生成靜態頁面

$ hexo generate 復制代碼

5.本地測試：開啟服務器

Hexo 3.0 把服務器獨立成了個別模塊，所以我們必須先安裝 hexo-server 才能使用server

$ npm install hexo-server --save 復制代碼

安裝成功后，以后我們只需要使用下面的命令就可以開啟服務器了，開啟后默認的網站訪問地址為：http://localhost:4000

$ hexo server 復制代碼

簡單的5步，一個最原始的本地Hexo博客就已經搭建好了。瀏覽器輸入http://localhost:4000就可以看到類似如下效果。

第二步：Hexo部署前的準備工作

在localhost:4000新鮮夠了沒？接下來就是真刀真槍的干了，我們這里使用碼云進行Blog的部署(Github也是類似的方法)。

1.登錄碼云，新建一個項目。

如果想以http://xuek.gitee.io這種一級域名的形式訪問bolg，那么我們需要建立一個與自己個性地址同名的項目，如 https://gitee.com/xuek 這個用戶，在創建項目時項目名稱應該為xuek。

2.在克隆/下載中，復制HTTPS里的鏈接。

3.找到Blog本地的根目錄里的_config.yml文件，找到deploy這一項，將之前復制的HTTPS里的鏈接復制到repo后面，然后修改type的值為git，然后保存即可。

經過以上3步，我們就將碼云和本地的Blog建立了連接，那么我們該怎么將Blog部署到碼云上呢？別急，接下來就到git登場了。

第三步：使用git對Blog進行版本控制

1.在Blog根目錄單擊右鍵，選擇Git Bash here

git bash就是模擬出來的小型Linux命令行

2.如果是第一次使用git的話，要先配置一下我們git的基本信息

$ git config --global user.name+空格+你的名字(最好和碼云的一樣) $ git config --global user.email+空格+你的郵箱(最好和碼云的一樣) 復制代碼

3.接下來我們就可以在Git Bash中初始化git，把Blog根目錄變成一個git可以管理的倉庫

$ git init 復制代碼

這樣就可以使用git管理你的Blog版本了，更多關于git的使用參見: 廖雪峰的git教程

第四步：部署Hexo到碼云

萬事俱備，只欠東風。你有沒有發現git\hexo\碼云這三者已經關聯起來了？好了，下面我們將用git把Hexo部署在碼云上

1.在Blog根目錄下安裝Hexo的Git部署插件

$ npm install hexo-deployer-git --save 復制代碼

2.安裝好了Git部署插件之后，我們就可以輸入命令一鍵部署了

$ hexo deploy 復制代碼

之后會彈出一個對話框，讓我們輸入碼云的帳號和密碼（稍后我們會配置網站的SSH，這樣就不用每次都輸入賬號密碼了）

第五步：使用碼云的page服務

1.進入我們碼云的項目里，會發現Blog的靜態文件已經上傳到項目中了

2.選擇服務—>Gitee Pages，我們使用master分支，然后直接點“啟動”，即可啟動page服務。 更多關于碼云page的說明可參考官網：碼云Gitee幫助文檔

大功告成！點擊網站地址就可以進入屬于你自己的Blog了！

不過我們可沒有結束，一切才剛剛開始..

第六步：配置SSH

有了免費的服務器(page)之后，我們還可以把它和我們個人電腦作一個綁定，以后使用git通訊就不用總是輸入賬號密碼，自然方便多了！

這里不啰嗦了，最完美的配置SSH教程參見官網：生成并部署SSH key

第七步：安裝主題

Hexo使用者樂此不疲的地方就在于它各種炫酷的主題了，不過Hexo官網那點主題不夠看，更多的還是移步這里：有哪些好看的 Hexo 主題？

Hexo的主題基本是傻瓜式安裝，只需要將主題文件復制到Blog根目錄的themes文件夾下， 然后修改下_config.yml站點配置文件即可：

這里我們使用了Next主題，具體的安裝和使用方法參見官網：NexT使用文檔

第八步：新建文章

1.使用下面的命令生成一篇新文章

$ hexo new "title" 復制代碼

2.生成的新文章都在\source\_posts\title.md目錄下，打開后注意理解下頂部的模板參數，其他自行編輯即可。

title: Hello World // 文章標題 date: 2018-07-11 23:49:28 // 文章生成時間，一般默認即可 categories: text // 文章分類目錄，可使用[a,b,c]表示多個分類 tags: [Hexo,text] // 文章標簽 ---// 正文部分，使用markdown進行書寫。<!--more--> // 如果設置了閱讀全文選項，則more標簽以下的內容在首頁會被“閱讀全文”字樣隱藏復制代碼

3.文章修改后可依照前面的方法先在本地 http://localhost:4000 進行預覽（每次需要重新啟動下sever），至于正式更新到網站上還需要看下一步。

第九步： 更新Blog

1.清除緩存文件 (db.json) 和已生成的靜態文件 (public)

$ hexo clean 復制代碼

2.重新生成靜態文件并自動部署到網站

$ hexo generate --deploy # 可以簡寫為hexo g -d 復制代碼

總結

以上就是基于Hexo搭建Blog的一些基礎性內容。這個教程也只是把思路理順了一下，權當是一個分享，文章若有錯誤之處還請多多指點。

一個Blog的搭建過程看似簡單，但其中用到的知識卻非常廣泛，也需要花費些時間仔細閱讀下各個官方文檔，不僅要知道怎么用，還要知道為何這么用，這也是我們下一步要繼續研究的。

萬里長征才走了第一步，接下來就是有趣但也是非常具有挑戰性的事————個性化我們的Blog。關于Blog主題的美化和個性化，就是一個浩大的工程了，網上關于Next主題優化的進階教程非常多，有興趣的可以嘗試下，這里就暫時不做討論了，日后有需要再另作一文。

轉載于:https://juejin.im/post/5b7ad46b6fb9a019dd6aa214

總結

以上是生活随笔為你收集整理的Hexo+码云+git快速搭建免费的静态Blog的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。