996.icu到955.holiday--使用Github托管静态网站

时间 2019-11-16

标签 996.icu icu 955.holiday holiday 使用 github 托管静态网站栏目 Git 繁體版

原文原文链接

一个静态网站（955.holiday），从域名申请到上线发布的全过程。html

背景

996.ICU 一晚上之间火爆了码农圈。固然也成了咱们的饭桌话题。同事说：“朝九晚五”的公司也不在少数，咱们能够一样作一个相似的网站来让一些正能量的公司获得曝光。前端

因而 955.holiday 就出现了。node

Github（求star）: github.com/955holiday/…react

它是如何一步步上线的呢？下面进入正题：git

域名申请

tips: 你也能够跳过此步，直接使用 github 提供的默认访问地址github

当你有一个好的 idea ，第一时间就要去看一看合适的域名有没有被注册。npm

推荐两个注册域名的网站：浏览器

国内服务商：阿里云bash

优势： 相对便宜、备案方便 缺点： 须要实名认证服务器

国外服务商：GoDaddy

优势： 无须实名认证、支持支付宝 缺点： 价格偏高

若是你有备案的需求，就选择阿里云吧，固然并非全部的域名均可以备案的，哪些域名能够备案请查询：工业和信息化部域名行业管理信息公示

若是没有备案需求，价格相差又不是不少，就选择 GoDaddy 吧。

建立github pages

github pages 能够为咱们每一个 git 仓库提供静态网站的托管功能。

下面让咱们建立一个可访问的静态网站：

新建项目

首先须要为咱们的网站新建一个仓库（New repository）,好比： hello-pages

生成静态网站

而后让咱们在本地生成一个静态网站

mkdir hello-pages && cd hello-pages
复制代码

新建 index.html

<html>
  <head>
    <title>hello pages</title>
  </head>
  <body>
    hello pages
  </body>
</html>
复制代码

在本地构建 git repo 并上传到 github

$ echo "# hello-pages" >> README.md # 增长 readme 文件
$ git init
$ git add .
$ git commit -m "first commit"
$ git remote add origin git@github.com:<your-name>/hello-pages.git # 这里要修改成你本身的仓库地址
$ git push -u origin master
复制代码

访问github，打开 hello-pages 仓库，确保咱们的项目已经推送了上去。

开启 github pages

在 github hello-pages 项目页面点击 Setting，向下找到 GitHub Pages -> Source 选择 master branch

页面刷新，返回 GitHub Pages 显示发布成功。页面能够正常访问了。

你能够在这里查看此阶段源码

绑定域名

至此，咱们的 hello-pages 已经能够正常访问了，只不过访问地址仍是 github 的域名。

下面咱们进一步将域名解析到咱们的网站。

配置DNS

在你购买域名的网站，找到域名的DNS解析配置页面，根据你的需求，选择如下一种配置方式。（各网站解析记录配置方式可能略有不一样，请查看站内帮助）

1. 访问地址为顶级域名

如：example.com

新建 A 记录，将记录指向下面四个ip

185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153
复制代码

详细信息，请参考：Setting up an apex domain

2. 访问地址为二级域名

如：www.example.com blog.example.com

新建 CNAME 记录，将记录指向 <your-github-name>.github.io

详细信息，请参考：Setting up a custom subdomain

3. 访问地址为顶级域名和www二级域名

如 example.com 和 www.example.com 能够同时访问，可是这里的二级域名只能是 www.example.com

这种方式须要同时配置上面的 1 和 2

详细信息，请参考：Setting up an apex domain and www subdomain

增长CNAME文件

在git仓库中新增 CNAME 文件，内容为自定义域名的访问地址。

请注意，该文件只能包含惟一一个地址。

若是的 DNS 配置为顶级域名和 www 二级域名能够同时访问，CNAME 中只须要填写 顶级域名便可。

将修改 push 到 github

查看效果

访问你配置的地址，页面应该已经能够打开了。

DNS解析是有延迟的，若是没法打开，可能须要稍等片刻。

若是长时间依旧没法打开，就须要排查一下是否是哪一步除了问题。

HTTPS

GitHub Pages 同时支持 http 和 https 协议，可是并不会自动跳转。

咱们能够经过配置，强制跳转到 https 站点。

在 github hello-pages 项目页面点击 Setting，向下找到 GitHub Pages 勾选 Enforce HTTPS

至此，你已经能够经过修改 HTML, 增长 CSS 来美化你的网站了。

你能够在这里查看此阶段源码

自动构建并发布

现现在，大多数的前端项目都是基于框架（好比 React 、 VUE）构建的。

对于这些项目，咱们须要经过 build 才能产生浏览器能够解析的 HTML 、 CSS 、 JS.

若是每次项目变更，咱们都须要修改源码，而后 build，而后再将 build 结果推送到 github-pages 项目。其实仍是很繁琐的。

咱们能不能减小这些无畏的工做量呢？

答案是有的

使用gh-pages分支

GitHub Pages 容许将静态文件放在三个地方：

master 分支
master 分支的 docs 目录下
gh-pages 分支

咱们能够将项目源码放在 master 分支下，将 build 结果放在 gh-pages 分支, 每次build完成后，更新 gh-pages 分支。

若是上述操做依旧经过手动执行的话，其实并不会减小什么工做量。

咱们须要借助持续集成服务（Continuous Integration，简称 CI）来实现进一步的自动化。

使用 Travis CI 自动部署

Travis CI 提供的是持续集成服务（Continuous Integration，简称 CI）。它绑定 Github 上面的项目，只要有新的代码，就会自动抓取。而后，提供一个运行环境，执行测试，完成构建，还能部署到服务器。
复制代码

了解Travis CI能够参考官方文档，也能够阅读阮一峰的持续集成服务 Travis CI 教程。

每当咱们 push 代码到 github 时，能够借助 Travis CI 自动 build 并将 build 结果更新到 gh-pages 分支。恰好 Travis CI 也提供了这样的功能。详见：GitHub Pages Deployment

接下来咱们就开始操做了

建立 GitHub access_token

点击右上角本身的头像 -> Settings -> Developer settings -> Personal access tokens -> Generage new token

填写 Token description

勾选 repo 确认建立

access_token 建立成功，临时保存一下，后面会用到。

设置 Travis CI

使用 Github 帐号登陆 Travis CI
点击 +
点击 Sync account
打开 hello-pages 项目仓库的开关。
点击 Setting
关闭 Build pushed pull requests
Environment Variables 下面新增一项 name为 GIT_REPO Value为刚刚申请的 access_token

修改项目

咱们继续在以前的 hello-pages 项目上继续修改，这里以 React 项目为例

$ npm i create-react-app -g

# create-react-app 建立项目前，须要删除以前的文件
$ rm -rf index.html CNAME

$ create-react-app .
复制代码

在 public 下面新建和以前同样的 CNAME 文件。目的是为了最终 build 目录包含 CNAME 文件。

新建 travis.yml

language: node_js
node_js:
 - "10"
install: yarn

script: npm run build

deploy:
 provider: pages
 local_dir: ./build
 skip_cleanup: true
 github_token: $REPO_TOKEN
 keep_history: true
 on:
 branch: master
复制代码

更改完成后，commit，而后推送到 github 。

稍等片刻，就能够在 Travis CI 看到项目已经开始构建了。构建成功后 gh-pages 分支就已经自动推送到 github 了。

回到 github hello-pages 项目页面点击 Setting，向下找到 GitHub Pages -> Source 选择 gh-pages branch。

切换成功后就能够正常访问了。

最终代码

SEO

Github pages 虽好，但一直有一个头疼的问题，就是网站没法被百度收录。听说是由于 Github 屏蔽了百度爬虫。

有搜索需求的能够考虑使用 coding.net。功能基本上和 github 是一致的，这里就不作深刻介绍了。

原文连接：blog.sjfkai.com/

欢迎关注公众号 “大前端开发者”。给你带来更多的前端技术与资讯