如何制作一个php网站源码,番禺区网站设计,国际贸易综合服务平台,百度游戏上一篇文章#xff1a; 10分钟学会免费搭建个人博客#xff08;Hugo框架 stack主题#xff09; 前言
首先#xff0c;想要实现这个功能的小伙伴需要完成几个前置条件#xff1a;
有一个GitHub账号安装了git#xff0c;并可以通过git推送commit到GitHub上完成第一篇文章… 上一篇文章 10分钟学会免费搭建个人博客Hugo框架 stack主题 前言
首先想要实现这个功能的小伙伴需要完成几个前置条件
有一个GitHub账号安装了git并可以通过git推送commit到GitHub上完成第一篇文章的博客搭建
创建仓库
在GitHub上创建一个仓库用来存放代码 如果你不是GitHub重度使用者或高手建议你的仓库名称就是你自己的用户名 .github .io。如图所示 这是因为如果使用这个名字的话那么在后续使用GitHub pages生成静态网站的域名就直接是你的仓库名而不需要加其它后缀可能会导致未知的bug 仓库必须公有只有公有仓库才能部署静态页面 修改配置
还记得上一篇文章提到的配置文件中有一个参数是讲url重定向到自己的GitHub仓库的吗现在我们在创建自己的仓库之后可以开始填写修改hugo.yaml的baseurl
baseurl: https://Lyrical-wander.github.io # 这里是我的仓库名称如果你按照上面的步骤走输入https://用户名.github.io 即可上传代码
上传代码前首先查看你的站点目录下有没有public目录 这个public目录是生成的静态网站的代码还记得我们上一个文章中使用的一条命令吗 hugo server -D这条命令会启动hugo程序将源码进行“编译”当然并不是真正意义上的编译生成htmlscss等前端代码这些代码构成静态网站。 如果没有生成public目录那么就使用hugo server -D命令生成一下。
值得注意的是如果你习惯用VScode中的git插件也许会方便很多。但第一次上传代码也需要手敲命令
但幸运的是当你第一次创建仓库仓库中一无所有时会提示你如何上传代码 在站点目录下启用cmd命令逐条输入命令
git init # 初始化git
git add . # 通过git上传当前目录下所有的文件
git commit -m 这是我的博客第一次提交 # 这里是给这一次提交写一个记录说明这个提交是做什么的
git branch -M main # 创建主分支
git remote add origin xxxxxxxxx # 你是什么就填什么不做修改
git push -u origin main如果这里出问题push不到仓库中不是hugo或者stack的问题请检查git与GitHub是否正常运行以下有几个排查的方向
网络问题因为GitHub是全球服务器因此国内访问可能会有些慢有条件的同学开个代理git并没有权限访问GitHub看你是如何配置GitHub的建议采用SSH网上有许多git生成ssh密钥GitHub绑定密钥的教程建议跟着走一遍如果采用HTTPS的话应该是要登陆的具体流程笔者很久没用了也是建议上网搜索网上教程很多
启用pages功能
如果你成功上传代码现在可以打开GitHub上自动生成静态网页的pages功能来帮你生成静态网页等静态网页生成后以后通过访问你的仓库域名即可直接打开你的博客 进入你的仓库在仓库菜单栏中找到Settings功能在侧边菜单栏中找到Pages在分支Branch中选择主分支main保存Save
做完以上操作等待一段时间静态网站部署可能几分钟刷新一下出现⑥处则说明生成成功访问这个域名即可访问你的博客 值得注意的是这里我是购买了自己的域名然后解析到我的仓库所以我的域名是www.lyrical-wander.cn而不是www.lyrical-wander.github.io而如果按照上面的步骤走的话域名应该是www.usename.github.io 至此你的博客已经部署好了可以开始访问你自己的博客啦
小结
还有需要注意的是
每一次写完博客都需要重新使用hugo server -D命令生成新的public目录push上GitHub每次生成新的public都会有大量的文件被改动push起来非常不方便
因此我们要通过GitHub的Action功能来实现自动化部署
自动化部署
创建仓库
同样地按照上面的步骤我们重新创建一个仓库这个仓库不会生成pages且可以设置为私有仓库因此随意命名比如hugo-main
修改代码
创建.gitignore文件
我们添加一个小文件来保持我们代码的干净整洁。
因为每一次hugo server -D都会生成新的public和resources而这个并不是我们编写的代码因此这个可以忽略掉。
在站点目录下增加一个新文件.gitignore
填写以下内容 这个文件顾名思义可以让git忽略掉它里面填写的这些文件这些文件git不会再检查它们的修改也不会让你提交它们。
生成token并创建yaml配置文件
首先我们先生成一个token获取该token以免你以后每次上传代码都需要重新登录一遍
进入Settings 移动到最下方找到Developer settings 然后选择Personal access tokens→Tokens(classic)→Generate new token→Generate new token(classic) 生成token时可以将Expiration选择No expiration即这个token永不过期。
下面Select scopes作用范围选择repo与workflow
后面就生成了token~ 注意这个token只会出现一次之后再也不会出现在你关闭网页前先复制保存 回到你刚刚创建的 第二个仓库 上我们称之为hugo主仓库吧不是username.github.io那个仓库
在仓库中打开Settings→Secrets and Variables→New repository secret 来创建一个存储token的变量 为什么要这么做呢因为token这个东西比较重要如果后续我们直接将它写到文件中如果文件被窃取那么token就会暴露这样你的仓库就不安全了尤其我们的token还选择了不过期。 因此我们将token保存在GitHub中以变量的形式传给我们的文件这样token的密封性就很好了 回到我们的站点目录下创建一个.github目录在.github目录下创建一个workflows目录在该目录下生成一个xxxxx.yaml文件名字随便取 在xxxx.yaml文件下写入以下代码
name: deploy# 代码提交到main分支时触发github action
on:push:branches:- mainjobs:deploy:runs-on: ubuntu-lateststeps:- name: Checkoutuses: actions/checkoutv4with:fetch-depth: 0- name: Setup Hugouses: peaceiris/actions-hugov3with:hugo-version: latestextended: true- name: Build Webrun: hugo -D- name: Deploy Webuses: peaceiris/actions-gh-pagesv4with:PERSONAL_TOKEN: ${{ secrets.你的token变量名 }} # 刚刚在上面创建的变量名EXTERNAL_REPOSITORY: 你的github名/你的仓库名 # 如果按照上面的步骤走则是username/username.github.io第一个仓库名PUBLISH_BRANCH: mainPUBLISH_DIR: ./publiccommit_message: auto deploy上传代码
同样地我们将站点代码再一次上传到这个仓库上git操作一模一样按照上面的上传代码部分来重新操作一遍即可。
git init
git add .
git commit -m first commit
git branch -M main
git remote add origin xxxxxxxxxxx
git push -u origin main至此你就实现了自动部署现在你撰写博文然后直接push到第二个仓库不需要本地生成public就可以啦第二个仓库会做一系列操作并生成静态网站所需的资源和public传到第一个仓库中然后生成静态网站。
