结合mwebpro和GitHub pages的网站发布流程

2022/05/19 posted in  工具使用

在实际中有这样的几个需求,能基于一个域名快速的搭建属于自己的网站,有自己的博客。
最近正好在研究,如何搭建属于自己的一个博客系统,用经济快捷的方式搭建一个属于自己的博客。

网站准备

在搭建之前,是需要有几个东西提前准备的。

  1. 域名,提前购买好一个域名,大概的价格也就在10元年就能搞定,可分为国内和国外的域名。国内一般需要进行备案,整体所需时间大概在1个月左右。
  2. GitHub账号,可以百度GitHub,注册一个账号备用。
  3. 静态站点生成器,比如hugo, hexo,Jekyll等,通过这个生成的内容,上传到GitHub中,进行访问。本次选用Mac版本的mweb pro,这是一个可以写md文件和发布功能的软件。

GitHub仓库设置

  1. GitHub主要作用,一是作为一个网站资源页面的存储仓库,二是利GitHub自带的GitHub pages发布自己的网站。

  2. 新建仓库,设置为public类型,仓库名字一定是 XXX.github.io,xxx是你自己定义的名字,可以随便命名。

  3. 仓库建好后,点击settings,找到 pages , 对网站进行设置。source中选择资源来自于网页代码的分支,branch选择对应的分支,文件夹选择默认就好,custom domain中填写上自己的网站域名,dns解析通过后,会显示绿色的DNS check successful

  4. 在设置好后,上传代码会自动进行部署,将代码部署到自己的网站上。

域名设置

在购买域名后,还需要有几个设置,才能保证能正常访问到网页。

  1. GitHub设置dns解析。打开域名购买商或者代理商的网站,把GitHub的几个地址解析添加上去。
185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153
  1. 设置指向GitHub页面的dns代理。添加解析记录,类型选择cname,名称选择www ,内容就是自己在GitHub设置的仓库名字。

  2. 验证是否有绑定成功,使用命令 dig 自己域名,可以看到解析后的域名地址。

mweb pro的设置

前面的几部分设置好了,剩下的就是网页页面的编写,可以按照以下的步骤进行设置。

  1. 在第一步中添加一个静态网站分类,然后进行设置。
  2. 填写好名称,选择想要的模版,有好几个模版选择,可以一一尝试找到自己的风格。
  3. 网站名称,填写属于自己的博客名字。
  4. 网站地址就是自己的网址。
  5. 设置好后,选择清理并重新生成网站,就能得到新的网站页面
  6. 选择上传GitHub后,等代GitHub的自动化部署完成,就能直接访问了。

在构建的过程中,会遇到各种错误,可以根据这些错误去搜索解决办法解决,当真的网站搭建成功后,整个人都是快乐的。