使用 github pages, 快速部署你的静态网页

时间  2019-11-29
标签 使用 github pages 快速 部署 静态 网页 栏目 Git 繁體版
原文   原文链接

使用 github pages, 快速部署你的静态网页

Github Pages 官网javascript

Github Pages: Websites for you and your projects. Hosted directly from your GitHub repository. Just edit, push, and your changes are live.css

前言

在平常工做中, 咱们常常会遇到要作 demo 展现的状况. 作 demo 展现不一样于作项目开发, 咱们须要的是快速轻便的开发和部署, 而不是完备的一整套开发流程.html

下图确定不是咱们作一个 demo 想要的流程.前端

deploy_by_you_own

尤为对于数据可视化工做, 能快速的建立一个 demo 来验证本身的想法, 而且方便的和同伴分享本身做品是很是重要的. 在这里给你们介绍一种笔者常常用来作 demo 的方法: Github Pages.vue

选择 github pages 的理由

  1. 使用零成本: github pages 集成在 github 中, 直接和代码管理绑定在一块儿, 随着代码更新自动从新部署, 使用很是方便.
  2. 免费: 免费提供 username.github.io 的域名, 免费的静态网站服务器.
  3. 无数量限制: github pages 没有使用的数量限制, 每个 github repository 均可以部署为一个静态网站.

使用方法

一. 部署静态网页

首先咱们介绍一下部署最基础的静态网页, 最终的效果是展现出一个 Hello, github pages :) 页面.java

demo 地址: github repositorywebpack

github page 地址: ssthouse.github.io/github-page…git

1.1 建立一个 github 项目

前往 github 官网, 点击 New repository 建立新项目. 填入项目基本信息, 点击 Create Repository 确认.github

create_repository

确认完成后会看到以下页面:web

after_create_repository

1.2 为 repository 开启 github page 选项

如图, 咱们选中 Setting tab

repository_setting_page

往下滚动, 找到 Github Pages 选项, 将 Source 改成 master branch, 最后点击 Save 按钮

github_page_finish_setting

最后咱们会获得一个连接, 经过这个连接, 待会咱们就能经过这个连接访问到该项目的 github pages 页面.

1.3 代码 clone 到本地, 并建立几个基本文件

create_sample_files

1.4 添加基础代码

注意这里 html 由于和 css 以及 js 放在同一目录, 因此咱们用相对路径来引用.

代码逻辑很简单, 就是在页面加载好后在页面中添加 Hello, github pages :) 这段文字.

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Github Page demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="index.js"></script>
</head>
<body>
    <div id="main-content">

    </div>
</body>
</html>
复制代码

index.js

window.onload = function() {
  document.getElementById('main-content').innerHTML = 'Hello, github pages :)'
}
复制代码

main.css

#main-content {
  font-size: 36px;
  font-weight: bold;
  padding: 16px;
}
复制代码

1.5 将代码更新到 github 仓库

cd github-pages-demo
    git add .
    git commit -m "Add simple code"
    git push
复制代码

1.6 看看效果

如今咱们访问以前开启 github pages 选项时得到的 url, 就能够看到效果了

注: 代码 push 上去后, 可能要过几分钟才会部署好生效

效果如图 :arrow_down:

simplest demo

二. 使用前端框架时, 如何使用 github pages

现在咱们建立一个前端项目的时候, 已经不多手动建立 index.html, main.js , main.css 这文件了, 一般咱们都会选择一个前端框架, 并使用相应的 command line tool 来初始化项目.

这里笔者用 Vue 的 webpack 项目 作介绍, rect 和 angular 进行相似的配置便可.

建立项目

首先咱们用 vue-cli 建立一个 webpack 管理的 vue 项目 (点我安装 vue-cli),

vue init webpack github-page-vue-demo
复制代码

而后咱们进入项目, 看看目录结构:

simplest demo

能够看到 config 目录中有三个文件:

config                     //  配置目录
├── dev.env.js             // 用于development模式的环境变量
├── index.js               // 用于配置 `dev` 模式和 `prod` 模式的 webpack config 文件
└── prod.env.js            // 用于product模式的环境变量
复制代码

这里咱们须要配置的就是 index.js 文件, 先看看该文件内容 (这里将不相关的代码用...略过), 其中咱们须要关注的是 module.exports 的 build 属性, 咱们将在这里配置 webpack build 时生成文件的路径

module.exports = {
  dev: {
      ...
  },

  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    ...
  }
}
复制代码

能够看到图中主要配置了 index 文件和 assets 文件的路径. 默认执行 yarn run build 后 webpack 会将项目打包到项目根目录的 ./dist 文件夹, 如图:

default build result

修改编译配置

可是 github pages 默认只能识别项目根目录的 index 文件, 若是咱们想要让 github pages 识别到咱们 build 出来的文件应该怎么办呢?

你可能会想到直接将 dist 文件夹中 build 生成的文件直接复制到项目的根目录, 这确实是个办法. 可是这样的话, 咱们每次 build 完, 都须要手动复制一边文件, 这无疑增长了不少重复性的工做.

咱们能够经过修改默认的配置来达到项目 build 的文件直接生成到项目根目录的目的, 像这样:

module.exports = {
  dev: {
      ...
  },

  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../index.html'),  //以前是 '../dist/index.html'

    // Paths
    assetsRoot: path.resolve(__dirname, '../'),  // 以前是 '../dist'
    assetsSubDirectory: 'static',
    assetsPublicPath: './',    // 以前是 '/'
    ...
  }
}
复制代码

所作的改动就是去掉了默认的 dist 目录, 而且将 assets 的引用路径从 绝对路径 改成了 相对路径.

去掉 dist 目录是为了将 build 的 target 路径改成项目根目录. 改成相对路径是由于在部署到 github pages 的时候, 咱们的域名是 https://username.github.io/repositoryName, 也就是说咱们的项目是部署在子域名上的, 若是用绝对路径会致使 assets 文件 404.

这样修改完后咱们又发现一个问题: 在这样的配置下, build 结束生成的 index.html 文件会覆盖原有的 template index.html 文件, 而且根目录多了一个 static 文件夹, 很容易让人对这个文件夹的做用产生疑惑. 有没有更好的解决办法呢 ?

让咱们回到 github page 的 setting 页面:

default build result

能够看到这里有一个选项是 master branch /docs folder . 当前状态是不可选的, 缘由是咱们的项目代码里面没有 /docs 目录.

这个选项的意思是 github page 能够识别咱们项目中的 docs 文件夹, 并在这个文件夹中寻找 index 文件进行部署. 选中这个选项后, 咱们只须要将以前 webpack 默认的 dist 文件夹改成 docs 文件夹便可, 修改后配置以下:

module.exports = {
  dev: {
      ...
  },

  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../docs/index.html'),  //以前是'../dist/index.html'

    // Paths
    assetsRoot: path.resolve(__dirname, '../docs'),  // 以前是 '../dist'
    assetsSubDirectory: 'static',
    assetsPublicPath: './',    // 以前是 '/'
    ...
  }
}
复制代码

完成以上的修改后, 咱们再次运行 yarn run build, 你会发现根目录下多了一个 docs 文件夹, 里面承载了 index 文件和 static 文件夹. 咱们讲 docs 目录以及其下的文件所有加入 git 版本管理, 并 push 到 github.

再次来到 该项目的 github page setting 页面, 这时 master branch /docs folder 就变成可选中的了. 咱们选中这个选项, 并保存设置.

过两分钟左右, 咱们再次访问咱们项目的 github page url, 就会发现项目已经部署成功了 :tada:

自定义 template

在上一步中, 咱们本身配置了一个 基于 Vue + Webpack 的项目配置. 但若是每次咱们想建立一个 demo, 咱们都要修改一遍配置的话, 仍是很花费时间. 特别是忘记了配置步骤的话, 还得再查找以前的配置方法.

一个比较好的解决方案是建立一个基础的 template repository, 在下次须要建立一个 demo 项目的时候, 直接 fork 过来, 基于这个项目着手开发便可.

好比我常用的技术栈是: Vue + D3.js + Webpack, 我就给本身建立了一个这样的 template, 并作好 github page 的配置. 下次要作数据可视化 demo 的时候, 直接 fork 这个 repository 进行开发, 节省了许多项目配置的时间, 若是有和我相似技术栈的小伙伴, 不妨一试:

Vue + D3.js + Webpack (github page ready) github 地址

三. 只能够是静态网站吗?

github page 能够很是方便的部署静态网页. 可是由于没有数据库, 没法存储数据, 也就没办法实现较为复杂的业务逻辑. 可是 github page 真的就只能作作简单的纯静态网站了吗?

其实, 现在先后端分离, 只要有后端 api, 前端彻底能够单独开发和部署.

若是咱们的网站已有现成的后端 api, 使用 github page, 再加上 javascript 调用后端 api, 彻底能够实现全部的业务逻辑.

若是没有现有后端 api, 可是想要实现简单的后端逻辑的话, 这里推荐一个笔者经常使用的小 tip:

使用 leancloud 做为对象存储的后端数据库 前端调用 leancloud api 实现全部的业务逻辑

若是感兴趣不妨看看个人这个项目: github visualization

这个项目就是部署在 github pages 上, 并使用 leancloud api 实现的 用户访问信息记录 的功能. 具体的 leancloud 使用细节, 请参见 leancloud 文档

最后

github pages 能够说是为我节省了许多的时间, 为我开发 demo 展现提供了很是多的便利. 推荐没有使用过的小伙伴试试, 相信也会给大家带来不少便利.

若是以为这篇文章不错的话, 不妨关注一下 : )

github 主页

知乎专栏

掘金

欢迎关注个人公众号：

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程