實際上搭建一個個人站點并不費什麼事,唯一的資金投入就是域名,一年也就幾十塊錢,其他的套用現成的技術即可,接下來我就來和大夥分享下獨立部落格搭建過程,給小夥伴一個參考。
準備工作
部落格搭建
實際上現在搭建一個個人獨立部落格,可選方案很多,我這裡用了久聞大名的 Hexo 來搭建,用 Hexo 搭建,要是有一點點前端 Node 的使用經驗更佳,沒有當然也沒關系,因為與之相關的指令并不多。使用 Hexo 需要提前在電腦上安裝好 Node 和 Git ,安裝成功後,就可以開始 Hexo 的安裝了。步驟如下:
- 安裝 Hexo
npm install -g hexo-cli
- 在本地建立一個部落格目錄
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 域名就可以了。
如此之後,大功告成!
總結