用 GitHub 来部署静态网页 ꒰・◡・๑꒱

简介: http://segmentfault.com/a/1190000002765287在尝试过用 GitHub 部署静态 HTML 网页后,觉得其实挺容易的,这里简单说说如何用 GitHub 来完成部署。

http://segmentfault.com/a/1190000002765287

在尝试过用 GitHub 部署静态 HTML 网页后,觉得其实挺容易的,这里简单说说如何用 GitHub 来完成部署。

1.新建版本库

首先咱们新建了一个版本库作为 demo,然后点击"settings"

http://segmentfault.com/img/bVlLuk

2.Automatic page generator

我们选择 "GitHub Pages" "Automatic page generator"

http://segmentfault.com/img/bVlLvD

3.自由配置信息

http://segmentfault.com/img/bVlLvH

4.Continue to layouts

这里的google分析可以不填,咱们先把页面跑起来,点击"Continue to layouts"

http://segmentfault.com/img/bVlLvI

5.选择模板

这里github给你提供了一些模板,我选了第一个模板,点击"Publish page"

http://segmentfault.com/img/bVlLvL

6.注意分支

发布成功,这里是咱们的"gh-pages分支"

http://segmentfault.com/img/bVlLvM

7.访问页面

点击"settings",访问刚刚发布的静态页面链接

http://segmentfault.com/img/bVlLvQ

8.查看部署结果

http://segmentfault.com/img/bVlLvS

9.自定义你的页面

我们修改它的模板 "index.html"

 

<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title>html5</title><style type="text/css">.theme{

      display: block;

      width: 200px;

      font-size: 30px;

      margin: 100px auto;

    }</style></head><body><div class="theme">

  Hello, world.

</div></body></html>

10.add -> commit -> push

这里要注意一下,我是直接新建的库,然后发布的,所以,没有master分支,只有gh-pages分支github只会将你的gh-pages分支部署上去,不会动你的其他分支的东西。所以,我们要将改动提交到gh-pages分支上,再push

qianjiahaodeMacBook-Pro:HowToDeployHTML qianjiahao$ git branch

* gh-pages

 

qianjiahaodeMacBook-Pro:HowToDeployHTML qianjiahao$ git commit -a -m "first commit"

[gh-pages cc8c864] first commit1 file changed, 23 insertions(+), 65 deletions(-)

 rewrite index.html (98%)

 

qianjiahaodeMacBook-Pro:HowToDeployHTML qianjiahao$ git push origin gh-pages

Counting objects: 3, done.

Delta compression using up to 4 threads.

Compressing objects: 100% (3/3), done.

Writing objects: 100% (3/3), 523 bytes | 0 bytes/s, done.

Total 3 (delta 0), reused 0 (delta 0)

To git@github.com:qianjiahao/HowToDeployHTML.git

   3d6ebe7..cc8c864  gh-pages -> gh-pages

11.确认结果

提交成功,我们看看咱们的网页,熟悉的 `Hello,world`

http://segmentfault.com/img/bVlLwF

12.demo

到此为止,差不多讲完了,这个是demo的地址

13.默认目录

它帮我们生成的目录结构其实不太好,咱们可以自己定义自己的目录结构,之前的一个项目目录结构是这样的

http://segmentfault.com/img/bVlLwT

14.要注意的是:

它会认准你的index.html页面,当做初始界面,我试过将它的index.html放入我的目录结构中,后来我部署发布后,github又自动给我生成了一个index.html页面,这个问题当时没有发现,导致出现了更新无效等奇葩的情况,疑惑了半天。还有params.json会配置github给你生成的模板信息。

15.修改默认目录

如果是将已有的(静态)项目部署上线,建议自己修改目录结构

改改更健康""

16.google analytics

github推荐使用google analytics,在登录之后点击管理跟踪信息,会看到它给你提供的idcode,把code粘贴到你的代码里,就可以了

http://segmentfault.com/img/bVlLyf

17.分析和统计

google analytics会帮你自动的做分析和统计

http://segmentfault.com/img/bVlLyp

~

 

来源: <http://segmentfault.com/a/1190000002765287>

 





目录
相关文章
|
缓存 网络协议 Linux
解决github图片及网页加载不出来
解决github图片及网页加载不出来
991 3
|
搜索推荐 前端开发
使用VitePress创建个人网站并部署到GitHub
该网站使用 VitePress 构建,记录了前端开发相关的笔记和教程,涵盖 Vue2 和 Vue3 等内容。网站支持暗黑模式和 Algolia 搜索服务,提供了详细的导航和侧边栏配置。通过自动化脚本进行部署,托管于 GitHub Pages。
388 2
使用VitePress创建个人网站并部署到GitHub
|
JavaScript 搜索推荐 资源调度
使用VitePress静态网站生成器创建组件库文档网站并部署到GitHub
本文详细介绍了如何使用 Vue3、TypeScript 和 Vite 开发并发布一个名为 Vue Amazing UI 的组件库至 npm。文章首先引导读者安装配置 VitePress,创建文档网站,并编写组件库文档。接着,通过一系列配置实现网站主题定制、全局样式设置以及 Algolia 搜索功能集成。最后,文章提供了自动化脚本,帮助开发者一键打包部署静态网站至 GitHub,并发布组件库到 npm。通过这些步骤,读者可以轻松搭建并维护一个美观且功能齐全的组件库文档网站。
430 2
使用VitePress静态网站生成器创建组件库文档网站并部署到GitHub
|
资源调度 搜索推荐 Shell
使用VitePress静态网站生成器创建组件库文档网站并部署到GitHub
本文介绍了如何使用 Vue3、TypeScript 和 Vite 开发组件库并将其发布到 npm。文章详细描述了安装依赖、配置项目、创建文档网站以及编写组件文档的步骤。通过使用 VitePress,可以轻松搭建组件库的文档站点,并实现 Algolia 搜索功能。此外,还提供了自动化脚本用于部署静态网站至 GitHub 以及发布组件库到 npm。最后,展示了完整的目录结构和网站效果。
808 1
使用VitePress静态网站生成器创建组件库文档网站并部署到GitHub
|
网络协议 开发工具 git
hexo github部署,通过域名访问你的博客
本文介绍了如何使用Hexo命令部署博客到GitHub,并详细说明了如何通过自定义域名访问GitHub上部署的博客。
hexo github部署,通过域名访问你的博客
|
存储 Linux 数据安全/隐私保护
一键部署 200+ 开源Github 2k+ 星星的软件
Websoft9面板是一款基于Web的PaaS/Linux面板,支持在个人服务器上一键部署200多种热门开源应用,适用于个人开发者、中小企业、创业团队、教育机构和技术爱好者。它集成了丰富的开源软件,提供便捷的部署方式、高效的资源利用、良好的可扩展性及低技术门槛,帮助用户快速搭建和管理各类应用。
|
jenkins Java Shell
蓝易云 - Java+Github+Jenkins部署
以上步骤完成后,每当你的Github仓库有新的提交时,Jenkins就会自动构建你的Java项目,并保存构建产物。
271 4
|
Web App开发 缓存 移动开发
四万字符数带你使用 Vitepress 构建博客并部署到 github 平台
四万字符数带你使用 Vitepress 构建博客并部署到 github 平台 最近写了好多篇 Chrome 浏览器插件相关的文章,有十几二十篇,就想着构建个博客,用来放置相应的文章。 正好前段时间看到 VitePress 1.0.0 发布了,而且是用 markdown 写文章,正好写插件文章的时候文章都是 md 格式,所有用下这个然后顺便写一篇使用教程。 Chrome 插件开发博客地址:https://18055975947.github.io/extension/
611 0
|
Linux C++ Docker
【Azure Developer】在Github Action中使用Azure/functions-container-action@v1配置Function App并成功部署Function Image
【Azure Developer】在Github Action中使用Azure/functions-container-action@v1配置Function App并成功部署Function Image
260 0