個人博客搭建記錄

2017年末,買了個人域名wolfxu.com,于是搭建了自己的個人博客。2018年初,逐步完善了博客的各種配置,從簡書同步了之前的文章過來。

搭建記錄

  1. 購買域名。在阿里云購買個人域名wolfxu.com,很幸運的有.com域名,而且不貴。一開始也糾結選什么后綴好,看了知乎上的一些回答,覺得還是.com好,.com是最自然、最好記的。至于.com原意是表示公司……這個不重要。
  2. 選擇建站方案。不想買服務器,所以用github pages做靜態(tài)博客。從主流的靜態(tài)博客框架里面選擇了hexo,原因是名字看著順眼。而且據說編譯速度比jekyll快。
  3. 在github創(chuàng)建用于存放靜態(tài)博客的倉庫。倉庫名稱必須是"用戶名.github.io",起其他名稱是無效的。創(chuàng)建好對應的倉庫后,就可以通過"用戶名.github.io"這個地址來訪問了。
  4. 綁定自定義域名。通過阿里云的dns解析,給wolfxu.comwww.wolfxu.com添加A記錄到github pages的ip,有兩個:192.30.252.153、192.30.252.154。然后在github的倉庫下創(chuàng)建一個CNAME文件,寫上wolfxu.com。這里寫wolfxu.comwww.wolfxu.com都行;寫wolfxu.com的話,訪問www.wolfxu.com時,會被重定向到wolfxu.com;反過來的話,就重定向到www.wolfxu.com。通過我們的自定義域名訪問時,實際上是訪問github pages的服務器,github pages根據CNAME文件中配置的域名來進行匹配,展示相應倉庫的內容。
  5. 安裝hexo。先安裝Node.js(我直接用homebrew安裝的Node.js),然后安裝hexo。
  6. hexo初始化。hexo init 創(chuàng)建hexo需要的文件,然后npm install安裝依賴的插件。我新建了一個hexo分支,用于存放源文件,把master留著用于發(fā)布。這樣就能直接用hua3505.github.io的倉庫管理源文件,不需要另外建一個倉庫。
  7. 修改配置。修改了url、author等。
  8. 試試本地服務器。需要安裝hexo-server插件,npm install hexo-server —save。這里save要加上,這樣插件信息會被加到package.json中,方便多臺電腦之間同步。在其他電腦上,從github拉取更新后,就可以看到缺少的插件,直接用npm install安裝。hexo server(縮寫hexo s),可以啟動本地的服務,用于預覽博客效果。修改內容后,不需要重啟本地服務,只要刷新一下就可以看到修改的效果。
  9. 生成靜態(tài)博客。hexo generate(縮寫hexo g),所有生成的文件在public目錄下。
  10. 部署。用git來進行部署。配置好部署的方式,倉庫地址,分支等。安裝hexo-deployer-git插件。執(zhí)行hexo deploy部署??梢园焉珊筒渴鸬拿詈喜ⅲ琱exo generate -deploy(縮寫hexo g -d),反過來也行hexo d -g。
  11. 解決hexo部署后,CNAME文件被刪除的問題。hexo部署到master分支下,把原來的文件都刪除了,CNAME被刪,導致無法用自定義域名訪問。解決方案是,把CNAME文件放到source目錄下,這個文件下的一般文件在生成時,會被直接拷貝。具體可以看hexo關于"資源文件夾"的文檔。
  12. 更換主題。一開始試了Aath,不好看。換了Next,簡單大方,好看,而且功能很完善。折騰了一下主題配置。
  13. 從簡書遷移文章過來。有些文章內有鏈接到我的其它文章,改成鏈接到wolfxu.com上的。另外遇到圖片標注沒顯示,生成時報錯等問題,在后面單獨提一下。
  14. 配置文章閱讀數、評論系統(tǒng)、站內搜索、公益404、首頁顯示摘要等。站內搜索用的是Algolia,發(fā)現Next的文檔上寫的hexo配置項中少了apiKey,應該有applicationID、apiKey、indexName三項。

hexo與簡書的markdown的區(qū)別

  1. 圖片標注。對于下面這樣的圖片引用,簡書直接取方括號中的文字作為圖片標注,而在hexo上,需要用后面雙引號里的才行。應該是hexo的做法比較規(guī)范,前面的應該是alt text,后面的才是圖片標注。為了在兩邊顯示效果能保持一致,要寫全,而且兩處文字應該一樣。

    ![Snip設置](http://xxx "Snip設置")
    
  2. hexo似乎更為嚴格。無序列表符號“-”前有空格,生成時直接報錯了

疑難問題殺手锏

如果線上的樣式、動效有問題,而本地測試時是正常的。這種情況很可能是有樣式或者js沒有生成導致的??梢栽囋噃exo clean,然后重新生成、部署,多半能解決。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容