在搭建好本地环境后,本章节将调试和上线一个简单的网页,以供在网上能够看到自己的网站。
为了方便查看网页,可以安装一个文件查看器 notepad++
,相比于 UltraEdit
作者更喜欢 notepad++
的免费和右键查看功能,下载地址为https://notepad-plus-plus.org/repository/6.x/6.8.3/npp.6.8.3.Installer.exe,直接双击安装即可。安装完成后在右键菜单能看得到这么一个图标:
在仓库的本地路径下,也就是包含 README.md
这个文件的路径下,新建一个文件名为: index.html
的文件:
因为 github pages
只是支持 UTF-8
的格式编码,所以以后建立的文件都要用这个格式编码。右键用 notepad++
打开,选择 格式 -> 以UTF-8无BOM格式编码
:
复制如下网页信息进去:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TTybTest</title>
</head>
<body>
我的个人博客
</body>
</html>
保存后再将本地仓库和 github
远程仓库同步,即把本地仓库上传到远程仓库,在 Git Bash Here
中输入如下命令:
git add --all
git commit -m "my blog"
git push
最后输入账号密码即可:
最后最激动人心的时刻来了,在浏览器中打开自己的网站,网站域名的结构为 你的用户名
+ .github.io
,作者的网站为 TTybTest.github.io,最后打开的效果如下:
从此属于自己的个人网站上线了,撒花!
如果要调试网页,不可能每次都更改后上传才去查看更改后的效果,这样对于调试王爷来说是非常缓慢的,所以这里介绍在本地调试网页。
在当前仓库目录按住 Shift
+ 右键
,可以在当前目录调出 cmd
命令,选择 在此处打开命令窗口
:
在命令窗口输入:
jekyll server
可以打开本地调试模式:
出现上述界面就可以在浏览器里面输入 http://127.0.0.1:4000 看到本地的网页:
现在来更改网页信息,打开 index.html
,将 我的个人博客
用 html
的 h1
元素包裹起来,更改保存后后的 index.html
为:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TTybTest</title>
</head>
<body>
<h1>我的个人博客</h1>
</body>
</html>
等待命令行更新完毕,显示 ...done in *** seconds.
,即在 **
秒完成更新:
然后就刷新 http://127.0.0.1:4000 网页,可以看到更改后的网页:
可以看到 我的个人博客
字体更大更粗了!完成调试后,在命令行输入 Ctrl
+ C
中断本地调试,“终止批处理操作吗(Y/N)?” 为 y
,或者关闭命令指示行,即可关闭本地调试。接着就准备把网页上传上去,但是突然发现本地多了一个 _site
文件夹,这个是本地调试的临时文件夹,这是不需要上传到仓库的,所以这里可以把它删除,或者需要加一个配置文件,即在上传到远程仓库的时候忽略掉这个文件夹。
配置文件为名 .gitignore
,仓库的本地路径下打开 Git Bash Here
,输入 touch .gitignore
,即在本地新建一个 .gitignore
文件:
用 notepad++
打开 .gitignore
文件,在里面输入:
_site/
最后上传:
git add --all
git commit -m "update"
git push
即可看到远程仓库里面是没有上传 _site
这个文件夹上去的:
而且打开网站发现页面已经更新了:
终于搞定自己的网站和知道怎么在本地调试自己的网站了!下一章节将介绍如何丰富自己的博客。
本章节的课程文件可以在如下地址下载: