Hexo+GitHub+阿里域名搭建自己部落格

豌豆射手_BiuBiu發表於2018-08-16
HexoGithub阿里

效果

手機端效果二

  • 最近抽空終於搭建完成，網上的資料很多，這篇文章只記錄下遇到的問題，如果你想搭建一個部落格！可能對你有些幫助。

Hexo+GitHub

域名

  • 域名我是在阿里雲上買的 阿里雲
  • 輸入你想要買的域名地址，如圖所示!選擇一個您覺得合適的域名，加入到清單，然後購買就可以了
    域名
  • 這個是阿里雲的代金券！阿里雲代金券
  • 購買成功了，進入域名控制檯
    控制檯
  • 點選解析設定，然後新增記錄，就會出現下面的視窗
    設定
  • 設定值，結果如下
    設定結果
    • 這個記錄值是什麼？如圖所示，其實就是 ：https://shimingli.github.io/ 的ip值，當然你需要設定成你的
      image.png
  • 設定完成了，還有關鍵的一步，就是實名認證，認證通過了，域名才可以使用。

GitHub Pages的設定

  • 進入到 name.github.io的工程目錄下，然後進入到Settings,最後定位到Github Pages的選項,輸入你自己購買的域名，我這域名 7塊一年，物超所值！
    settings

主題選擇

git clone https://github.com/MOxFIVE/hexo-theme-yelee.git themes/yelee
複製程式碼

  • 使用的步驟建議參考 官方的文件，非常的詳細 Yelee 主題使用說明 [簡中] 

    目錄結構

    • public:pull到Github
    • themes：部落格的主題`
    • soure：就是文章存放的地方

  • 然後把clone的yelee放到themes目錄下

image.png

  • 在部落格的根目錄下設定theme: Yelee
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: Yelee
複製程式碼

設定

Hexo 幾個常用的命令

hexo generate (hexo g) 生成靜態檔案，會在當前目錄下生成一個新的叫做public的資料夾
hexo server (hexo s) 啟動本地web服務，用於部落格的預覽
hexo deploy (hexo d) 部署部落格到遠端伺服器
hexo new "postName" #新建文章
hexo new page "pageName" #新建頁面
複製程式碼
  • 簡寫：
$ hexo n == hexo new
$ hexo g == hexo generate
$ hexo s == hexo server
$ hexo d == hexo deploy
複製程式碼
  • 如果一切配置ok的話，開啟http://localhost:4000/ 就可以看到剛才搭建的本地部落格了，Hexo會預設生成一個Hello World的博文。

遇到的問題

  • Hexo中的Yelee主題，首頁不顯示文章,需要把themes中的檔案_config.yml的search中的on: true的註釋去掉，同時必須註釋掉onload，同時需要去安裝外掛!,然後就可以檢索了。
# Local Site Search | 本地站內搜尋
## Insatall below plugin to take effect | 使用搜尋需先安裝對應外掛
## https://github.com/PaicHyperionDev/hexo-generator-search
search: 
  on: true
  #onload: false     （Hexo中的Yelee主題，首頁不顯示文章）
  ## true: get search.xml file when the page has loaded
  ## false: get the file when search box gets focus
複製程式碼
  • 文章的多tags,需要用[]，其中用逗號分隔
---
title: Go語言實現的WebSocket
date: 2018-07-15 16:02:08
tags: [Go,WebSocket]
---
複製程式碼
  • md，檔案對空格敏感，如圖所示，
    image.png
    • 通過命令hexo g命令的時候，會報如下的錯誤
      error
  • 關於文章的摘要，需要使用到 <!—- more --> ,具體使用的方式如下
---
title: Go語言實現的WebSocket
date: 2018-07-15 16:02:08
tags: [Go,WebSocket]
---
* 最終的效果如下
![Web端上傳的資訊](https://upload-images.jianshu.io/upload_images/5363507-1df3bbfdd7b78fff.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
![Web端得到的列印的資訊](https://upload-images.jianshu.io/upload_images/5363507-394f230f0c32cdab.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
<!--  more  -->
![服務端的程式碼的實現](https://upload-images.jianshu.io/upload_images/5363507-1c4e57241edf86c4.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
複製程式碼

相關文章