欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

利用GitHub搭建静态网站

程序员文章站 2022-03-07 09:32:49
...

关于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 : 更多配置参数
相关标签: github