1. 程式人生 > >利用GitHub搭建靜態網站

利用GitHub搭建靜態網站

關於GitHub Page

  • github 官方提供了github page功能用於生成專案的預覽效果,利用這一點,可以來搭建相對簡單的個人部落格網站,或者僅用於瀏覽的靜態網站。
  • 使用github page搭建網站可用的兩種選擇:Hexojekyll,二者都可用來生成將markdown文件生成靜態網頁,簡直是部落格生成神器。

靜態網站框架:hexojekyll

  • hexo

hexo依賴於Node.js和Git,這對從事前端工作的開發者來說,上手特別容易,官方安裝及使用教程也很詳盡。官方文件

  • jekyll

jekyll是基於Ruby的,因此在安裝jekyll之前還需要先安裝Ruby,

官方安裝使用文件,當然,也有很多部落格教程,百度即有。 jekyll是github官方推薦的網站框架。

  • 兩者區別:

我用的windows,jekyll的安裝相對麻煩,針對不同平臺的環境要求不太一樣,而hexo只需要安裝node和git就可以了。 在編譯效果上,jekyll 只需要直接上傳原博文到 github, 就能直接生成部落格,也可以用線上編輯器處理,而hexo 是先本地生成 html 再上傳。

用hexo搭建簡單部落格站

1. 安裝

Hexo依賴於Node.js,Git,所以在安裝Hexo之前,需要先安裝Node及Git

# 安裝hexo
npm install -g hexo-cli

2. 初始化網站目錄

hexo init <folder>
cd <folder>
npm install
  • 目錄生成後結果:
.
├── _config.yml  		// 網站的 配置 資訊,您可以在此配置大部分的引數。
├── package.json			// 應用程式的資訊。EJS, Stylus 和 Markdown renderer 已預設安裝,可自由移除。
├── scaffolds			// 模版 資料夾。
├── source			// 資原始檔夾是存放使用者資源的地方。
|   ├── _drafts
|   └── _posts
└── themes   // 主題 資料夾。Hexo 會根據主題來生成靜態頁面。
  • scaffolds: Hexo的模板是指在新建的markdown檔案中預設填充的內容。例如,如果您修改scaffold/post.md中的Front-matter內容,那麼每次新建一篇文章時都會包含這個修改。
  • _config.yml : 更多配置引數