不用花一分線，鬆哥手把手教你上線我的博客

上一篇：據說你的 IDEA 昨天掉鏈子了？鬆哥給你準備了大招
有很多小夥伴私信鬆哥，打聽鬆哥的博客是怎麼作的，其實這個我以前和你們聊過，今天就再來講一說。html

我記得是 2015 年 4 月 15 在CSDN上發表了個人第一篇博客，是一個學習筆記，從那以後開啓了我博客寫做之路，到今天爲止 4 年多了。前端

這 4 年時間我在 CSDN 上發表的博客最多，共有 550 篇原創，CSDN 是個人大本營，不過在這期間也有斷斷續續在其餘公共平臺上發過博客，例如 sf、博客園、掘金、慕課網等，可是都是很是零散，2016 年的時候，利用個人 GitHub 也搭建了一個我的站點，可是隻是試驗了幾個頁面，並無好好去維護。java

今年搞了一個本身的獨立博客 http://www.javaboy.org ，從四月份到如今，博客 PV 和 UV 都以肉眼可見的速度增加，我也是蠻開心的。由於你們我的獨立博客最怕的就是流量，這也是我把這個事情拖了 4 年才作的緣由之一，可是真正動手作以後，我發現搭建我的獨立博客比想象的要容易不少，至於流量，只要內容 OK，流量也都不是事。node

今天我就來和你們聊一聊如何搭建一個我的博客。git

技術選型

目前靜態博客站點很是流行，因此我其實不太建議你們再去搞動態博客系統，那樣要操心的事情太多了。使用搭建靜態博客，可讓咱們把大部分精力集中在博客寫做上，而不是無休止的耗費在博客搭建上（不少小夥伴搭建博客的時候興致勃勃，搭建完成後就意興闌珊，而後就沒有而後了，空留一個博客網站擺在那裏）。github

靜態博客選型，鬆哥目前接觸到的主要是兩種方案：spring

1. GitHub 上 結合 Jekyll 搭建的博客，Jekyll 是一個簡單的博客形態的靜態站點生產機器。它有一個模版目錄，其中包含原始文本格式的文檔，經過一個轉換器（如 Markdown）和咱們的 Liquid 渲染器轉化成一個完整的可發佈的靜態網站，你能夠發佈在任何你喜好的服務器上。Jekyll 也能夠運行在 GitHub Page 上，也就是說，你可使用 GitHub 的服務來搭建你的項目頁面、博客或者網站，並且是徹底免費的。
2. 本地渲染好 HTML 後，上傳到服務端，表明做品就是 hexo。

簡單說，第一種方式，就是咱們在本地寫好 markdown 以後，直接上傳到服務端，服務端會自動渲染成 HTML，而後展現給用戶，第二種方案則是咱們在本地寫好 markdown 以後，在本地將 markdown 渲染成 HTML，而後將渲染好的 HTML 上傳到服務端。（markdown 小夥伴們應該都瞭解吧，我就不作過多介紹了）npm

這兩種方案鬆哥都有用，你們見到的 http://www.javaboy.org，是我使用 hexo+icarus 實現的。你們見到的 http://springboot.javaboy.org、http://spring.javaboy.org、http://springmvc.javaboy.org、http://mybatis.javaboy.org、http://maven.javaboy.org 等，則是我使用 Jekyll 來作的，兩種方案各有優缺點，這個鬆哥後面再和你們詳述。json

今天主要和你們聊一聊 http://www.javaboy.org 站點的搭建，也就是我採用了 hexo+icarus 來實現的。瀏覽器

這個博客的全部資金投入就是幾十塊錢買了一個域名，再就沒花錢了。站點託管在 GitHub 上，評論系統也用了 GitHub 來作，若是你能接受 GitHub 提供的默認域名，那你甚至連域名都不用買了，接下來咱們就來看看這個東西怎麼實現。

若是你們玩過鬆哥的微人事(https://github.com/lenve/vhr)或者 V 部落(https://github.com/lenve/VBlog)，那麼對於 hexo 上手可能很是容易，由於這個裏邊也使用了 nodejs，和微人事的前段操做有不少相同的地方。

博客搭建

用 Hexo 搭建，要是有一點點前端 Node 的使用經驗更佳，沒有固然也不要緊，由於與之相關的命令並很少。使用 Hexo 須要提早在電腦上安裝好 Node 和 Git ，安裝成功後，就能夠開始 Hexo 的安裝了。步驟以下：

1. 安裝 Hexo

npm install -g hexo-cli

2. 在本地建立一個博客目錄

hexo init blog

上面這個命令執行完後，會在本地建立一個 blog 目錄，這裏邊就是獨立博客所必須的一些文件，而後進入到這個目錄中，執行 npm install 命令，安裝相關的依賴。

安裝完成後，會生成以下目錄：

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

這裏幾個文件/文件夾，咱們先來關注其中兩個 _config.yml 和 themes 目錄， _config.yml 文件中，咱們能夠作網站的一些基本配置，例如 網站的 title，描述，關鍵字、圖標等，這些配置大都見名知意。以下：

配置完成後，定位到 blog 目錄，執行 hexo s 就能夠在本地啓動項目了，啓動成功後，瀏覽器中輸入 http://localhost:4000 就能夠看到網站了。

說到 hexo s 命令，這裏有幾個經常使用命令須要給你們介紹下，分別是：

這四個算是鬆哥這兩天使用最多的命令，其餘的命令，大夥能夠參考https://hexo.io/zh-cn/docs/commands。

修改主題

通常來講，主題都會本身配置一個，我的感受 Hexo 的生態仍是比較豐富的，有不少可選的主題，Hexo 默認使用的主題是 landscape ，鬆哥最先使用了 hexo-theme-next 主題。博客在本地跑起來以後，接下來就是修改主題，主題修改的第一步就是先選一個本身認爲好看的主題，選好以後，首先將之克隆到 ./themes 目錄下，這個目錄下本來有有一個 landscape 文件夾，裏邊放的默認的樣式，固然開發者也能夠直接將主題文件下載好拷貝進來，可是我仍是建議使用 clone ，使用 clone ，假若有一天這個主題更新了，只須要 pull 一下就能夠獲取到最新樣式了。

以 hexo-theme-next 主題爲例， clone 命令以下：

cd your-hexo-site
git clone https://github.com/iissnan/hexo-theme-next themes/next

克隆成功後，修改 hexo 的 _config.yml 文件，將主題修改成 next，以下：

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

主題建立好以後，接下來就是對主題的配置了，這個比較容易，直接參考官方文檔便可。配置完成後，執行以下命令，便可看到新的主題效果：

hexo clean
hexo g
hexo s

命令含義能夠參考上面的表格，這裏再也不贅述。

這個 next 主題我大概用了兩三個月，如今換成了 icarus，你們在主題配置的時候，只要會配置一個，其餘多個確定也就沒有問題了。

綁定到 GitHub

你們可能已經火燒眉毛想要把博客上傳到 GitHub 了，綁定到 Github 步驟也很簡單，首先以 本身的GitHub ID.github.io 爲名建立一個 public 倉庫，例如個人 ID 爲 lenve，建立的倉庫以下：

建立成功以後，修改 hexo 的 _config.yml 文件，配置 GitHub 地址，以下：

deploy:
  type: git
  repo: git@github.com:lenve/lenve.github.io.git
  branch: master

這裏根據本身的地址來配置便可，配置完成後，執行以下命令：

hexo g
hexo d

執行完成後，就能夠將數據上傳到 GitHub 了（固然這裏須要你們提早配置一下 GitHub 的公鑰，具體能夠參考Git關聯遠程倉庫）。

上傳成功後，訪問 https://lenve.github.io 就能夠看到本身的我的站點了，這是 GitHub 默認給咱們提供的域名。

若是你對 GitHub 提供的域名不滿意，也能夠本身申請一個域名，分分鐘就配置好了。

域名申請

域名申請建議使用國外的域名提供商，不用備案（一個字，快！不用等），鬆哥使用了 godaddy ，主要是由於這個服務商支持支付寶付款，域名申請就比較容易了，無需多說，不過相似的域名提供商其實不少，你們不必定用這個，也能夠本身再看看。

域名和 GitHub 綁定

域名申請成功以後，接下來的配置，也分爲兩部分。

GitHub 配置

首先在博客所在目錄下的 source 目錄中（注意不要放錯位置了），建立一個 CNAME 文件，文件內容就是你的域名，以下：

而後執行 hexo d 命令將這個文件上傳到 GitHub 就能夠了。

在網上看到有人直接在 GitHub 上配置這個，以下圖：

這種方式也能夠，這種方式會自動生成一個 CNAME 文件到當前倉庫中，可是鬆哥在這裏不推薦你們使用這種方式，由於若是你在本地執行了 hexo clean ，而後再去上傳，就會丟失掉 CNAME 文件，而後又得從新配置。關鍵是當你執行了 hexo clean 以後，你可能還發現不了 CNAME 文件已經丟失了。

域名解析配置

域名解析這塊，當時遇到了一些問題，後來鬆哥使用了國內的 DNSPod 去作域名解析了，沒有使用 godaddy 提供的域名解析。使用 DNSPod 首先要作的，就是修改 godaddy 提供的域名解析服務，登陸本身的 godaddy 帳號，找到域名管理，修改域名解析服務爲 DNSPod ，以下：

而後登陸到 DNSPod（沒有帳號註冊一個），而後添加本身的域名解析，以下圖：

添加兩條 A 記錄，指向 GitHub 的 IP 地址，再添加一條 CNAME ，指向你的 GitHub 域名就能夠了。

如此以後，大功告成！

總結

好了，不知道小夥伴們有沒有 GET 到呢？這個不用花不少錢，就是一個域名的費用而已（若是你不想用 GitHub 提供的域名的話），也不須要額外買服務器，hexo 的使用也很簡單，有興趣小夥伴趕快實踐下吧！