天天看點

跟着平台混了四年,現在要單飛了!

實際上搭建一個個人站點并不費什麼事,唯一的資金投入就是域名,一年也就幾十塊錢,其他的套用現成的技術即可,接下來我就來和大夥分享下獨立部落格搭建過程,給小夥伴一個參考。

準備工作

部落格搭建

實際上現在搭建一個個人獨立部落格,可選方案很多,我這裡用了久聞大名的 Hexo 來搭建,用 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 清除緩存和已經生成的靜态檔案

這四個算是松哥這兩天使用最多的指令,其他的指令,大夥可以參考這裡。

修改主題

一般來說,主題都會自己配置一個,個人感覺 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
      

指令含義可以參考上面的表格,這裡不再贅述。

綁定到 GitHub

大家可能已經迫不及待想要把部落格上傳到 GitHub 了,綁定到 Github 步驟也很簡單,首先以 自己的GitHub ID.github.io 為名建立一個 public 倉庫,例如我的 ID 為 lenve,建立的倉庫如下:

跟着平台混了四年,現在要單飛了!

建立成功之後,修改 hexo 的 _config.yml 檔案,配置 GitHub 位址,如下:

deploy:
  type: git
  repo: [email protected]:lenve/lenve.github.io.git
  branch: master
      

這裡根據自己的位址來配置即可,配置完成後,執行如下指令:

hexo g
hexo d
      

執行完成後,就可以将資料上傳到 GitHub 了(當然這裡需要大家提前配置一下 GitHub 的公鑰,具體可以參考Git關聯遠端倉庫)。

上傳成功後,通路 https://lenve.github.io 就可以看到自己的個人站點了。

如果你對 GitHub 提供的域名不滿意,也可以自己申請一個域名,分分鐘就配置好了。

域名申請

域名申請建議使用國外的域名提供商,不用備案(一個字,快!不用等),松哥使用了 godaddy ,主要是因為這個服務商支援支付寶付款,域名申請就比較容易了,無需多說。

域名和 GitHub 綁定

域名申請成功之後,接下來的配置,也分為兩部分。

GitHub 配置

首先在部落格所在目錄下的 source 目錄中,建立一個 CNAME 檔案,檔案内容就是你的域名,如下:

跟着平台混了四年,現在要單飛了!

然後執行 hexo d 指令将這個檔案上傳到 GitHub就可以了。

在網上看到有人直接在 GitHub 上配置這個,如下圖:

跟着平台混了四年,現在要單飛了!

這種方式也可以,這種方式會自動生成一個CNAME檔案到目前倉庫中,但是松哥在這裡不推薦大家使用這種方式,因為如果你在本地執行了 hexo clean ,然後再去上傳,就會丢失掉 CNAME 檔案,然後又得重新配置。

域名解析配置

域名解析這塊,當時遇到了一些問題,因為是在清明節假期,也沒法聯系客服,後來松哥使用了 DNSPod 去做域名解析了,沒有使用 godaddy 提供的域名解析。是以首先要做的,就是修改 godaddy 提供的域名解析服務,登入自己的 godaddy 賬号,找到域名管理,修改域名解析服務為 DNSPod ,如下:

跟着平台混了四年,現在要單飛了!

然後登入到 DNSPod(沒有賬号注冊一個),然後添加自己的域名解析,如下圖:

跟着平台混了四年,現在要單飛了!

添加兩條 A 記錄,指向 GitHub 的 IP 位址,再添加一條 CNAME ,指向你的 GitHub 域名就可以了。

如此之後,大功告成!

跟着平台混了四年,現在要單飛了!

總結