不用花一分線,松哥手把手教你上線個人博客


上一篇:聽說你的 IDEA 昨天掉鏈子了?松哥給你准備了大招
有不少小伙伴私信松哥,打聽松哥的博客是怎么做的,其實這個我之前和大家聊過,今天就再來說一說。

我記得是 2015 年 4 月 15 在CSDN上發表了我的第一篇博客,是一個學習筆記,從那之后開啟了我博客寫作之路,到今天為止 4 年多了。

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

今年搞了一個自己的獨立博客 http://www.javaboy.org ,從四月份到現在,博客 PV 和 UV 都以肉眼可見的速度增長,我也是蠻開心的。因為大家個人獨立博客最怕的就是流量,這也是我把這個事情拖了 4 年才做的原因之一,但是真正動手做之后,我發現搭建個人獨立博客比想象的要容易很多,至於流量,只要內容 OK,流量也都不是事。

今天我就來和大家聊一聊如何搭建一個個人博客。

技術選型

目前靜態博客站點非常流行,所以我其實不太建議大家再去搞動態博客系統,那樣要操心的事情太多了。使用搭建靜態博客,可以讓我們把大部分精力集中在博客寫作上,而不是無休止的耗費在博客搭建上(很多小伙伴搭建博客的時候興致勃勃,搭建完成后就意興闌珊,然后就沒有然后了,空留一個博客網站擺在那里)。

靜態博客選型,松哥目前接觸到的主要是兩種方案:

  1. GitHub 上 結合 Jekyll 搭建的博客,Jekyll 是一個簡單的博客形態的靜態站點生產機器。它有一個模版目錄,其中包含原始文本格式的文檔,通過一個轉換器(如 Markdown)和我們的 Liquid 渲染器轉化成一個完整的可發布的靜態網站,你可以發布在任何你喜愛的服務器上。Jekyll 也可以運行在 GitHub Page 上,也就是說,你可以使用 GitHub 的服務來搭建你的項目頁面、博客或者網站,而且是完全免費的。
  2. 本地渲染好 HTML 后,上傳到服務端,代表作品就是 hexo。

簡單說,第一種方式,就是我們在本地寫好 markdown 之后,直接上傳到服務端,服務端會自動渲染成 HTML,然后展示給用戶,第二種方案則是我們在本地寫好 markdown 之后,在本地將 markdown 渲染成 HTML,然后將渲染好的 HTML 上傳到服務端。(markdown 小伙伴們應該都了解吧,我就不做過多介紹了)

這兩種方案松哥都有用,大家見到的 http://www.javaboy.org,是我使用 hexo+icarus 實現的。大家見到的 http://springboot.javaboy.orghttp://spring.javaboy.orghttp://springmvc.javaboy.orghttp://mybatis.javaboy.orghttp://maven.javaboy.org 等,則是我使用 Jekyll 來做的,兩種方案各有優缺點,這個松哥后面再和大家詳述。

今天主要和大家聊一聊 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
  1. 在本地創建一個博客目錄
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 命令,這里有幾個常用命令需要給大家介紹下,分別是:

命令 簡寫 中文含義
hexo server hexo s 本地啟動
hexo generate hexo g 生成靜態文件
hexo deploy hexo d 部署網站
hexo clean 清除緩存和已經生成的靜態文件

這四個算是松哥這兩天使用最多的命令,其他的命令,大伙可以參考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 的使用也很簡單,有興趣小伙伴趕快實踐下吧!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM